Github Project and Documentation get spartan

Spartan Dynamic Grid Demo

Grid Setup

You can manipulate all setup parameters freely, try it out and see how the grid adjusts!

get base css get responsive css reset
%
px

Breakpoints

These are just for demo purposes to show how Spartan can behave responsively, not part of the grid configuration.

()
()

Basic Grid

1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
6
6
12

Column Ordering

Note: We use predefined layouts to reorder columns in this example since grid variables are dynamic, this would normally not be necessary.

Layout 1

col-1
col-2
col-3

Layout 2

col-1
col-2
col-3
col-4

Responsive Grid Layouts

Resize the browser window to see how layouts adjust throughout viewports.

Legend

L Large
M Medium < & ≥
S Small <

Layout 1: L 33/33/33 | M 50/50 | S 100

column 1
column 2
column 3
column 4
column 5
column 6

Layout 2: L 50/50 | M 100 | S 100

column 1
column 2
column 3
column 4

Layout 3: L 66/33 | M 66/33 | S 100

column 1
column 2

Layout 4: L 25/25/25/25 | M 50/50 | S 100

column 1
column 2
column 3
column 4

Viewport Classes

Thanks to a fully flexible grid setup you can even create a twitter bootstrap grid behaviour.

Column 1
Column 2
Column 3
Column 4
Column 5
Column 6

Nested Grids

Simple nested Columns

outer
inner
inner
outer
inner
inner

Responsive Layout 3 with simple Columns inside

outer
inner
inner
other

Responsive Layout 2 with the previous Layout nested

outer
outer
inner
inner
other
other

Not-in-Grid Layouts

Since everything inside the mixins gets calculated with given (floating point) numbers you can actually set any width through them. (That's why the above responsive layouts work the same with every column amount)

Layout 1: L 9 columns | M 7 columns | S 5 columns

column 1
column 2
column 3
column 4
column 5
column 6
column 7
column 8
column 9