Skeleton 2.0 CSS Framework
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
I'm hoping the update really helps anyone who's been using Skeleton for a while or anyone trying to get into RWD.
Thanks :)
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!
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
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!
Seems to be in the same market as Pure: http://purecss.io/
Would love to see a compare/contrast.
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!
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
"Skeleton: A Dead Simple..." - I see what you did there :)
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.
Why have a max width of 960px?
"The grid is a 12-column fluid grid with a max width of 960px"
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?
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!
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.
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.
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"?
> 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?
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.
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.
Very nice site - if that's indicative of the framework (and it surely is), this one will be worth checking out.
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!
Glad to see it back. So simple and clean.
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.
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!
Whoa, it's certainly been a while. Cool to see that people are still working on this.
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.
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
undefined
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
I've been waiting for this for years. Thank so much for this!
undefined
This looks really great! Will definitely use it for my next project. Have loved Skeleton 1.0, and this is just better. Thanks!
Talk about timing. Yesterday I was checking up on this to see if there is something new and today this shows up. Great!
Thanks for making this. A really awesome and minimal way to build sites. This will be perfect for my next project.
Used Skeleton as the backbone for a responsive self service portal; it was great to use and customize!
I generally like this very much, but I don't think width:80% for container is suited for mobile.
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/
This looks really simple, I like it. Is it pure CSS or is there JavaScript involved?
This looks great. Any plans to include a scss or less version?
Great! Nice to see optimisation on the web presented so beautifully. Greetings from the 9 KB framework http://natuive.net
Very, very nice. Kudos DHG!
This is great!
Awesome!