4 ms·

Micro Responsive Grid - a tiny little fluid grid

45 points by roybarberuk 14y ago

griffindy 14y ago
a nice framework and a great site, good job!
grahamjl 14y ago
Look's interesting - could you pop a demo link up to go alongside the article or readme?
- roybarberuk 14y ago
  sure, it's that tiny the demo link would literally show a lot of colored boxes!
  - grahamjl 14y ago
    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!
    - roybarberuk 14y ago
      see the comment above by ajanuary for a preview
      - rartichoke 14y ago
        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.
        roybarberuk 14y ago
        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.
        rartichoke 14y ago
        @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 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.
        roybarberuk 14y ago
        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 http://i.imgur.com/RgIraby.png
aidos 14y ago
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 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.
- roybarberuk 14y ago
  sure, ill work on a micro demo, this was literally written two hours ago in a hour!
  - okamiueru 14y ago
    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.
    - roybarberuk 14y ago
      Thanks for your feedback
ajanuary 14y ago
A preview of the demo in the repo: http://htmlpreview.github.com/?https://github.com/roybarber/micro-rwd-grid/blob/master/index.html http://htmlpreview.github.com/?https://github.com/roybarber/...
- VikingCoder 14y ago
  What am I missing? It's just a grid of numbers, it's not responsive at all.
  - mnicole 14y ago
    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.
    - roybarber 14y ago
      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
FreshCode 14y ago
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.
- roybarberuk 14y ago
  Are you referring to my website, as the micro grid has no animations?
  - swah 14y ago
    Some kind of animation happens when you resize the window for the main site.
danpalmer 14y ago
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.
- _ZeD_ 14y ago
  NIH
  - danpalmer 14y ago
    I didn't want to assume this, but it certainly looks like it.
  - jrnkntl 14y ago
    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 http://en.wikipedia.org/wiki/Not_invented_here
- n0mad01 14y ago
  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.
- homosaur 14y ago
  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.

45 points by roybarberuk 14y ago

griffindy 14y ago

a nice framework and a great site, good job!

grahamjl 14y ago

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

roybarberuk 14y ago
sure, it's that tiny the demo link would literally show a lot of colored boxes!
- grahamjl 14y ago
  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!
  - roybarberuk 14y ago
    see the comment above by ajanuary for a preview
    - rartichoke 14y ago
      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.
      - roybarberuk 14y ago
        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.
      - rartichoke 14y ago
        @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 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.
        roybarberuk 14y ago
        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 http://i.imgur.com/RgIraby.png

aidos 14y ago

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 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.

roybarberuk 14y ago
sure, ill work on a micro demo, this was literally written two hours ago in a hour!
- okamiueru 14y ago
  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.
  - roybarberuk 14y ago
    Thanks for your feedback

ajanuary 14y ago

A preview of the demo in the repo: http://htmlpreview.github.com/?https://github.com/roybarber/micro-rwd-grid/blob/master/index.html http://htmlpreview.github.com/?https://github.com/roybarber/...

VikingCoder 14y ago
What am I missing? It's just a grid of numbers, it's not responsive at all.
- mnicole 14y ago
  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.
  - roybarber 14y ago
    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

FreshCode 14y ago

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.

roybarberuk 14y ago
Are you referring to my website, as the micro grid has no animations?
- swah 14y ago
  Some kind of animation happens when you resize the window for the main site.

danpalmer 14y ago

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.

_ZeD_ 14y ago
NIH
- danpalmer 14y ago
  I didn't want to assume this, but it certainly looks like it.
- jrnkntl 14y ago
  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 http://en.wikipedia.org/wiki/Not_invented_here
n0mad01 14y ago
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.
homosaur 14y ago
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.