bobscss

flexbox grid and web-framework

BobScss on Github

Flexbox Image

Flex grid-box

A grid system based on the flex display property. For more information click here. bobscss uses old and new syntax.

Responsive Image

Responsive

bobscss scales perfectly on every device, from phones to tablets to desktops without hastle.

Fast Image

Fast

bobscss is a lightweight compilation of basic styles and utilities. The framework places the emphasis on speed and performance.

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 Flexgrid-box 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

Flexgrid-box feature again. Center all kinds of column widths with just one css class.

.col-xs-6

Aligning Columns

Flexgrid-box, 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 Flexgrid-box 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 Flexgrid-box 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

grid-box

Cool looking grid-box with some Buzz texts.
cta!

Card

Material like Cards.
cta!

Forms

Simple styles forms with pre defined error styles.

Start now

View project on github.

BobScss on Github
Foundation Image

Foundation

Use bobscss as base for larger projects.