Skip to content

Latest commit

 

History

History
49 lines (33 loc) · 2.61 KB

README.md

File metadata and controls

49 lines (33 loc) · 2.61 KB

CSS Frameworks

A CSS framework is a pre-prepared software framework that is meant to allow for easier, more standards-compliant web design using the Cascading Style Sheets language. Most of these frameworks contain at least a grid. More functional frameworks also come with more features and additional JavaScript based functions, but are mostly design oriented and unobtrusive. -- Wikipedia

Why use CSS Frameworks?

  1. Saves you time in styling.
    You don't have to do all the styling anymore. Just add the available classes or styles in your markup and you're good to go. But it is always important to know CSS basics to have an idea of what is happening or if you need to customize.

  2. Mobile ready.
    Most CSS Frameworks, if not all, are built with reusability and responsiveness in mind.

  3. Gives grid layout classes.
    Layouting is one of challenging frontend task to make, having a list of classes available for you to use is one of the key factors in choosing a framework.

  4. Optimize rendering of webpage.
    CSS used are structured properly making sure that rendering or display time doesn't take to much resource such as time and memory.

  5. Utilies available
    Some CSS frameworks also provide utilies such as helper classes ex. text-capitalize, text-center, align-left, etc., modals, date picker, slider, accordion.

Note: It is also important to consider when choosing a framework to use if the project is active and stable.

List of CSS Frameworks

as of Sept. 1, 2017

Framework URL Stable Version Release Date Last Update
Bootstrap https://getbootstrap.com/ v3.3.7 Jul 26, 2016 Sept. 1, 2017
Foundation http://foundation.zurb.com/sites.html
Bulma http://bulma.io/ 0.5.1 Sept. 1, 2017
W3.CSS https://www.w3schools.com/w3css/default.asp version 4 March 24. 2017 May 20, 2017
UIKit https://getuikit.com/ v3.0.0-beta.30 Aug.18, 2017 Aug. 28, 2017
Materialize CSS http://materializecss.com/ v0.100.2 August 26, 2017 Aug. 27, 2017
Milligram http://milligram.io/ v1.3.0 Jan. 26, 2017 June 3, 2017
Tachyons http://tachyons.io/ 4.8.1 Aug. 16, 2017 Aug. 16, 2017
SemanticUI https://semantic-ui.com/ 2.2.13 Aug 07, 2017 Aug. 8, 2017

Exercises :

  1. Explore from the list of CSS Frameworks

  2. Choose which you like most

  3. Using CodePen or any similar tool, Create a sample usage of your chosen framework or try adding any of these frameworks in your existing projects

  4. Present your work to the group.