Many a times, when I start a new project, often the client gets excited when the word ‘bootstrap’ or ‘foundation’ comes around during the inception phase. They want to know more and get excited. They hope that their site would look great if is it built with a framework and typically look towards the UX developers/designers for advice and recommendations.
Listed below are the benefits of a CSS framework, which can help to educate the client on why they need it:
Responsiveness
The biggest advantage of a CSS framework is the grid system it comes with, which provides adequate breakpoints for different devices (phone, tablet, desktop, large screen), making your site truly responsive for different device widths. If the client persists their site need not be responsive, it is easy to disable the responsive feature for now and make use of the other benefits it provides. This way, if the site wants to be responsive few years down the lane, the foundation is already there in the form of a framework and should not be a hard task to make it responsive again.
Uniform Styling & Branding
A CSS framework typically provides a uniform structure and styling for all the different html components such as buttons, navigation, panels, lists, etc. This is extremely useful and makes it easy for the design team to look up to and create the branding/styling of the site’s elements based on the framework’s styling. If there is no visual designer in the project, then the framework is already providing a base level of branding for the new site to be built.
JavaScript Components
Every website today makes use of several JavaScript components such as modal dialogs, panels, accordions, tooltips, carousel, etc. Traditionally, without a framework, one would need to write or import a custom JavaScript/jQuery plugin for each of these components. The downside of this method is that, some of the plugins can become obsolete and with no proper documentation or support, it is hard to debug and customize. Today, most of the popular CSS frameworks (bootstrap, foundation, skeleton, etc.) come packaged with these JavaScript components and makes it easy to implement, debug and customize.
Accessibility
Accessibility is increasingly becoming an important feature of a website. The emphasis is on front end developers to at least provide a base level of support, and one could refer to section 508 checklist for that. Popular CSS frameworks like bootstrap and foundation do already include adequate support for accessibility in their html elements (form elements, modal dialogs, tooltips, panels, images, etc) which a front end developer can use and leverage upon to make the site more user-friendly.
A CSS framework also provides many other advantages such as native support for pre-processors (sass, less), customization for different needs, extensibility, ease of showing/hiding content on different devices, to name a few.
Here is a list of the most popular CSS frameworks currently being used in the industry –
It is also extremely important to select the right CSS framework for the application you are building. Because, once you select a framework, it is a big overhaul to migrate to another framework and not advisable. Some of the deciding factors in selecting a proper framework would be –
- Browser compatibility
- Learning curve
- Ease of customization
- Ease of integration with the backend application
- Ease of migration to newer versions
- Usage, development community and support
- Number of open issues with the framework
What is your preferred CSS framework of your choice ? What factors do you consider before choosing one and how do you advice the clients on selecting the right one ? Let us know below.
Harish, nice job encapsulating the important information on CSS framework options, and accessibility. This could be useful information to send over to the folks at OMIG.
Great post Harish! Very valuable consolidated information!