Golden Grid System GGS was my next step after Less Framework. Instead of a fixed-width grid, it used a fully fluid-width one, without even a maximum width. The resources it was published with are still available on GitHub. The idea was to take a 18-column grid, use the outermost columns as margins, and use the remaining 16 to lay elements out. On smaller screens the 16 columns could be folded into 8, 4 and 2. This behaviour was inspired by Massimo Vignelli's Unigrid system. While the grid's columns were fluid — proportional to the screen's width — the gutters (spaces between the columns) were proportional to the font-size being used. GGS also contained a set of typographic presets, strictly to a baseline grid. Correctly setting all of these measurements is difficult, of course. When published, GGS gained a lot of attention, as the web design community was searching ways to work with fluid-width grids, which have always been troublesome, running counter to many graphic design principles.
Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development Magazine Grid It's an ultramodern CSS-Framework which comes with common magazine design elements such as pagination, gutters and of course a basic grid. More semantics, less divs Magazine Grid takes use of html5-elements to structure your magazine page. <article><nav class="pagina">…</nav><section><p class="grid x5">…</p><p class="grid x2">…</p><p class="grid x1">…</p></section><section class="gutter column2"><p> … </p></section></article> An article-element wraps up your page, sections define the portions of content. Inside the sections you define which elements should match the grid and how wide they are. Made for the iPad Magazine Grid is designed to work best on the iPad in portrait and landscape orientation. iPhone compatible? Of course Magazine Grid has a nice fallback style for devices with smaller displays such as the iPhone or iPod Touch. Lighter than 4kB Magazine Grid is superlight to load fast on mobile devices.
Preboot.less by Mark Otto Mixins Mixins are basically supercharged includes for CSS, allowing you to combine a set of rules into one. They're great for vendor prefixed properties like -webkit-box-shadow, gradients, and more. Rounding Corners Round the corners of an element with .border-radius. Or get fancy with it and selectively apply rounding to certain corners: .border-radius(3px,3px,0,0); Box (Drop) Shadows Give any element some depth in all the best browsers with a single rule. Gradients Take any two colors and turn them into a most bodacious gradient of awesome. #gradient > .vertical(#333,#000); #gradient > .horizontal(@blue,@red); Two colors not enough? #gradient > .vertical-three-colors(#777,#333,.25,#000); #gradient > .vertical-three-colors(@blue,@red,@purple); Go easy on those three color gradients though—they can get out of hand quick. Transitions Elegantly transition elements in style with a single rule. Simple Clearfix Forget adding .clearfix to all your divs and just add the mixin where appropriate. Buttons