MUELLER Grid System

MUELLER is a modular grid system for responsive/adaptive and non–responsive layouts, based on Compass. You have full control over column width, gutter width, baseline grid and media–queries.

Modules

Media 

One default grid and (if needed) different per–media grids (e.g. large, tablet, handheld).

Layouts 

Extend your media–grids to pre–defined layouts (e.g. a 2-column layout with switched columns).

Fractions 

On top of grids and layouts, add fractional classes (e.g. all-half, all-thirds, all-1of3).

Templates 

The semantic way — add templates instead of using presentational classes in your markup.

Examples

Columns with basic media–classes
The class–names are changed with visibility–selectors.

g-d-6

g-tp-3

g-hl-3

g-h-2

g-d-6

g-tp-3

g-hl-3

g-h-2

g-d-12

g-tp-6

g-hl-6

g-h-2

2–column asymmetrical layout

c1

c2

2–column layout, switched columns
Code–wise, c1 comes before c2.

c1

c2

3–column symmetrical layout

c1

c2

c3

4–column layout
Note the shift with desktop, portrait & handheld.

c1

c2

c3

c4

1–column layout with half–fractions

g-all-half

g-all-half

1–column layout with 1/3– and 2/3–fractions

g-all-1of3

g...

g-all-2of3

Practice

Read

MUELLER is NOT working out of the box. Read the Code, read this and try to understand what´s happening. Learn Sass/Compass.

Play

Change the grid, change the baseline, use different media-queries, add layouts. Figure out what´s working best for you.

Use

Think about your layout first — you can´t just add "responsiveness" to every given layout. Reflect on Mobile First, use HTML5.

Download

System

You mainly get the file grid_system — this is where the system is defined. All other parts (media, layouts, fractions, templates) are just examples of how to work with MUELLER. MUELLER is licensed under BSD.