Minimalist grids system 100% responsive

[GroovyMotion]

I’ve been working on my own version of a minimalist grids system. It’s 100% responsive and probably unsemantic because I define my columns in a different way. Instead of using the standard col-1 through 12 I use the percentage value: col-100 (100%), col-50 (50%) and so on.
The template includes a complete navbar and a footer.

Have a look, let me know your thoughts!

http://codepen.io/GroovyMotion/pen/dJnAx/

[GroovyMotion]

Yeah it all depends on how we work. I only use about four of them right now for my site and test layouts.

I have learned a lot about CSS in the past weeks by just working on test layouts :)

[__]

Also, (not a requirement, by any means, but) there’s a reason most grid systems use a 12-column design: 12 is divisible by 2, 3, and 4.

[GroovyMotion]

Yeah I understand, which is why my test is just one I shared…for me percentage is working right now :)

[__]

Yeah I understand, which is why my test is just one I shared…for me percentage is working right now :)

And there’s nothing wrong with that. But, as @jurotek explained, it is limiting, and it will probably cause you problems someday. If you’re interested is sharing it (which is great, no complaints!), then it becomes a limiting factor sooner rather than later. Even if you’re the only one who uses it, you’ll likely run into these limitations if you need to go back and modify or rebuild a particular layout in the future.

[GroovyMotion]

@jurotek, thanks for the valuable input!
I still have a lot to learn but I am getting there!
My latest test layout uses some of those techniques with the gutters and are quite responsive, here is one: http://groovymotion.com/index4.html

The code is ugly because it’s a CSS file that I use for several test layouts so it’s really not semantic.

[GroovyMotion]

@traq, good point! Like I just said in my previous message I am focusing on what is working for many of my tests, which is a column that controls the margins/borders and then inside I use columns that adds up to 100% with our good friend border-box! :)

[GroovyMotion]

@juroket I really like that brick wall! :)
Thanks for this, I will try it out in my design!

[GroovyMotion]

Yeah, I like using col-1, col-2 and side-1, side-2 type of convention.
What I am concentrationg now is eliminating classes at the detriment of having less styles but better semantic. Classes like .side-info, .details, .more and so on can be brought down to a single class. That way it’s easier to change and also for media-queries.

[Author]

Posts