Skeleton: A Beautiful Boilerplate for Responsive, Mobile-Friendly Development | Hacker News Reader

Skeleton: A Beautiful Boilerplate for Responsive, Mobile-Friendly Development

getskeleton.com

271 pointswslh32 comments

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].

[1]: http://thatcoolguy.github.com/gridless-boilerplate/

[2]: http://html5boilerplate.com/

[3]: http://stuffandnonsense.co.uk/projects/320andup/

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.

Hey All,

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!

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.

What about developers who just want to speed up the process a little and enjoy a bit more organization?

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.

Love the scaling. Especially how the grid becomes stacked at mobile-width.

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.

Agreed. The framework looks fantastic but that is definitely a deal breaker. Zooming in on the web to see text larger is such a huge use-case.

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.

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

Looks like Dave Gamache pushed an update to address zooming.

https://twitter.com/#!/dhg/statuses/92687926823092224

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.

Looks neat thanks. I tried Less Framework a while back and for some reason, just didn't quite get on with it...so it's nice to have an alternative

How does it compare with Less Framework(http://lessframework.com/) ?

I'm giving my personal recommendation for this. It's cut my front-end development times extensively.

Am in the process of planning a redesign of a site, looking forward to working with this.

Can definitely see myself using this with jQuery Mobile. Thanks.

But that makes no sense? jQuery Mobile already does responsive layouts?

Skeleton first got my attention a few weeks ago when I noticed Paul Irish had forked it to his Github account.

https://github.com/paulirish/Skeleton

So http://www.getskeleton.com/ or http://html5boilerplate.com/ ?

Fight!

How does it compare to Less? http://lessframework.com/

Can't speak for anyone else, but I've found it easier to integrate with my pre-existing layout.

EDIT: I was referring to Skeleton, btw

I like what I see here. Will try to use it in my next project.

Been using this a lot lately, really love it thanks @dhg

Very cool. I'm just sad that it is limited to 960px :/.

Reply on news.ycombinator.com