aekaplan / grid Goto Github PK

Site seems to be stuck in 'mobile first' mode (a tiny single column in the centre of the page).

Not tested with other browsers.

Should really use first-of-type selector on the first .column instead of first-child. The former is safer. For eg., if there's another element before the first column that is not a column, it will not get themargin-left: 0` property.

Using .row { overflow: hidden; } in the grid system will partially hide elements that need to stand out of the containers such as custom tooltips or dropdowns (basically elements that need absolute positioning within relative to elements inside the container). Since .clearfix is doing exactly the same thing without the drawback metioned, I think the overflow: hidden could be removed.

See http://fvsch.com/code/bugs/rem-mediaquery/ for details

The grid was simple and easy to start with mobile first approach but doesn't seems to be working from screen tablet 600px to below iphone. The whole grid looks single on starting from screen-size of 600px and below.

But in real world situation we want our site to look uniform and responsive at-least to the screen size of tablet. If i am wrong, let me know the best way to do this.

Hi,
This is a really fantastic incredible wonderful explanation. Will be very useful when teaching to students. Thank you!

I see that you mention that clearfix needs to be applied to rows, but in the markup the clearfix class is not there... is this an oversight or am I not understanding how it all works?

With images and normalize.css. Were you planning to do so? would be helpful.

http://imgur.com/a/OWyOQ

Hi Adam!

First, I would to congratulate you about the GRID tutorial! This is amazing! Thank you so much!

I want to adapt it to evangelize Jade and Stylus...

You allow me to do it? And in a second moment, I want to translate that material too.

Thanks in advance!

I am planning on using your grid for responsive site and I have noticed that when I resize the window in Safari 8.02 there is a flickering of the formatting. It occurs from 640px to 755px then stabilizes and begins again at 1150px to 1240px. I've tried to do some troubleshooting but I've been unable to remedy it. It does not happen with Firefox or Chrome.

Any input you have would be very much appreciated. Thanks for putting together the tutorial to jumpstart responsive design.

--- I isolated the issue. It seemed to be related to the use of percentages to calculate the fonts
@media (min-width: 40rem) {
html { font-size: 112%; }
}

@media (min-width: 64rem) {
html { font-size: 120%; }
}
When I removed this bid of code the problem disappeared.

Why not set it to 25%?

Btw, thanks for making this! It's really helpful.

Hi,
I'm all about mobile first... but for my purposes (mostly teaching others who aren't too familiar with html/css yet) I found the older version (non-mobile-first) to be a bit cleaer. Do you by any chance have the old version of the site archived somewhere (including the linked assets and images)? I can get the old version of the html and css file via this github repo, but it doesn't contain the images etc. (and I couldn't find them available at the linked addresses either).

Thanks for all the great work you're doing here. I think the mobile first site is great too, and possibly better for your target audience -- just liked the old one too :)

Hi there!

Using clear or clearfix as float containment rule name is not really todays best practice.
http://colinaarts.com/articles/float-containment/
http://css-tricks.com/snippets/css/clear-fix/
"group" class name is nicer and more semantic (via Dan Cederholm). Content property doesn't even need the space, can be empty string (via Nicolas Gallagher). Without any text, font-size is un-needed (Chris Coyier).

Besides, you could actually implement the clearfix in the .grid
Maybe take a look on this example https://github.com/MartinMuzatko/WebKick/blob/framework/css/layout.css

Please let me know if this is either accurate or not.