Helpers
Helpers include little helping CSS classes that aren't bundled with Front Street's core functionality but also aren't considered blocks.
So when using the default distributed build of frontstreet.css, these helpers will be included. But if you're using the frontstreet-core.css build, these helpers will not be included.
Background Color
For basic mix of layering elements with light and dark backgrounds, you can add the classes bg-light and bg-dark.
.bg-light.bg-dark
Text Color
When nesting different sections within each other that contain content and various color backgrounds, it can get tricky when attempting to style the color properly for various content. So we provide the classes text-light and text-dark to help with this.
Light Text
This is a <div> with class text-light added, to accomodate its dark background color.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
John Smith
Dark Text
And this is a nested <div> within, with the class text-dark added, in an attempt to override its parent styling and to accomodate its light background color.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
John Smith
Borders
Use the following classes to add a border to an element.
.border-xs1px.border-sm2px.border-md5px.border-lg10px.border-xl15px
These can be combined with classes from the branding colors or the color library.
.asphalt.border-xs1px.crimson.border-sm2px.royal.border-md5px.jungle.border-lg10px.orange.border-xl15px
And similarly, these can be combined with the contextual color classes, too.
.info.border-xs1px.success.border-sm2px.warning.border-md5px.danger.border-lg10px