Responsive frameworks and their different behaviours

Absolute · 2013-06-21 21:17:07

Hello everyone,

This is a strange one that has been puzzling me for a while.
I use two CSS responsive frameworks. Skeleton and Bootstrap

I use Skeleton for smaller sites and wireframes, Bootstrap is my tool for larger projects.

Both of these frameworks present me with an editable CSS file which outlines the various media queries each supports. Here is that section of code on Skeleton:

@media only screen and (max-width: 959px) {}
@media only screen and (min-width: 768px) and (max-width: 959px) {}
@media only screen and (max-width: 767px) {}
@media only screen and (min-width: 480px) and (max-width: 767px) {}
@media only screen and (max-width: 479px) {}

and here it is for Bootstrap:

@media (min-width: 1200px) { ... }
@media (min-width: 768px) and (max-width: 979px) { ... }
@media (max-width: 767px) { ... }
@media (max-width: 480px) { ... }

Both are similar however there is a rather significant different when it comes to adding my styles. With Bootstrap, the styles I add in one media query are seemingly inherited by the media queries that follow it, for example any style change that occurs in the “max-width: 767px” breakpoint are also present in the “max-width: 480px” breakpoint.

The same is not true for Skeleton however. In Skeleton if I make a style change to a div in “max-width: 767px” breakpoint, the style is then reverted to the default when the browser size no longer matches that query. It is as if Skeleton doesnt cascade its CSS? Subsequently, for Skeleton I’m finding that I have to duplicate my code for each media query and I’m sure that’s not right.

If someone can shine any light on this subject that would be great.
Thanks!

Last edited by Absolute (2013-06-21 21:20:34)

maniqui · 2013-06-22 00:15:04

Hi Absolute,

it seems Bootstrap uses overlapping media queries while Skeleton uses stacked media queries.
You may want to read about them here:
zomigi.com/blog/essential-considerations-for-crafting-quality-media-queries/#mq-overlap-stack

Absolute · 2013-06-22 07:28:44

Fantastic! Thank you so much maniqui.

Phil_ · 2013-09-16 09:47:42

Hi Absolute,

I’m currently trying to make the decision on which of these two frameworks to learn/use.

I’ve seen comments by a few people that they use Skeleton for smaller projects and Bootstrap for larger ones. I was wondering what is the issue with Skeleton that makes you decide to switch to Bootstrap for larger projects. Or is it the fact that Bootstrap is more bloated than Skeleton and you’ll only switch over when the benefits provided by Bootstrap outweigh the disadvantages.

I’d value your insight.

Thanks

Phil

philwareham · 2013-09-16 10:57:12

Hello Phil,

If talking about site builds for clients, the decision really depends on the cost of the site. If you have a limited budget sometimes it’s easier to use something like the stock Bootstrap to knock something up quickly, though of course the further you stray from Bootstrap’s design the more work is involved (and any customisations would be tricker to maintain if you wanted to stay up-to-date with Bootstrap releases).

Skeleton on the other hand provides only basic building blocks which you can then build upon. Personally I prefer that way of working but means more work in the short term, which maybe the site budgets won’t allow.

Or you can build your own framework over time, like I’ve done, in which you can lift the best bits of other frameworks and leave the bloat out. This is the best solution IMHO.

There are hundreds of frameworks already out there on GitHub, so try a few of them out.

tye · 2013-09-16 22:09:12

I’ve been looking at uikit which looks pretty good at first glance, but I haven’t used it in production yet.

It was this comparison table which made me look at it cos I agree with Phil…. there is a whole lot of bloat in some of these frameworks, although in some you don’t have to use it all

maniqui · 2013-09-17 03:07:19

Nice one, Tye! Really liked it.

mrdale · 2013-09-17 17:16:46

mmm… uikit good. Just the right amount of built in functions without forcing a lot of junk on you.

Last edited by mrdale (2013-09-17 17:26:51)

bici · 2013-09-17 20:38:03

I have used Phil’s HIVE Framework on two sites now. love it.

But for the third I’ll have to learn to style it / theme it differently ;-)

mrdale · 2013-09-19 16:35:29

Yeah, I really like phil’s frameworks too. The trick for me has been to figure out what to use/not. So in order to learn, I’ve been loading the hive front side theme and adapting it.

The problem with learning all this responsive stuff is that I end up inadvertently destroying some intentionally good, mobile based stuff when I bend it visually.

One of these days it’ll click.

Textpattern CMS

Textpattern CMS support forum

#1 2013-06-21 21:17:07

Responsive frameworks and their different behaviours

#2 2013-06-22 00:15:04

Re: Responsive frameworks and their different behaviours

#3 2013-06-22 07:28:44

Re: Responsive frameworks and their different behaviours

#4 2013-09-16 09:47:42

Re: Responsive frameworks and their different behaviours

#5 2013-09-16 10:57:12

Re: Responsive frameworks and their different behaviours

#6 2013-09-16 22:09:12

Re: Responsive frameworks and their different behaviours

#7 2013-09-17 03:07:19

Re: Responsive frameworks and their different behaviours

#8 2013-09-17 17:16:46

Re: Responsive frameworks and their different behaviours

#9 2013-09-17 20:38:03

Re: Responsive frameworks and their different behaviours

#10 2013-09-19 16:35:29

Re: Responsive frameworks and their different behaviours

Board footer