Base Front End Boilerplate
The goal of this project is to ease the development process of front end systems for SHOFLO. A global stylesheet is compiled from source files in the project that sets the style for all SHOFLO sites. It is serverd from assets.shoflo.tv as to cache well. The build script in this project will compile the less and push the compiled file to S3.
The CSS File is available at
All HTML headings, h1 through h6 are available.
Tables present data for various pieces of informaton.
While not actual HTML table elements,
the tables are made up of div elements.
Colmns are created by using span elements inside
.sfHeader and .sfRow elements.
To use hover states on rows, use the .hover
class on the .sfBody element.
To define column widths, the following classes are available and self-describe the widths the represent:
.ten
.fifteen
.twenty
.twentyFive
.thirty
.thirtyFive
.fourty
.fourtyFive
.fifty
.fiftyFive
.sixty
.sixtyFive Tabs align a list of li elements in a fashionable order.
Tabs are li elements wrapped in a elements.
To use tabs, add the .sfTabs class to the parent ul element.
The following widths are available to size the widths of the tabs
.two
.three
.four
.five
.six
.seven
.eight
.nine
.ten Forms in SHOFLO are styled by using the .sfForm class on the form
itself.
To get label elements to display block, use the .sfLabel
class on a parent div.
To use columns, add the .sfFomCol class to a parent div.