Post

6 Popular CSS Frameworks to Use in 2019

Updated on September 15, 2020
    Default avatar

    By James Quick

    6 Popular CSS Frameworks to Use in 2019

    This tutorial is out of date and no longer maintained.

    Creating consistent, concise, and effective CSS can be quite a lot of work. There are so many things to consider like responsiveness, accessibility, and structure. This is exactly why CSS Frameworks exist, to take that burden off of you! Let’s take a look at some of the top CSS Frameworks of 2019.

    Bulma

    Let’s kick this off with the CSS Framework used and **loved by Scotch **(Scotch.io is on Bulma right now!) One of the benefits of Bulma is that it is purely CSS, no JavaScript. This means you just need to include one .css file in your project to get going, no .js required.

    Here are a few of the other features.

    • Flexbox based
    • Built with Sass so only use what you need
    • Fully responsive and mobile-first

    Flexbox for building a grid-based layout is an incredible improvement on using floats. That said, although Bootstrap is more popular, it took a while for Bootstrap to adopt Flexbox with v. 4.0. This helped Bulma to gain some popularity while Bootstrap 4.0 was in the works.

    Looking for a Bulma tutorial? Check out “Get to Know Bulma”!

    Did I mention that Scotch loves Bulma!!! See that Chris guy in there? Hint… look bottom middle.

    Tailwind CSS

    Tailwind is a bit different in that it focuses more on utility classes instead of fully-fledged UI components. I, personally, love this concept since it gives you the ability to really build your own look and feel while leveraging classes to do so.

    By having a bunch of utility classes, you can compose your markup on the fly:

    <button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
      Button
    </button>
    

    While this may look ugly to some, it is nice to have classes ready to go instead of having to create a new class just for this button and styling with a couple CSS properties.

    If you’re looking for a framework that gives you a bit more custom look and feel, check out Tailwind!

    This is an interesting approach considering that Bootstrap sites, for example, are easy to pick out since they typically look very similar. With Tailwind, it is unlikely that two sites will look that similar!

    It’s very easy to customize Tailwind to create things like alert boxes:

    Refactoring UI

    Fun fact about Tailwind. Two of the creators of Tailwind Adam Watham and Steve Schoger, the masterminds behind Refactoring UI. Refactoring UI is a platform for learning how to take design into your own hands, and it’s incredible! They just released their book/course with some of the best design tips and trick you can find.

    The Refactoring UI book/course is hot off the press with some of the best tips in design!

    Bootstrap 4

    Bootstrap has consistently been one of the biggest CSS Frameworks there is. It is often de facto framework, especially for Web Developers. After several years of work, in early 2018, the official 4.0 version released! Bootstrap 4.0 was a significant update.

    • new color schemes
    • new utility classes
    • built on flexbox
    • built with SASS vs LESS

    I quickly made the jump from version 3.x to 4.x, and I have really enjoyed it. As I mentioned earlier, I’m a big fan of utility classes, so I love the fact that Bootstrap added these. If you’re already using version 3.x, take a look at 4.x. If you’re interested in using Bootstrap for the first time, go ahead and start with 4.x.

    Semantic UI

    Semantic UI takes a unique approach that focuses on writing "human-friendly HTML". In other words, classes are named as closely as possible to how a person would speak. This makes writing HTML intuitive especially for newer developers.

    In Semantic UI, “words and classes are exchangeable concepts.”

    Semantic uses Gulp as its build tool. Many workflows have moved away from Grunt/Gulp in favor of Webpack, so Gulp might be a positive or negative for you depending on your perspective. Here’s a quick look at the workflow.

    • install node and gulp
    • install semantic-ui (you will be prompted for configuration input)
    • change into your directory and run gulp build

    Foundation

    Foundation by Zurb checks off most of the features that we’ve talked about so far: responsive, mobile-first, acessibility, etc. It is a bit more sophisticated than most other options and advertises itself as a more “professional” choice. Zurb is happy to provide training classes at a cost which does seem more like an enterprise solution.

    Foundation can be used to create great looking HTML emails!

    Foundation can also be used to create great looking HTML emails. Creating HTML emails are historically pretty difficult (you don’t get access to all HTML and CSS features you’re used to), so this can be incredibly useful for those that are sending emails.

    Starter Templates

    Foundation also provides several responsive starter templates to help you out. Check them out!

    It’s worth noting that there are some pretty big companies using Foundation, so take that as a good sign.

    Materialize CSS

    As you might expect, Materialize implements** Google’s Material Design, **one of the most popular design languages out there. Google has done an incredible job with pushing this design language and has created a very consistent and elegant look and feel on the Android platform. If you’re looking to build a website that with material design, this is the right route to go.

    One of the really interesting fun facts about Materialize is that it was created by four different students at Carnegie Melon. This is not technically relevant, but worth mentioning as a bit of inspiration that everyone can contribute no matter the age, experience, etc!

    Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

    Learn more about us


    About the authors
    Default avatar
    James Quick

    author

    Still looking for an answer?

    Ask a questionSearch for more help

    Was this helpful?
     
    Leave a comment
    

    This textbox defaults to using Markdown to format your answer.

    You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

    Try DigitalOcean for free

    Click below to sign up and get $200 of credit to try our products over 60 days!

    Sign up

    Join the Tech Talk
    Success! Thank you! Please check your email for further details.

    Please complete your information!

    Get our biweekly newsletter

    Sign up for Infrastructure as a Newsletter.

    Hollie's Hub for Good

    Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

    Become a contributor

    Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

    Welcome to the developer cloud

    DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

    Learn more
    DigitalOcean Cloud Control Panel