I haven’t shared much information about Cascade or my progress building it for a few months. So today, I’m starting something new. I’m going to start sharing regular updates about the design & development of Cascade.
Sharing these regular updates will allow a couple of things. First, it keeps me accountable. Second, it gives you the opportunity to speak up if you don’t like what I’m building. Please do speak up by leaving a comment or dropping me an email or tweet. I want to build this so it’s useful for you, not to force my own methods and opinions upon you.
Just a few of my sketches for cascade.
I’m sorry I haven’t shared more in the past months. The reason for this is simple: I didn’t have any details to share. I have spent the past few months planning, concepting, and brainstorming how to design Cascade. Of course, it’s turned out to be a much more ambitious and challenging project than I expected. Mostly in terms of the design. It’s also turning out to be way more awesome than I expected. I’ll explain that in a minute.
I am so, so excited to share more about Cascade with you. Yesterday, when I got the color scheme swapping up and running, I started cackling like a maniacal mad scientist. It’s so damn cool that I surprised myself. You are going to love this.
Cascade will launch initially as a ‘design framework.’
The landing page for Cascade describes a clear process:
Choose and customize styles.
Download CSS & assets.
Implement quickly & painlessly.
Screenshot of Cascade’s original workflow from http://cascade.io
The process I originally described is going to change slightly at first launch because I’m releasing cascade as a design framework.
I realize the term ‘design framework’ could be unclear, so let me clarify. Right now, Cascade is composed of .less files, HTML layout modules, and documentation. When you purchase Cascade at launch, you’ll get a zip file containing all this stuff, and you’ll use it the same way you’d use a copy of Twitter Bootstrap’s source (not compiled) version.
Cascade is a UI or front-end framework because it dictates how you’ll need to structure your markup. In fact, it comes with pre-structured markup. Once you’re comfortable, you can rewrite markup, write new modules, and experiment. The pre-structured stuff is just a starting point, and a lot more is possible. I’m leaving room for experimentation, but off the shelf, Cascade will do a lot of the work for you.
To use the framework, you must:
Customize Cascade’s 10-or-so key variable definitions. (Documentation makes this super easy.)
Compile the .less files into CSS locally, using CodeKit, command line, etc.
Integrate your content and/or back-end into the layout modules.
Cascade empowers you to customize the design by changing variable definitions in LESS. There are variables for swapping the color scheme, font pairing, logo font, and more. The layout is determined by which layout modules you plug into your HTML page. I’ll explain all this below.
You will absolutely want to compile locally and minify. Using less.js to compile in-browser is not a great idea, as you’ll be compiling all of Twitter Bootstrap’s ~41 .less files, plus all of Cascade’s .less files. (I expect there to be at least 40-50 total Cascade .less files. Right now I have 23.)
Remember, Cascade is a design framework for developers. It provides design guidance that lives in code. So you have to be able to code in order to use Cascade. You won’t need to actually write much code, but you will need to understand how it works to get it up and running.
After the initial framework launch, I will start building a web app where users can browse through all the possible design choices and then download compiled CSS. These ‘design choices’ correspond to all the possible variable definitions in the framework. So everything is still available, but when you download, you only get the styles related to the design decisions you made: one design toolkit instead of a practically infinite number of toolkits like you could create using the framework. The toolkits downloaded from the web app will cost less than the framework. But, since I have to build an entire web app to pull that off, it’s not going to be available until later. Selling the framework now will help fund building the web app.
That means that I’m releasing the most expensive part first. Sorry about that. I’m just one guy and I can’t manage it all at once, as much as I’d like to. To make up for it, I am going to offer a more basic version of the framework with fewer options and modules for a low price. More details later.
All of Cascade’s power flows from ~10 simple variable definitions.
@logoFont: overlock; @fontPairing: sans; @colorScheme: primaries;
The first few of Cascade’s configuration variables. More to come!
Cascade uses variables to determine which styles to compile out to CSS. That way, you won’t have unused font files, styles, and graphics loading on every project.
Each variable has a predetermined set of definitions. These definitions are listed out and explained inside the documentation, along with design rationale. So, for example, not only do you get font pairings, you get descriptions and reasons why you might want to pick each one.
Layout Modules: Stackable, Re-Orderable Layout Blocks
Cascade includes a large number of layout modules. The final number is still to be determined, but I expect about 30!
You pick the modules that fit the content you need to put on the page and order them however you need. Modules only stack vertically. You pick one module and paste the markup into your HTML/ERB/PHP/etc file. Then you pick another and paste its code directly beneath. Visually, each module creates a vertical section of a page and corresponds to a specific type of content. There are modules for headlines, logo and navigation, feature callouts, bullet lists, articles, comments, forms, and more.
This is powerful because the design forms itself to your content, rather than you trying to plug available spaces in a predefined layout with whatever content that fits. This process is intentional instead of reactionary. You plan the design based on your content, which is exactly the right way to create a design.
The layout module setup allows for surprisingly flexible and varied layouts. You can easily design a layout for a blog, web app, landing page, or any other kind of website. Even more unexpectedly, you can rapidly apply the same design aesthetic to multiple websites. Cascade’s visual styles are already applied to every module. You can build a dozen pages, each with a different combination of layout modules, use the one compiled CSS file, and the visual styles just work.
Oh, and just to make getting started easier, I’m including a bunch of sample project layouts along with the documentation. Each sample layout includes a set of modules appropriate for a certain type of project, like a blog, landing page, or web app admin interface. So if you don’t want to pick modules from scratch, you can start with a set of modules appropriate for, say, a blog, and then delete/add modules as you need. You’re welcome.
Here’s a sample workflow, using CodeKit. You set up Cascade and Bootstrap inside CodeKit as frameworks. When you spin up a new project, you copy the (tentatively-named) cascade-variables.less file into your project’s /less directory. You create a style.less file, and @import 3 .less files into it like below:
// // Import Cascade & Twitter Bootstrap // -------------------------------------------------- @import 'cascade.less'; // path handled by CodeKit @import 'variables.less'; // path handled by CodeKit @import 'cascade-variables.less'; // project-specific directory
(I may end up removing variables.less from Bootstrap and adding it into Cascade directly. We’ll see. If that happens, you’ll only need to @import 2 files.)
Then, you open up the cascade-variables.less file and the documentation side by side. You browse through the documentation and make choices for each variable. Change the variable definitions. Save, and CodeKit compiles the CSS. You can even copy one of the documentation’s sample HTML files into your project directory to preview the design styles in-browser.
Then, to proceed with your project, sketch out the interface you want to build on paper, and start grabbing layout modules to plug into your HTML page that match your sketch. Or use one of the sample layout files as a starting point. The design is ready. All you have to do is fill in your content and/or connect your back end.
Of course, you’ll probably want to experiment with different color schemes, font pairings, etc in the variables file. Doing that is easy. You don’t even have to touch your markup.
If you’re familiar with compiling LESS or SCSS, getting Cascade up and running shouldn’t take you more than 5 minutes.
If you’re new to LESS and SCSS, you will probably want to buy an app like CodeKit, and expect to be running in less than about 30 minutes. Only because you have to familiarize yourself with how to set up the directory structure and compile the CSS.
Color Scheme Implementation
Sample of the first 3 extremely rough color schemes. These are screenshots of real code rendered in the browser. Not Photoshop.
Color usage is very specific in Cascade, but I’m not going to bore you with all those details. The exciting part is that Cascade’s behind-the-scenes color strategy brings to life striking and masterful color palettes, and that you can customize at a granular level without breaking anything.
Note the above animated gif showing the same layout modules using 3 different color schemes. That seems cool and all, but wait, there’s more! See how the top modules have dark background colors, but the modules beneath have light backgrounds? That’s because the top modules are inverted. Using Cascade, you can easily invert a module’s colors by adding a single inline class to the module containing element. It looks like this:
Here’s the module using default colors:
<div class="banner-action"> <div class="container"> <a class="btn btn-large pull-right" href="#">See Plans & Pricing</a> <h2>Stop letting email ruin your productivity.</h2> </div> </div> <!-- /banner-action -->
By adding the “inverse” class to the module, all the colors for all contained elements are inverted:
<div class="banner-action inverse"> <div class="container"> <a class="btn btn-large pull-right" href="#">See Plans & Pricing</a> <h2>Stop letting email ruin your productivity.</h2> </div> </div> <!-- /banner-action -->
This is working today.
You can even take this a step further. Cascade supplies special versions of the inverse CSS class that set the background to brighter colors. These classes are called “inverse-major” and “inverse-minor”. Major and Minor correspond to the major (dominant) and minor (secondary) colors in each color scheme. They are the more intense, vivid colors in the color scheme. So you can set a module to be really bright so that it’s very prominent on the page. This is great for modules that have calls to action or notifications, and other important content.
Banner module with default colors, then inverse, inverse-major, and inverse-minor:
So, you can use Cascade’s color schemes and have a beautiful aesthetic right off the shelf. But with just 5 minutes of further customization, the design can get really special.
Most Pressing Considerations
In effort to be as transparent as possible and to hopefully preemptively answer your questions about code quality, I’m going to try to share the biggest ongoing concerns and/or immediate issues with the project at the end of each update.
Keeping It DRY
LESS is really powerful, and with just one lazy “&.class” line, it’s easy to spit out lots of extra styles that will never be used. I’m regularly reviewing the compiled CSS to ensure the code is concise and DRY. This is an ongoing effort, and each time I add new LESS, I have to go back and reign in the output. I’m mindful of the issue as I know it can have a considerable impact upon performance.
Compiled CSS File Size
Compiling Bootstrap and Cascade into one CSS file is going to make for a fairly large CSS file. No way around that. However, I’m doing everything I can do limit that filesize.
I am considering shipping a customized version of Bootstrap along with Cascade. I’d like to avoid that as I want people to be able to use whichever version of Bootstrap they prefer. I also don’t want to strip out components people need. (I am building Cascade using Bootstrap’s 3.0.0-wip branch.) I need to do more testing with older versions before I can promise anything. Customizing and stripping out parts of Bootstrap could be a boon to the compiled CSS file size, however.
If you have an opinion about this, let me know!
Resolving Conflicts With & Overriding Twitter Bootstrap
I am still at experimentation stage with this. Again, shipping a customized or stripped version of Bootstrap would make it easier, but I’m working to avoid that.
Right now, I am experimenting with several approaches:
‘Over-writing’ Bootstrap styles by using the same selectors with new properties lower down in the CSS file.
This has produced mixed results, as longer and more specific selectors will obviously take precedence over the later-written selectors.
Longer, more specific selectors.
I’m experimenting with adding a class on the body element and essentially nesting all Cascade styles underneath that. This makes the selectors longer and more specific, so conflicts with Bootstrap don’t occur much. Longer selectors are a trade-off because they lengthen the CSS and thereby boost the file size, especially across so many styles.
Still To Come
If you think Cascade sounds powerful now, wait until I start showing you the layout modules, font pairings, logo styles, graphics, backgrounds, and more. The possibilities for customization are endless, but it doesn’t take much work on your part. I’m so excited to share this stuff with you. I hope you’re getting excited too.
What do you think?
Phew, I hope that’s clear and makes sense. What do you think? Questions? Drop me a note.
I realize this is a massive post with more information than most people are going to read. But, it’s here if you want it. I hope to make future updates shorter.
So do me a favor: what do you think of this new information? How could Cascade meet your design needs? How well could it fit into your workflow? What are your concerns? Thanks in advance.