Code As A Craft

Notes on technology and the web

Learning Bootstrap vs Vanilla CSS

I don’t know why I had an aversion to learning a framework. Perhaps I was a CSS purist? During my internet travels I had come to believe that frameworks were for people who didn’t understand the underlying “vanilla” language that powered them. I was wrong.

I’ve been following along with freeCodeCamp(fCC) and one of the earliest things you learn through fCC is how to style HTML using the Bootstrap framework. In fact, I felt like the fCC curriculum glossed over CSS in order to get to Bootstrap quicker. However, I feel like knowing vanilla CSS is more practical than knowing Bootstrap, which abstracts away a lot of what the CSS is actually doing. This may be a personal preference though as I feel strongly compelled to understand the inner-workings of my projects.

The first few websites I made I had designed them first before moving on to implementing them in code, trying to get as close to the high fidelity mockup as possible. This work flow felt smooth and yielded decent results. However, redesigning my personal portfolio while following along with the fCC curriculum it seems that the fCC workflow has me designing in the browser(skipping wireframes and mockups) and relies heavily on the Bootstrap framework. At first, this approach irked me and felt a little lazy. Skip the static mockups? Where do my markers and sketchbooks fit into this work flow? I had almost decided to write off the fCC method in favor of my own(because habits) when I realized that I would be robbing myself of a learning opportunity.

I decided that even if it added a whole day to my personal portfolio redesign that trying out new workflows and learning Bootstrap 4 would be worth the time. After all, it’s knowledge I can carry forward with me. I did decide to sketch out my site before coding it up though. Personally, I find it much easier to make design changes and get visual feedback using a design tool like Sketch rather than designing in the browser or with an IDE. That said, after my first few hours googling various Bootstrap features the framework started to grow on me and I can now appreciate how knowing how to use it could speed up development on projects in the future. It definitely felt like a step forward after having used the 960 grid system and I liked how easy it was to implement responsive features.