This is @dhg (creator of Skeleton)and just wanted to say I was pumped to see it on Hacker News. All feedback is well received and I'm actually in the process of releasing an update that will remedy the text-resize issue when font-size is bumped up or down, along with some other small bug fixes.
In terms of fluid vs. fixed I chose to have a set number of fixed resolutions because it allows for a bit more control at those sizes and has a set of associated media query sizes . It also allows for a nested grid which is not really achievable with a fluid grid.
Thanks for the feedback again everyone. I just started a new job that is keeping me busy (in an awesome way), but am going to try to get out an update next weekend.
I don't like it too much. It's still based on designing for desktop first.
I prefer the ones that use a mobile first approach, which is more future-proof and is supported on more devices.
Also, another thing to consider is fluid-width vs fixed-width. Fluid width layouts are harder, but much more future proof. The mobile device landscape changes fast, and there are lots of sizes to design for. A fluid-width website would be much better in this case.
Some of these are Gridless[1], HTML5 Boilerplate[2] and 320 and Up[3].
I know that you already have HTML5 Boilerplate linked, but it should be noted that there's a separate boilerplate page for mobile (http://html5boilerplate.com/mobile/).
Getskeleton. It's not Mobile First, it's not Fluid, and it messes with the default styling for things like buttons and forms. jQuery tabs and button colouring are very unnecessary to serve up as a base. Getting work done with it's grid system was an actual pleasure though. All you have to say is I want this to be class="five columns" to get things going as these things are pre-defined for you.
320andup takes the best parts from Boilerplate, Mobile Boilerplate as well as the Less Framework for it's grid design and typography. It's fluid and mobile first. To get going with it's grid system however, is actually a pain as it's not pre-defined for you. You'll have to perform some calculations for each media query to get a proper grid going.
How should one solve the menu issue for mobile devices? When the device is mobile, the menu on the left disappears with Skeleton. If one displays the menu, the user has to face it for every page.
Take a look at http://isit2013.org/ to see what I'm talking about, a page I made last year (it uses media queries, but not Skeleton). I'm open to any ideas on improving this site.
I've used this a number of times already and it's made rapid deployment of pages a breeze. It's used on my little sandbox site, Rawr: http://rawr.mschade.me/
@dhg (the creator) seems quite nice and responsive to people tweeting him about it as well, which is a definite plus.
I would prefer a fluid grid. The fixed grid of Skeleton even overflows at certain device widths. I featured it on http://mediaqueri.es/ske/ a few months ago.
I despise frameworks like this. They cater to a crowd that I don't believe exists. Who goes and wants to just toss together a mobile-friendly site but doesn't have the skill set to do it without a framework like this? The huge companies that do this rather write their own and the little guys generally have hackers who can write something more efficient. The simplicity of HTML and CSS make frameworks for it seem rather silly.
Edit: That is, of course, unless it's something like YAML or SASS or LESS which completely redefine how to write the code.
You're coming from a context of businesses and startups, but perhaps it's most useful to solo developers.
Isn't the appeal that Skeleton and its ilk simply do the pixel-figuring for you? I similarly have the skillset to make a CSS grid, but I chose to wrap Nicole Sullivan's 20-line grid code in a gem just so I can brainlessly include grid functionality without even touching a CSS file.
It's projects like these that help expose people like me to bare-bones implementations upon which to build.
I actually just used this as the base for a project I'm working on. It is nice just to have a starting point design-wise so I don't get caught up wasting time styling when my strong suit is coding.
Nitpick: the text size on the button is smaller than the default text size. I find this on a lot of CSS frameworks and think it's wrong, it's an action, should be at least the same as the default text size, if not bigger.
I'm not sure what you mean by "scaling". Just because it uses a media query to serve a different style based on the screen size doesn't mean it "scales well".
In particular, this reacts quite badly to zooming, either in a desktop browser (chrome/linux): http://imgur.com/r1z9W or in a mobile browser (android): http://imgur.com/7aP39 .
In the desktop case, the font size doesn't change even if I zoom in the entire page. This isn't the default behavior, so the author must have gone to some lengths to break this functionality. I'm sure s/he had reasons for doing that, but I'm not sure what they were.
In the mobile case, zooming is constrained to a very limited range, and even when allowed, the text doesn't reflow, so it's hard to read lines because of all of the horizontal scrolling required. This behavior is quite common for fixed width, "grid" layouts.
In general, I'm all for frameworks that solve common layout problems, but this particular framework seems to have gotten the basics wrong. I would recommend against using it as it stands.
Thanks for the explanation. I don't own a smartphone or have experience with media queries, so this was one of my first times seeing media queries in action and I'm easily impressed.
By "love the scaling", I guess I meant "I love media queries."
That's a really good analysis of the current limitations of this framework. I'm wondering whether you happened to send this criticism to Skeleton's creator to see if it's something he's aware of, or something that he intends to improve.
It's really great to see open-source resources like this emerging all the time, as opposed to the likes of Flash. CSS, HTML5, and JS were all pushed pretty hard at a mobile hackathon I went to today.
This is @dhg (creator of Skeleton)and just wanted to say I was pumped to see it on Hacker News. All feedback is well received and I'm actually in the process of releasing an update that will remedy the text-resize issue when font-size is bumped up or down, along with some other small bug fixes.
In terms of fluid vs. fixed I chose to have a set number of fixed resolutions because it allows for a bit more control at those sizes and has a set of associated media query sizes . It also allows for a nested grid which is not really achievable with a fluid grid.
Thanks for the feedback again everyone. I just started a new job that is keeping me busy (in an awesome way), but am going to try to get out an update next weekend.
Cheers!