Grid Example

1
2
3
4
1
2
1
2
5
6
1
8
4
10
3
5
2
2
12

Headings

Interested in beautiful typography?

Use this awesome framework and you'll get typography that looks like something very very beautiful.

A baseline grid is built-in.

Ever wonder what it was like to not worry about any line-heights and such? You'll know the feeling if you use this framework.

You can even feel free to link somewhere special.

You'll wish every framework was this easy to use

Line-height

The line-height might seem slightly wonky but it works very well at keeping items aligned to your baseline. Which is important. Because it makes things look professional and stuff.

We got that all covered.

And another paragraph example goes in this section because it's nice to see.

Just look at the alignment!

And another paragraph example goes in this section because it's nice to see.

Sections

And the spectacular use cases

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras posuere scelerisque faucibus. Morbi vel gravida nisl. Etiam lectus nulla, congue ac ultricies et, porta vitae mi. Ut consequat tincidunt ante vel dapibus. Vivamus tortor orci, ullamcorper eu iaculis non, gravida ac eros.

Note: You can do this too!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras posuere scelerisque faucibus. Morbi vel gravida nisl. Etiam lectus nulla, congue ac ultricies et, porta vitae mi. Ut consequat tincidunt ante vel dapibus. Vivamus tortor orci, ullamcorper eu iaculis non, gravida ac eros.

Curabitur pretium tincidunt viverra. Pellentesque id ornare arcu. Pellentesque sodales, arcu a convallis tempus, eros lacus porttitor quam, id ultricies dui leo eu leo. Fusce consectetur viverra nibh eu tempus. Aliquam placerat mi et leo varius vehicula. Vestibulum dapibus varius aliquet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed auctor dolor vel diam molestie tempus. Sed molestie risus ac velit pellentesque sed lacinia risus rhoncus.

Note: You can do this too!

Subheadings

Interested in beautiful typography?

Use this awesome framework and you'll get typography that looks like something very very beautiful.

A baseline grid is built-in by default.

Ever wonder what it was like to not worry about any line-heights and such? You'll know the feeling if you use this framework.

Don't worry about complicated line-heights and margin-bottoms.

You'll wish every framework was this easy to use

Hgroups galore!

Line-height

Need an hgroup?

We got that all covered.

And another paragraph example goes in this section because it's nice to see.

Hgroups are included.

Just look at that alignment!

And another paragraph example goes in this section because it's nice to see.

And... inline headers too?!

Yes. Here too.

You're welcome.

And... inline headers too?!

And... inline headers too?!

And... inline headers too?!
Hgroup here, look!
And... inline headers too?!

Paragraphs & Images

Lead, regular, regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras posuere scelerisque faucibus. Morbi vel gravida nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras posuere scelerisque faucibus. Morbi vel gravida nisl. Etiam lectus nulla, congue ac ultricies et, porta vitae mi. Ut consequat tincidunt ante vel dapibus. Vivamus tortor orci, ullamcorper eu iaculis non, gravida ac eros.

Curabitur pretium tincidunt viverra. Pellentesque id ornare arcu. Pellentesque sodales, arcu a convallis tempus, eros lacus porttitor quam, id ultricies dui leo eu leo. Fusce consectetur viverra nibh eu tempus. Aliquam placerat mi et leo varius vehicula. Vestibulum dapibus varius aliquet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed auctor dolor vel diam molestie tempus. Sed molestie risus ac velit pellentesque sed lacinia risus rhoncus.

Curabitur pretium tincidunt viverra. Pellentesque id ornare arcu. Pellentesque sodales, arcu a convallis tempus, eros lacus porttitor quam, id ultricies dui leo eu leo. Fusce consectetur viverra nibh eu tempus. Aliquam placerat mi et leo varius vehicula. Vestibulum dapibus varius aliquet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed auctor dolor vel diam molestie tempus. Sed molestie risus ac velit pellentesque sed lacinia risus rhoncus.

Regular, secondary, tertiary

Plus: some inline styles

Curabitur pretium tincidunt viverra. Pellentesque id ornare arcu. Pellentesque sodales, arcu a convallis tempus, eros lacus porttitor quam, id ultricies dui leo eu leo. Fusce consectetur viverra nibh eu tempus. Aliquam placerat mi et leo varius vehicula. Vestibulum dapibus varius aliquet. Pellentesque HBT morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed molestie risus ac velit pellentesque sed lacinia risus rhoncus.

13 Curabitur pretium tincidunt viverra. Pellentesque id ornare arcu. Pellentesque sodales, arcu a convallis tempus, eros lacus porttitor quam, id ultricies dui leo eu leo. Fusce consectetur viverra = null nibh eu tempus. Aliquam placerat mi et leo varius vehicula. Vestibulum dapibus varius aliquet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. ⌘ Cmd + A

Watch out! Sed auctor dolor vel diam molestie tempus. Sed molestie risus ac velit pellentesque sed lacinia risus rhoncus.

Curabitur pretium tincidunt viverra. Aliquam placerat Consectetur elit ornare arcu. Pellentesque sodales, arcu a convallis tempus, eros lacus porttitor quam, id ultricies dui leo eu leo. Fusce consectetur viverra nibh eu tempus. Aliquam placerat mi et leo varius vehicula. Vestibulum dapibus varius aliquet. Sed auctor dolor vel diam molestie tempus. Sed molestie risus ac velit pellentesque sed lacinia risus rhoncus.

Curabitur pretium tincidunt viverra. Pellentesque id ornare arcu. Pellentesque sodales, arcu a convallis tempus, eros lacus porttitor quam, id ultricies dui leo eu leo. Fusce consectetur viverra nibh eu tempus. Vestibulum dapibus varius aliquet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed auctor dolor vel diam molestie tempus.

Sed molestie risus ac velit pellentesque sed lacinia risus rhoncus.

Aliquam placerat mi et leo varius vehicula.

Pellentesque habitant morbi tristique senectus et.

Sed auctor dolor vel diam molestie tempus.

Alignment classes

sb-align-left

Curabitur pretium tincidunt viverra. Pellentesque id ornare arcu. Pellentesque sodales, arcu a convallis tempus, eros lacus porttitor quam, id ultricies dui leo eu leo. Fusce consectetur viverra nibh eu tempus. Aliquam placerat mi et leo varius vehicula. Vestibulum dapibus varius aliquet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed auctor dolor vel diam molestie tempus. Sed molestie risus ac velit pellentesque sed lacinia risus rhoncus.

sb-align-right

Curabitur pretium tincidunt viverra. Pellentesque id ornare arcu. Pellentesque sodales, arcu a convallis tempus, eros lacus porttitor quam, id ultricies dui leo eu leo. Fusce consectetur viverra nibh eu tempus. Aliquam placerat mi et leo varius vehicula. Vestibulum dapibus varius aliquet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed auctor dolor vel diam molestie tempus. Sed molestie risus ac velit pellentesque sed lacinia risus rhoncus.

sb-align-center

Curabitur pretium tincidunt viverra. Pellentesque id ornare arcu. Pellentesque sodales, arcu a convallis tempus, eros lacus porttitor quam, id ultricies dui leo eu leo. Fusce consectetur viverra nibh eu tempus. Aliquam placerat mi et leo varius vehicula. Vestibulum dapibus varius aliquet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed auctor dolor vel diam molestie tempus. Sed molestie risus ac velit pellentesque sed lacinia risus rhoncus.

sb-align-justified

Curabitur pretium tincidunt viverra. Pellentesque id ornare arcu. Pellentesque sodales, arcu a convallis tempus, eros lacus porttitor quam, id ultricies dui leo eu leo. Fusce consectetur viverra nibh eu tempus. Aliquam placerat mi et leo varius vehicula. Vestibulum dapibus varius aliquet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed auctor dolor vel diam molestie tempus. Sed molestie risus ac velit pellentesque sed lacinia risus rhoncus.

Caption

A city in black and white.

Images

Quotations

Blockquote

Lorem ipsum dolor sit amet consectetur elit. Curabitur pretium tincidunt viverra. Pellentesque id ornare arcu. Pellentesque sodales, arcu a convallis tempus, eros lacus porttitor quam, id ultricies dui leo eu leo. Fusce consectetur viverra nibh eu tempus. Aliquam placerat mi et leo varius vehicula. Vestibulum dapibus varius aliquet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed auctor dolor vel diam molestie tempus. Sed molestie risus ac velit pellentesque sed lacinia risus rhoncus. John Smith

Pullquote

Lorem ipsum dolor sit amet consectetur elit. Curabitur pretium tincidunt viverra. Pellentesque id ornare arcu. Pellentesque sodales, arcu a convallis tempus, eros lacus porttitor quam, id ultricies dui leo eu leo. Fusce consectetur viverra nibh eu tempus.

Vestibulum dapibus varius aliquet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Aliquam placerat mi et leo varius vehicula. Vestibulum dapibus varius aliquet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed auctor dolor vel diam molestie tempus. Sed molestie risus ac velit pellentesque sed lacinia risus rhoncus.

Inline quote

Aliquam placerat mi et leo varius vehicula. Vestibulum dapibus varius aliquet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed auctor dolor vel diam molestie tempus. Sed molestie risus ac velit pellentesque sed lacinia risus rhoncus.

Lists

Unordered list

  • List item 1
  • List item 2
    • Nested list item
    • Nested list item
    • Nested list item
  • List item 3

Ordered list

  1. List item 1
  2. List item 2
    1. Nested list item
    2. Nested list item
    3. Nested list item

  3. Lorem ipsum dolor sit amet consectetur elit. Aliquam placerat mi et leo varius vehicula.

Definition list

Al Gore
Often mistakenly credited as the founder of the Internet.
Tim Berners-Lee
The real founder of the Internet.

Side by side

Al Gore
Often mistakenly credited as the founder of the Internet.
Tim Berners-Lee
The real founder of the Internet.

Inline list

  • List item 1
  • List item 2
  • List item 3
  • List item 4

Block list

  • List item 1
  • List item 2
  • List item 3
  • List item 4

Code

Preformatted: It's so meta

<div class="sb-grid-container">
<div class="sb-grid-row">
<div class="sb-grid-12">
	<h1>Code</h1>
</div>
<div class="sb-grid-6">
	<h2>Preformatted <small>It's so meta</small></h2>
	<pre>

	</pre>
</div>
</div>
</div>

Numbered

  • <div class="sb-grid-container">
  • <div class="sb-grid-row">
  • <div class="sb-grid-12">
  • <h1>Code</h1>
  • </div>
  • <div class="sb-grid-6">
  • <h2>Preformatted <small>It's so meta</small></h2>
  • <pre>
  • And, maybe if you have to wrap some text there won't be a problem when you do so. Ah snap.
  • </pre>
  • </div>
  • </div>
  • </div>

Buttons

Normal buttons Including states

Sizes

Groups

Horizontal

Vertical

Tables

Normal

Column 1 Column 2 Column 3 Column 4
Row 1 $1.00 $2.50 $1.00 $2.50
Row 2 $1.00 $2.50 $1.00 $2.50
Row 3 $1.00 $2.50 $1.00 $2.50
Row 4 $1.00 $2.50 $1.00 $2.50

Striped

Column 1 Column 2 Column 3 Column 4
Row 1 $1.00 $2.50 $1.00 $2.50
Row 2 $1.00 $2.50 $1.00 $2.50
Row 3 $1.00 $2.50 $1.00 $2.50
Row 4 $1.00 $2.50 $1.00 $2.50

Columns

Column 1 Column 2 Column 3 Column 4
Row 1 $1.00 $2.50 $1.00 $2.50
Row 2 $1.00 $2.50 $1.00 $2.50
Row 3 $1.00 $2.50 $1.00 $2.50
Row 4 $1.00 $2.50 $1.00 $2.50

Bordered

Column 1 Column 2 Column 3 Column 4
Row 1 $1.00 $2.50 $1.00 $2.50
Row 2 $1.00 $2.50 $1.00 $2.50
Row 3 $1.00 $2.50 $1.00 $2.50
Row 4 $1.00 $2.50 $1.00 $2.50

Captioned & Alerts

Column 1 Column 2 Column 3 Column 4
Row 1 $1.00 $2.50 $1.00 $2.50
Row 2 $1.00 $2.50 $1.00 $2.50
Row 3 $1.00 $2.50 $1.00 $2.50
Row 4 $1.00 $2.50 $1.00 $2.50
Take a look, see if there's something you like.

Mish mash

And numbers are right aligned.

Column 1 Column 2 Column 3 Column 4
Row 1 $1.00 $2.50 $1.00 $2.50
Row 2 $1.00 $2.50 $1.00 $2.50
Row 3 $1.00 $2.50 $1.00 $2.50
Row 4 $1.00 $2.50 $1.00 $2.50
This one is also condensed.

Icons

Provided by FontAwesome

For icon names, please refer to FontAwesome's Awesome documentation.

Forms

Classic

User Profile

Inline

Stacked

Aligned

Hey! This isn't the best responsive example, however, it's possible to use the default styling (Stacked) and then @include sb-aligned in your form class at larger break points.