Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

Skeleton is the only "sane" CSS boilerplate framework I've encountered. It's incredibly minimal -- the entire framework is so small and elegant that I can crank out websites without delving into the subtleties of the documentation. I find it really intuitive to use, and while I don't do a lot of web dev, when I do it's almost always with Skeleton.

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"
I'd rather keep my styling in my stylesheet. Using mixins rather than styling classes allows a developer to look in a single place - the SCSS - to determine how something looks.


Have you looked at PocketGrid?

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


Generally I like to hand-write SCSS: I've used Bootstrap and Pure and they're filled with:

- 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


I've worked with Bourbon Neat and found it pretty nice, it's a series of mixins so you can use semantec classes however you want.

http://neat.bourbon.io/


I don't have any hands on experience with SASS, but IIUC, you can `@include` and `@extend` PocketGrid as well.


Didn't knew this one!


Semantic UI is really good as well.

http://semantic-ui.com/


Semantic UI is ~0.5MB minified while Skeleton is ~20KB.


Aside from what has already been said (SemUI is a MASSIVE piece of CSS), Semantic UI is also not semantic.

<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)


However, Semantic.gs is pretty good. Minimal and much more semantic.


Glad to hear you enjoy using it. Skeleton seems to work well for those just getting started with front end or want something extremely simple.

Cheers!




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: