There are two types of front-end frameworks, according to their complexity. They can be named as Simple and Complex Frameworks. It's all about the amount of functionality that can be delivered. The review is pretty subjective and it doesn't mean that the frameworks described here are better than those you may know.
Simple Web Development Frameworks
Simple Frameworks are designed to implement some basic style elements such as buttons, grids, forms, typography, menus, etc. You can use them both as a starting point of a new project and to improve the existing website or application architecture.
Toast is a simple CSS grid framework. It's very easy to use and takes just a few lines of code to get started. Toast offers nested grids, simple switches, custom namespaces, responsible layouts and more.
The 960 Grid System is an attempt to provide a commonly used grid dimensions, based on the width of 960 pixels. It it gives you two options: 12 and 16 columns, which can be combined or used independently.
Simple Grid is a handy and fully responsive grid system. It is designed mostly for developers who need a barebones style to work with. It performs well on high resolution monitors, but still can be easily adopted for any kind of mobile device.
Skeleton is a simple responsive boilerplate that perfectly fits to be a starting point of any project. You can even create a basic app or a website using only systems' styles. It offers us some grids, lists, typography, buttons, forms, tablets and so on. To start, you only need to download it without any compiling or installing. Mobile-first built-in queries guarantee that it will work smoothly on any kind of device or browser. Skeleton is also full of ready-to-use utility classes. Sometimes it's much easier to operate with utilities than to create a whole new class.
The Responsive Grid System by Graham Miller gives you a bit more flexibility than the other CSS grid platforms. You can use any number of grids you need without being limited with standard 12 or 16-column systems. There is a special Grid Generator which creates a code (HTML and CSS) for columns and their margins regarding to your request.
Gridiculous is a simple grid system. It was created to work with large desktop monitors and all kinds of mobile devices (from 1200px to 320px). Gridiculous offers space out and nested grid layouts. This feature guarantees that all your images and videos will remain fully responsible, no matter what screen size you use.
Pure was created by Yahoo! as a starting point solution for building the websites or applications. It's a lightweight framework (only 4.0 Kb) with a set of responsive small CSS modules (bases, grids, forms, buttons, tables and menus). Pure uses minimal styles, that gives an additional flexibility in case you want to build something on top of them.
Complex Web Development Frameworks
Complex Frameworks are designed as a complete web design solutions. They usually include all the features of the Simple ones, but also provide everything else you may need while developing a project from scratch. It means that you can create a whole new website or application, using only one Complex Framework.
Foundation by Zurb is probably one of the most well-known and advanced front-end frameworks of its kind. It was designed to allow you quickly combine the production code and style prototypes for modern web development.
Here are some main framework advantages:
- styles are not locked. Framework gives a space for imagination. You can overwrite or customize every standard design to implement even the same template in different ways;
- flexible design improvements and add-ons possibilities;
- Foundation contains some JQuery plugins that are not available in other frameworks (Joyride, Reveal Modal, Clearing), which help to solve some basic development tasks easily;
- built-in Fastclick.js library and an Interchange use media queries to optimize the visual content for different types of devices and browsers. Platform can load various types of HTML code on different devices and screen sizes. It directs heavy code sections to browsers and lightweight ones to mobile devices, which helps to increase application speed;
- no pixels, only REMs (one REM is equal to 16px). It helps to make websites more mobile-friendly. There is also a SASS function to convert pixels, in case if you've never used REMs before;
- CPU acceleration support.
But nothing is perfect, right? Here are some Foundation disadvantages:
- hard to start for beginners. Even standard themes are not completely finished to give you some space for customization.
- large files out of the box.
Bootstrap was created by Twitter development team. Let the numbers speak: about 20% of websites/apps made since 2011 (Bootstrap’s release year) are based on the Bootstrap framework. But why is it one of the most popular? The short answer is: because it's great. For the longer one, let's take a closer look at some main Bootstrap advantages:
- easy to learn and start;
- full of ready-to-use design examples;
- well documented;
- big amount of templates;
- designed to build quickly;
- flexible design customization;
- big community;
- installation customization. Install only the features you need.
But, despite all this, the big solutions also have some disadvantages:
- big number of classes, especially in big projects;
- large files out of the box;
- most of the projects look the same. The number of styles is really big but there are no serious possibilities to rebuild them. This is where you get compromised because of the framework popularity. Especially, when you don't have time/resources to make something more unique than the standard Bootstrap styles.
Through Semantic UI is one of the newest solutions here, it already includes everything you'll need for modern web development. It comes with the support of some popular third party libraries like Meteor, React, Angular and Ember, which makes it a great tool for any kind of projects development. Semantic is mostly focused on the components structure, naming conversion and files organization. Here are some main Semantic UI advantages:
- well organized package. You can load only components you need for each page, decreasing the file size and load time;
- semantic class names;
- easy documentation usage;
- huge amount of customization features;
- support of the most popular libraries;
- great-looking designs.
Main framework disadvantage is that some design elements are still not fully optimized for mobile devices (menus, bars, etc.).
Semantic has great chances to become a big player among Bootstrap and Foundation because of its simplicity and amount of solutions it can provide.
- clean and simple code;
- built-in animation features;
- big amount of ready-to-use themes;
- the styles are easy to customize;
- light files out of the box;
- module components. Choose the component you need without any risk to damage the style.
Main framework disadvantage is that it can be a challenge to find good learning resources except for the official documentation. UIkit is not very popular among web design communities.
- big number of components. Navigation bars, buttons, forms, grids, etc.
- MeteorJS integration;
- great design behavior. Ripple effect animation, drag out mobile menus and much more.
But as the other Complex Frameworks, Materialize CSS also has some disadvantages:
- no flexbox grid support;
- heavy files out of the box.
In general, frameworks are designed to make your job easier and allow you to create great projects with minimum effort. Let's take a closer look at some main advantages of Web Frameworks usage:
- you don't need to write the same code every time and create designs from scratch, especially when you're into a big project. It's a great chance to invest your time into a right curve;
- in case you don't know CSS very well, the framework will teach you. It may be a good environment for you to understand how CSS actually works;
- almost all projects nowadays need to be customized for different browsers and devices. Cross browser/device framework nature will let you save some time;
- if you're not a web-design ninja, you'll definitely need a helping hand to start. Frameworks come with documentation, kind of support files;
- Well-tested code is a big advantage for those who want to see their websites run perfectly on any kind of browser or device;
- frameworks help to improve good habits. Clean and nice structured code will teach you to build better. The same with ready-to-use designs - you can watch and learn to make your own visual solutions.
Frameworks can be extremely useful for all kinds of web development, but it doesn't mean that you always have to work with them. Here are the main disadvantages of Web Frameworks usage:
- the first and the worst here is that the frameworks won't motivate you to learn how to create designs from scratch;
- you'll have to use only one UI Framework again and again to succeed. No, really. They help to save a lot of time but only when you don't need to change platforms and learn how to use them for every following project. Basically, you'll be trapped inside of one solution that you've decided to learn and use;
- there is no such thing as a perfect framework. Most projects need some unique solutions. And if you have decided to use a framework, prepare to be limited with the amount of solutions that it can offer. In this case, you can combine several tools to get the best suitable outcome. For example, you can use one solution for grids, another one for CSS styles and the third one for some other complex components. But such way takes more time and kills the whole idea of building the simplicity that frameworks usually offer;
- if you're really concerned about every byte of a website or an app, be ready to clean useless lines of code. To cover multiple usages cases, frameworks can include tons of CSS styles' layouts which you'll never use.
To sum up, it's a really good idea to use frameworks. They will help you get the job done by offering massive code base and design templates to start with. On the other hand, you always can create something unique and good looking on your own. So, which way you choose will depend on your project needs, development skills and personal preferences.