bobscss

Grid System

Basic 12-column flexible grid system.

.col-sm-6
.col-sm-6
.col-sm-4
.col-sm-4
.col-sm-4
.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-3
.col-xs-2
.col-xs-2
.col-xs-2
.col-xs-2
.col-xs-2
.col-xs-2
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1

Nesting Columns

Easily nest row and columns.

.col-md-6
.col-sm-6
.col-sm-6
.col-md-6

Justify Columns

Use the new Flexbox features to justify content with columns.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Offsetting Columns

Move columns to the right.

.col-sm-offset-3 .col-sm-4

Centering Columns

Flexbox feature again. Center all kinds of column widths with just one css class.

.col-xs-6

Aligning Columns

Flexbox, yay! Align the content or align the flex-item`s separately.

.col-xs-4
.col-xs-4
.col-xs-4
.col-xs-4
.col-xs-4
.col-xs-4

Ordering Columns

Here we go with this Flexbox thing again. But ordering flex-item`s is a no-brainer.

'1' .order-xs-3
'2' .order-xs-1
'3' .order-xs-2

Typography

Some basic styles.

Typography

Header 2

Header 3

Header 4

Header 5

Caps Italic Bold Regular

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.


Buttons

Awesome standalone Buttons with new Ghostbuttons Extension.







Components

Create many different Components without writing any new CSS.
Take this example of the Media Object done with Flexbox and normal floating div`s.

test

Lorem ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et

test

Lorem Ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et

Box

Cool looking Box with some Buzz texts.

Card

Material like Cards.

Forms

Simple styles forms with pre defined error styles.

Start now

View project on github.

BobScss on Github