Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

A Beginner’s Guide to CSS Front-End Frameworks

DZone's Guide to

A Beginner’s Guide to CSS Front-End Frameworks

In this post, we go over the basics of CSS frameworks, and which framework is best depending on your front-end development needs.

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

This article investigates: Why to use CSS frameworks and which framework works for you.

What Is a CSS Framework?

CSS frameworks provide a basic structure for designing consistent solutions to tackle common 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 they build an application. 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.


Source : Tom Lokhorst’s blog

There has been much debate about whether libraries or frameworks are better. 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, frameworks can have a lot of unnecessary code that adds to your application’s overhead. That's 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 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 frameworks may help to deal with the large scope of 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 the environment. The aspect of being able to reuse code is a major plus.

The pre-defined structure that frameworks provide helps maintain consistency across applications and their various components. The package provided in front-end frameworks usually consists of HTML, CSS, and JavaScript files for ensuring various pages across the application have uniform design, typography, forms, etc. For example, 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 tooltips, 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 their 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 was designed for internal use 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.

Source: selling a design system before asking for buy-in

“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

Sample Bootstrap project. source: wikipedia

One of the most popular front-end frameworks i, of course Bootstrap. While developed as a tool for internal teams, once it was released its adoption grew 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 its robust support. 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

Lamborghini’s website is built on the Foundation framework. source: Foundation showcase.

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 and again.

A key difference between Foundation, Boostrap, and UI Kit is the grid system. UI Kit does not use a 12-column grid setup, but 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; works 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 environments.

To see an even more extensive list of CSS front-end frameworks, see this comprehensive list.

Final Thoughts

While front-end frameworks are widely used now, both in personal and professional projects, some arguments against using frameworks do persist. 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 the same, 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 use. 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.

Originally published at blog@zipBoard.

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:
css frameworks ,front end development ,web design ,web dev ,bootstrap

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}