CSS Frameworks: Let’s get advanced

CSS, Cascading Style Sheets, who may have thought it could be so creative, optimized and organized? Moreover day by day, it’s adding more dimensions and areas. Many may argue about the fact that is it fair to add frameworks in CSS, as they prefer it raw. But in this argument, frameworks have made its way and proved that adding it can create a proper ecosystem with lots of variations.

It’s 2019, and CSS frameworks are widely introduced everywhere. Some CSS frameworks are not that famous, though but you will be amazed to hear their features. So here are some powerful CSS frameworks:

• Bootstrap
• Materialize CSS
• Foundation
• Semantic UI
• Bulma
• PureCSS
• Ant Design
• Tachyons
• UI Kit
• Tailwind
• Primer

We will talk about Bootstrap, Materialize CSS, Foundation, Buma, and Tailwind. Let’s now look at the amazing features they are providing.

Bootstrap

Bootstrap, your most favorite and almost renowned to everyone. About 52% of people are satisfied using bootstrap. Moreover, It has HTML, CSS and JS frameworks and together it gives you facilities like collapse system, tooltip, modal, etc. It has mobile-responsive features that give you a standard, modern view altogether.

Features:

• Mobile-Friendly
• Easy to Use
• Responsive Features
• Browser Compatibility
• Great Grid System
• Bundled Javascript plugins
• Good Documentation
• Base Styling for most HTML Elements
• Extensive list of Components

Disadvantage:

• Require a lot of styles overriding if you have a specific design planned
• To create unique designs you will have to customize many things otherwise all website will look the same
• Also, Javascript is tied to JQuery, which sometimes create unnecessary plugins.

Materialize CSS

Material Design, Created and designed by Google,  is a design language that combines the classic principles of successful design along with innovation and technology.

Features:

• Mobile Friendly
• Easy to Use
• 12-Column Responsive Grid System
• Various table options
• Badge, Breadcrumbs with unique styles
• Raised button, floating action button and flat button
• Standard Cards, Chips, Collections 
• Footer, Forms
• Different Navbar options
• Color System
• Shadow variations
• Sass Mixins
• Responsive Flow Text
• Ripple Effect with Waves

Disadvantage:

• Refuses to use flexbox model
• It’s heavy and large, may slow down speed

Foundation

The responsive front end framework, Foundation has satisfied almost 45% of people with its magic. Moreover, it’s fast, prototype-based and has production code which makes it work on any device.

Advantage:

• It’s flexible and lets you customize your website. So in this way, your website remains unique and not similar to other websites that have used Foundation. 
• Flexible grids
• Less CSS bloat in the HTML
• Centered Columns
• Collapse class removes gutters and also helps to collapse quickly.
• Readymade pricing tables.
• Multilingual option. As a result you can write from right to left in case of the Arabic language
• Rich documentation

Disadvantage:

• Less community support
• For beginners, it will take time to learn Foundation
• Less information for issues fixing also troubleshooting issues

Bulma

A flexbox model-based framework which is super responsive and very lightweight.

Advantage:

• Responsive design
• Easy to use and lightweight
• Handle flexbox gracefully
• Flexible, can be customized and highly modularizable
• Simple syntax

Disadvantage:

• As it doesn’t have a large community, so it is challenging to fix issues.
• Slow CSS framework
• It’s still in a development phase, and the final version is not released yet.

Tailwind

This framework is mainly famous for its rich library of UI kits and responsive behavior.

Advantage:

• You won’t have to think of class names because it has built-in utility classes. 
• Your CSS will be short, optimized and easy to manage
• One config file (tailwind.config.js) and you can customize everything. Moreover, you won’t have to worry about the default configuration.
• A basic design system is provided at very first so that you can work from a base.
• It makes you stop switching from HTML to CSS and again from CSS to HTML. Therefore you can do everything in your HTML file.
• You can easily create a component or extract them.
• Of course, responsive! What were you thinking?

Disadvantage:

• Binds you to a framework, not semantic
• It’s still not very improvised and in alpha stage