5 CSS Framework in 2020
By: Tarun Manrai
Tags: CSS, Web Development, Web Design, Technology, Framework

CSS stands for Cascading Style Sheets. Web development is made up of three elemental files that is the HTML file, the CSS file and the JavaScript file. While the HTML and the JavaScript files are responsible for the templating and the dynamic elements respectively. CSS is responsible for one thing and that is how does CSS actually govern the style well. It does that by making sure how elements look likes on a certain webpage example their colors, the font that is in there it also helps in the positioning of elements and it also does a little bit of animation.

In other words, we can say that it is a framework library by which we can develop standard web designing with the help of CSS language.

Full article: http://entradasoft.com/blogs/5-css-framework-in-2020

5 essential frameworks in 2020

1. Bootstrap

2. Foundation

3. UIkit

4. Semantic UI

5. Bulma

Bootstrap: This originally named Twitter Blueprint.It is the most popular HTML, CSS and JavaScript framework for developing a responsive and mobile friendly website. It includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image, carousels and many others.

It facilitates us to create responsive designs. It is compatible on most of browsers like Chrome, Firefox, Internet Explorer, Safari and Opera, etc. With time, there are various changes taken place in Bootstrap. The various versions of Bootstrap are Bootstrap 2 and 3, Bootstrap 4, Bootstrap 5, Alpha.

Advantages of Bootstrap:

· Bootstrap is easy to use.

· It has consistent designs.

· It is compatible with all browsers.

· It is used in mobile on large scale.

· Hence it is called Mobile-first approach.

· It adjusts with all mobile, tablets, desktops, etc.

Foundation: It is a mobile first responsive framework built with Sass/SCSS giving designers best practices for rapid development. The framework includes most common patterns needed to rapidly prototype a responsive site. Through the use of Sass mixings, Foundation components are easily styled and simple to extend.

Since version 2.0, it also supports responsive design. This means the graphic design of web pages adjusts dynamically, taking into account the characteristics of the device used. Additionally, since 4.0 it has taken a mobile-first approach, designing and developing for mobile devices first, and enhancing the web pages and applications for larger screens. Foundation is open source and available on GitHub.

Advantages of Foundation:

· It possess a robust grid system.

· It supports a rapid development of projects.

· It offers finest of the customization abilities.

· It contains set of templates and readily available codes.

· It offers services for sites as well as emails.

UIKit framework: This framework offers various features like document support, drawing and printing support, information about the current device, text management and display, search support, accessibility support, app extension support, and resource management. This open source framework works on pretty much any modern browser like-Chrome, Mozilla Firefox, Oracle, Explorer, etc. It is widely used framework.

Advantages of UlKit:

· It is easy to learn as the codes are very easy.

· It saves time and money.

· Ulkit offers so many components that work smoothly and fast on all devices.

Semantic framework: This is a modern front-end development framework, powered by LESS and jQuery. It has a sleek, subtle, and flat design look that provides a lightweight user experience. According to the Semantic UI website, the goal of the framework is to empower designers and developers by creating a language for sharing UI.

It is a free open source project. It is already used in multiple large scale production environments.

It is unique in two ways. First is the way, the framework is structured. It uses five descriptive categories to define reusable UI components. UI Element, UI Collection, UI View, UI Module, UI Behavior are five descriptive categories.

UI Element: is a basic building block. It can appear alone or in uniform groups. For example, a button can be independent or put in a button group.

UI Collection: is a group of different kinds of elements that are interdependent. For example, a web form can have buttons, inputs, checkboxes, icons and so forth.

UI View: represents a common piece of website content. For example, a feed of comments section.

UI Module: is a component with interactive JavaScript-based functionality. Examples include an accordion, dimmer, modal, and so on.

UI Behavior: is a component that cannot exist independently, but instead is used to inject functionality into other components. For example, the form validation behavior provides validation functionality for the form component.

Advantages of Semantic UI:

This framework has higher learning curve than other frameworks.

Bulma: It is designed for a mobile-first. It is 100% Responsive. It optimizes for vertical reading. In this, columns are stacked vertically. We can enforce the horizontal layout for both columns and level by appending mobile modifier. The columns are powered by Flexbox. It is a simple way to build responsive columns.

Advantages of Bulma:

· This is easy to use.

· It has responsive design based on Flexbox.

· It has simple syntax.

· It is highly customizable and modularizable.

Now we that all the above frameworks are best at their place. But there are some cons in all. So, for overcoming the problems of one framework, a new framework has developed, Which has some extra features as of previous one.

Here are the key characteristics of all the mentioned frameworks. Which make them differently from one another.

· To ensure a lightweight addition to the project, one should give try to Bulma or UIkit a try.

· Go to Bootstrap, if you want a hassle-free solution that has a lot of support.

· Foundation framework provides you more freedom on your components.

· One should opt for Semantic framework, if the web application uses heavy JavaScript.

Read More: http://entradasoft.com/blogs/5-css-framework-in-2020