A few months ago, after having used Bootstrap for a few client projects, I couldn’t help but feel that Bootstrap was abstracting just too many CSS concepts such as floats, clear-fixes, and absolute positioning from me. Prior to using Bootstrap, I already had firm CSS skills, but needed to brush on some concepts after having used Bootstrap for a few weeks. So I decided to do a deep dive into the Bootstrap source code!
Concepts to Learn to Create your Own CSS Framework
Having a solid understanding of the following CSS concepts will make you a dangerous & productive front end developer:
- CSS Box Model
- Differences Between Inline & Block Elements
- Floating & Positioning (relative, absolute, fixed, static)
- How to fix collapsed elements, clearfix & sizing: border-box
Sites I Created With Pure CSS & No Frameworks
As you could see from the sites above, you can build quality web sites without having to use CSS frameworks. Don’t get me wrong, Bootstrap and other CSS frameworks are amazing because they save you so much time by eliminating the need for you as the developer to come up with your own design system, components and patterns from scratch. My take on this topic is, if you have lots of time and custom requirements don’t got with a CSS framework, but if you are on limited time and don’t have the luxury of working with a design system or team, go with a CSS framework!