css management for responsive

cretaceous

Anyone found the css pre-processors like less and sass useful with responsive css?

Dealing with media query styles gets messy and a pita.
Even a site without Wordpress css bloat can get hard to manage when building.
Any tips?

Derokorian

Yeah, I just use [url=http://get bootstrap.com]bootstrap[/url] as they've done all the responsive work for me. I find it super easy to use as well.

cretaceous

thanks.. I've studiously ignored that so far - more new things to learn!

Bonesnap

I use LESS quite a bit and most of our new sites are responsive in some manner.

What I love about LESS is a I can break down my CSS into individual files and then import/combine them and produce the final CSS file. Now I don't have to deal with a 2000+ line CSS file every time I want to make a small change. Going back and updating old projects that only use CSS and don't use LESS is so painful. Even just the ability to do single line comments is a godsend. Seriously, of all the languages that should have single line comments, CSS should be the one. But it doesn't. So frustrating.

Anyway, for example I'll always have a navigation.less file that contains only the styling for the navigation. This file also contains any media queries related to the menu.

I use a master.less file that imports all my other files and then just link to my master.css file in my HTML. Here's an example master.less file that I have in projects:

//Sizes
@container-width:       1250px;
@header-height:         137px;
@footer-height:         398px;

//Mobile Sizes
@desktop:               1250px;
@tablet-landscape-max:  (@desktop - 1px); // 1249
@tablet-landscape-min:  (@tablet-landscape-max - 225px); // 1024
@tablet-portrait-max:   (@tablet-landscape-min - 1px); //1023
@tablet-portrait-min:   (@tablet-portrait-max - 223px); //800
@mobile-large-max:      (@tablet-portrait-min - 1px); //799
@mobile-large-min:      (@mobile-large-max - 159px); //640
@mobile-small-max:      (@mobile-large-min - 1px); // 639
@mobile-small-min:      (@mobile-small-max - 159px); //480
@mobile-tiny:           (@mobile-small-min - 1px); //479 or smaller

//Colours
@light-grey:            #B4B4B4;
@light-grey2:           #bdbebf;
@light-grey3:           #D7D7D7;
@grey:                  #5a5a5a;
@dark-grey:             #4A4A4A;

@green:                 #61bc46;
@green2:                #3eb51b;
@green3:                #40a123;

@orange:                #fdbf3b;

@red:                   #FF0000;

@yellow:                #FFDE16;

@error-background:		#F9E0E0;
@error-border:          #D60000;
@success-background:	#D9EFD4;
@success-border:	    #1D7509;

@white:                 #FFFFFF;
@black:                 #000000;

//Fonts
@content-font:          'Lato', sans-serif;
@heading-font:          'Roboto Slab', serif;

//Miscellaneous

//Bring it all together
@import 'reset.less';
@import 'mixins.less';
@import 'global.less';
@import 'header.less';
@import 'footer.less';
@import 'sticky-footer.less';
@import 'navigation.less';
@import 'image-rotator.less';
@import 'home.less';
@import 'content.less';
@import 'posts.less';
@import 'galleries.less';
@import 'forms.less';
@import 'events.less';
@import 'reviews.less';
@import 'calendar.less';

We have used Bootstrap in the past but found it to be too restrictive so we just do our own responsive queries.

cretaceous

Ok LESS looks handy..
On my roll my own sites I can never decide if a file for each breakpoint size is better or a single file with everything in one place.. answer : they're both horrible.

Have you noticed min width /max width logic lacks control?
[I don't mean media queries.. I mean divs and what not]
Max width always takes priority, apart from some situations where min width takes priority - we should be able to specify which has priority on any rule.
I hate the css side of web sites!

Bonesnap

Yeah, LESS is very handy. What are you using as a compiler? I'm currently using Prepros, but have found it to be a little buggy if it's been open all day. It's free, but there's a popup that comes up every 30 minutes which can be very annoying (unless you pay for it). A coworker and I split the cost so I only paid $15 for it. I have used Koala (which is also free) in the past, but it's not updated a lot and it's using a very old version of the compiler. It gives you the option to specify your own compiler, but then you have to fiddle around with installing LESS on your system and I found it was much more trouble than it was worth, which is why I switched to Prepros. These applications will also minify your JavaScript as well, which I have begun doing.

Looking back at some projects we don't really use min/max widths. The designs are done in such a way that usually elements like divs will either be 100% width or something specific. My understanding though is min/max width always has precedence over just plain width. There really shouldn't be any conflicts between min and max since that's sort of a paradox. It's like saying a number must be greater than five while also being less than 3. Which one actually takes priority probably depends on the order they're defined in your stylesheet. I personally like to list my rules alphabetically, so max-width always comes before min-width for me.

When we first started doing responsive websites we had a different stylesheet for each size, but really that just creates additional HTTP requests and slows down page load. I still liked the idea of breaking up the code but there was no way to accomplish it (until I was introduced to LESS). Do what you think is logical.

Bonesnap

I was looking up something separately and stumbled upon this:

CSS Tricks wrote:
The min-height property always overrides both height and max-height.

CSS Tricks on min-height

CSS Tricks wrote:
The max-width property overrides the width property, but min-width will always override max-width whether followed before or after width in your declaration.

CSS Tricks on max-width

Good to know!