Your startup design struggle is over. Let's get started.
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:
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 for giving Cascade a try.
If you have any difficulties, please get in touch. Email me at firstname.lastname@example.org and I will respond to you personally.
Try watching full screen so you can read the code.
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:
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.
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
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.
"starter-"HTML files in a web browser.
/assets/less/cascade-variables.lessin your text editor.
/assets/less/style.lessusing one of the methods below.
To start a new project using Cascade:
"starter-"prefixed HTML files and the entire
/assetsdirectory to a new location.
/assets/less/style.lessusing one of the methods below.
/lessdirectory in Codekit as a framework.
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.
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.)
$ sudo npm install -g less
To compile from the project root directory:
$ lessc assets/less/style.less > assets/css/style.css
$ sudo npm install -g grunt
Run this in the project root directory to load package.json dependencies.
$ sudo npm install
Start watching for changes
Run this in the project root directory to watch for changes.
$ grunt watch
Read a more detailed walkthrough of this process here.
Check out Prepros App. Similar to Codekit, but for windows.
Avoid compiling Cascade on the client side using less.js for 2 reasons:
/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.
By default, Cascade uses many dependencies through CDN hosts.
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
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.
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
(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.
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: email@example.com.
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
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
You can grab the URL for each font file from those LESS files, then edit the paths there too.
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
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
Determines colors for everything.
There are 8 options:
primaries, muted, blues, golden, greengray, neon, cold, retro
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
.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
There are 3 options:
round, square, pill
There are 2 options:
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.
Determines whether logo has a shadow.
false, glow, double, extrude, hard, ghost
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:
Would display this icon next to the logo:
Determines whether logo text has a gradient applied.
Determines whether logo text has a stroke applied.
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.
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.)
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;
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.
The letterforms are playful and light-hearted. Italics are even more expressive. Fitting for a cheerful, energetic brand.
The logo uses a bold weight, and any extra words wrapped in
em will be normal weight.
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.
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.
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
em will be reduced to normal weight, no italics for the sake of contrast.
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.
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.
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
em will be reduced to normal weight. Italics are enabled for
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.
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.
Use this for short logos, preferably one word. Multiple words can decrease legibility quickly and can also look very cluttered. Wrap extra words in
em, and they will be set in the display font from your chosen font-pairing.
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.
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."
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.)
em are all set to use the same light weight, but with italics added.
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.
Bold, heavy, capitals. Block lettering, for when your logo needs to get attention and make a strong statement.
This logo is great for longer business names too, because anything wrapped in
em will be set to a very light weight. You can experiment with lots of combinations here.
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.
No frills or extra ornamentation. No nonsense. This logo is direct and simple, but not plain.
Bold weight, but
em are set to normal weight. Adds a bit of extra variety when you need it, but maintains the simple style.
Surprisingly, this logo matches every single one of the font pairings well. Go crazy. If you want to maintain a simple look, try:
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.
The logo is bold, and
em are normal weight. Using em will add a bit of playfulness.
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.
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.
The logo is bold, but
em are normal weight. Note: there is no bold italic version in this font family.
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.
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.
Black (900) weight logo.
em are normal weight. Highly recommend using the italics, as they are exceptional.
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.
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.
The logo is bold, and
em are light weight. Consider using the italics here if possible.
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.
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 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.
No shadow. Use this option if you'd prefer using other logo effects, or if you are aiming for a more flat-style design.
A simple light-colored glow. Adds a subtle depth without being too obvious.
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.
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.
A single high contrast shadow to call attention to the logo. Simple but effective.
Three shadows that fade into the background. Almost implies motion.
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:
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
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.
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.
Best used with
Note: Only works in webkit. This effect does cause a faux boldness on fonts. If in doubt, don't use this effect.
Cascade includes 6 combinations of button styles that apply to all of Bootstrap's buttons, including
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.
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.
Standard buttons with squared corners.
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.
Add a gradient to the button. Cascade creates this gradient automatically, so you don't have to mess with adjusting hex codes.
A solid, flat background button. Use if you want to keep it simple.
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.
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.
<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.
<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.
<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.
This color scheme is very high contrast and intense. Works well for outspoken, energetic brands, as the colors are bright.
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.
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.
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,
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.
This color scheme is appropriate for intense, daring, and fun styles. This combination of warm and cool colors provides a lot of contrast.
These colors convey depth and richness. Good for a sophisticated, serious brand.
The faded and kitschy colors add a lot of character. Good for communicating calmness and comfort.
Cascade includes two types of backgrounds:
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.
A blurry background image that adds visual interest without being distracting.
A second variation on the blurred background.
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.
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.
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
<div class="headline-summary inverse pattern-noise">...</div>
headline-summary is the class for the layout module. The colors are modified with the
pattern-noise adds a background texture.
Cascade includes 4 background patterns:
Also, Cascade includes double patterns for browsers that support multiple background images on the same element.
Thanks for reading! Again, if you have any problems, email me at firstname.lastname@example.org.