Zurb Foundation Grid - CSS Grids Series (responsive grid)

The second installment in the DevTips CSS Grids Series, where we build the same layout by each one of the grids. One by one.

In this series we look at Zurb Foundation.

---

DevTips is a YouTube show about web design and development.

"HTML5 Basics" Playlist:

"CSS Basics" Playlist:

"How to build a professional website from start to finish" Playlist:

----

Follow the DevTips GitHub Page to get all the codez:

DevTips now has a twitter account:

Travis also tweets:

[sergioc.p.]

Hi Travis!! For the 5 cols in the footer what I usually do in bootstrap is 7 columns. The first and the last are empty columns with col-md-1, and the other 5 columns in the middle with col-md-2. That is 1+2+2+2+2+2+1 = 12. That's it!!. Sure that in Foundation you can do something like that. I know that is not smart but... it works for me. 
Great video series one more time. You're the best, man!!. #keeponhacking  

[linardzb]

real life projects, hands on tutorial. Great stuff! Thank you

[gabriell]

Terrific! Foundation is exactly what I was looking for. Thanks a lot for the friendly and informative tutorial. You rock man!

[ArtbyKhater]

I think that DevTips is taking a small portion in my career life, which I find a little bit creepy :D
... Love your tutorials pal .. keep on hacking ;)

[agoniavr]

Another great serie I finish which I really have to tank you for, learning so much!

One thing I wonder is: at 16:00 are you just adding styles over styles just because or is Foundation actually supposed to work like that? With "that" I mean "manually specifying the laying options for each column for the three device types"?

One thing I didn't like about Bootstrap in the serie is that you can't choose this and that's why I'm liking Foundation(again, if this is the case).

From what you showed us it seems that for each main column you should always(almost) have and that would be awesome if that's the way it's intended to work...so is it or, again, you're just adding them all just to show us?

I'll dig deeper in Bootstrap docs after watching the last video with your thoughts but right off the bat if I had to decide between the two this feature alone would make Foundation win to me.

[betts]

These grid series tutorials are pretty cool, but I'd like to see a series where you integrate select bits 'n pieces of bootstrap/foundation into your SASS based workflow. I've downloaded your DevTips Starter kit and have been toying with adding in just the bootstrap grid, navigation, and responsive images. For an intermediate level hacker like me its been challenging lol.

The basic idea is, how to get the benefits and ease of use that these frameworks offer while still keeping our code semantically correct (no uber divs) and file sizes small. 

[iiqii]

Thanks for great video. Your video inspired me to continue to learn coding. Some were hard to follow despite the fact you explain step by step due to not knowing your application set up. Coda, jade, sass... It will also be very helpful if you teach building web with ... Ido t know how to say, easy to post for frequent updating site? (Like wordpress) how to integrate?

[nitram_nosnibor]

Hiya Trav that was another great series thanks. So why was the Bootstrap one twice as long then!? I've not watched that one because I know a bit about Bootstrap but I like this one and will give it a go - love the Murry site by the way :)

[iiqii]

I liked long explained tutorial as you build from scratch. Its like im right next to u. What was that 'hi' at the end of the video? Lol

[tim.bogdanov]

i kind of  prefer what devtips was in the beginning more. just quick simple tips or tricks. not saying that these longer series are bad. 

[laurazenc]

how about building a Ruby on Rails app for the next series? :)

[ctwebdesignshop]

DevTips you can customize the grid with custom classes for the grid. Since you where wanting 5 columns on the grid for the footer. You could make a special css class just to customize the footer grid like so. 


Love you videos by the way

.footer-grid-class {
    // Control the number of columns
    $columns:5,
    // Specify whether or not this is the last column in the row
    $last-column:true,
    // Choose whether or not to center this column
    $center:true,
    // Set to true to remove column padding
    $collapse:true,
  );
}

[vfbodybuilding]

DevTips I think maybe you could have used the Block Grid for the footer.