Top 6 popular css frameworks in 2019

Tram Ho

Creating consistent, concise and effective CSS can be quite a lot of work. There are many things to consider such as responsiveness, accessibility and structure. This is exactly why the CSS Framework exists to eliminate that burden for you! Let’s see some of the top CSS Frameworks in 2019.

Category:

  • Bulma
  • Tailwind CSS
  • Bootstrap 4
  • Semantic UI
  • Foundation
  • Materialize CSS

Bulma

Let’s start with the CSS Framework used and loved by Scotch. One of Bulma’s benefits is * totally CSS, without JavaScript. This means that you only need to include a .css file in your project to get started, without .js. Here are a few other features.

  • Based on Flexbox
  • Built with Sass to use only what you need
  • Full responsive and mobile-first

Flexbox for building grid-based layouts is an amazing improvement when using floats. That said, although Bootstrap is more popular, it took some time for Bootstrap to accept Flexbox with version 4.0. This helped Bulma gain popularity while Bootstrap 4.0 is operating.

Find out more details Bulma here

Tailwind CSS

Tailwind is a bit different in that it focuses more on utility classes instead of complete UI components. By having a variety of utility classes, you can create your markup quickly:

Although this may look bad for some people, it’s good to have ready classes instead of having to create a new class just for this button and create styles with some CSS properties.

Find out about Tailwind details here

8 useful CSS tricks
A look at CSS Reset

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

Refactoring UI

Interesting facts about Tailwind. Two of the creators of Tailwind Adam Watham and Steve Schoger, the people behind UI Restructuring. UI restructure is a platform to learn how to put designs into your hands and it’s incredible! They only release their book / course with some of the best design tips and tricks you can find.

Read details here

Bootstrap 4

Bootstrap is always one of the largest CSS Frameworks available. It is often a practical framework, especially for web developers. After several years of work, early 2018, version 4.0 was officially released! Bootstrap 4.0 is an important update.

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

Semantic UI

The Semantic UI has a unique approach that focuses on writing “human-friendly HTML”. In other words, the more named classes are, the better the way a person will speak. This makes writing HTML intuitive especially for more developers. Semantic uses Gulp as its build tool. Many business processes have moved away from Grunt / Gulp in a way that benefits Webpack, so Gulp can be positive or negative for you depending on your point of view. This is a quick look at the workflow.

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

Foundation

Foundation by Zurb checks most of the features we’ve talked about so far: responsive, mobile-first, acessibility, etc. It’s a bit more complicated than most other options and advertises itself as a more “professional” option. Zurb is happy to offer training classes at cost that seem like a business solution.

Foundation can be used to create great looking HTML email!

Foundation can also be used to create great HTML emails. Creating HTML email is historically quite difficult (you don’t have access to all the HTML and CSS features you used), so this can be extremely useful for people who are sending emails.

Starter Templates Foundation also provides a number of starter templates to help you. See more details here .

It is worth noting that some large companies are using Foundation, so consider it a good sign.

Companies using the Foundation:

Materialize CSS

As you might expect, Materialize implements ** Google’s Material Design, ** one of the most popular design languages ​​available. Google has done an incredible job with promoting this design language and has created a very suitable and elegant interface on the Android platform. If you are looking to build a website with material design, this is the right way to go.

One of the really interesting facts about Materialize is that it was created by four different students at Carnegie Melon. This is not related to technology, but it is worth mentioning a bit of inspiration that people can contribute regardless of age, experience, …

Facebook’s AI framework is available to users, built-in with Google Cloud, AWS and Azure Machine Learning
7 reasons why the framework is a new programming language
Share the news now

Source : viblo