Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.



Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this


  1. 1. Cascade Framework
  2. 2. Introduction • Cascade Framework is a free frontend framework for creating websites and web applications. • It contains a wide range of HTML and CSS-based interface components, as well as optional JavaScript extensions. • MIT Licensed • Cross Platform
  3. 3. Features • Cascade Framework is entirely based on an OOCSS architecture optimized for both performance and flexibility. • Cascade Framework contains advanced components like “panels”, “tab blocks” and “navigation” components that can be combined in various ways. • Cascade Framework is design agnostic. You can choose the default theme, create one of your own or just work with your own project specific custom design and leave out the default theme entirely. Both typography and color scheme are separated in separate modules to suit that purpose. • Cascade Framework allows you to choose between a Semantic Grid technique and a presentational grid technique. Twitter Bootstrap offers only a presentational grid technique. • With Cascade Framework, you can use any number of columns you want (1,2,3,4,5,6,7,8,9,10,12,16 and 24 columns are supported) throughout your project and nest them freely.
  4. 4. Features • Cascade Framework’s grid uses a special padding element for its gutter, which combined with the media object integration makes the grid both more powerful and easier to use than any other grid system. • The total CSS code of Cascade Framework is only 9712 bytes minified and gzipped and can be further reduced if you don't need all modules. For many projects, you’ll do fine with a build of Cascade Framework with that’s only 3910 bytes. • Cascade Framework has a “light” version that’s no more than 2010 bytes in total. While it doesn’t contain components like panels or tabs, it still offers you a clean design for a whole bunch of elements, support for IE6, responsive behavior, etc. If you need just its grid features, you can go as lightweight as 323 bytes. • Cascade Framework offers support up to IE6 and there are no plans to drop support for older browsers in the near future.
  5. 5. Latest version 3.0 4.3 0.1 1.1 1.5 Not released yet Sources •Documentation •Github Repo •Documentation •Github Repo •Documentation •Github Repo •Documentation •Github Repo •Documentation •Github Repo N/A License Apache (no restrictions) MIT (no restrictions) MIT (no restrictions) MIT (no restrictions) MIT (no restrictions) MIT (no restrictions) Created by Twitter San Francisco, CA, USA Zurb Campbell, CA, USA Wijs Gent, Belgium John Slegers Leuven, Belgium John Slegers Leuven, Belgium John Slegers Leuven, Belgium Icon set included •Glyphicons •CC BY license (attribution required!) None None None •Font Awesome •OFL license (no restrictions) •Font Awesome •OFL license (no restrictions) Css Framework Comparisons Bootstrap Foundation Chopstick Cascade Light Cascade 1 Cascade 2
  6. 6. Default size (min) 100.804 bytes 163.589 bytes 25.373 bytes 5.740 bytes 52.477 bytes (1) N/A Default size (min+gzip) 16.161 bytes 17.665 bytes 3.415 bytes 1.980 bytes 11.165 bytes (1) N/A Pre-processor LESS SCSS/Compass SCSS/Compass N/A N/A SCSS Metaframework No •Written in Ruby •Depends on Compass No No No •Written in SCSS •Requires Sass 3.3+ File structure Monolithic build Monolithic build Monolithic build •Individual modules •Multiple builds •Individual modules •Multiple builds •Individual modules •Multiple builds DRY No No No Yes Yes Yes Custom naming No No Yes No No Yes Footprint optimisation No No No Yes Yes Yes Performance optimisation No No No Yes Yes Yes Css Overview
  7. 7. Grid Presentational grid classes Yes Yes Yes No Yes Yes Nestable Yes Yes No Yes Yes Yes Offsets Yes Yes Yes Limited (4) Limited (4) Limited (4) Default # of columns 16 12 12 N/A 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 16, 24 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 16, 24 Column ordering Yes Yes Yes Limited (5) Limited (5) Limited (5) Combining different # of columns No No No •Nested •Within the same row •Nested •Within the same row •Nested •Within the same row Media object Isolated component No No Integrated in grid Integrated in grid Integrated in grid Semantic grid support LESS required Sass/Compass required Sass/Compass required Minimal custom CSS Minimal custom CSS •Minimal custom CSS •Sass optional
  8. 8. Thank You