18 ms·

Skeleton 2.0 CSS Framework

598 points by hit8run 12y ago

oneeyedpigeon 12y ago
Very nice site - if that's indicative of the framework (and it surely is), this one will be worth checking out.
- dhgamache 12y ago
  Cheers man.
bichiliad 12y ago
Whoa, it's certainly been a while. Cool to see that people are still working on this.
- dhgamache 12y ago
  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 12y ago
    As one of those half million people, thank you! I used it in my blog.
hit8run 12y ago
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.
dhgamache 12y ago
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 :)
- Pewqazz 12y ago
  Thanks for continuing development on Skeleton! My current blog design is largely based on Skeleton 1.x, but it looks like I'll be updating it this week.
  - dhgamache 12y ago
    Rad man - So, it should ALMOST be a straight drag and drop replacement of the normalize/skeleton.css for the old grid/layout/reset.css, but if you were doing nested columns that's gonna get you. Please let know how it goes – hi@getskeleton.com
- mirthquakes 12y ago
  Just wanted to say thanks for making this. Skeleton introduced me to the basics of responsive design and my company now uses it in several applications.
  - dhgamache 12y ago
    So glad to hear it man. That's why I built it :)
- oacgnol 12y ago
  Thank you so much for the hard work. I've been using Skeleton for a personal project even though it hadn't been updated in over 2 years. As a (mostly) backend developer, Skeleton has proven to be the best possible starting point for me to learn on; there's nothing tricky about it. This is a very nice early Christmas present!
  - dhgamache 12y ago
    Cheers <3
- heyts 12y ago
  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).
Lord_Zero 12y ago
Glad to see it back. So simple and clean.
- dhgamache 12y ago
  https://www.youtube.com/watch?v=-JfEJq56IwI https://www.youtube.com/watch?v=-JfEJq56IwI
maaaats 12y ago
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 12y ago
  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.
- delluminatus 12y ago
  I'm not the author, but there are no hover classes for tables or alternating rows, as seen in the source, which is very readable [0]. Also, each additional level of list-nesting requires additional CSS, so it's actually impossible to support arbitrarily nested lists as seen in most word processors. [0] https://github.com/dhg/Skeleton/blob/master/css/skeleton.css https://github.com/dhg/Skeleton/blob/master/css/skeleton.css
- charlesdenault 12y ago
  It's hundreds of requests like this that create bloated UI frameworks!
html5web 12y ago
Awesome!
at-fates-hands 12y ago
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 12y ago
  :) 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.
yesimahuman 12y ago
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!
roderick3427 12y ago
I've been waiting for this for years. Thank so much for this!
- dhgamache 12y ago
  <3
jordanlev 12y ago
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!
- Chris_Newton 12y ago
  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. There’s more than that specific viewport option, but often this kind of technique is an attempt to defeat mobile browsers that rescale your site when you rotate between portrait and landscape orientations. If the site is designed to adapt gracefully to different screens using media queries, then what you probably want instead is for the browser to just reflow the layout according to the new page width. In practice, many sites don’t adapt using media queries, and so popular mobile browsers may adjust the zoom level instead. That means whatever you could see horizontally before the orientation change is still what you can see afterwards but bigger/smaller. One way to force the adaptive behaviour is to use the viewport settings so the zooming isn’t allowed. However, that also interferes with deliberate zooming by the user. Sometimes you see all kinds of complicated workarounds for that, such as detecting an orientation change and temporarily blocking zooming, or detecting an attempt to zoom and then disabling the restriction temporarily so if the user repeatedly tries to pinch-zoom then subsequent ones work. Sadly, a lot of developers just copy-paste the viewport hack without realising the full implications, and that is when we see problems for users who really do want to zoom in. None of this is ideal, but as far as I know we still don’t have a reliable, standardised way for sites to specify how orientation change should be treated for best results, so for now viewport hackery seems to be the best known workaround.
armandososa 12y ago
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 12y ago
  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.
- pwenzel 12y ago
  Came here to say the same! Inclusion in Bower and cdnjs.com would be stellar. It would also likely result in wider adoption. @dhgamache Thanks for making Skeleton. I use frequently rely on Zurb Foundation, but this looks like a compelling alternative for many of my use cases.
calebm 12y ago
"Skeleton: A Dead Simple..." - I see what you did there :)
- dhgamache 12y ago
  I wrote it totally by accident then got a dumb smile and was like...feels right.
  - pbhjpbhj 12y ago
    Presumed the name came via "bare bones CSS framework"?
arenaninja 12y ago
This looks really simple, I like it. Is it pure CSS or is there JavaScript involved?
- mutagen 12y ago
  It's pure CSS. Download it and take a look, it really is simple.
gamesurgeon 12y ago
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!
- dhgamache 12y ago
  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!
- AlwaysBCoding 12y ago
  Semantic UI is really good as well. http://semantic-ui.com/ http://semantic-ui.com/
  - necrodawg 12y ago
    Semantic UI is ~0.5MB minified while Skeleton is ~20KB.
  - pikzen 12y ago
    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 12y ago
      However, Semantic.gs is pretty good. Minimal and much more semantic.
scottcanoni 12y ago
Why have a max width of 960px? "The grid is a 12-column fluid grid with a max width of 960px"
- jonathantm 12y ago
  > "The max width can be changed with one line of CSS and all columns will resize accordingly."
- cag_ii 12y ago
  You can easily change this to whatever you like using .container max-width
- armandososa 12y ago
  I think this is the reason: http://www.cameronmoll.com/archives/2006/12/gridding_the_960/ http://www.cameronmoll.com/archives/2006/12/gridding_the_960.... 960px was the "standard" for so much time (before RWD was a thing) that I still use it as the default width when designing new stuff. Maybe this is a bow to the old masters of our craft.
emehrkay 12y ago
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 12y ago
  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.
razfar 12y ago
This is great!
jamesdelaneyie 12y ago
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 12y ago
  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 :)
deleted 12y ago
[deleted]
haberman 12y ago
Seems to be in the same market as Pure: http://purecss.io/ http://purecss.io/ Would love to see a compare/contrast.
- redgc 12y ago
  I second the request for a Pure comparison
- MikeTV 12y ago
  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.
ddoolin 12y ago
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 12y ago
  I'm curious about this as well.
maxack 12y ago
This looks great. Any plans to include a scss or less version?
- Kiro 12y ago
  How would a scss or less version work? What would the difference be?
  - bshimmin 12y ago
    I guess you'd have variables for things like the colours of the buttons.
Kiro 12y ago
> 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 12y ago
  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.
anu_gupta 12y ago
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.
kitd 12y ago
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.
- ahoge 12y ago
  You can do quite a bit with naming conventions. Classes are case sensitive. So, you can for example use uppercase camel case for your building blocks and lowercase camel case for the things they are made of. There are also dashes and underscores. I use underscores for "modifiers". That is, classes which modify the look of some building block. E.g. "Button" is the usual one and "Button _large" is a large one. Custom elements will hopefully help to make this kind of structure a bit more popular. Right now they still have a few rough edges though.
- insin 12y ago
  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/
rado 12y ago
Great! Nice to see optimisation on the web presented so beautifully. Greetings from the 9 KB framework http://natuive.net http://natuive.net
prottmann 12y ago
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 12y ago
  I totally agree. Been thinking about the best way to handle this and will have something in the near near future. Promise.
drapper 12y ago
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/
jafingi 12y ago
This looks really great! Will definitely use it for my next project. Have loved Skeleton 1.0, and this is just better. Thanks!
PSeitz 12y ago
I generally like this very much, but I don't think width:80% for container is suited for mobile.
misterjinx 12y ago
Talk about timing. Yesterday I was checking up on this to see if there is something new and today this shows up. Great!
jusuchin 12y ago
Used Skeleton as the backbone for a responsive self service portal; it was great to use and customize!
jypepin 12y ago
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!
jonathanstark 12y ago
Very, very nice. Kudos DHG!
ArtDev 12y ago
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"?
jameshk 12y ago
Thanks for making this. A really awesome and minimal way to build sites. This will be perfect for my next project.
JohnTHaller 12y ago
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 12y ago
  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 12y ago
    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.
deleted 12y ago
[deleted]
__beat 12y ago
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!
briguy33 12y ago
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

598 points by hit8run 12y ago

oneeyedpigeon 12y ago

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

dhgamache 12y ago
Cheers man.

bichiliad 12y ago

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

dhgamache 12y ago
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 12y ago
  As one of those half million people, thank you! I used it in my blog.

hit8run 12y ago

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.

dhgamache 12y ago

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

Pewqazz 12y ago
Thanks for continuing development on Skeleton! My current blog design is largely based on Skeleton 1.x, but it looks like I'll be updating it this week.
- dhgamache 12y ago
  Rad man - So, it should ALMOST be a straight drag and drop replacement of the normalize/skeleton.css for the old grid/layout/reset.css, but if you were doing nested columns that's gonna get you. Please let know how it goes – hi@getskeleton.com
mirthquakes 12y ago
Just wanted to say thanks for making this. Skeleton introduced me to the basics of responsive design and my company now uses it in several applications.
- dhgamache 12y ago
  So glad to hear it man. That's why I built it :)
oacgnol 12y ago
Thank you so much for the hard work. I've been using Skeleton for a personal project even though it hadn't been updated in over 2 years. As a (mostly) backend developer, Skeleton has proven to be the best possible starting point for me to learn on; there's nothing tricky about it. This is a very nice early Christmas present!
- dhgamache 12y ago
  Cheers <3
heyts 12y ago
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).

Lord_Zero 12y ago

Glad to see it back. So simple and clean.

dhgamache 12y ago
https://www.youtube.com/watch?v=-JfEJq56IwI https://www.youtube.com/watch?v=-JfEJq56IwI

maaaats 12y ago

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 12y ago
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.
delluminatus 12y ago
I'm not the author, but there are no hover classes for tables or alternating rows, as seen in the source, which is very readable [0]. Also, each additional level of list-nesting requires additional CSS, so it's actually impossible to support arbitrarily nested lists as seen in most word processors. [0] https://github.com/dhg/Skeleton/blob/master/css/skeleton.css https://github.com/dhg/Skeleton/blob/master/css/skeleton.css
charlesdenault 12y ago
It's hundreds of requests like this that create bloated UI frameworks!

html5web 12y ago

Awesome!

at-fates-hands 12y ago

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 12y ago
:) 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.

yesimahuman 12y ago

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!

roderick3427 12y ago

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

dhgamache 12y ago
<3

jordanlev 12y ago

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!

Chris_Newton 12y ago
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. There’s more than that specific viewport option, but often this kind of technique is an attempt to defeat mobile browsers that rescale your site when you rotate between portrait and landscape orientations. If the site is designed to adapt gracefully to different screens using media queries, then what you probably want instead is for the browser to just reflow the layout according to the new page width. In practice, many sites don’t adapt using media queries, and so popular mobile browsers may adjust the zoom level instead. That means whatever you could see horizontally before the orientation change is still what you can see afterwards but bigger/smaller. One way to force the adaptive behaviour is to use the viewport settings so the zooming isn’t allowed. However, that also interferes with deliberate zooming by the user. Sometimes you see all kinds of complicated workarounds for that, such as detecting an orientation change and temporarily blocking zooming, or detecting an attempt to zoom and then disabling the restriction temporarily so if the user repeatedly tries to pinch-zoom then subsequent ones work. Sadly, a lot of developers just copy-paste the viewport hack without realising the full implications, and that is when we see problems for users who really do want to zoom in. None of this is ideal, but as far as I know we still don’t have a reliable, standardised way for sites to specify how orientation change should be treated for best results, so for now viewport hackery seems to be the best known workaround.

armandososa 12y ago

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 12y ago
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.
pwenzel 12y ago
Came here to say the same! Inclusion in Bower and cdnjs.com would be stellar. It would also likely result in wider adoption. @dhgamache Thanks for making Skeleton. I use frequently rely on Zurb Foundation, but this looks like a compelling alternative for many of my use cases.

calebm 12y ago

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

dhgamache 12y ago
I wrote it totally by accident then got a dumb smile and was like...feels right.
- pbhjpbhj 12y ago
  Presumed the name came via "bare bones CSS framework"?

arenaninja 12y ago

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

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

gamesurgeon 12y ago

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!

dhgamache 12y ago
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!
AlwaysBCoding 12y ago
Semantic UI is really good as well. http://semantic-ui.com/ http://semantic-ui.com/
- necrodawg 12y ago
  Semantic UI is ~0.5MB minified while Skeleton is ~20KB.
- pikzen 12y ago
  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 12y ago
    However, Semantic.gs is pretty good. Minimal and much more semantic.

scottcanoni 12y ago

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

jonathantm 12y ago
> "The max width can be changed with one line of CSS and all columns will resize accordingly."
cag_ii 12y ago
You can easily change this to whatever you like using .container max-width
armandososa 12y ago
I think this is the reason: http://www.cameronmoll.com/archives/2006/12/gridding_the_960/ http://www.cameronmoll.com/archives/2006/12/gridding_the_960.... 960px was the "standard" for so much time (before RWD was a thing) that I still use it as the default width when designing new stuff. Maybe this is a bow to the old masters of our craft.

emehrkay 12y ago

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 12y ago
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.

razfar 12y ago

This is great!

jamesdelaneyie 12y ago

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 12y ago
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 :)

deleted 12y ago

[deleted]

haberman 12y ago

Seems to be in the same market as Pure: http://purecss.io/ http://purecss.io/ Would love to see a compare/contrast.

redgc 12y ago
I second the request for a Pure comparison
MikeTV 12y ago
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.

ddoolin 12y ago

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 12y ago
I'm curious about this as well.

maxack 12y ago

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

Kiro 12y ago
How would a scss or less version work? What would the difference be?
- bshimmin 12y ago
  I guess you'd have variables for things like the colours of the buttons.

Kiro 12y ago

> 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 12y ago
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.

anu_gupta 12y ago

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.

kitd 12y ago

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.

ahoge 12y ago
You can do quite a bit with naming conventions. Classes are case sensitive. So, you can for example use uppercase camel case for your building blocks and lowercase camel case for the things they are made of. There are also dashes and underscores. I use underscores for "modifiers". That is, classes which modify the look of some building block. E.g. "Button" is the usual one and "Button _large" is a large one. Custom elements will hopefully help to make this kind of structure a bit more popular. Right now they still have a few rough edges though.
insin 12y ago
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/

rado 12y ago

Great! Nice to see optimisation on the web presented so beautifully. Greetings from the 9 KB framework http://natuive.net http://natuive.net

prottmann 12y ago

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 12y ago
I totally agree. Been thinking about the best way to handle this and will have something in the near near future. Promise.

drapper 12y ago

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/

jafingi 12y ago

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

PSeitz 12y ago

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

misterjinx 12y ago

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

jusuchin 12y ago

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

jypepin 12y ago

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!

jonathanstark 12y ago

Very, very nice. Kudos DHG!

ArtDev 12y ago

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"?

jameshk 12y ago

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

JohnTHaller 12y ago

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 12y ago
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 12y ago
  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.

deleted 12y ago

[deleted]

__beat 12y ago

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!

briguy33 12y ago

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