
Skeleton 2.0 CSS Framework - hit8run
http://getskeleton.com
======
dhgamache
Hey ya'll - I'm Dave the creator of Skeleton. Grateful to see it on HN. I
wrote about why I created v2.0 in a weird format here:
[https://medium.com/@dhg/dear-
skeleton-452f4bb07d69](https://medium.com/@dhg/dear-skeleton-452f4bb07d69)

I'm hoping the update really helps anyone who's been using Skeleton for a
while or anyone trying to get into RWD.

Thanks :)

~~~
heyts
Hi Dave, great work on Skeleton. Was the original project a side-project or
was it in use for projects at Twitter and / or Medium? Wondering about how it
seems to be a sort of antithesis to Bootstrap (as in no preprocessor / small
footprint / sane defaults).

~~~
dhgamache
Haha, just a side project. Weirdly bootstrap, foundation and skeleton all have
similar roots together, but a story for another day. I made it cause it was
what I wanted to start projects and seemed like there might be others :)

------
gamesurgeon
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!

~~~
AlwaysBCoding
Semantic UI is really good as well.

[http://semantic-ui.com/](http://semantic-ui.com/)

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

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

------
jordanlev
Looks really awesome!

One piece of feedback I have is that I don't think it's wise to put "maximum-
scale=1" in the viewport meta-tag because it makes pages hard to read for
people with less-than-perfect vision (because it prevents zooming in on
phones). I created a github issue about this too:
[https://github.com/dhg/Skeleton/issues/173](https://github.com/dhg/Skeleton/issues/173)

Is there an actual benefit to having this on web pages? I see it a lot
(unfortunately -- makes it very difficult when I'm on my iphone sometimes),
and am not sure why people do this. Is it just "common wisdom" that has been
copy-and-pasted down through the ages without anyone questioning it, or does
it provide some benefit that outweighs the (pretty big) drawback of reduced
accessibility?

Thanks!

~~~
kekub
I can see your point, but want to add why I recently started to add this meta-
tag on most of my responsive sites: 1\. images start to look blurry 2\. input
fields change the scale of the page and seem to confuse some users (at least
in some test-cases). On the other hand I try to improve accessability by
making sites screen-reader-friendly and using high contrasts. I have also seen
a lot of people using "bigger fonts" options in their browsers or on their
phones, which solves this problem from my point of view.

~~~
dkersten
I read a lot on my phone and I don't have great eyesight. If I cannot zoom the
website I'm looking at, I often cannot read it.

~~~
dhgamache
I honestly hadn't considered this case. Let me dig into it and see if I can
find a solution that works best all around.

~~~
roywiggins
An option to increase text size in the interface is probably going to be even
better than allowing zoom, since it will reflow the text and not require the
user to scan left and right around the zoomed-in text.

~~~
bobbykjack
Of course, this is how our browsers used to work before the makers decided to
remove or hide that feature. I've never seen it on a mobile device. Does
anyone understand the reasons behind that move? Even if you think page zoom is
'better' than text scale, surely it doesn't make sense to disable the latter
altogether?

------
haberman
Seems to be in the same market as Pure:
[http://purecss.io/](http://purecss.io/)

Would love to see a compare/contrast.

~~~
MikeTV
Hadn't seen that one before. Looks closer to what I need -- thank you! I like
that it includes a fly-out menu and exists on several CDNs.

------
yesimahuman
Nice, looking forward to using this. I'm a CSS/JS framework creator myself
(Ionic), but often when working on simple websites with a designer I just need
a nice grid and some clean defaults. Congrats on 2.0!

------
JohnTHaller
This is a really solid framework. A couple of humble suggestions:

1\. Package up your site itself on github as one of the examples. Mixing up
some elements of your base site with some of the landing bits would make for a
solid base for a lot of people.

2\. Get a compatibility table together stat. To help you out, I did a quick
test of both your main site and the landing page. Nothing in depth, just the
basics. The following browsers worked properly:

On Windows (8.1 unless noted):

Firefox Stable 34.0.5

Firefox ESR 31.3.0

Opera 26.0.1656.32

Google Chrome Stable 39.0.2171.95

Internet Explorer 11

Internet Explorer 10 (Windows 7)

Internet Explorer 9 (Windows Vista)

On Ubuntu 14.0.4:

Firefox Stable 34.0

Chromium 39.0.2171.65

Google Chrome 39.0.2171.95

On Android 4.4:

Google Chrome 39.0.2171.93 (both landscape and portrait, phone and tablet)*

Firefox 34.0 (both landscape and portrait, phone and tablet)*

* Note that the UI navbar didn't stick on the phone for either browser despite the phone having a 1920x1080 resolution vs the tablet's 1024x768 resolution. I think this is by design on your end

The following browsers did not work properly:

Windows XP - Internet Explorer 7 and 8 - Failed to load custom images at top
hero secion (custom CSS not contained in skeleton), alignment issues of
buttons, full nav list visible (not part of skeleton issues), example grid
completely broken (shows as full width divs), very broken visually but still
usable

Windows XP - Internet Explorer 6 - issues above plus more visual issues. semi-
usable

~~~
dhgamache
This is awesome! Browser chart more than just a quick list might be nice.
Adding it as an outstanding issue to my long list of improvements. Appreciate
the feedback!

~~~
JohnTHaller
You're welcome. Based on my testing, I think you don't even really need a
detailed chart, just a compatibility list. You'd be safe listing it as
compatible with:

Mozilla Firefox (desktop and mobile)

Google Chrome (desktop and mobile)

Chromium

Internet Explorer 9 and later

Opera (desktop and mobile)

Safari (desktop and mobile) [this is an almost-positive guess but test to be
sure]

You could then work backwards a bit on version numbering, trying older
versions until you see where it breaks. You could put Firefox 31+ for now
(since I tested 31 ESR), but that would be misleading since I'd wager it works
quite a ways back on Firefox. Same with Chrome, Opera, and Safari. You could
even just leave those versions off as users generally have the latest version
of Firefox, Chrome, and Opera. Safari is another story since it's OS-tied like
IE is, so you have a lot more users using an outdated version of desktop Mac
OS X's Safari than outdated Firefox or Chrome users on the same OS versions.
Leopard users are stuck on Safari 5.0.6 and Lion users are stuck on Safari
6.1. If you can get your hands on really just those two versions to double
check, you'd be set and could list it as Safari 5+.

I may test back a bit as I'm playing with using Skeleton for an older site
using Drupal with a single-page theme. I can drop you a note if I do.

------
calebm
"Skeleton: A Dead Simple..." \- I see what you did there :)

~~~
dhgamache
I wrote it totally by accident then got a dumb smile and was like...feels
right.

~~~
pbhjpbhj
Presumed the name came via "bare bones CSS framework"?

------
armandososa
Thanks a lot! This seems like something I'm going to use a lot. Is it
available in bower? That's how I manage all my front-end dependencies
nowadays.

~~~
dhgamache
I don't believe it is, but maybe I should go about getting it into Bower. I
have no idea how I would go about that, but one of the Bower creators coming
over to play smash bros...will ask him.

------
scottcanoni
Why have a max width of 960px?

"The grid is a 12-column fluid grid with a max width of 960px"

~~~
jonathantm
> "The max width can be changed with one line of CSS and all columns will
> resize accordingly."

------
ddoolin
What's the reason behind not doing nested grid columns? Seems like a fairly
common usage pattern as I've seen. What's the recommended way of doing
something where something like Bootstrap would use nested columns?

~~~
Aradalf
I'm curious about this as well.

------
jamesdelaneyie
Hey man, super cool to see you come back to the project after so long.
Skeleton was the only understandable framework that was on the go when I
started developing, and it really helped me get to grips with RWD. Every time
I'd start new projects I'd come back to Skeleton for reference and now have my
own extended version thats always being refined, ExoSkeleton ;)

Thanks a mil the work you put in man, Cheers!

~~~
dhgamache
I really appreciate this :) Seems like Skeleton's greatest benefit is sometime
to newcomers to RWD and knowing it helped someone learn a little means the
most to me.

Also rad that you extended it. That's what it's about - making it your own :)

------
hit8run
I realized a few weeks ago that Dave Gamache started a 2.0 branch. Skeleton
was always nice to use and very lightweight. Great to see it is back. It is a
nice boilerplate that doesn't come in that heavy as bootstrap.

------
maaaats
Two questions: Are there hover-classes for tables etc. that can easily be
applied? What about striped/alternating rows? And how come I can only nest
lists 2 levels deep?

Other than that, it looks great.

~~~
dhgamache
1\. There are not hover classes for tables. I'm not in love with table hover
classes, BUT, zebra-striping (like every other row) seems like it could by
useful. That said, I don't want to create subclasses of any components really
(buttons is one exception). It also should be super easy to implement w/
Skeleton – tr:nth-child(even) { background-color: red }

2\. List nesting was just because I basically never go deeper than two levels
and I wanted to properly indent them. Didn't want code bloat for something I
_think_ would be rarely used.

------
ArtDev
I like simplicity but skeleton is missing a few essential things for me.

1) Vendor prefixing. Like "sk-columns sk-column-5". Uikit does this, but
Foundation and Bootstrap do not. I really wish they did.

2) Preprocessor support in Sass and Less. They are so similar, it is easy to
support both.

The grid class naming really really needs some cleanup! No one wants to
automate something that has to output integers as integer names like "five" or
"six". What is wrong with "sk-col-5" or "sk-col-6"?

------
Kiro
> All measurements are still base 10 though so, an <h1> with 5.0remfont-size
> just means 50px.

So why not just use px?

EDIT, answering my own question: "font-sizes and spacial relationships can be
responsively sized based on a single <html> font-size property".

So how does this work? Do you just set html font-size 62.5% for "normal" font-
sizes and then change that with media queries in order to increase size for
mobile etc? Is this best practice for font-sizes nowadays?

What about em? When are you supposed to use that?

~~~
thirdsun
I was wondering about this too - anything smaller than 16px base size is a bad
idea in my opinion. Also, Raleway as a body font? Not an ideal choice, it's
too thin for low DPI displays. Other than that, I like the fact that it's very
lightweight and reduced to the basics.

------
at-fates-hands
I've been using Skeleton for a while, so it's nice to see an update. I have a
1200px wide version, so if anybody's interested, I'll post it on my GitHub
page.

~~~
dhgamache
:) Awesome man. Fwiw, the new version makes it super, super, super easy to
scale since the grid is % based now. Can just change the max-width of the
.container and voila. Done.

------
anu_gupta
This might be a dumb question, but what are the pros and cons of choosing
something like Foundation over Skeleton?

Is it a tradeoff of simplicity vs features - are there any features in
particular that Skeleton misses out on? I've been using Foundation recently,
but the thought of a simple, 400 line CSS framework is very appealing.

------
oneeyedpigeon
Very nice site - if that's indicative of the framework (and it surely is),
this one will be worth checking out.

~~~
dhgamache
Cheers man.

------
__beat
Hey Dave, really appreciate your work. Skeleton was just what I needed when I
first started getting to grips with web design - it's been an invaluable tool
to me while learning the trade. To see you've released an update is a joy,
can't wait to dig in and start using it. Thanks a lot!

------
Lord_Zero
Glad to see it back. So simple and clean.

~~~
dhgamache
[https://www.youtube.com/watch?v=-JfEJq56IwI](https://www.youtube.com/watch?v=-JfEJq56IwI)

------
kitd
Very neat.

A bit OT, but it appears the 'class' attribute has now become the home for
DSLs for styling. I wonder if there are better ways of doing this because
after a while it becomes difficult to process mentally.

Maybe these projects should actually create their own markup language and
release a transformer to HTML.

~~~
insin
That's effectively what React Bootstrap [1] is. I'm wondering if there's a
nice way to make a factory-like version of something similar which takes DSL
definitions and generates the necessary components for you to use in a
sandbox.

Or custom element types for Emmet [2] which expand to the appropriate HTML.

[1] [http://react-bootstrap.github.io/](http://react-bootstrap.github.io/) [2]
[http://docs.emmet.io/abbreviations/types/](http://docs.emmet.io/abbreviations/types/)

------
jypepin
I've read through the source (400 lignes, really short) and it's a real piece
of art. I forced myself to understand 100% of what each line was doing, and
learnt a bunch of little things on the way. I'll definitely use it in my next
project, I love it!

------
bichiliad
Whoa, it's certainly been a while. Cool to see that people are still working
on this.

~~~
dhgamache
Hey yo - I write Skeleton. I haven't been giving Skeleton the love it
deserves, but it's gonna get it now. I wrote a bit in a weird format here:
[https://medium.com/@dhg/dear-
skeleton-452f4bb07d69](https://medium.com/@dhg/dear-skeleton-452f4bb07d69)

~~~
bichiliad
As one of those half million people, thank you! I used it in my blog.

------
prottmann
Would be nice if you can add or link something like a registry with skeleton
components / plugins / snippets that people create and publish.

It could be a github-wiki page, so that everybody can add their components.

It is always hard to find matching components.

~~~
dhgamache
I totally agree. Been thinking about the best way to handle this and will have
something in the near near future. Promise.

------
emehrkay
This looks great. I love the simplicity of it and how classnames are handled
and just the overall lightweight feeling. Sidetone: I had to go to the github
page to see browser support, maybe you can add it to the website. Thanks

~~~
dhgamache
Thanks! Browser support is under a "catch all" more tab on site, but really
should be in docs. I'll make it happen soon, though hopefully the readme is
clear for now.

------
briguy33
Great! Like everyone else here I thank you for Skeleton. 1.0 is what basicly
taught me CSS!

Working on a project using 2.0 already! Love the percentage based grid I just
wish there was a way to adjust the gutter width.

Thanks again.

Brian

------
roderick3427
I've been waiting for this for years. Thank so much for this!

~~~
dhgamache
<3

------
jafingi
This looks really great! Will definitely use it for my next project. Have
loved Skeleton 1.0, and this is just better. Thanks!

------
misterjinx
Talk about timing. Yesterday I was checking up on this to see if there is
something new and today this shows up. Great!

------
jameshk
Thanks for making this. A really awesome and minimal way to build sites. This
will be perfect for my next project.

------
jusuchin
Used Skeleton as the backbone for a responsive self service portal; it was
great to use and customize!

------
PSeitz
I generally like this very much, but I don't think width:80% for container is
suited for mobile.

------
drapper
great to see it coming back. for those that still something tad bigger (also
feature wise), but not yet a bootstrap big, there's
[http://responsivebp.com/](http://responsivebp.com/)

------
arenaninja
This looks really simple, I like it. Is it pure CSS or is there JavaScript
involved?

~~~
mutagen
It's pure CSS. Download it and take a look, it really is simple.

------
maxack
This looks great. Any plans to include a scss or less version?

~~~
Kiro
How would a scss or less version work? What would the difference be?

~~~
bshimmin
I guess you'd have variables for things like the colours of the buttons.

------
rado
Great! Nice to see optimisation on the web presented so beautifully. Greetings
from the 9 KB framework [http://natuive.net](http://natuive.net)

------
jonathanstark
Very, very nice. Kudos DHG!

------
razfar
This is great!

------
html5web
Awesome!

