Components

Grid System

SageFrame has its own unique grid system which is fluid and flexible. It has pre-defined classes ranging from .sfCol_1 to .sfCol_100. Each Column has gutter space of 15px.

Header
Banner
Pos1
Pos2
Pos3
Fulltopspan
lefttop
left A
left B
leftbottom
Middletop
Middlemaincurrent
Middlebottom
Righttop
Right A
Right B
Rightbottom
Fullbottomspan
Footer

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

Forms

http:// .com

Horizontal form

Use SageFrame's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .sFormHorizontal to the form.


Form Validation

Buttons

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

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

Media Objects

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.

140x140 140x140 140x140

Default media

The default media allow to float a media object (images, video, audio) to the left or right of a content block.

64x64

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64

Nested media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

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.

© Copyright 2014 SageFrame. All Rights Reserved.