

Skeleton: A Beautiful Boilerplate for Responsive, Mobile-Friendly Development - wslh
http://www.getskeleton.com/

======
thatcoolguy
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/>

~~~
ineedtosleep
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/>).

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

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

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

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

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

~~~
danneu
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.

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

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

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

~~~
dlazar
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.

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

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

------
poissonpie
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

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

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

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

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

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

------
SkyMarshal
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>

------
reidrac
So <http://www.getskeleton.com/> or <http://html5boilerplate.com/> ?

Fight!

------
jjm
How does it compare to Less? <http://lessframework.com/>

~~~
naeem
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

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

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

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

