Frontend Frameworks
Sandeep Kumar

Frontend frameworks let you hit the ground like when developing a new website. Due to the popularity, a wide range of frontend frameworks are available, and new ones come out on a regular basis. There are many popular frameworks like Bootstrap, Foundation, Materialize and less are widely known frameworks.

1. Bootstrap

Bootstrap is a wildly popular frontend framework, created by Twitter developers and released in 2011. It is the mostly used open source framework in the world.

Like other essential frameworks, Bootstrap includes HTML, CSS and Javascript components. It stick to responsive web design standards, which allows the users to develop responsive sites of all complexities and sizes.

In Symphisys, we are using Bootstrap for building responsive web designs which supports for desktop, mobile and ipad. It also supports in all the standard devices. This makes our sites to be user friendly and device compatibility.

Features:

• It consists of pre-styled Components.
• Responsive features and Browser Compatibility.
• Easy integration and Lightweight Customization.
• Powerful grid system.

2. Semantic-UI

Semantic is a modern front-end development framework, powered by LESS and JQUERY. It is based on the conceptual block of websites which is not related to individual HTML tags. It is related to individual interface elements like dropdowns, buttons and modals that consists of structure and contextualize web content.

Semantic-UI is mainly used by “language speakers”: designers, developers and web users who want to refine the language of web on daily basis through individual usage choices.

Example :

<h4 class="ui header"> Sign in with: </h4>
<div class="ui facebook button">
 	<i class="ui facebook icon"></i>
  		Facebook
</div>

Features:

• Variety of components.
• Easy to use and looks elegant.
• Takes less time to design a page.

3. Foundation

Foundation is one of the advanced front-end framework consists of many tools for developing responsive, mobile first websites. Primarily build with CSS, HTML and JQUERY. It supports GPU acceleration for smooth, lightning fast animations for mobile devices. It runs on Sass pre-processor and Foundation-developed data, which lets the site to load lightweight HTML sections for mobile and “heavier” HTML sections for larger screens.

Foundation is mainly focused on mobile devices first. It includes a wide range of functions and features. It is built based on the percentage fluid grid system and is built with mobile-first in mind. This framework also has options for setting out custom mobile layouts by using the mobile grid, giving the flexibility to customize the projects for mobile devices and desktop users.

Features:

• Uses REMS instead of pixels, removing the need to explicitly state width and other attributes for each device.
• It has greater flexibility.
• Simplified setup process for the sass version.
• Decreased page load time.

4. Materialize

Materialize is a responsive frontend developed framework also performs Google’s material design framing and is loaded with ready to use components like buttons, cards, forms, icons etc.., . It is offered in both standard version and in one that runs on sass.

Materialize is a UI based component library created with HTML, CSS and JavaScript. It help in constructing attractive, consistent, and functional web pages and web apps. It includes a convenient lZ column grid feature that can be used for website layouts. It is loaded with CSS that can be modified designs such as colors, typography and shadows.

Features:

• Selection on Huge components.
• It supports responsive for a website across all the devices.
• It includes additional feature ripple-effect animation and drag-out mobile menus.

5. Pure

Pure is created by Yahoo development team. Pure, a set of small, responsive CSS modules that we can use in every web project. It helps the user to create fast, beautiful and responsive websites.

Pure has a in-built responsive design such that if any website is created with pure it will redesign itself based on the device size. Pure has a mobile-first grid that has 12 columns that supports responsive classes for large , medium and small screens. It uses only standard CSS and it is easy to learn.

Pure contains these modules:

• Base
• Forms
• Buttons
• Grid
• Menus
• Table

Features:

• It is built on ‘Normalize.css’ to fix cross-browser compatibility issues.
• Compared to other frameworks it is very small in size.
• It is free to use.
• It has a customizable, responsive grid setup to easily divide the webpage into segments.

In symphisys we are using HTML, CSS, Bootstrap, Javascript and JQuery for front-end developments. We are following the designs for all standard screen resolutions and all compactable mobile devices. We are also implementing window resize designs. This helps the sites to be more effective and user friendly to the users.