3 Front-End Open Source Frameworks Every Front-End Developer Should Know

If you are a front-end developer, you surely have listened about HTML/CSS/JavaScript frameworks. Frameworks shorten your working time and help you build things easily. In this article, I will show you three of most used front-end frameworks. All these three frameworks make website building easier.

3. Foundation

Foundation 6

Foundation is a responsive front-end framework. Foundation provides a responsive grid and HTML and CSS UI components, templates, and code snippets, including typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Foundation is maintained by ZURB and is an open source project.

This framework was designed for and tested on numerous browsers and devices. 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 mixins, Foundation components are easily styled and simple to extend.

2. AngularJS

AngularJS

AngularJS is an open-source web application framework mainly maintained by Google and by a community of individual developers. Its goal is to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with other components to use in rich Internet applications.

The AngularJS library works by first reading the HTML page, which has embedded into it additional custom tag attributes. Angular interprets those attributes as directives to bind input or output parts of the page to a model that is represented by standard JavaScript variables. The values of those JavaScript variables can be manually set within the code, or retrieved from static or dynamic JSON resources.

AngularJS is the frontend part of the MEAN stack, together with Node.js runtime, Express.js backend framework and MongoDB database.

1. Bootstrap

Bootstrap

Bootstrap is a free and open-source collection of tools for creating websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It aims to ease the development of dynamic websites and web applications.

Bootstrap is a front-end framework, that is, an interface for the user, unlike the server-side code which resides on the “back end” or server.

Right now, Bootstrap is the most-starred project on GitHub, with over 90K stars and more than 38K forks.

Bootstrap is modular and consists essentially of a series of LESS stylesheets that implement the various components of the toolkit.

Developers can modify the Bootstrap file itself, selecting the components they wish to use in their project.

The use of LESS stylesheet language allows the use of variables, functions and operators, nested selectors, as well as so-called mixins.

Since version 2.0, the configuration of Bootstrap also has a special “Customize” option in the documentation.

Bootstrap’s toolkit has four variations to make use of different resolutions and types of devices: mobile phones, portrait and landscape, tablets and PCs with low and high resolution. Each variation adjusts the width of the columns.