What is a CSS Framework??
A CSS Framework is a library used by the frontend developers to make their job easier. They provide generic functionality that can be overridden for specific scenarios and applications. This greatly decreases the time needed to start creating applications and websites.Bootstrap
Bootstrap is an HTML, CSS, and JS framework used for developing responsive and mobile-first projects on the web. It’s easy to download, manageable via npm or RubyGems, and has thorough documentation. There are tons of pre-built themes ranging from landing page to fully-fledged startup website complete with direct sales capabilities. Developers have access to a vast library of content providing a detailed look at both the code and output. All told, Bootstrap is excellent for beginners, and robust enough for seasoned developers, too.
You can download it from https://getbootstrap.com/
Pros:
- Fewer Cross-browser bugs
- A consistent framework that supports major of all browsers and CSS compatibility fixes
- Lightweight and customizable
- Responsive structures and styles
- Several JavaScript plugins using the jQuery
- Good documentation and community support
- Loads of free and professional templates, WordPress themes and plugins
- Great grid system
Cons:
- There will be a requirement of rewriting files that can thus lead to a lot of time spent on designing and coding the website
- All the websites will look the same if you don’t do heavy customization.
- Styles are overused and can lead to lots of output in HTML which is not needed.
- JavaScript is tied to jQuery and is one of the commonest libraries which thus leaves most of the plugins unused.
Foundation
Foundation is used in building HTML emails for readability on any device. Foundation is a CSS framework that allows you to create and manage stylesheets. It’s also highly customizable; if you don’t find Bootstrap’s more rigid framework appealing, Foundation may be just what you’re looking for. Foundation is mostly used for businesses like Subaru, Hewlett Packard, Barclay Bank, Perry Ellis, Disney, Amazon, and Pixar all use it for building websites.
If there’s one standout feature, it’s Foundation’s focus on education. It has three learning paths, from beginner to certified Foundation pro, which takes you from best practices for using Foundation all the way through Javascript customization and Sass.
You can download it from https://get.foundation/
Pros:
- Foundation lets you customize your website without making it look similar to other websites that have used Foundation.
- The base CSS appearances are built-in and there won’t be much CSS bloat in the HTML.
- Flexible grids and columns
Cons:
- It may take time for beginners to learn and use Foundation.
- There is a lack of wider support and forums for fixing issues.
- No support troubleshooting issues.
Bulma
It’s completely free to use, responsive, lightweight, and focused entirely on CSS. Bulma is built on Mozilla’s MDN Flexbox module, which is just plain endearing. Bulma is also its own package manager of sorts; you only download what you need, making it the most modular framework alongside its popularity. Bulma uses several techniques to create a cohesive interface for frontend developers We need just be concerned with describing our website’s design using semantic classes, not elements or in other words
You can download it from https://bulma.io/
Pros:
- It is a Well documented and Responsive framework
- Bulma comes packed diverse typography, buttons, forms, tables, and more.
- Bulma has a vertical alignment solution, layouts, and various media objects.
- Bulma setup is built with Sass, which means that you can design your framework step by step with only the features you need.
Cons:
- The CSS of this framework runs very slow on the IE web browser.
- It is still in the development phase and the final version is yet to come.
- Does not has extensive community
Pure
Pure is a lightweight framework, great for getting up and running with CSS quickly. It’s driven by responsive layout design which makes Pure an excellent option for mobile-first developers, especially if you’re creating a progressive web app. Pure is modular and highly focused on a grid layout; those building robust websites may not find favor with Pure.
You can download it from https://purecss.io/
Pros:
- Easy to customize
- Lightweight and Responsive
- Cross-browser compatibility
Cons:
- Since Pure CSS only carries a minimum number of styles out of the box, it might not be great for beginners who want a complete style that looks good out of the box without having to customize it.