I felt that existing frameworks were either too lacking in features, too inflexible or too bloated.
Cascade Framework gives you optimal flexibility with but a tiny footprint and a feature set similar to Bootstrap and Foundation.
I'm John Slegers: a 31-year-old web developed based in Belgium.
I have a bachelor's degree in applied computer science.
I worked as an SAP consultant in the past and am currently reorienting my career towards web development.
Besides Cascade Framework, recent open source projects include:
The following projects are in an early development stage, although further development has been postponed until after the release of Cascade Framework 2 due to time constraints:
My technical expertise is focused on the following areas:
Besides web development, my hobbies include:
You can find me online here:
Yes. Aside from a minor contribution by Matt Browne, Cascade Framework was created and is maintained only by myself: John Slegers.
However, I am trying to turn the project into a vibrant community or company based project, similar to projects like Bootstrap and Foundation.
I am trying to reach out to the development community, hoping to find more early adopters and/or developers that can help the framework compete with the two big ones.
Here's a couple of websites I built using based on Cascade Framework:
Not by me:
I know of a few other projects made by others, but it's mostly projects still in development (like the PNTA Architecture Documentation or PVPBet) and very basic websites with little to no custom design (like Engineer Bainomugisha's personal site or MaddRob Solutions).
Note that finding projects that use this framework is not an easy task. There may be many other projects using Cascade Framework I've never heard of.
Cascade Framework was one of two projects to win the Arrrrcamp pull request competition.
Cascade Framework was also script of the day at Softpedia on September 6th.
The Cascade CSS framework is a unique project these days. Unlike most CSS frameworks that focus on the UI, Cascade focuses on code organization and cross-browser compliance, something that most CSS frontend developers these days don't care about anymore.
While CSS framework developers has been busy in packing as much UI modules as they can in their frameworks' core, most of them forgot the main problem with Web development, a problem that's been around since the early 2000s: cross-browser compliance.
While most frameworks break when seen from a different, older browser, the Cascade Framework still renders the same and even gracefully degrades in ancient browsers.
Impossible right? Not impossible, but very possible, as this framework has proven. The biggest difference with Cascade compared to other CSS frameworks is the way code has been organized, making it super easy for developers to not only use, but also maintain the websites they build. All without breaking in older browsers.-- Softpedia
Several years ago, Blueprint was the only open source CSS framework worth mentioning. I really liked what I saw, but I felt Blueprint was lacking in features.
Thus, I started experimenting with creating a CSS framework of my own from scratch. When Twitter released Bootstrap 1, I initially gave up on that idea and tried something else.
That something else was jQuery Bootstrap: a framework that integrates the most popular CSS UI framework with the most popular JS UI framework into a single semanticly consistent frontend framework.
When Twitter released Bootstrap 2, I decided to cease development of jQuery Bootstrap. Keeping the project up to date with new features of both Bootstrap and jQuery UI seemed not worth the effort, especially considering the architectural restrictions of integrating both frameworks and the possible political backlash of competing with Bootstrap with what was basicly a Bootstrap clone.
At that point, I went back to my original idea of creating a framework of my own from scratch, focusing in overcoming the weaknesses of Bootstrap, Foundation and other CSS frameworks that had been released at the time.
Cascade Framework Light is a stripped down version of Cascade Framework. Like Cascade Framework, it is separated into different modules. However, the total size of the CSS code is only about 2kb and the project contains no JS features.
Cascade Framework Light will be integrated into Cascade Framework 2
The documentation can be found here.
Cascade Framework works in all modern browsers as well as IE6+.
Even though Cascade Framework has only been released a couple of months ago, in inherits from jQuery Bootstrap and earlier CSS experiments, from back when IE6 support was still a requirement for many companies. I decided to keep supporting IE6 rather than supporting only IE7+ or IE8+ for several reasons:
Cascade Framework has out-of-the-box support for phone, tablet and desktop.
Cascade Framework uses a desktop first implementation of responsive design. This means that the default design is a design for oldfashioned 3:4 desktop screens.
The grid is adjusted for larger screens and reset for mobile.
You can then further finetune your design for specific screen width ranges, using media queries or presentational classes.
See also this demo.
The only browsers without support for media queries that have a somewhat relevant market share are IE6-8.
IE6-8 are desktop browsers most commonly used on older desktops with 3:4 screens.
Its desktop first implementation allows Cascade Framework to provide these browsers a design suitable for this environment without any JS.
An IE6-7 hack and IE8 hack allow you to hide mobile specific content.
I also find it easier to start with a desktop layout and adjust it to mobile than the other way around.
* and _ hacks are infamous and should be considered safe. Your CSS may not be W3C valid, but often it's the only way to keep all of your IE6-7 specific code in the same file as the rest of your code without relying on browser sniffing.
Typically, other hacks should be avoided. Cascade Framework follows that principle, with one exception: a well-tested IE8-specific hack to allow mobile specific content to be hidden.
Nevertheless, Cascade Framework 2 will probably no longer contain any hacks or let you choose between hacks or separate stylesheets for code specific for IE6-8. With support for these browsers becoming increasingly irrelevant, hacks for these browsers are becoming less and less justifiable.
Cascade Framework implements a grid system loosely based on Nicole Sullivan's OOCSS project.
For a semantic grid, you typically use
nav elements along with
semantic classes to assign widths to them. These semantic classes need only one custom rule assigned to them to define the width.
For a presentational grid, you typically use a
div element with a
.col class along with
presentational classes of the type
.width-XofY, with Y being any value between
2 to 10, 12, 16 or 24 and X being any value lower than Y.
.cell class is a class used for adding padding to your grid. For the sake of compatibility with
older browsers, it requires a seperate nested block.
Both techniques can be combined.
cellclasses in the demos? ( ShowHide )
The framework's documentation site (including this page) uses the presentational grid technique described hereabove.
While this results in uglier and less semantic code than the semantic technique, it allows for much faster prototyping and is supported in old IE without any JS shiv.
Yes. All components have an architecture based on Nicole Sullivan's OOCSS and Jonathan Snook's SMACSS guidelines for optimal modularity.
Cascade Framework currently does not implement Harry Roberts's / Yandex's popular BEM naming conventions for several reasons:
.block__element--modifierclass names are very convoluted and add a lot of unnecessary bloat
Whether BEM naming conventions will be used in Cascade Framework 2 is being investigated. If BEM is used, however, it will only be used for SCSS components and not CSS output. This, because many of the downsides of using BEM apply to the CSS output but have no impact on SCSS components.
In fact, the recommended approach in Cascade Framework 2 is to avoid presentational classes for your CSS output altogether and use semantic classes instead.
I decided to write Cascade Framework in CSS rather than a pre-processor language because I prefered to focus on keeping the code both as DRY as possible and platform independent.
To improve the customisability and maintainability of the existing codebase, I had initially considered LESS for a future version of Cascade Framework. However, its syntax were a turn-off for me along with its lack of for-loops and it's bloated implementation of guards as an alternative for if-else constructs.
I started considering SASS an option since version 3.2. The inclusion of the @extend construct allows the CSS output to remain DRY and avoid CSS output duplication, while vastly improving the customisability and maintainability of the existing codebase.
I was nevertheless turned off by Sass's dependence on Ruby. Even though there are compilers written in PHP and other languages, the Ruby compiler is the only official one. Then, however, I learn about new features in Sass 3.3 that will add unprecedented meta-programming capabilities and allow Cascade Framework to be the first of a whole new generation of CSS frameworks. As such, I decided to choose Sass 3.3+ as the language in which to release Cascade Framework 2.
Still, Cascade Framework will remain platform independent. For those who do not have Sass 3.3 installed, different precompiled CSS versions of the framework will remain available in the form of both seperate modules and builds, to give these users the same flexibility they have today.
Although largely undocumented due to time constraints, Cascade Framework does come with several JS features.
Current features include:
Cascade Framework's own JS code applies most of the performance recommendations by Nicholas Zakas in a recent lecture
New features will be included in Cascade Framework 2, along with documentation of currently undocumented existing features.
Unlike Bootstrap or Foundation, Cascade Framework does not force you to use a specific color scheme and typography only to overwrite it with your own custom code.
Unlike Inuit, Cascade Framework still provides you a default color scheme and typography to work with.
To provide you this level flexibility without the use of SCSS or LESS, CSS code of Cascade Framework is separated into different modules:
Basicly, you can pick only those features you need for your specific project. For example, if you want a custom color scheme, you can just leave out the framework's color scheme or modify it into your own custom theme. Icons can easily be replaced by your own custom Icomoon icon set. etc.
While Cascade Framework 2 will be released as an SCSS meta-framework, it will still come with pre-compiled CSS output that's split into different modules for those who do not want to use SCSS.
Alongside individual modules, Cascade Framework also contains several builds. Builds are basicly just combinations of different modules recommended for different types of projects. This allows you to have different boilerplates you can use out-of-the box that are optimised for specific needs.
The recommended build for projects with custom color scheme is the build build-core+typography+responsive.css. It has a total footprint of only 4kb (minified + Gzipped)
The recommended build for wireframes or apps that don't require a custom design is the build build-full.css. It contains all modules except for IE<8 icons and print styles and comes with a total footprint of 10kb (minified + Gzipped)
While Cascade Framework 2 will be released as an SCSS meta-framework, it will still come with several pre-compiled builds for those who do not want to use SCSS.
Cascade Framework's CSS is being rewritten as an SCSS framework, making use of new features in Sass 3.3 to provide unprecedented customisation features.
Some new features:
This new meta-framework will also allow the integration of Cascade Framework and Cascade Framework 2 into a single project.
You might also want to check out this comparison table for an overview of the differences between Bootstrap, Foundation, Chopstick, Cascade Framework 1.x, Cascade Framework Light and Cascade Framework 2.