Microjs: Fantastic Micro-Frameworks and Micro-Libraries for Fun and Profit!
Microjs: Fantastic Micro-Frameworks and Micro-Libraries for Fun and Profit!
Simple frameworks
If you’re looking for no-frills layout in a hurry, 10 frameworks will fit the bill.
The 1140 Grid has not been updated “in more than a year” (January 2011 in github) but remains online with an invitation to use it as a starting point for future development. This framework uses a 12-column horizontal grid up to an eponymous width of 1140 pixels.
Responsive Aeon 2.0 includes CSS resets for HTML5 elements, Photoshop and Illustrator templates, and Sublime snippets that contain the CSS framework and sample HTML in their entirety. The framework uses a 12-column grid with a breakpoint to one column at 768 pixels.
Columnal is an offshoot of the 1140 Grid with inspiration from 960.gs and a HTML5 reset from Eric Meyer. This framework uses a 12-column grid with a breakpoint to one column at 768 pixels, and includes one separate stylesheet for debugging and one for Internet Explorer. This download comes with PDF and Illustrator mock-up sheets, and a Balsamiq template.
Gridiculous is a 12-column, up-to-960-pixel-wide framework that allows nested columns — that is, column sets within columns. Unlike other nesting frameworks, however, inner columns have their own 960-pixel break point. Its CSS file is short, only 4,300 characters including comments. It’s easy to figure out.
Ingrid, while flexible, does not itself include breakpoints, media queries or min/max widths. But it does come with a sample file illustrating how its fluid-width columns may be set to collapse. By “sample” I mean “ASCII art” in a markdown file.
Responsive Grid System by Denis LeBlanc was the first of two named “Responsive Grid System.” This framework comes in 12, 16, or 24 fluid column varieties. The stylesheets are short and easy to decypher. I mean, ridiculously simple: Columns declare their respective percentages. That’s about it.
Responsive Grid System by Graham Miller was the second of two named “Responsive Grid System”. Where most frameworks used either base-12 or -16 column grids, this framework included a range of columns per row from one through 12. Need seven equal columns? No problem. RGS also took the unique approach of separating each set of columns into its own file. Don’t need seven equal columns? Don’t call its CSS document.
Titan is a relatively sophisticated framework whose in-CSS documentation went beyond the call. A table of contents and well-marked divisions made this framework easy to learn. That’s handy because the download did not include a sample HTML document. Its 12 and 16 column variations break to one column under 768 pixels wide.
Toast is simple. Really simple. Twelve fluid columns, a wrapper, and Bob’s your uncle. In a separate stylesheet, though, it includes styles to manage a site’s baseline, or vertical grid. Toast’s column styles have an interesting quirk: Text inside the container (“.grids”) but not inside a column (“.grid-#”) became illegible due to a “letter-spacing: -.25em” fix for inline blocks.
All of the frameworks above had a breakpoint that changed layouts to one column for browser widths under 768 pixels — except for Responsive Grid System (Graham Miller), whose breakpoint was at 480px; Toast, 700px; and Ingrid, which only had “breakpoint examples” in a demo file.
Full frameworks
Other frameworks went beyond columns.
Base: Styling itself as super simple, Base nonetheless sets typography rules for major HTML elements (headings, paragraph, strong, em, links, blockquotes, code, etc). Other additions alternate table row backgrounds and determine which levels of nested lists have certain types of bullets and numbering. Although the grid framework and typography styles share the same CSS file, that file is organized well enough to make changes (or removal) easy.
Foundation: Signs of popular frameworks include templates and case studies. Foundation has both. Along with a responsive grid, the Foundation by Zurb download includes jQuery-based slideshow and tabs. Like most frameworks, Foundation drops to to one column when the browser is less than 768 pixels wide.
Gumby: Like its flexible namesake, the Gumby framework by Digital Surgeons includes user interface widgets such as drop-down navigation and sub-navigation bars, tabs, formatted forms and tables, and various jQuery-based buttons.
Kube: Kube by Imperavi’s stylesheet included definitions for type, forms, buttons and tables — convenient for designers who appreciate Kube’s particular taste. In addition to straight CSS, Kube is also available in LESS.
Skeleton: Of the frameworks with widgets and extras, Skeleton by Dave Gamache has the easiest-to-read CSS. Although its stylesheets include typography, form, table and button declarations, Skeleton does not claim to be a UI framework. Its non-grid styles are kept in separate CSS files, making it easy to retask. Skeleton comes built into themes for WordPress and Drupal.
Twitter Bootstrap: Bootstrap makes its learning curve worth the effort. Its extensive capabilities can be customized, although designers wary of option overload may want to start with the simplified “getting started” download. What it lacks in stylesheet comments Bootstrap makes up in online documentation and sample files. Bootstrap’s UI widgets include popups, navigation bars, modal boxes, progress bars, and slideshows.
In Conclusion: Which one?
I tested these frameworks with a file of greeked text organized by two levels of <div>s. Every framework I tried claimed to be mobile-friendly, or at least responsive. But all approached mobile design from a desktop standpoint: Smartphones get one column.
Fastest setup: Toast took me the least time to implement, with Aeon a close second. Ingrid and Columnar each took a few more minutes to read and understand, but I could use both well enough to rearrange page layout in five minutes apiece.
Most options:Twitter Bootstrap had the most widgets and interface options. Foundation was no less capable, although its addons were just that: Separate projects working together through common conventions.
Fastest integration: The Skeleton framework’s options were the easiest to ignore. I could remove and reinstate its widgets in a snap, and its CSS was marked well enough for designers of moderate of experience to get started quickly. Skeleton’s creators even link to WordPress and Drupal themes that use its nomenclature, as well as a Ruby Gem (v3.1 and later).
Best long-term support: It’s hard to say how any digital project will hold up in the future. But Bootstrap, Gumby, Foundation, and Kube are all backed by companies with more than one professional product in the marketplace.
Choosing a CSS framework (or inventing your own, or adapting what exists) is not an easy decision. There may not be one right answer for everyone, there are few wrong answers for everyone. Think of it this way: At least they’re not tables.
Recent Comments