A CSS micro-framework based on Cascade Framework

Why a light version?

Cascade Framework gives you a perfect balance between lots of features and a lightweigt footprint.

Cascade Framework Light is a framework for when you don't need most of the features Cascade Framework offers.

If you want just a normalised boilerplate to start from any don't need most of the features offered by Cascade Framework, Cascade Framework Light is the way to go.

An overview of the different modules

Name Description Size (minified + Gzipped)
Grid Basic grid features 323 bytes
Colors Color scheme 262 bytes
Layout A normalised layout 1571 bytes
Responsive Responsive behavior 202 bytes
Full All modules combined 2010 bytes

Demos

Basic typography

Heading 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading 6

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Additional typography

CSS

Origin of Species

Code tag

Emphasis

Mark text

<abbr>

<cite>

<code>

<em>

<mark>

Cmd + Shift + i

Highlighted text

Bold text

Deleted text

superscript 

subscript 

<kbd>

<strong>

<b>

<del>

<sup>

<sub>


Lists

  • One.
  • Two.
    • 1
    • 2
      • 1
      • 2
        • 1
        • 2
        • 3
      • 3
    • 3
  • Three.
  • Four.
  • Five.
  • Six.
  • Seven.
  • Eight.
  1. One.
  2. Two.
  3. Three.
  4. Four.
  5. Five
  6. Six
    1. 1
    2. 2
      1. 1
      2. 2
        1. 1
        2. 2
        3. 3
      3. 3
    3. 3
  7. Seven
  8. Eight

Quotes

This is a block quotation containing a single paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Cite tag

Pre-formatted text


   AH, broken is the golden bowl!
        The spirit flown forever!
    Let the bell toll! — A saintly soul
        Glides down the Stygian river!
            And let the burial rite be read —
                The funeral song be sung —
            A dirge for the most lovely dead
                That ever died so young!
                    And, Guy De Vere,
                    Hast thou no tear?
                        Weep now or nevermore!
                    See, on yon drear
                   And rigid bier,
                       Low lies thy love Lenore!
                                                    


       Lenore - Edgar Allan Poe (1831)
                                                   
                                        

Forms


Table

Name Function Location
James Team Lead New York
John Developer Kansas
Sarah Designer New York

Table with border

Name Function Location
James Team Lead New York
John Developer Kansas
Sarah Designer New York

Datasheet

Try editing the cells!

Name Function Location

Media object

David says:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis adipiscing est. Curabitur vel dui dolor. Vestibulum molestie fermentum diam, nec interdum ante molestie ut. Integer consequat iaculis auctor. Duis vitae felis ligula, ultrices blandit dolor.

Irene says:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis adipiscing est. Curabitur vel dui dolor. Vestibulum molestie fermentum diam, nec interdum ante molestie ut. Integer consequat iaculis auctor. Duis vitae felis ligula, ultrices blandit dolor.

Monica likes this comment!
Chen likes this comment!
Chen says:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis adipiscing est. Curabitur vel dui dolor. Vestibulum molestie fermentum diam, nec interdum ante molestie ut. Integer consequat iaculis auctor. Duis vitae felis ligula, ultrices blandit dolor.

David likes this comment!