Cascade

v1.2.0

CSS Starter-kit built on top of PostCSS

Setup

  1. Download the latest release
  2. Copy the src folder into your project
  3. Integrate files in a build process*

*The build process needs to involve PostCSS, postcss-preset-env and postcss-easy-import. View an example of a workflow with simple NPM scripts here.

Architecture

Cascade is intended to be used as a simple starting point when writing CSS. It helps to create and maintain a mindful and scalable CSS structure. Therefore, styles are grouped into the following categories:

Settings
Settings contain global configurations like custom properties and breakpoints which are shared across the system.

Base
Base styles are default styles of html tags like headings or paragraphs without ID or class selectors. These styles serve as the foundation for everything specified afterwards in the cascade.

Objects
Objects are class-based selectors which define design patterns like containers or grids shared across the system. Classes of this category are prefixed with o-.

Components
Components are independent parts of any system. However, unity only exists when design elements are in agreement. Therefore, components here are not entirely isolated as they inherit base styles. Classes of this category are prefixed with c-.

Utilities
Utilities are high-specificity, very explicit style rules which serve one purpose. Classes of this category are prefixed with u-.

Base Elements

Cascade contains styles for a huge set of HTML5 skeleton tags. See some examples here:

Placeholder Image
This is an image with a caption

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Catch a short abbr here. This is strong and this is emphasized! And heck, here's a link. H2O is coolyep.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Use <mark> to highlight the important stuff, use <ins> when you have inserted content afterwards and use <del> when you have deleted content later in the process.

'The HTML blockquote Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see Notes for how to change it). A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the <cite> cite element.'

MDN, 'The Block Quotation element'

Inline <q> element: When Dave asks HAL to open the pod bay door, HAL answers: I'm sorry, Dave. I'm afraid I can't do that.

Click to Open...

The HTML Details Element (details) creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label can be provided using the summary element.

Click to Hide...

The HTML Details Element (details) creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label can be provided using the summary element.

Heading Heading Heading
Left Center Right
Left Center Right
Left Center Right
Left Center Right
Definition List
The HTML dl tag is used for declaring a definition list. A definition list is similar to other lists but in a definition list, each list item contains two entries; a term and a description.
cascade
CSS starter-kit built on top of PostCSS
Mixed list items
  • Unordered list-item 1
  • Unordered list-item 2
    1. Ordered list-item 1
    2. Ordered list-item 2
  • Unordered list-item 3
  • Unordered list-item 4
Address
Mozilla Foundation
1981 Landings Drive
Mountain View, CA 94043-0801
USA

Here is some inline code for you: var myNumber = 0;

// This logs a message to the console and check out the scrollbar.
console.log('Hello, world!')

Press Ctrl + Shift + Print Screen to take a selected area screenshot on Linux.

Form Elements

Fieldset

Grid System

Cascade provides a basic grid system for simple layout explorations. To use it, the HTML markup should follow a specific structure:

.o-container
  .o-grid
    .o-grid__col .u-span--06
    .o-grid__col .u-span--06

Each .o-grid element can hold one or more .o-grid__col element(s) which can be sized or pushed with specific utility classes like .u-span--* or .u-push--* with modifiers ranging from 01 to 12. The modifiers represent the column-width based on overall 12 columns.

The maximum grid-width is set on the .o-grid element. The grid is always centered inside the .o-container element. Gutters are split horizontally with paddings on .o-grid and .o-grid__col elements.

Responsiveness

To set widths and shifts individually for the 4 custom min-width breakpoints defined in the settings.css append the following modifiers at the end: sm, md, lg, xl

Example:

.o-container
  .o-grid
    .o-grid__col .u-span--12 .u-span--06md .u-span--08lg
    .o-grid__col .u-span--12 .u-span--06md .u-span--04lg

Note: Rules based on min-width breakpoints overwrite each other from small to large!

Extending

The kit is no as-is dev dependency but a boilerplate to start with. Therefore, it can be changed or adjusted at any stage of your project. It is highly recommended to use the BEM naming approach to keep things consistent.

Report bugs and make feature requests via the issue tracker.