Creating Modern Website With No CSS Frameworks

September 22, 2015

Introduction

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

Live Site
Live Site
Live Site
Live Site

A Pure Bootstrap Site I Completed in Half the Time as the Above Shown Sites

Live Site

There are many advantages to using Bootstrap. One of the great advantages of Bootstrap is that it allows you to rapidly prototype for multi-screen devices, if you use the right classes.

Concluding Thoughts

As you could see from the sites above, you can build quality web sites without having to use frameworks. Don’t get me wrong, Bootstrap and other CSS frameworks are amazing because they save you so much time; however, you don’t always need to use them. When it comes to building website there’s really no wrong answer with choosing between using a framework or not. Use the tools you like best, choose the right tools for the job and go with the flow.

Comments

comments powered by Disqus