Micro Responsive Grid - a tiny little fluid grid | Hacker News Reader

Micro Responsive Grid - a tiny little fluid grid

roybarber.com

45 pointsroybarberuk31 comments

I'm not a designer, and have limited experience (Bootstrap, 960, Bourbon, etc) with (S){C,A}SS frameworks/libraries, so maybe I'm just being ignorant.

Can someone explain to me why there are so many grid frameworks? There appear to be quite a limited number of features, being responsive, dynamic grid sizes maybe? So what's the reason for so many designers 'rolling their own' 'handmade' 'little, tiny, light, nimble and small' grid frameworks?

I'm sure there is a reason for it, but from the perspective of an outsider (sort of), it looks like there is an excessive number of options.

NIH

I didn't want to assume this, but it certainly looks like it.

For the less-abbreviation-wise NIH -> "Not Invented Here"

"is the philosophy of social, corporate, or institutional cultures that avoid using or buying already existing products, research, standards, or knowledge because of their external origins and costs." - http://en.wikipedia.org/wiki/Not_invented_here

Why are there so many MVC frameworks out there and so many redundant jQuery Plugins, doing all the same ( but in a different fashion )? I think the answer is simple : People learn and explore by doing such things.

Because why not? CSS is not like C code, speed or efficiency is really not that important here, reliability is. If it works you can use it or not. We're talking about shaving a few K at most off your file as the main benefit or maybe some minor compatibility improvements. These are important in some cases and unimportant in others. CSS solutions often are not one size fits all. Also it's important to know how these things work and I would posit it's probably easier to write one than to decipher someone else's code that may or may not have had the same goals as you.

Beginners are going to use whatever they always use, which is the thing that comes default or is the most popular. It's also a nice way to pad your Github for job apps.

Because people enjoy making things.

Your question makes it sound like there's a central planning authority on the state of CSS frameworks.

Of course there is no central planning authority, but there is a 'market' of sorts, that seems to have become saturated with many things that do the same thing.

CSS grids seem to fall into that large category of "things software developers" love to make.

Cf. blog engines, URL shorteners, IRC bots, testing frameworks, pretty printers. The list goes on and on.

Good point, among certain communities, testing frameworks is a very good example!

I actually agree with you on this one. My only thought on it (from my perspective as a front-end developer) is with all these "do-everything" frameworks, I think I'm more interested in seeing a more minimalistic approach to these frameworks. I've used Bootstrap and found it often times to be incredibly bloated. I think people just want to able to do more with less.

Also, as developers, it's pretty natural if you can't find something (be it a tool, framework, plugin, etc) that you like to use, there's a feeling you can build something better yourself.

That actual page isn't using it, is it? Is there a demo up somewhere? I had to clone it to take a look.

Nice and simple - it's hard to judge behaviour without seeing a bit of content or blocks, or something. Suggest you add a little more to the example (eg http://960.gs/demo.html).

It's good to have light example like this to work from. I find things like bootstrap to be completely unapproachable. I spend so much time looking through their src to get slightly non-standard behaviours that it's almost always easier to write my own.

sure, ill work on a micro demo, this was literally written two hours ago in a hour!

If you spend 1 hour to code something, and deem it worthy of HN, fine. The users here can decide whether or not it is good.

Now, if you code something that is itself implied to be a demo... and it isn't, because you haven't had the time? It's a bit misleading, and maybe even disingenuous.

I wish I had enough karma to downvote the post (as it is now).

edit: So, all in all, it's nice work. But keep in mind you are linking to a page that does not demo it (convention for these things is that it does), or mention that it uses a different grid layout framework. Also, the demo provided doesn't seem to work in Opera 12.11 1661.

Thanks for your feedback

Really nice. I would recommend not animating font-size transitions when resizing. Eye candy can distract the viewer and detract from your message. For a design portfolio it may be more impressive, but for most use cases, I feel it would work better if resizing was instant.

Are you referring to my website, as the micro grid has no animations?

Some kind of animation happens when you resize the window for the main site.

A preview of the demo in the repo:

http://htmlpreview.github.com/?https://github.com/roybarber/...

What am I missing? It's just a grid of numbers, it's not responsive at all.

It's wrapped in a 960px container for some reason, I had to take it off to see if it was working and not just being nudged by a media query. Having background colors on the elements would really help visualize what's going on.

using the above preview url makes it buggy, for a true preview its best to download the zip and open up the index.html file

Look's interesting - could you pop a demo link up to go alongside the article or readme?

sure, it's that tiny the demo link would literally show a lot of colored boxes!

but that would be fine to show and much easier than having to download the example and host it somewhere to view on a phone!

see the comment above by ajanuary for a preview

Are you sure the example is properly written because it looks completely broken to me in Opera.

Everything is displayed in 1 column along the left.

Working fine for me in opera mobile (ios6) and opera desktop osx 10.7 and windows 7, its designed to be 1 column on mobile, expand to 2 column at 480px and then 3/4 column at 720px. So if your on mobile what your seeing is correct.

@roy,

I'm using Windows 7 with the latest stable build on a 1600x1200 desktop display.

Here's what it looks like in Opera: http://i.imgur.com/yUcVqeN.jpg

In chrome it looks much different, it's aligned in the center with multi columns which I assume is the proper look.

seems if you use the live preview as suggested above its not rendering the media queries. If you download the zip and open up the index.html file its working fine. Must be a error with their preview engine. Here's a screenshot locally on opera 12.12: http://i.imgur.com/RgIraby.png

a nice framework and a great site, good job!

Reply on news.ycombinator.com