Over a million developers have joined DZone.

Exploring the Cascade CSS Framework

DZone 's Guide to

Exploring the Cascade CSS Framework

· Web Dev Zone ·
Free Resource
  • "Cascade Framework" is a CSS framework for developers.
  • Some of the important features are:
    • Layout
    • Typography
    • Icons
    • Component Classes
  • The main thing is re-usability of the CSS classes. This helps to minimize redundant CSS classes.
  • In this Demo, We will see some of the cascade framework features, like layout and panel.
  • Some of the classes:
    • col
      • Provides a column in a column-based layout.
    • sizeXofY
      • Provides the size of an element.
      • Where X is part occupied, Y is the total number of parts.
      • Example: Size3of12--means 3 parts from 12 parts.
    • cell
      • A single component.
    • background-<xyz>
      • Represents the background color. 
  • There are many more classes.You can see the list of classes in the documentation.
  • The HTML markup code cascade-css-use-demo.html file:
      <title>CSS Cascade Framework Use</title>
      <link rel="stylesheet" type="text/css" href="./css/build-full.min.css">
            <div class='col'>
             <div class='col size3of12'>
              <span class='label'>Inside div.col.size3of12</span>
             <div class='col size7of12'>
          <div class='cell panel'>
                <div class='header  background-green'>
                  My Small Tutorial
                <div class='body'>
                 <div class='cell'>Author: Sandeep Kumar Patel</div>
             <div class='col size2of12'>
              <span class='label background-blue'>Inside div.col.size2of12</span>
  • The firebug console,
  •  The browser output in a different size. The column elements become vertical to make it readable:


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}