siftal
Version:
CSS Framework, not bad ;)
102 lines (90 loc) • 3.33 kB
HTML
<html lang="en" dir="ltr">
<head>
<title>Siftal</title>
<meta charset="utf-8">
<meta name="description" content="Siftal, a simple CSS framework with usefull tools for Ermile projects">
<meta name="viewport" content="width=device-width, initial-scale=1.0, height=device-height, minimum-scale=1.0 maximum-scale=1.2, minimal-ui"/>
<link rel="shortcut icon" href="../dist/images/siftal/siftal.ico">
<link rel="icon" href="../dist/images/siftal/siftal.png" type="image/png">
<link rel="stylesheet" href="../dist/css/siftal.css">
<style>
body{background-color:#eee;}
</style>
</head>
<body class="ltr">
<div class="cn">
<div class="tbox">
<h3 class="border-title">Page Grids</h3>
</div>
<div class="cbox cards msg">
<div>
<p>one row will divide to the number of parts, if you just set class='c'</p>
<div class="f animated bg-grey center">
<div class="c pTB20">.C</div>
<div class="c pTB20">.C</div>
<div class="c pTB20">.C</div>
<div class="c pTB20">.C</div>
<div class="c pTB20">.C</div>
</div>
</div>
<div>
<p>on large screens if you just set class='x', it will take the x class ratio</p>
<div class="f animated bg-grey center">
<div class="c12 pTB20 x6">.C12 .X6</div>
<div class="c12 pTB20 x6">.C12 .X6</div>
</div>
</div>
<div>
<p>three equal parts</p>
<div class="f animated bg-grey center">
<div class="c4 pTB20">.C4</div>
<div class="c4 pTB20">.C4</div>
<div class="c4 pTB20">.C4</div>
</div>
</div>
<div>
<p>sum of parts is 12, every part will take ratio of it's class number</p>
<div class="f animated bg-grey center">
<div class="c3 pTB20">.C3</div>
<div class="c1 pTB20">.C1</div>
<div class="c4 pTB20">.C4</div>
<div class="c2 pTB20">.C2</div>
<div class="c2 pTB20">.C2</div>
</div>
</div>
<div>
<p>it will take just 6 part of 12</p>
<div class="f animated bg-grey center">
<div class="c3 pTB20">.C3</div>
<div class="c3 pTB20">.C3</div>
</div>
</div>
<div>
<p>float right boxes, by .os class</p>
<div class="f animated bg-grey center">
<div class="c3 pTB20 os">.C3 OS</div>
<div class="c3 pTB20">.C3 .OS</div>
</div>
</div>
<div>
<p>Responsive on medium devices, like tablet's by .m classes</p>
<div class="f animated bg-grey center">
<div class="c3 pTB20 m6">.C3 .M6</div>
<div class="c3 pTB20 m6">.C3 .M6</div>
</div>
</div>
<div>
<p>Responsive on mobile devices by .s classes</p>
<div class="f animated bg-grey center">
<div class="c3 pTB20 m6 s12">.C3 .M6 .S12</div>
<div class="c3 pTB20 m6 s12">.C3 .M6 .S12</div>
<div class="c3 pTB20 m9 s4">.C3 .M9 .S4</div>
<div class="c3 pTB20 m3 s8">.C3 .M3 .S8</div>
</div>
</div>
</div>
</div>
<script src="../dist/js/siftal.min.js"></script>
</body>
</html>