A Beginner’s Guide to CSS Front End Frameworks

What is a CSS framework?

CSS frameworks provide a basic structure for designing consistent solutions to tackle common recurring issues across front end web development. They provide generic functionality which can be overridden for specific scenarios and applications. This greatly decreases the time needed to start creating applications and websites.

This way developers do not have to start from scratch every time when building applications. They can reuse the basic foundation from earlier applications and get straight into working on the crux of the website or application rather than coding in every little details again and again for each application.

To summarize:

A framework is a standardized set of concepts, practices and criteria for dealing with a common type of problem, which can be used as a reference to help us approach and resolve new problems of a similar nature.

Wait, what about libraries?

The key difference between a library and framework is where the control lies. In a library, control rests with the caller, i.e. you. This means you are in control of when the library should perform a particular function and the rest of the code, apart from that task, is independent of the library.

In case of a framework, this control is inverted. The control flow is in the framework and you can customize it in places to suit your use case.

There has been much debate about whether libraries are better or frameworks. But I take a more neutral approach to this topic. The answer, like in so many other debates, is it depends. If you’re working with a team that has a variety of team members of differing skills and is pressed on deadlines then frameworks provide structure and organization. Libraries wouldn’t solve the problem for you here.

On the other hand, framework can have a lot of unnecessary code that adds to your application’s overhead. Hundreds of lines of code for functions that you may not be using at all. The scope of the framework can also be limiting for your application as the application’s exists inside the framework. But these pros and cons are not universal, whether for a library or a framework. For instance, in a smaller project, to accomplish specific tasks, multiple libraries may suffice. The same may not work when working on an enterprise project where the organization inherent in frameworks helps the project.

What are the advantages of using a CSS framework?

Let’s look at the most obvious ones first. Time saved and a consistent structure.
Since developers do not have to start from scratch every time, they are able to save time and focus on the application specific problem rather than the smaller details of environment. The aspect of being able to reuse code is a major plus point.

The pre-defined structure that frameworks provide helps maintain consistency across applications and its various components. The package provided in front-end frameworks usually consist of HTML, CSS, and JavaScript files for ensuring various pages across the application have uniform design, typography, forms etc. The very popular Bootstrap framework, started at Twitter as a style guide for internal tools development.

In short:

• Easier code maintenance
• Coherent organizational structure for the project
• Responsive media queries
• Uniform styling across tool tips, buttons, forms etc.
• Consistent set of fonts and icons to suit the interface

Another reason is that frameworks can provide developers with a certain amount of independence when working on projects. Developers do not necessarily need redline specifications for every single design element to be supplied by designers. They have a consistent design scheme implemented innately by the framework and can customize elements in specific cases, as per requirements. That’s not saying that designers become redundant when using frameworks. It just means that developers do not need to consult a redline or design guide for every element to attain pixel perfect uniformity.

Designers can also use frameworks to cut down on the time they spend designing basic elements such as buttons and forms. Instead they can focus on other priorities in the design. Frameworks can thereby reduce overhead in designer developer collaboration.

To better understand the appeal of a general framework over a simple design system or style guide, consider this.

Joystick is a framework that was designed for internal usage at Electronic Artists (EA). The concept for it started out as a design system but the Experience design team realized that developers prefer to have actual implementable elements rather than style guides. Style guides and PDF guidelines do not really help developers because they still have all the work of turning those guidelines into useful markup.

“Developers and Engineers had to be sold on the idea that Joystick would benefit them from day one. They have the ability to make and ship things every day with or without a designer and this is a factor in leveraging popular frameworks like Bootstrap or Foundation.” – Ryan Rumsey, Experience Design@EA
By providing a framework for developers, designers and writers to draw from, the Experience design team was able to provide solid deliverables that could be extended and implemented. This helped create uniformity across the teams as well as reduce their effort. They were able to tackle the issues of scale and re-usability with one thing.

What are the different frameworks to choose from?

Boostrap

One of the most popular front-end frameworks is of course Bootstrap, earlier called Twitter Blueprint. While developed as a tool for internal teams, once it was released its adoption has gone up tremendously. It provides design templates for common UI components like buttons, typography, forms, dropdowns, alerts, tabs, carousels, as well as optional JavaScript extensions.

You can create a responsive layout with Bootstrap easily, which Bootstrap 3 heavily emphasised via its mobile-first capabilities. The ability to organize elements in a 12-column grid system with Bootstrap provides a clean consistent design across devices. Bootstrap utilizes Less stylesheets but has also been ported to Sass (which is maintained as a separate repository) so users of both can be content.

Many teams also prefer Bootstrap because of the robust support it enjoys. Bootstrap currently has over 16,000 commits from about 900 contributors on its GitHub repository.

• Used on 3.4% of the web today and by 20% of the top million pages
• Preferable for projects where speed is a priority
• Preprocessors: Less, Sass
• Responsive and mobile-first

Foundation

Foundation is a responsive front-end framework for creating quick prototypes and production code for sites that work across multiple devices. Like Twitter is the backer behind Bootstrap, Zurb is the organization behind Foundation. You can see Foundation implemented in The Washington Post’s website as well as that of National Geographic Education. Foundation is based on a 940px grid system while Bootstrap is based on 1,170px grid layout.

One of the advantages of using Foundation is the ability to whip up prototypes quickly, due to the bare bone structure of the framework and the starter templates offered. In the case of Washington Post, the design team is able to create prototypes for stories in just 15 minutes to test out designs. Foundation has good support as well with over 14,000 commits by over 940 contributors on GitHub.

• Useful for quick prototyping
• Works with Sass stylesheets
• Offers greater flexibility
• Preprocessors: Sass
• Business support, training and consultation also available with the framework

Skeleton

Skeleton is a “simple, responsive boilerplate”. By its own admission, Skeleton is a good fit for smaller projects or if lightness is the priority (it has only about 400 lines of uncompressed code). The styles are designed more as a starting point, and not as much of a UI framework. Skeleton is also a great fit for mobile-focused designs due to it’s lightweight nature.

Skeleton would also be a good starting point for beginners to front-end frameworks. It has clean code with simple layouts. That also translates to a slight mismatch when it comes to larger projects due to the lack of CSS richness and templates. Prototyping is also not the quickest in Skeleton.

• Lightweight framework with just about 400 lines of code
• Not ideal for large projects; lacks extensive templates
• Well suited for mobile-centric designs
• No preprocessors
• Good starting point for beginners

UI Kit

UI Kit elements are easy to customize and lightweight. It offers templates for quickly building web interfaces. Along with the installation package that contains all the HTML, CSS and JavaScript files, it also contains an autocomplete package for Sublime Text and Atom editors so that users do not have to look up UI Kit class names and markups again & again.

A key difference between Foundation and Boostrap vs UI Kit is the grid system. UI Kit does not use a 12-column grid setup, rather breaks down the layout into three components, which are grid, flex and width. Using the grid component, one can create as many columns as required.

• Responsive and lightweight
• Preprocessors: Less, Sass
• Not restricted to a 12-column grid
• Ability to extend and customize icons

Besides these, other frameworks which you can try for your projects are
TukTuk – Responsive, lightweight; Object oriented CSS; Written in CoffeeScript
Semantic UI – Uses natural language principles to make code more readable; Less preprocessor; Responsive with simplified debugging
YAML – Very slim framework core (5.9 kB); Sass preprocessor; bulletproof modules; work for IE 6+
960 Grid System – Fluid and responsive; 12- or 16-column grid option available; useful for rapid prototyping as well as in production environment
To see an even more extensive list of CSS front-end frameworks, see this comprehensive list: http://usablica.github.io/front-end-frameworks/compare.html?v=2.0

Final Thoughts

While front-end frameworks are widely used now, both in personal and professional projects, there do persist arguments against using frameworks. These circle around writing your own design grid instead of using one of the responsive frameworks, increased load times, the tendency for all websites to look common, and the unnecessary bloat that comes along with a framework.

As mentioned earlier, it varies from case to case and project to project. If it is suitable for your project, there’s no need to think twice. Frameworks have enough benefits to warrant their usage. When choosing the right framework for your project, consider some of these points. Does it have enough support and updates to keep up? Is it suitable for the scale of your project and for possible expansion in the future? Does it have good documentation to back it up?

In case you liked this article, you may be interested in diving into CSS preprocessors: https://blog.zipboard.co/do-i-need-to-start-using-css-preprocessors-a72b525c180a

Reposted from the zipBoard blog.