Cascade Framework
Putting back the C in CSS

Feature Rich

Semantic and non-semantic grid layouts, base templates, table designs, navigation elements, typography and lots, lots more.

Universal

Build high performance websites in no time for old browers and new browsers alike without worrying about browser quirks.

Atomic

An optimised atomic design gives you full control of the look and feel of your site while keeping code bloat minimal.

Modular

Don't need certain features? Don't include them. Unlike other frameworks, you can include only the components you need.

Different from other CSS frameworks

Although the overall look and feel are most definitely inspired by Twitter Bootstrap, Cascade framework is not just another Bootstrap clone. Where Twitter Bootstrap puts its focus on delivering shiny user elements that can be dropped into any project and takes control of your project's overall look-and-feel, Cascade Framework is intended to do the opposite. By splitting your CSS into separate files based on features rather than selectors as well as by implementing atomic design, Cascade Framework puts you in control!

Also different from Twitter Bootstrap or other CSS Frameworks out there, Cascade Framework can be used for modern browsers and older browsers alike. All features of Cascade Framework support Internet Explorer from IE6 upwards or degrade gracefully. With Cascade Framework you no longer have to choose between supporting only modern browsers or downgrading your design.

Cascade Modules

The following table gives an overview of the available Cascade modules.

File Content Minified Gzipped
core.css Cross-browser rules for building your page structure. 8545 B 2653 B
typography.css Font sizes, line heights and other typographical rules 2976 B 1133 B
tables.css Classes that can be combined to layout your HTML tables 1108 B 370 B
colors.css Text colors, backgrounds and border colors 5354 B 1695 B
modern.css Rounded corners, box-shadow and other CSS3 styles 3731 B 819 B
helpers.css Generic helper classes 1226 B 394 B
grids.css Presentational grid classes 1784 B 465 B
responsive.css Responsive support 2980 B 653 B
mobile-grids.css Mobile specific grid classes 2970 B 555 B
tablet-grids.css Tablet specific grid classes 2992 B 569 B
phone-grids.css Phone specific grid classes 2877 B 550 B
icons.css Icons 14362 B 2792 B
icons-ie7.css Icon support for IE<8 34991 B 2994 B
print.css Print styles 573 B 340 B

Builds

Cascade Framework provides you with 4 custom builds, that combine different modules into a single file.

File Content Minified Gzipped
build-core+typography.css Contains only the core and typography modules. 11521 B 3540 B
build-core+typography+responsive.css Adds responsive support. 14501 B 4017 B
build-full.css All modules, except for IE<8 icons and print styles. 51902 B 10830 B
build-full-no-icons.css Full build without icon classes. 37540 B 7989 B

Still not lightweight enough?

Is Cascade Framework still not lightweight enough to fit your personal needs? There's now also an even more lightweight version of Cascade Framework. Check it out on Github!

Showcase

Want to see real world examples of how to use the framework? Check out the showcase below.

What's next?

Planned features for Cascade Framework 2 :

  • A rewrite of the codebase to Sass or another a pre-processor language
  • Custom themes
  • New interactive UI elements

Want to help? Fork the project at Github.

Donations

You can also help by making a donation with PayPal.

Want to know more?

Check out the documentation for an overview and demos of the Cascade Framework's features.