Why I Like CSS Frameworks (and Why You Should Too)
CSS stands for Cascading Style Sheets. It’s used in conjunction with HTML to lay elements out on on the page in an orderly manner. HTML was never intended to contain tags for formatting a web page and was simply created to describe the content on the page itself, like in the example below.
<h1>This is a heading</h1><p>This is a paragraph</p>
You’ll notice that there’s no formatting in HTML and using it by itself would just result in a non-formatted webpage, as you can see above. With the use of a little CSS and a lot of patience (and likely way too much trial and error) you can turn your web page into something worth looking at!
If you’re especially good at design, it might even be appropriate to say that creating beautiful web pages is a form of art.
What is CSS?
We’ll use a button as an example. In HTML, buttons come in a standard format. While it could technically be argued that they do default to a specific style, they can’t look like nothing because that would defeat the purpose of a button! Here’s a button without CSS styling. (Note: default buttons do, in fact, highlight during the click)
<button>I'm a Button</button>
Now think about any quality website you’ve used in this decade. Do you ever see them use this default button? It’s honestly doubtful. Usually they have features such as doing something when you click it or changing color when your mouse hovers over it. Take LinkedIn for example. Here’s a screenshot of my LinkedIn home page.
Notice the area on the right-hand side surrounded by the red box. The bottom article, “Working from home? We got you” is highlighted with a grey background because I was hovering over it! You can do all sorts of cool things like this with CSS. Take this interactive button example from w3schools.com!
Despite being able to hand-code everything in CSS, it takes a long time! Just try styling any clickable button by yourself, and then imagine doing that for every single element or tag on your page, repeatedly, until your program is done. If you have a big project, things can get really time-consuming, really, really fast, even if you’re reusing CSS classes and ID’s.
What is a CSS Framework?
A CSS framework is a library allowing for easier, more standards-compliant web design using the Cascading Style Sheets language. Most of these frameworks contain at least a grid. More functional frameworks also come with more features and additional JavaScript based functions, but are mostly design oriented and focused around interactive UI patterns. This detail differentiates CSS frameworks from other JavaScript frameworks.
— Wikipedia
Basically, it’s a library (or a CSS sheet) that’s composed of pre-built and themed CSS components for all of the HTML tags, such as <h1> and <p> and <grid>. Usually they’re fairly customizable and can be loaded into your projects quickly, easily, and efficiently.
I love CSS Frameworks because some people find that CSS by itself is as impossible as trying to teach a jellyfish how to do a back flip on command. Between figuring out why your header is suddenly not lined up any more, getting your padding and margins to work properly, and struggling with trying to center that one stupid div, it’s easy to see why people (including myself!) are attracted to frameworks.
Why You Should Like CSS Frameworks
Time is money; continually look for ways to do things faster and better.
— Brian Tracy
It should be a no-brainer. Someone out there already did the hard work for you! They made it easy to format, add headers and containers, add images, create user cards, and much, much more. All you have to do is try it out one time and you’ll be hooked!
Some frameworks are more user-friendly. They have a “drag and drop” feel, whereas other frameworks are a little bit harder to work with because they’re so customizable. I tend to lean straight down the middle for my framework preferences, using SemanticUI or Boostrap. I haven’t used Bulma yet, but I know people who have and loved it and I plan on using it in my next project!
Popular CSS Frameworks for You to Try
If you can’t find a framework you like and love formatting things in CSS, maybe look into creating one! If you do, let me know. I am always on the look out for new frameworks and would be more than happy to test it out for you!
