The following Tweet from renowned front end developer, Noah Stokes really caught my eye the other day:
We have a Bootstrap Generation of folks coming up who have never learned basic positioning in CSS. Learn the fundamentals first, then a FW.— Noah Stokes (@motherfuton) October 27, 2015
In the Firehose Project, one of the major things we learn about front end design is to use the Bootstrap Framework. Going into the course, I had heard a little and read a little about Bootstrap, mostly negative. The main complaints: all Bootstrap websites look the same and that Bootstrap comes with a ton of bloat. I believed that until I started using Bootstrap, which then lead me to realize that Bootstrap made designing good looking websites incredibly easy. In fact, I used Bootstrap for this website to help out with the layout.
What Noah had to say really got me thinking, though. I don’t really know much about CSS positioning, and that’s a problem. I also didn’t really know where to start looking, so I thought I would ask the master himself:
Aside from the resources from A List Apart that Noah linked to, I took it upon myself to research CSS layout and positioning, since it’s really a core competency of a web developer. I wanted to share a few resources that I found with you that I thought were really great:
- Learn CSS Layout: This is a fantastic tutorial that goes over CSS layout fundamentals in an easy-to-digest way. While there are only 19 “lessons”, there’s a ton to learn (and I learned a ton!).
- CSS Tricks Guide to Flexbox: One of the coolest new-_ish_ CSS layout techniques is called Flexbox, and this guide goes deep. I’ve used Flexbox positioning in a few projects and I can say with certainty that it’s easy to use (and that makes me happy).
- What the Flexbox?!: On the same theme, Wes Bos put out this great, free video course explaining all sorts of cool Flexbox tricks.
I still think that Bootstrap is an incredibly useful tool, but the fundamentals are fundamental for a reason. I think that this article from H. Alan Stevens does a really great job of explaining what Bootstrap is good for, what it’s not good for, and some best practices for using it.
In doing my research, I also came across Pure, a seriously tiny group of CSS components that help with rapid development of responsive web projects from (wait for it…) Yahoo. While Pure would obviously be subject to the same criticism that Bootstrap does with not teaching you as a developer how to CSS, it does solve the bloat problem. Worth checking out!