background preloader

Handlebars.js: Minimal Templating on Steroids

Handlebars.js: Minimal Templating on Steroids

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.

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.

Fluid Baseline Grid - A sensible HTML5 and CSS3 development kit LESS Elements: a collection of useful LESS mixins Download foneFrame mobile web framework dust Dust is a JavaScript templating engine designed to provide a clean separation between presentation and logic without sacrificing ease of use. It is particularly well-suited for asynchronous and streaming applications. Syntax Dust templates use two types of tags: keys and sections. Keys reference fields within the current view context. You can think of them as placeholders that allow the context to insert data into the template. Keys To reference a key from the view context within the template, enclose the key in curly braces. Hello {name}! And the following view context: The resulting output would be: Hello Fred! If the name key cannot be found in the view, Dust outputs an empty string: Hello ! Generally, Dust casts whatever values it finds to strings. Filters By default, the content of all key tags is HTML escaped, so assuming the name key above resolves to a dangerous script tag: <script>alert('I am evil!') This would be rendered as: Hello {name|s} Hello {name|s|h|u} Sections You have no friends! {!

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

Chosen - a JavaScript plugin for jQuery and Prototype - makes select boxes better Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly. Downloads Project Source Contribute Standard Select Turns This Into This Multiple Select <optgroup> Support Single Select with Groups Multiple Select with Groups Selected and Disabled Support Chosen automatically highlights selected options and removes disabled options. Single Select Multiple Select Hide Search on Single Select The disable_search_threshold option can be specified to hide the search input on single selects if there are n or fewer options. Default Text Support Chosen automatically sets the default field text ("Choose a country...") by reading the select element's data-placeholder value. Note: on single selects, the first element is assumed to be selected by the browser. No Results Text Support Setting the "No results" search text is as easy as passing an option when you create Chosen: Limit Selected Options in Multiselect You can easily limit how many options the user can select: Right to Left Support