- “Cascade Framework” is a css frame work for developers.
- Some of the important features are like,
———-Layout
———-Typography
———-Icons
———-Component Classes
- The main thing is re-usability of the css classes .It helps to minimize redundant css classes.
- This framework can be downloaded from:-
http://www.cascade-framework.com/
- In this Demo,“We will see some of the cascade framework features, like layout and panel”.
- Some of the classes:-
col
—-Provides a column based layouts.
sizeXofY
—Provides the size of an element.
—Where, X is part occupied, Y is total parts
—Example, size3of12, It means 3 parts from 12 parts.
cell
— A single component.
background-<xyx>
—Represents background color.
And 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 different size, The column elements becomes vertical to make it readable,
