Anyways, I'm so glad you're working on Skeleton again! Congrats on the 2.0 release, and thanks for all of the hard work!
div class="eleven columns"
It's one of these situations where less is more. The library weights 517 bytes minified, and it lets you write semantic markup.
http://arnaudleray.github.io/pocketgrid/docs/
https://github.com/arnaudleray/pocketgrid
————
Edit: here's the pitch:
* Lightweight: about 0.5kB!
* Pure CSS-only (no CSS preprocessor needed)
* Fluid (by default, but you can set a fixed width or max-width if you want)
* Responsive
* Unlimited number of breakpoints (you can define your own Media Queries)
* Mobile-first compatible (block width is 100% by default)
* Content-first compatible (you can swap columns and you can define your own breakpoints for each content in your page to fine-tune and optimize your content readability: not only 'tablet' or 'smartphone' breakpoints)
* Semantic (as much as a pure CSS grid could be ;) )
* Very simple (just have to define blocks and groups of blocks)
* Unlimited number of columns (no 12 or 16 columns restrictions: blocks just require a width in percentage)
* Unlimited nested grids
* Manage consistent gutters (gutters can be defined in pixels or ems, which is better than percentage-based solutions because it allows consistent gutters even in nested grids)
* Automatic rows (when a row is full, the next blocks go to a new row without doing anything)
* No dependencies
* Compatible with CSS frameworks such as Twitter Bootstrap or Zurb Foundation (you can use the Bootstrap or Foundation components such as buttons, tabs, etc. and use the Pocket grid for other layout)
* Compatibility: IE6+, Firefox, Chrome, Safari, Opera, and mobile browsers (iPhone, iPad, Android...)
————
Edit2, I just submitted it separately: https://news.ycombinator.com/item?id=8729316
- workarounds for browsers I don't care about. Two blocks in SCSS becomes 4 in a framework
- styling done using classes, as above.
- grid systems that can be replaced with a few characters of SCSS maths
<article> is semantic <div class="article full width"> is not semantic, it's describing how it should appear.
You can break half of the examples page by just clicking everywhere and typing and such. I currently have three buttons stuck in the middle of their two positions, textboxes being broken, etc. It needs work.
Also it's rarely a good thing if your goddamn landing page makes an i3 stutter when rendering it. Doesn't really scream lightweight or efficient (although the biggest culprit is that background header video)
Cheers!