Basic set up for a responsive site

[sjoerdth]

Hi everybody :)

I’ve made multiple responsive websites and everytime I ran into the same problem: I treated the desktop version as a base for all versions. (Which I admit is a bit stupid, but sometimes you’re just lazy ;) ) Meaning CSS can get a bit nasty and a lot messy because a lot of times I would have to overwrite styles instead of assigning them. For instance: a

<

div> has a width of 30% on the desktop version, but a 100% width on the mobile version. So the mobile version has 2 widths and the 30% gets overwritten by the 100%. Ugly stuff.

I tried to find some articles on how other people deal with this, but the only thing I could find were articles about responsive grids. So I’m probably not using the correct search terms.

The best pattern I’ve come up with myself is using a responsive modifier for my classes like so: Base css file: .basic-class-name{color:red;background:blue} Desktop css file .basic-class-name–responsive{width:30%} Mobile css file .basic-class-name–responsive{width:100%}

Any tips or links to some aticles regarding this matter would be greatly appriciated!

[Paulie_D]

Are you using media queries at all?

[sjoerdth]

Yes, I’m guessing you are asking this question because I could just assign different styles in my example using .basic-class-name. But I thought using a modifier might be nicer because it would make the css files more transparent, although thinking about it it would just result in css files with classnames which would all have the modifier…

Maybe I’m overthinking it all.

[Author]

Posts