As a web developer we constantly looking for new tools, libraries, and frameworks to make our lives easier. One of the things we ask ourselves is “what is the best css framework that I should be using this year?” Well I’m going to help by giving you the Top 5 css frameworks you should be using in 2020.
Now before we begin going over all the css frameworks let’s make sure we understand what we expect from css frameworks. All css frameworks must be responsive and the syntax needs to be simple to remember since you are going to be writing all these css classes all the time. Anything beyond that is just a plus. So let’s go over this top 5 list of css frameworks to use in 2020.
Utilizes elements and principles of Material Design made by Google, this css framework incorporates components that provide more feedback to users with shadows, colors, and animations.
<div class="row"> <div class="col s3">3-columns</div> <div class="col s3">3-columns (one-half)</div> <div class="col s3"> <a class="waves-effect waves-light btn"> button </a> </div> </div>
Foundation CSS is one of the oldest css frameworks that still around in the industry. What I love about foundation is that is very easy to remember the syntax. The creators were heavily influenced by ruby so their classes are written in plain English. Also I love the HTML Emails side of foundation it will just make your life easier as a developer.
<div class="row"> <div class="columns small-12 large-3">6 columns</div> <div class="columns small-6 large-3">6 columns</div> <div class="columns small-6 large-3"> <a class="button small large-only-expanded" href="#"> Save Button </a> </div> </div>
Bulma.io is a css framework that was the first framework to actually use css flexbox and also looked beautiful. One of the things I love about this framework is the typography styles. The creator of this framework is a designer and it really shows. The syntax for grids can be simple but once you start working with the components it gets a bit harder to remember. This framework is great the only good and bad thing about it is that there’s too many options for components.. if that makes sense.
<div class="columns"> <div class="column"> First column </div> <div class="column"> Second column </div> <div class="column"> <a class="button is-success is-hovered">Hover</a> </div> </div>
Bootstrap might be one of the original css frameworks that till this day still holds weight. Bootstrap 3 was a great framework but when they upgraded to bootstrap 4 they added a bunch of new features including flexbox. I can recommend this css framework to any beginner or anyone who just wants to hit the ground running. There’s just so many templates free and premiums built with bootstrap that I’m pretty sure you can find a starter kit for any idea or site you might want to build. This framework started the trend to have mobile sites.
<div class="container"> <div class="row"> <div class="col-md-3"> 1 of 3 </div> <div class="col-md-3"> 2 of 3 (wider) </div> <div class="col-md-3"> <button type="button" class="btn btn-primary">Primary</button> </div> </div> </div>
Tailwind CSS is a utility first css framework… What does that mean? I’ll break it down for you.. It means you are focused more on each element or html tag. Before with other frameworks you had components that were already pre-built but with tailwind you focus more on the styles of each element and instead of having to change css for each element you just use certain predefined classes to change it. Now this might sound a bit more complex because in reality it is… It’s like writing inline styles on an element but now you have to remember the way it’s written with tailwind. I’m giving this css framework the number one spot because this seems to be where the industry is heading… more complexity! To be honest I think bootstrap can get the job done but I do understand why someone would choose tailwind css. The biggest pro to tailwind is that you can completely customize your websites while with bootstrap all the sites usually look the same because they are using components that came with the framework. Again I think it’s a bit more complex but I like the idea of people finally creating original websites instead of relying on bootstrap components…. bootstrap mobile menu I’m looking at you!
<div class="md:flex bg-white rounded-lg p-6"> <img class="h-16 w-16 md:h-24 md:w-24 rounded-full mx-auto md:mx-0 md:mr-6" src="avatar.jpg"> <div class="text-center md:text-left"> <h2 class="text-lg">Erin Lindford</h2> <div class="text-purple-500">Customer Support</div> <div class="text-gray-600">firstname.lastname@example.org</div> <div class="text-gray-600">(555) 765-4321</div> </div> </div>