Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Exploring the Cascade CSS Framework

DZone's Guide to

Exploring the Cascade CSS Framework

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

  • "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:
    <html>
     <head>
      <title>CSS Cascade Framework Use</title>
      <link rel="stylesheet" type="text/css" href="./css/build-full.min.css">
      <style>
       .my-container{
         height:200px;
         width:200px;
       }
      </style>
     </head>
     <body>
            <div class='col'>
              
             <div class='col size3of12'>
              <span class='label'>Inside div.col.size3of12</span>
             </div>
              
             <div class='col size7of12'>
          <div class='cell panel'>
                <div class='header  background-green'>
                  My Small Tutorial
                </div>
                <div class='body'>
                 <div class='cell'>Author: Sandeep Kumar Patel</div>
                </div>
                </div>
                </div>
              
             <div class='col size2of12'>
              <span class='label background-blue'>Inside div.col.size2of12</span>
             </div>
              
            </div>
     </body>
    </html>
  • The firebug console,
  •  The browser output in a different size. The column elements become vertical to make it readable:


Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:

Published at DZone with permission of Sandeep Patel, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}