responsive css grids
- Started
- Last post
- 17 Responses
- hotroddy
what are some good responsive css grid frameworks?
I'm using http://classic.formstone.it/comp…
but wondering if there are better solutions
- wanda4
i'm making a css grid. it's not finished yet but still, shameless self-plug http://wnda.github.io/morag/
- hotroddy0
not sure if you can answer this.... but what are relative units and why would I apply instead?
- wanda9
yeah it's sharp but i'm pretty much going to have to embed a second, float-based grid system if I ever want to use it, since flex and calc() are not supported everywhere yet.
relative units are em and rem.
e.g. .some-class { font-size: 1em }they take the root font size as a root value and scale up and down in proportion to it, so in 90% of cases:
.5em = 8px, 1rem = 16px, 1.5em = 24px, etc.so what's the advantage?
consider the grid system and the spacing between blocks.
if the user changes their root browser text-size, a pixel-defined website's text will change in size, but the spacing between grid blocks will not.
if you use relative units to define the spacing between the blocks, in which case the spacing will increase proportionately to the increase in the font-size.
relative units also make sense in media queries for the same reason. because they scale proportionately relative to the browser text size, it means that media queries fire correctly when zoom conditions are changed. try zooming in on websites with px and em based media quieries. websites using em-based media queries will respond correctly while zooming in 500% on a px-based media query website will have... unfortunate results.
all that said, we are talking about edge cases. pixels will serve pretty well most of the time and I still use them for quickie projects, especially if I have to support an ancient browser, but generally I prefer to work with relative units because they make more sense to me.
rem is obviously the easiest to work with but I don't think it's supported in IE9--though I made this grid with the expressed purpose of appealing to modern browsers anyway so.
- dat col.
carry on...bklyndroobeki - Come on fuckers, upvote good replies!detritus
- You can use Rem in ie9 just be careful.
http://caniuse.com/#…voiceof
- dat col.
- mekk1
I also use my own grid with a few extras, such as a javascript that writes "desktop", "tablet", "mobile" and "horizontal/vertical" in the body class to adjust them later. I also extended a box that has a few basic setups for images, such as size (1by1, 16by9 etc).
It's pretty solid and all I need for basic boilerplates.
You can have a look at the CSS here:
http://pastebin.com/SKMsUfhVAnd this is my very basic body function:
http://pastebin.com/bRScgbpkI am starting with bootstrap and less (a bit late, I know) but the more I use it the less I understand those frameworks. They're massive bloat imho.
- looks good, horizontal/vertical behaviour is something I need to think about more. and I couldn't agree more about front-end frameworks.wanda
- Agree about the bloat. We have our own bare bones, internal framework and then customize beyond that with established conventions.ETM
- Still easy to pick up and maintain. Much more nimble and compact. Nothing there that isn't applicable to the site or app.ETM
- wanda4
I avoid front-end frameworks too. i've used bootstrap for some generic CRUD web applications, and on a few projects where it was already in place and more work to remove than it was to modify.
it is pretty heavy, and not necessarily in the way that would make you concerned about performance, but rather the way that makes you feel irritated because you're working with a set of components many of which you may never use. it's wasteful.
of course, you can customise it quite heavily from source, i.e. remove crap like glyphicons, jquery and so on, even when you download it i.e. if you don't have less/sass.
but then you're left with a right melon of a framework: opinionated but barebones.
i mean, the only reason to use an opinionated framework of any kind is if the opinion happens to align with your opinion, in which case you can save yourself some time and jump straight into using a set of tools/components. and if you don't want opinionated, you want to make your own decisions about how components and effects are made, so you opt for barebones (if you're lazy) or you roll your own tools.
I think bootstrap is used primarily by server-side developers who have little experience of manipulating the front-end and need something they can quickly spray over their app's html chassis.
i do however respect the bootstrap lads for v4 since they're rewriting all the jquery fluff in ES6, adopting a mobile-first approach and refactoring all of the CSS to improve the filesize. basically trying to follow the example of foundation, which I've no experience of, but apparently uses proportional units and is mobile-first.
I also respect them for developing something so popular and widely used.
as for preprocessors, i have basically never used Less. I have historically opted to avoid preprocessors because they sometimes generate bloated CSS--and when they don't, they still represent an extra level of complexity that has rarely proven particularly beneficial except when creating a color scheme--and there are other ways of doing that.
I find that, with manageable naming schemes and proper use of the cascading nature of cascading stylesheets, a lot of the perceived advantages of preprocessors can be replicated to an extent.
- This is a great post. and I agree almost entirely from my experience.
Thank god there is still the odd thing worth hanging around here for.fadein11 - +mekk
- you never used Sass either? variables and mixins are awesome!Milan
- 100% true! I work with CSS every day. Never loved SASS/LESS. The level of abstraction between myself and the code I write is tedious. The compliers are annoyingnocomply
- Does that mean we are old, or just proficient enough to not need these tools?ETM
- This is a great post. and I agree almost entirely from my experience.
- nb0
Susy, anyone?
- evilpeacock0
There are many great starting points for doing responsive web things here:
- Milan1
I usually use the Zurb Foundation grid:
http://foundation.zurb.com/sites…
- colin_s0
i use skeleton
it's not the most complex but for just a blog and a portfolio it's wonderful
- e-wo0
Having tried Bootstrap, Zurb, Skeleton, and a handful of others, I now opt for Base as a good balance of minimal + flexible:
http://getbase.org
- nb0
I used Dead Simple Grid once. It seems good.
- ETM0
*bump*
- mate built this https://github.com/T… its aweeesomerabbit
- highly recommend to check this out. its good.rabbit
- sausages0
If you use stylus, jeet is good. I think it may be a bit obsolete by now but it's nice to use and still does the job for me.
This is only for jobs I build from scratch though. I'm always messing about with front-end frameworks for other jobs and the bloat gets in the way
- ESKEMA2
I tend to write my own simple system that only accounts for what I need on the project. Every time I think maybe I should use Bootstrap or something I regret it, take it out and rewrite from scratch. I don't like frameworks because I need to work like they want instead of how I want, they had a ton of complexity that isn't needed. I think they're only good for application developers that need to streamline a very complex system and don't have a good front-end team/person. For more basic situations ( 90% of all websites ), they aren't needed and in my opinion should be avoided.
As for SASS/LESS, I don't use it simply because it's a pain to view what you're doing live, and viewing it live is crucial in my workflow. I use Atom for code but Espresso for everything CSS related because of it's powerful live previewing system that I can't find anywhere else.- Yep - I agree with this and nice to hear as it goes against the grain but in reality most sites do not need a framework.fadein11
- yep, a guy i work with is currently re building a UI demo i made (in about 3 hours) with bootstrap... he's been at it for 3 days and it still looks like shit.kingsteven
- i'm working really hard on something else (lalala farting about on qbn, staring angrily at my monitor)kingsteven
- ^ do you agree or disagree?fadein11
- i agree, these systems are daft and bloated and often the guidelines they set out are ignored.kingsteven
- ah yes thought so - but then I wasn't sure - thought you meant your guy could have done it quicker with a framework.fadein11
- oh aye, apologies... he's not even using any of the bootstrap UI. i have no idea why he's doing it and i don't want to know...kingsteven
- detritus0
Aside from Skeleton, which I've used quite a lot, I tend to agree with ESKEMA - especially where the likes of fucking Bootstrap is concerned - fuck that's a bloaty mess of unless you plough far too much effort into trimming it back again.
Laterally, I've had this bookmarked for a while..
And obviously there's native CSS Grid..
http://gridbyexample.com/example…
Using Grid or Flexbox Just depends upon how far back your browser support needs to go, I guess?
.
Disclaimer: I am not a full-time dev any more, at all.
- meffid0
ESKEMA LIVES.