Initializr - Start an HTML5 Boilerplate project in 15 seconds! Gridlock / Projects / Ben Plum Syntax Gridlock features three distinct grid sizes that correspond to specific screen sizes: desktop, tablet and mobile. Desktop features a full 12 or 16 column grid, tablet snaps down to 6 or 8, and mobile contains only 3. The syntax is simple and easily read: [target device]-[column count]. Using this method, a cell can be easily adjusted to fit the target device's screen size by applying the appropriate class names: desktop-8 tablet-4 mobile-3. Gridlock also includes some fraction helper classes, -full, -half and -third. Mobile First Gridlock also features a mobile first variant in both 12 and 16 columns. Bookmarklet The Gridlock Bookmarklet adds a simple overlay to help debug alignment issues. Auto Load You can also trigger the bookmarklet load automatically on each page of a site: (function(){if(typeof%20GridlockBookmarklet=='undefined'){document.body.appendChild(document.createElement('script')).src='http: Options Class Flags Demo
Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development The Semantic Grid System Less Framework 4 I called Less Framework "a CSS grid system for designing adaptive websites". It was basically a fixed-width grid that adapted to a couple of then popular screen widths by shedding some of its columns. It also had matching typographic presets to go with it, built with a modular scale based on the golden ratio. The resources it was originally published with are still available on GitHub. Contrary to how most CSS frameworks work, Less Framework simply provided a set of code comments and visual templates, instead of having predefined classes to control the layout with. /* Default Layout: 992px. Less Framework was popular in the early days of responsive design. Eventually, I moved on from fixed-width grid systems and worked on a fully fluid-width one, in the form of Golden Grid System. Less Framework's popularity was helped by the following contributions and the lovely people behind them (dead links crossed off):
Fluid Baseline Grid - A sensible HTML5 and CSS3 development kit Frameless Columnal | A responsive CSS grid system helping desktop and mobile browsers play nicely together. csswizardry/inuit.css The Goldilocks Approach to Responsive Web Design Open DAWS v4.0.1 theory For a long time, we've built sites that specified column widths in HTML. This leads to a compromised design, with an app or site that looks good on a single large resolution, and reasonable on mobile. It also produces HTML stuffed with non-semantic class names. This isn't good enough. The Open Digital Application Wireframing Styleset (or OpenDAWS) is an attempt to correct this. what OpenDAWS is... OpenDAWS can be thought of as an structured library; that is to say, it's a huge set of resets and helpful classes, as well as the logic for grid layouts, but without any of the constraints of a full framework. This means that you can create a design limited in width only by the user's viewport size. Moreover, by not specifying widths in HTML, we're free to completely change how our design looks at these sizes. ...& what it isn't This is not a full framework, in the vein of Foundation, Bootstrap or Skeleton. It's also not an attempt to style everything. basic usage html <header>... mobile css
CSSHórus | CSS Library for responsive and mobile websites Responsive Web Design just got Easier with the Responsive Grid System 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. 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. Many people trying to use GGS were also confused by the lack of predefined code for working with the grid.