Typography
Typography in SageFrame is meant to make your life easier by providing clean, attractive, simple default styles for all of the most basic typographical elements.
h1. SageFrame heading Secondary text
h2. SageFrame heading Secondary text
h3. SageFrame heading Secondary text
h4. SageFrame heading Secondary text
h5. SageFrame heading Secondary text
h6. SageFrame heading Secondary text
Buttons are convenient tools when you need more traditional actions. To that end, SageFrame has many easy to use button styles that you can customize or override to fit your needs.
Button Groups
Button groups are containers for related action items. They're great when you need to display a group of actions in a bar. These build off the button styles and work perfectly with the grid
Navigation
Default Nav
Just put sf-menu class to any ul, you are all set.
Pagination
Pagination is a type of navigation that lets users tap through a series of related pages. Moving between pages has become less common with the advent of longer pages and AJAX loading, but if you need pagination, SageFrame has you covered.
Tables
Okay, they're not the sexiest things ever, but tables get the job done (for tabular data, of course).
Basic Table
You can create a basic table in sageframe with minimal markup. You don't need to add any classes
|
# |
Table heading |
Table heading |
Table heading |
|
1 |
Table cell |
Table cell |
Table cell |
|
2 |
Table cell |
Table cell |
Table cell |
|
3 |
Table cell |
Table cell |
Table cell |
Striped Rows
Use .sfTableStriped to add zebra-striping to any table row within the tbody.
|
# |
Table heading |
Table heading |
Table heading |
|
1 |
Table cell |
Table cell |
Table cell |
|
2 |
Table cell |
Table cell |
Table cell |
|
3 |
Table cell |
Table cell |
Table cell |
Responsive Table
Create responsive tables by wrapping any table in .sfBlockResponsive to make them scroll horizontally up to small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.
|
# |
Table heading |
Table heading |
Table heading |
Table heading |
Table heading |
Table heading |
|
1 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
|
2 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
|
3 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.
Images
Add classes to an <img> element to easily style images in any project.
Default media
The default media allow to float a media object (images, video, audio) to the left or right of a content block.
Responsive Videos
Flex Video lets browsers automatically scale video objects in your webpages. If you're embedding a video from YouTube, Vimeo, or another site that uses iframe, embed or object elements, you can wrap your video in div.sfFlexVideo to create an intrinsic ratio that will properly scale your video on any device.
Alerts
Alerts are handy elements you can drop into a form or inline on a page to communicate success, warnings, failure or just information. They'll conform to 100% of the container width you put them in.
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Best check yo self, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
Oh snap! Change a few things up and try submitting again.
Helper Classes
Float Classes
You can change the float behavior of an element by adding .sfFloatLeft or .sfFloatRight to an HTML element. To clear floats, add the class .clearfix to the parent element.
Text Align Classes
You can change the text alignment of an element by adding .sfAlignLeft, .sfAlignRight or .sfAlignCenter to an element.
Hide an Element
You can add the class .sfHide to an element to hide it. This will add the property display: none to the element.