background preloader

Handlebars.js: Minimal Templating on Steroids

Handlebars.js: Minimal Templating on Steroids

wycats/handlebars.js - GitHub 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.

donpark/hbs - GitHub Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development {{ mustache }} 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.

raycmorgan/Mu - GitHub The Heads-Up Grid Responsive web design, as described/defined by Ethan Marcotte anyway, is the act of creating various forms of the same basic site design that are optimized for different ranges of browser window widths. Luckily, the way that I originally constructed the Heads-Up Grid made it relatively easy to adapt to the needs of responsive web design. You can quickly and easily define as many different grids as you need by way of basic JavaScript conditional statements. Even if you are not extremely comfortable with JavaScript, if you are ambitious enough to tackle responsive web design you will most likely have no problem figuring this out. To create a responsive grid use the following code as a template. The result should be a system that checks the browser window width on pageload as well as any time that the browser window is resized and render the appropriate grid.

cramforce/node-asyncEJS - GitHub Fluid Baseline Grid - A sensible HTML5 and CSS3 development kit

Related: