Toast Grid - CSS Grids Series (CSS Grid in 15min)

This week we look at a CSS grid called Toast! It's small, fast, and flexible. Learn Toast in 15 min!

Other installments in the CSS Grids series:

- - -

[HekaFOF]

This video is the reason why I subbed to this channel. Keep making these kind of videos! Thank you for the hard work.

[SeeInD]

I was trying to negotiate with Bootstrap using pretty much just the grid from it for my project. Glad I found this video. I'll be using Toast now. Thanks! This channel is massively helpful and you're a great host.

[LewisLong]

Thank you so much for this, Travis! I started using this on my current project after watching this video. The flexibility of this grid system is incredible and you made it really easy to understand. This is probably going to be my go to grid for future projects.

[ZaffaMan]

This looks great for smaller projects! :)
Thank you for sharing it and for this new series!

[yourbrainoncode]

This looks really cool, I'll have to give it a shot. The "x-of-x" is super intuitive and just what I was looking for!

[vanessazoydable]

just on the top of my head, you could use push-pull for reordering divs for views on different devices. Example: on mobile you have two paragraphs and an image below each of them (one column). On desktop (two column) you want one row to have text and an image on the right, and in the other the image on the left and text on the right. // This is just for the guys who still got it confused :D anyway, you're great! thanks a bunch!

[chaitanyachauhan]

Travis! you rock! The coolest feature is col--d-first/last, col--am/ad! superb!! its fun to be in Front-end!

[flinkstiff]

Great vid Travis! Really like the toast grid. I have to say though, that i have used push and pull with bootstrap many times. It's mainly used for replacing the order of two columns without having them be in that order in the DOM, as it will fall back to the DOM-structure on small screen sizes (I.E. Mobile). Just wanted to get that said :)

For example:
Problem: You want a sidebar to the left and content on the right, but on mobile you want the sidebar after the content.
Solution: You put the sidebar after the content in the DOM, but use pull and push to replace their visual order. Problem solved.

[Dannywage]

Finally, a new series !!! Looking forward to it already :)

[DaviMartins]

Oh yeah, this series will be very helpful.
Thanks, Travis.

[TravisHi_YT]

Yay! finally another Grid episode! I've been playing around with materializeCSS and it's great fun! Responsiveness is a bit of an issue though.

Thanks for the vid!

[vjackson]

Very interesting video. I think I'll try this one out as I redesign my site. Thanks again! And it was great meeting you a few months back at Circles. And congrats on Google J.O.B!!

[aleksandrstaetskiy]

Wow! This is exactly what I’ve been looking for. Thanks

[theangrybrownman]

Just a tip: On Github when you click on a file to see its contents, click Raw. That way you can simply do Ctrl/CMD A to select all without having to click and drag and then copy.

[PeterGallagher]

Thanks, this was a great introduction and overview.

[nedalturas]

always a funny intro but hey I learned a lot from this channel thats why I subbed. keep it up.

[JonFuller]

Travis I really love your videos and watch basically all of them as long as I'm available.

I would be extremely grateful if you could do a github tutorial video. I always am able to follow your videos and learn so much from them.

I'd love to learn how to use github in my projects via your Tuition

[Rodan]

Useful every time, truly customizable, I'll agree with the speed optimization video (or series), if you'll comply of course.

[KirillBytin]

hey. nice video
Requesting video series about speed optimization of the site.
Critical path CSS, using localstorage, etc.

[gaborzeller-daczi]

Wow. Just started working on a voluntary project and was thinking of which lightweight framework could I use instead of bootstrap. Travis to the rescue ^^