Cascade v1.0 Documentation

Your startup design struggle is over. Let's get started.

Get ready to experiment.

Cascade is a sandbox for design experimentation. Try combinations to build the aesthetic you need. There's no bad combination.

This documentation isn't exactly conventional. It focuses on answering design questions like:

  • Why would I want to pick this color scheme?
  • Will this font pairing help create the style I want?
  • Which layout module will match this section of my content?

Every included variable definition and graphic in Cascade has a design rationale written here. Think of it like a guide for your design exploration.


Thank You & Support

Thank you for giving Cascade a try.

If you have any difficulties, please get in touch. Email me at jarrod@cascade.io and I will respond to you personally.


Quick Start

Try watching full screen so you can read the code.

View on Youtube.


Understanding the Framework

Cascade includes all kinds of assets, like CSS, LESS, HTML, images, and JavaScript, and that might seem a bit confusing. How does it all fit together to give you a design?

Most of these assets are there for your convenience and to make life easier. However, you only need to worry about two features to start customizing your design:

1) HTML Starter Layouts

After you open up Cascade, you'll notice 6 HTML files that begin with the "starter-" prefix. These are the files you should look at first.

Cascade provides layout designs in these files. You can begin a project by just grabbing one of them and replacing the example content with your own content.

The starter HTML relies upon Bootstrap 3 for layout. Cascade's CSS adds aesthetics to this, in addition to custom responsive layout styles in certain places.

You can customize a layout (or build one from scratch) using Cascade's "layout modules." Learn how this works in the Layout Guide.

2) LESS Framework

The most powerful feature of Cascade is the LESS framework. It's built using the less.js CSS preprocessor. You'll find the framework in /less. Note files for typography, font pairings, color schemes, layout modules, and more.

The entire LESS framework depends on variable definitions inside the cascade-variables.less file. You create a new copy of this file for every project, and use it to store project-specific settings for colors, fonts, logo, etc.

To use the LESS framework, simply create a new .less file, and @import both cascade.less and the project-specific cascade-variables.less. Then compile that new .less file into CSS and link it in your HTML.

The starter layouts include an example root LESS file, called style.less, which imports all the files you need.

Get a Feel for Cascade by Editing the Starter Layouts

  • Open one of the "starter-" HTML files in a web browser.
  • Then, open /assets/less/cascade-variables.less in your text editor.
  • Note the options for each variable in the comments.
  • Copy and paste a few new options. Save the file.
  • Compile /assets/less/style.less using one of the methods below.

  • Refresh your browser window and see the changes reflected.

Starting a New Project

To start a new project using Cascade:

  1. Copy one of the "starter-" prefixed HTML files and the entire /assets directory to a new location.

  2. Edit /assets/less/cascade-variables.less
  3. Compile /assets/less/style.less using one of the methods below.
    • If you are using Codekit to compile, add Cascade's /less directory in Codekit as a framework.
    • If you are not using Codekit, you'll need to edit the @import cascade.less statement in /assets/less/style.less to reflect the correct path to the file in the Cascade /less directory.

Compiling LESS

OS X: Codekit ($)

Codekit is a 3rd-party app useful for compiling assets and refreshing the browser window while you work. It also allows you to add Cascade as a framework, so anytime you @import: cascade.less, you don't have to worry about the paths to the files.

Codekit is quick and painless to get running, and I highly recommend it. I used Codekit to build the entire Cascade framework, and the experience was much much easier than other methods of compiling.

Command Line (free)

You need to install less.js. Depending on your OS, these instructions may vary. There are many ways.

One of the easiest ways is first to install node and npm. Both are included in the installer at nodejs.org.

(Joyent also has more advanced/detail instructions for various OS's here.)

Then:

$ sudo npm install -g less
            

To compile from the project root directory:

$ lessc assets/less/style.less > assets/css/style.css
            

Grunt & LiveReload (free/$)

  1. Install Node.js & NPM as above, from installer at nodejs.org.
  2. Install Grunt

      $ sudo npm install -g grunt
                    
  3. Install Dependencies

    Run this in the project root directory to load package.json dependencies.

      $ sudo npm install
                    
  4. Start watching for changes

    Run this in the project root directory to watch for changes.

        $ grunt watch  
                    
  5. (optional) To have the browser window refresh automatically after compiling, install the free LiveReload Chrome Extension or purchase LiveReload.

Read a more detailed walkthrough of this process here.

Windows: Prepos ($)

Check out Prepros App. Similar to Codekit, but for windows.

Do not compile on the client-side for live sites

Avoid compiling Cascade on the client side using less.js for 2 reasons:

  1. Compiling on the client-side is very slow. Cascade includes 45 .less files, which means 45 extra http requests on your site. That will slow down your site substantially. You don't want that. It's okay to compile in the browser locally, just for development purposes, if you want.
  2. Publicly hosting all of Cascade's LESS files violates the license. You can put everything included with Cascade in a publicly accessible location, except the files in /less. Cascade is built by a 1-person team working from a home office. I rely on it to pay my bills. Thanks in advance for your consideration.

Local vs CDN Assets

By default, Cascade uses many dependencies through CDN hosts.

CDN Exception: Mobile First & IE8

Cascade and Bootstrap 3 are mobile first and responsive. If you are supporting IE8, you need to use Respond.js to enable media queries.

If you don't use Respond.js, IE8 will use the mobile layout styles by default.

However, there's a catch. Respond.js works by reloading the CSS. Because of this, if you use any CSS hosted on a CDN, you will run into cross-domain issues.

So, to support IE8, Cascade defaults to self-hosted Bootstrap CSS and Respond.js.

If you don't care about IE8, you can remove Respond.js and use Bootstrap CDN to host bootstrap.min.css.

Self-Hosting All Assets

If you prefer, you can host almost all of Cascade's assets yourself to remove CDN dependency.

You might want to do this for security-sensitive projects, or if you don't like the idea of relying upon a CDN for your site to function.

The starter layouts all have paths to local assets commented out, in context. To switch to self-hosted, just edit in the paths from the comments.

Switching Font Awesome to local font files

Font Awesome's path to the font files is stored in a LESS variable.

The font files are located in /assets/fonts. To reference them, just change that variable and then recompile your LESS into CSS.

Add this in your style.less file, somewhere after the @import statements:

@fa-font-path: "../fonts";  
            

(Or the correct path to that fonts directory relative to the location of the compiled CSS.)

When the LESS is compiled, it will use the last variable definition if there are duplicates. So this will override the CDN path.

Exception: Google Fonts

Cascade does not currently provide a method to self-host the fonts furnished by the Google Fonts service.

If this is important to you, get in touch and let me know: jarrod@cascade.io.

Essentially, you'll need to download the font files for the logo and font pairing you are using. Put them in /assets/fonts. Then, change the paths in the @font-face declarations.

Each logo and font pairing option has its own LESS file in /less. Logo files are prefixed with "logo-" and font pairing files are prefixed with "pairing-".

You can grab the URL for each font file from those LESS files, then edit the paths there too.

cascade-variables.less

This file represents all your design decisions. To start, you only need to worry about the first 11 variables described in this section. The rest are defaults you probably won't need to mess with much, including overrides for Twitter Bootstrap.

Determines your logo font and some of the typography styles for the logo. Each logo has suggested font pairings, as described below in the typography section.

There are 11 options:

friendly, fashion-italic, fashion-caps, script, ultralight, block, sans, serif, slab, fat-serif, techy

@font-pairing

Determines the fonts for everything but the logo.

There are 9 options:

sans, friendly_sans, fat-serif_serif, serif, sans_serif, fat-serif_sans, fashion_serif, slab_sans, techy_slab

@color-scheme

Determines colors for everything.

There are 8 options:

primaries, muted, blues, golden, greengray, neon, cold, retro

@box-bg

Determines which photo background-image is used on layout modules that include a .graphicbox. If your layout doesn't use one of these modules, ignore. (Right now, only affects landing-page-a example layout and .logo-graphicbox, .staggers layout modules.)

Combined with your color scheme choice, Cascade will use the correspondingly-named images in /assets/img.

There are 4 options:

blur-a, blur-b, grainy-a, grainy-b

@btn-shape

There are 3 options:

round, square, pill

@btn-fill

There are 2 options:

solid, gradient

Logo Effects

Logo effects are an exercise in progressive enhancement. Some only work in webkit. Most do not work in older browsers. Your logo will render beautifully everywhere. In newer browsers, it will look even better.

@logo-text-shadow

Determines whether logo has a shadow.

Supported values:

false, glow, double, extrude, hard, ghost

@logo-icon

Adds an icon :before the logo. Accepts values for each icon from Font Awesome v4.0.3.

See the icon reference for a full list: Icon Reference

Paste in the whole name of the icon.

For example, this definition:

@logo-icon: fa-code;

Would display this icon next to the logo:

@logo-gradient

Determines whether logo text has a gradient applied.

Supported values:

true, false

@logo-stroke

Determines whether logo text has a stroke applied.

Supported values:

true, false

@img-path

When you start a project, you'll need to point this variable at the directory you copy Cascade's /assets folder to. By default it's set up for the example layouts.

Other Variables

@flat

This variable enables Flat Design. It disables shadows and gradients everywhere except for the logo and buttons. (Logo and buttons have separate variables for gradients and shadows.)

Supported values:

true, false

Module Padding Variables

Base padding for all layout modules. Recommend not messing with this unless you really want to dive into customizing the grid system, alignment, and spacing. These variables affect all layout modules.

  @base-module-padding:       50px;
  @module-padding:            @base-module-padding 0;
  @short-module-padding:      20px 0;
  @merged-module-padding:     @base-module-padding 0 0;
            

Typography: Logos & Font Pairings

Here's a description of each logo and suggested font pairings. I highly recommend using one of the suggested font pairings for the best results and the most striking aesthetic.

Specific layout modules contain the logo. Use these as a starting point.

For these descriptions, I have tried to keep the typographic jargon to a minimum. However, be aware of two terms I use to describe content placements:

Display: Shorter textual elements with larger font size. Such as headlines, h1-h4. Because the font-size is larger, display settings can use more decorative and expressive fonts.

Text: Longer elements with smaller font sizes, such as paragraphs. Here, readability is priority, so more decorative fonts are not appropriate.

@logo: friendly;

Style

The letterforms are playful and light-hearted. Italics are even more expressive. Fitting for a cheerful, energetic brand.

Usage

The logo uses a bold weight, and any extra words wrapped in span, strong, or em will be normal weight.

Suggested Font Pairings

friendly_sans: Further emphasizes the friendly feel. Uses the same font for display, and a less decorative, matching sans-serif for text.

sans: The display and text fonts will provide a nice contrast to the more decorative logo. Balances the playfulness with a more professional, clean sans-serif look.

serif: Using the serif pairing with the friendly logo adds a special warmth. The serif's italics are especially playful and match the logo well. If you choose this logo and pairing, try using some extra em tags.

@logo: fashion-italic;

Style

This logo font reminds me of high fashion brands, and with certain words, can communicate a similar high end, luxury style. Especially when the words are all lower case. Also features high contrast, which means the width of lines changes drastically. It's a high end look.

Usage

The logo will be in italics to take advantage of this typeface's sophisticated shapes, and will have a very heavy weight, black (900). Anything wrapped in span, strong, or em will be reduced to normal weight, no italics for the sake of contrast.

Suggested Font Pairings

fashion_serif: Uses the same font as the logo, so it's a great match.

serif: The serif further emphasizes the sophistication. However this particular serif is somewhat less formal than many classic serifs, so the design won't feel overly stuffy.

sans: Contrasting the logo with a cold sans-serif font makes its expressiveness more apparent. The sans-serif also features lighter weights for display, which are a common (and fitting) combination amongst fashion brands.

@logo: fashion-caps;

Style

Uses the same font as fashion-italic, but transformed to uppercase and no italics. These simple changes make a huge difference in the feel. This logo is strong and impactful. It's loud. Best with shorter words.

Usage

A very heavy weight, black (900). However even with capital letters, the high contrast (variance in the width of the lines) prevents the logo from feeling overly heavy. Anything wrapped in span, strong, or em will be reduced to normal weight. Italics are enabled for em.

Suggested Font Pairings

fashion_serif: Uses the same font as the logo, so it's a great match. This pairing adds lots of character to the stark capital letters.

serif: The informal character of the serif is a nice contrast to the stark capital logo. Again, the italics can soften the style here to an extent.

sans: Using this pairing with the fashion-caps logo gives a more intense, cold feel. This sans isn't quite so geometric, as, for example, Helvetica, so it's not an unapproachable feel. However, this combination does almost remind me of old propaganda posters.

fat-serif_serif: This pairing adds a unique character to the design. Definitely more playful. Using this pairing does introduce a bit of extra typographic variety, which some typographers would consider a mistake. However, because the logo uses only capital letters, I think the added variety is nice in this case.

@logo: script;

Style

This logo font somehow manages playfulness and sophistication at once. I always hesitate to use brush script fonts because they can feel old-fashioned or even cheesy. Not so here. This font evokes a hand-made, quality feel. It's too pretty to be handwritten, but it's not cold either. It's friendly but still mature. It strikes a nice balance, and could be useful for friendly, down-to-earth brands.

Usage

Use this for short logos, preferably one word. Multiple words can decrease legibility quickly and can also look very cluttered. Wrap extra words in span, strong, or em, and they will be set in the display font from your chosen font-pairing.

Suggested Font Pairings

friendly_sans: The display settings in this pairing are very expressive and match the script logo nicely.

slab_sans: The slab serif font is more blocky and geometric, which is a nice contrast to the flowing script logo.

sans: Also contrasts the script, but more delicate than the slab pairing.

serif: A great match of character. Can't go wrong here.

@logo: ultralight;

Style

The light weight logo feels contemporary, clean, and fashionable. Despite the light weight it's still very striking. Use for brands that need to look cool, modern, or "designer."

Usage

Works great for logos that have more words. (If your business name is really long, you might need to reduce font-size in some locations, or bump it to multiple lines.) span, strong, and em are all set to use the same light weight, but with italics added.

Suggested Font Pairings

sans: This pairing uses the same font family as the logo, so it matches perfectly. It's a very well designed typeface, so the text will offer a very sophisticated, clean feel.

fashion_serif: Inverts a common sort of high end fashion typography style to great effect. Feels very sophisticated.

slab_sans: The blocky slab serif letters feel the exact opposite from the thin letters in the logo. Makes the design very expressive, and a bit less refined.

@logo: block;

Style

Bold, heavy, capitals. Block lettering, for when your logo needs to get attention and make a strong statement.

Usage

This logo is great for longer business names too, because anything wrapped in span, strong, or em will be set to a very light weight. You can experiment with lots of combinations here.

Suggested Font Pairings

sans: This pairing uses the same font family as the logo, so it matches perfectly. Here, the logo carries a lot of weight, but the subtle shapes in the text really shine through.

sans_serif: adding the serif for body text is a nice touch. It creates some depth and softens the impact of the bold capitals to an extent.

slab_sans: Go big or go home. Using the slab with the block letters makes for a strong statement.

@logo: sans;

Style

No frills or extra ornamentation. No nonsense. This logo is direct and simple, but not plain.

Usage

Bold weight, but span, strong, and em are set to normal weight. Adds a bit of extra variety when you need it, but maintains the simple style.

Suggested Font Pairings

Surprisingly, this logo matches every single one of the font pairings well. Go crazy. If you want to maintain a simple look, try: sans, serif, or sans_serif.

@logo: serif;

Style

There's nothing more classic than a quality serif. This serif is more on the friendly side, so it's very usable. The style here is simple, but not plain.

Usage

The logo is bold, and span, strong, and em are normal weight. Using em will add a bit of playfulness.

Suggested Font Pairings

serif: Spreads that classic serif look across the rest of the design.

sans_serif: adds a sans serif for display settings, which adds contrast. A very flexible design.

fat-serif_serif: The display headings are more decorative and complement the logo nicely. Text uses the same font as the logo.

@logo: slab;

Style

A bold weight and geometric feel. However, I selected this slab serif font because it leans towards the friendly side, so it's very adaptable.

Usage

The logo is bold, but span, strong, and em are normal weight. Note: there is no bold italic version in this font family.

Suggested Font Pairings

slab_sans: Continues the feeling of the logo. Uses the same font for display, but a complimentary sans for text.

techy_slab: This pairing feels more decorative because of the display settings. Obviously has a very Web 2.0, tech kind of feel. But don't let that dissuade you. It works really well for certain brands.

sans: The less decorative sans feels more simple, but also more refined.

@logo: fat-serif;

Style

It's called fat for a reason. Thick, heavy characters and playful shapes. A very fun and informal style. However, don't let that playfulness fool you: the shapes themselves are very well designed.

Usage

Black (900) weight logo. span, strong, and em are normal weight. Highly recommend using the italics, as they are exceptional.

Suggested Font Pairings

fat-serif_serif: This pairing uses the same font for display, and a simpler serif for text. I really like this font family. There aren't many free fonts of this quality, and using it so much here will really set your brand apart.

fat-serif_sans: Swapping for a sans on the body text provides a great contrast. The logo and display settings are different and expressive, but the text is unassuming. A great combination.

sans_serif: Using a sans for display contrasts the logo really well. This feels very refined.

@logo: techy;

Style

Web-two-point-oh! Logos like this were very trendy a few years back. However unlike many trends, this one had roots in a really solid typographic style. This is a simple, stylish sans serif, and I think it's worth considering.

Usage

The logo is bold, and span, strong, and em are light weight. Consider using the italics here if possible.

Suggested Font Pairings

techy_slab: I like using the slab on the text. The techy logo and display settings can stand up to it, and the combination is fun. Completely different rhythm from the other pairings.

sans: Using the simple sans pairing feels sophisticated and modern.

slab_sans: Using the slab reduces the techy, Web 2.0 feeling, if you are afraid it's too over-the-top. Gives the composition a very heavy weight.


Logo Effects

Using logo effects in Cascade requires some experimentation. The combinations aren't completely foolproof, so be careful not to go overboard. When in doubt pick an @logo-text-shadow, set everything else to false.

Text Shadow

Text shadow enjoys great browser support, so don't worry about using it. Also, if a browser doesn't support it, losing a shadow doesn't really affect the originality of your logo much.

@logo-text-shadow: false;

No shadow. Use this option if you'd prefer using other logo effects, or if you are aiming for a more flat-style design.

@logo-text-shadow: glow;

A simple light-colored glow. Adds a subtle depth without being too obvious.

@logo-text-shadow: double;

Two overlapping shadows. One is a light color and the other dark. Adds a lot of depth. This effect pages the logo very striking because of the color contrast.

@logo-text-shadow: extrude;

This shadow makes the text look 3d, as if the letters themselves have thickness. Another way to add visual interest. I've made sure the effect doesn't look too gawdy.

@logo-text-shadow: hard;

A single high contrast shadow to call attention to the logo. Simple but effective.

@logo-text-shadow: ghost;

Three shadows that fade into the background. Almost implies motion.

Logo Icon

This effect adds an icon :before the logo from the Font Awesome library. Hundreds of options are available. Peruse Font Awesome's icon list to choose one. Just use the name of the icon, without quotes, for the variable definition. For example:

@logo-icon: fa-code;

Be creative! There are lots of ways to represent your brand visually. Pick the icon that matches your purpose and spirit.

Or, if you don't feel an icon is appropriate, just use @logo-icon: false;

Note: do not use any of the brand icons included in Font Awesome. If you did, you'd essentially be stealing, for example, Facebook's logo, and that would get you into trouble! The brand icons are marked clearly.

Logo Gradient

@logo-gradient: true;

Or

@logo-gradient: false;

Adds a lot of visual interest to your logo. It uses the letters to crop a background gradient, which only works in webkit.

Note: This effect can crop off parts of letters in some fonts. If you use it, make sure to take a look at the logo in all the browsers you plan to support. If in doubt, don't use this effect.

Logo Stroke

@logo-stroke: true;

Or

@logo-stroke: false;

Best used with @logo-gradient: true;

Note: Only works in webkit. This effect does cause a faux boldness on fonts. If in doubt, don't use this effect.

Button Styles

Cascade includes 6 combinations of button styles that apply to all of Bootstrap's buttons, including .button-group, .dropdown, .btn, .btn-large, .btn-sm, and .btn-xs.

Cascade adds a new button style, .btn-biline, for buttons that have 2 lines of text. Check out the landing-page-a example layout for a preview.

@btn-shape: round;

The buttons will have rounded corners. Designers like this effect, because it's visually appealing and an easy way to make a design look different. The border-radius is set separately for each button size.

@btn-shape: square;

Standard buttons with squared corners.

@btn-shape: pill;

Buttons with half-circle ends. The pill shape is a nice variation you don't see as often as rounded corners, so it's a nice alternative.

@btn-fill: gradient;

Add a gradient to the button. Cascade creates this gradient automatically, so you don't have to mess with adjusting hex codes.

@btn-fill: solid;

A solid, flat background button. Use if you want to keep it simple.


Color

Cascade includes 8 color schemes, with more to come. The stylesheet will apply colors to all elements, so you don't have to mess with figuring out which colors to use where.

Using Inverse Colors

You can invert colors for an entire module easily by just adding a single html class. Modules with the inverse class will have a dark background color and a light text color.

inverse

<div class="banner-action inverse">...</div>

banner-action is the class for the layout module. Adding inverse changes the colors.

Cascade also includes 2 variations on the inverse class for using brighter background colors.

inverse-major

<div class="banner-action inverse-major">...</div>

inverse-major uses the color scheme's @major-color for the background, which is always a bright color suitable for branding or calling attention to important content. This is safe to use with some frequency. You can even use it to change the background color for your entire design, by applying it to every layout module.

inverse-minor

<div class="banner-action inverse-minor">...</div>

inverse-minor uses the color scheme's @minor-color for the background, which is the brightest and most intense color in the palette. Use sparingly and with caution. This makes the module very prominent, and over-use will cause your design to be too intense.

Color Scheme Descriptions

@color-scheme: primaries;

This color scheme is very high contrast and intense. Works well for outspoken, energetic brands, as the colors are bright.

@color-scheme: muted;

The colors here are more dull and even slightly dissonant. It's an interesting and brave combination of colors. It's a fairly warm and welcoming palette. Fitting for a restrained or quirky brand.

@color-scheme: blues;

A monochromatic blue color scheme. Some of the blues are more muted, and some are more intense. This color scheme has slightly reduced contrast and feels slightly faded. The colors are calming and convey depth.

@color-scheme: golden;

This color scheme has lots of warmth. Very friendly and inviting. The bright yellow is energetic, but the other colors balance it. These colors communicate a happy, positive feeling,

@color-scheme: greengray;

The colors are fairly calm but with bright bursts of green. The green communicates growth, but the grays dull it down. So, this color palette is very adaptable.

@color-scheme: neon;

This color scheme is appropriate for intense, daring, and fun styles. This combination of warm and cool colors provides a lot of contrast.

@color-scheme: cold;

These colors convey depth and richness. Good for a sophisticated, serious brand.

@color-scheme: retro;

The faded and kitschy colors add a lot of character. Good for communicating calmness and comfort.


Backgrounds

Cascade includes two types of backgrounds:

1) Photo backgrounds used only in certain modules.

These are only used in layout modules that contain a .graphicbox element, where usually text or an icon is set on top of the background. 4 photo backgrounds are available. The @box-bg variable in cascade-variables.less determines which is used. The colors are shifted for each color scheme, so you can use without fear of the colors not matching.

@box-bg: blur-a;

A blurry background image that adds visual interest without being distracting.

@box-bg: blur-b;

A second variation on the blurred background.

@box-bg: grainy-a;

A grainy photo of large buildings. Feels a bit urban. This background could be a bit more distracting, but it also adds a lot of character to the design.

@box-bg: grainy-b;

A grainy photo of large buildings and streetlights. Also could be a bit more distracting, but it adds a lot of character to the design.

2) Background patterns you can apply to any module manually.

Simply add an extra class to a layout module's HTML and you get a background pattern applied. The patterns work on any background color, including on modules you have set to inverse, inverse-major, and inverse-minor.

Example:

<div class="headline-summary inverse pattern-noise">...</div>

headline-summary is the class for the layout module. The colors are modified with the inverse class. pattern-noise adds a background texture.

Cascade includes 4 background patterns:

  • pattern-noise
  • pattern-pinstripe
  • pattern-pinstripe-tight
  • pattern-pinstripe-loose

Also, Cascade includes double patterns for browsers that support multiple background images on the same element.

  • pattern-noise-pinstripe
  • pattern-noise-pinstripe-tight
  • pattern-noise-pinstripe-loose

Thanks for reading! Again, if you have any problems, email me at jarrod@cascade.io.