The most popular web front-end frameworks

As a front-end development programmer, it is very important to learn to use a good web front-end framework. A good web front-end framework will greatly increase your work efficiency and make your development more efficient. It went very smoothly. In this article, we will introduce the front-end development frameworks that are most worthy of your attention in 2017. Each framework has a unique style to help create grid layouts, buttons, forms or other page elements. Hope it helps everyone.

Bootstrap

Almost every developer knows the development framework from Twitter - bootstrap. It is probably one of the oldest front-end UI frameworks, with the earliest version released in 2011. It contains a complete set of SASS class libraries, which can help customize UI and JS components, and conveniently develop various navigation, progress, buttons, breadcrumb navigation, etc.

The most recent version, Bootstrap4, is currently being developed In the development process, it should be released soon. For bootstrap3, this will be a big change.

Foundation6

The Foundation class library has been around for some years. There will be a major version update recently, and the class library is split into two main class libraries: Website Development class library and email development class library

It provides a minimal UI framework that can be used to develop any layout type and fully control the related components of various pages, such as responsive menus, input Boxes, tabs, etc.

It also provides a website that can easily browse UI components. And supports mainstream web development tools, such as Grunt/Gulp, npm and SASS/compass, etc.

Petal

The latest CSS-related web development framework, based on LESS .

This class library is very simple, currently version 0.6. But it is a framework that can be applied to actual development. Have very clear documentation, for example, grids, fonts, buttons, inputs, etc.

Petal’s development team is not very large, but has very high output. I believe it will become a well-known framework with a place in mid-2017

Pure CSS

Pure CSS has a modular design. There are many small class libraries for different components, such as forms, grids, charts, navigation buttons, etc.

You can freely choose how many class libraries to use. The base class library uses Normalize and other simple reset CSS to create unified UI interface effects. But you can add a custom Grid to save development time

All class libraries can be integrated and minimized using tools. And the team provides a simple guide to help create extension classes

I personally think that Pure will become a framework as successful as Bootstrap. Although not heavily mentioned in many blogs, it should definitely have a place among your best frameworks

Semantic UI

This framework is currently in 2.2 Version, with many typical features, such as grid, type, color and input, etc.

It provides customized themes with more than 3000 different theme types. It also provides themes that simulate the styles of Google, Amazon, Twitter and other websites. You can also easily clone and edit them

You can choose from ready-made layouts and use them as your own development templates. Semantic UI has many custom elements, and you will find that these designs are very distinctive

Milligram

Minimalist design style class library, if you are looking for For an ultra-small class library, it is a very good choice. It is only 2kb in size after compression. It is a very simple and beautiful project. The current version is 1.3, which is stable and can be used for actual development. You can use npm, Yarn, Bower, etc. to install, but Normalize is required, so you need to include this class library

Use CSS compression tools to merge them together to save the number of Http requests

The only thing that is not very friendly is the documentation. Of course, if you can use good documentation, using Milligram will be a very simple thing

Vital CSS

Another minimalist UI framework that supports SASS , it’s extremely easy to learn

The component page introduces everything you need to know. If you need a super simple CSS framework to develop new projects, it can definitely meet your needs. If you want to learn more, you can refer to this blog from the Vital CSS development team

Skeleton

Responsive, ultra-lightweight and ultra-simple framework. Provides the necessary infrastructure for developing new websites

Contains some basic styles, but nothing too flashy. In fact, you can quickly and easily modify the framework to meet your own needs

Skeleton is the most stable and small framework. There is a demo page here.

UI Kit

A feature-rich front-end class library. There are many optional files and folders, CSS is style, images are icons, and js is javascript

After inserting into the page, each js can be associated with DOM elements and components, which allows you to easily communicate with other Class library integration, for example, vue or react

You can also use this class library to set up and create UI components. The documentation page contains many examples to help you with common websites

Materialize

Google’s material design has become the standard for their products. Slowly affecting the web design world, for example, Materialize

This free open source framework brings material design to the next level. It is the easiest way to create pure material style pages without coding yourself

Provides pure CSS class definitions, javascript class libraries and components. You can see some practical examples here.

Each of these web front-end frameworks has its own advantages. There is always one that suits everyone. I hope this article can help you and make your work more efficient.

Related recommendations:

Twenty powerful PHP frameworks

Global PHP development framework rankings

Introduction to practical web front-end JS and UI framework

What front-end framework do you use when developing PHP?

First contact with the magical front-end framework vue.js