Media
One default grid and (if needed) different per–media grids (e.g. large, tablet, handheld).
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.
One default grid and (if needed) different per–media grids (e.g. large, tablet, handheld).
Extend your media–grids to pre–defined layouts (e.g. a 2-column layout with switched columns).
On top of grids and layouts, add fractional classes (e.g. all-half, all-thirds, all-1of3).
The semantic way — add templates instead of using presentational classes in your markup.
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
MUELLER was developed in 2012. This website is still online for historical reasons.
MUELLER is outdated, not actively maintained and you should not use it anymore — try something like Tailwind CSS instead.
$ bower install mueller
