CSS Frameworks: Categories, Criteria and Recommendations
- 1. 1 CSS FRAMEWORKS: Categories, Criteria and Recommendations
- 2. 2 Table of Contents Contents 1.1. Introduction....................................................................................................................................3 1.2. Background ...................................................................................................................................3 1.3. Popular Frameworks.....................................................................................................................3 1.4. Broad Categories of Frameworks .................................................................................................3 1.5. Framework feature list...................................................................................................................5 1.6. Parameters for selecting a Framework .........................................................................................5 1.7. Recommendations ........................................................................................................................6 1.8. Summary.......................................................................................................................................6 1.9. References....................................................................................................................................7
- 3. 3 1.1. Introduction While developing a new website, when was the last time you wrote everything from scratch; built every component on your own, and didn’t use a code ‘available’ on GitHub or elsewhere? I didn’t do all that, in past 4 years, at least. You got it right… we are talking about ‘Frameworks’! Frameworks is a buzzword today— and, as the industry is getting matured day by day, there are plethora of frameworks available almost in every technology, and for most of the development stacks. Web development, or more specifically, front-end development is no way behind. Now that we know, there are way too many CSS frameworks (and growing every day), we will try and elaborate in this Whitepaper: what are the most useful frameworks; how can they be broadly categorized; and what parameters would help you in choosing the right framework; and last but not the least, is it always necessary to build a website using a framework? 1.2. Background If we look back at the yesteryears, there was a time when the UI development used to start with a blank HTML/CSS file and developers were required to create the layout, grids, define the families of CSS elements, reset the default form elements, create sprites for icons, create the components like Tabs, Accordion, Carousel, Custom Form Components etc. Things have changed drastically since then—now we have great options to choose from. All you need to know is which 'Framework' suits your requirements better. 1.3. Popular Frameworks Below is the list of a few popular frameworks (in alphabetical order): ? Bootstrap (by Twitter) ? Foundation (by Zurb) ? Gumby ? HTML5 Boilerplate ? INK ? Kube Web Framework ? Pure CSS (by Yahoo) ? Semantic UI ? Skeleton ? Web Starter Kit (by Google) 1.4. Broad Categories of Frameworks We can broadly divide frameworks into three different categories:
- 4. 4 ? Full-fledged Frameworks— with Grids, Components, Fonts, Icons etc. o Best suited for projects with critical Time-to-Market o Very useful, when going with multi-lingual (even RTL) implementation o Suites best for applications wherein the visual designs can be conveniently mapped to pre- defined grid system o Applications with commonly used or conventional CSS/JS components which are generally provided by frameworks o Applications with conventional 3 responsive design (RWD) breakpoints-- (a: <480px; b: 480px to 760px; c: 760px onwards) o W3C and/or Accessibility compliant applications o Popular Frameworks: Foundation (Native RTL support), Bootstrap, Semantic UI, Pure CSS etc. ? Frameworks only for Grids o Suites best for applications wherein the visual designs can be conveniently mapped to grids o Applications with unconventional components which might require building them from scratch or require lot of customization o Application with no CSS/JS components o Performance sensitive applications (moderate) o Popular Frameworks: Unsemantic, 960 Grid, Less Framework, Responsive Grid System, etc. ? Completely custom (ground-up) development o Suites best for applications with unique visual designs which cannot be mapped to grid systems o Unconventional or CSS/JS components which requires ground up development o Application with no CSS/JS components Features Basic Medium Comprehensive Legacy Browser Compatibility R R R CSS Reset / normalize R R R Grid Layout R R Media Queries R R Custom Fonts R Vector Icons R CSS Components R Functional Prototypes R RTL Support R Framework Categories
- 5. 5 o Applications with Minimalist design approach o Applications expected to perform extremely fast o BTW, in this case also we may use basic libraries like HTML5Boilerplate, Normalize CSS, Reset CSS etc. 1.5. Framework feature list 1.6. Parameters for selecting a Framework Now that we know, there are lots of frameworks available (and for free ?) — this leaves us with the problem of too many choices. So, below parameters might help in selecting the right framework: ? Browser Scope ? Performance ? Similarity with Visual Designs ? Out-of-the-box availability of desired components ? Ease of modification ? Scalability ? Maintainability Frameworks IE6Compatibility IE7Compatibility IE8Compatibility IE9+Compatibility CSSReset/normalize GridLayout MediaQueries VectorIcons CSSComponents FunctionalPrototypes RTLSupport Bootstrap (v2.3.2) R R R R R R R R R Bootstrap (v3.3.5) R R R R R R R R Foundation (v 4.3.2) R R R R R R R R R Foundation (v 5.5.2) R R R R R R R R Gumby (v 2) R R R R R R R HTML5 Boilerplate (v 4.3) R R R R R HTML5 Boilerplate (v 5.2) R R R INK (v 3.1.10) R R R R R R R R Kube Web Framework (v 4.02) R R R R R R Pure CSS (v 0.6.0) R R R R R R R Semantic UI (v 2.1.4) R R R R R R R Skeleton (v 2.0.4) R R R R R Web Starter Kit (v 0.5.4) R R R R Feature List
- 6. 6 ? Documentation ? Learning Curve ? Community support ? Professional support 1.7. Recommendations Semi-finalists: ? HTML5 Boilerplate — if you want an absolutely minimalist framework; and if you want to lead your own way and don’t want to get influenced by others. Further, if you need *LOT* of customization or have unconventional components which you don’t get out of the box. This could be a best way forward. BTW, HTML5 Boilerplate v4 even supports Internet Explorer 6. ? Google Web Starter Kit — Web starter kit is built on the top of HTML5 Boilerplate, and they have extended it keeping multi-screen / multi-device experience in mind. This would be a good framework, if you need a no-frill framework which is wonderful at Responsive Design. ? Twitter Bootrstrap – The most popular HTML/CSS framework and a trend-setter — 82000+ “stars” on GitHub speak volumes about it. If you are looking for a stable, full-fledged framework and not very keen on uniqueness of your UI, this would be the right choice in most of the case. ? Zurb Foundation – If anything comes closer to Twitter Bootstrap, it is Foundation. Claimed to be “The most advanced responsive front-end framework in the world” it is also a widely used framework with 20000+ “stars” on GitHub. Additionally it claims to be “the first front-end framework created for developing fully responsive web apps.” The Final one: My point of view is— if the visual design and components and not very unconventional, then going with Zurb Foundation framework is advisable in *most-of-the-cases*. It offers Business support; it is fairly customizable; has got wonderful browser coverage; offers out-of-the-box templates for extremely quick prototyping; provides support for Right-to-Left languages like Arabic, Hebrew and Urdu; compliant with W3C standards and Accessibility; and obviously the basic features like grid system, common components and many more. Bootstrap is undoubtedly a strong contender but (as we write) lack of RTL support in Bootstrap and availability of out-of-the-box templates for prototyping, gives clear edge to Zurb Foundation. 1.8. Summary So, based on your project priorities evaluate the available Frameworks on above mentioned parameters and make the right choice. While we conclude, it would be absolutely important to mention that—along with so many options in frameworks, your evaluation could very well result into going with 'no-framework' for specific cases wherein the project is quite different from the usual pattern, and lot of modifications are expected if an existing framework is used… so, keep in mind that too.
- 7. 7 1.9. References ? https://github.com/ ? https://html5boilerplate.com/ ? https://developers.google.com/web/tools/starter-kit/ ? http://getbootstrap.com/ ? http://foundation.zurb.com/