siftal
Version:
CSS Framework, not bad ;)
128 lines (101 loc) • 3.81 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">
<h2>Input</h2>
<p>Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs.</p>
</div>
<div class="cbox">
<h3>Simple Examples with input element</h3>
<div class="example">
<h4>Normal</h4>
<div class="check1">
<input type="checkbox" id="sChk1">
<label for="sChk1">Check1 Sample1</label>
</div>
<div class="check1">
<input type="checkbox" id="sChk2">
<label for="sChk2">Check1 Sample2</label>
</div>
<div class="check1">
<input type="checkbox" id="sChk3">
<label for="sChk3">Check1 Sample3</label>
</div>
</div>
</div>
<div class="cbox" id="switch">
<h3>Switch</h3>
<div class="example">
<h4>Normal</h4>
<div class="switch1">
<input type="checkbox" name="switch1" id="switch1">
<label for="switch1">aaa</label>
</div>
<div class="switch1">
<input type="checkbox" name="switch2" id="switch2" checked="">
<label for="switch2"></label>
</div>
<div class="switch1">
<input type="checkbox" name="switch3" id="switch3">
<label for="switch3"></label>
</div>
<div class="switch1">
<input type="checkbox" name="switch4" id="switch4" checked="">
<label for="switch4"></label>
</div>
</div>
<div class="example">
<h4>With custom text</h4>
<div class="switch1">
<input type="checkbox" name="switch5" id="switch5">
<label for="switch5" data-on="HI" data-off="BYE"></label>
</div>
<div class="switch1">
<input type="checkbox" name="switch6" id="switch6" checked="">
<label for="switch6" data-on="HI" data-off="BYE"></label>
</div>
<div class="switch1">
<input type="checkbox" name="switch7" id="switch7">
<label for="switch7" data-on="" data-off=""></label>
</div>
</div>
<div class="example">
<h4>With more detail</h4>
<div class="switch1">
<input type="checkbox" name="switch11" id="switch11">
<label for="switch11"></label>
<label for="switch11">Subscribe to our newsletter</label>
</div>
<div class="switch1">
<input type="checkbox" name="switch12" id="switch12">
<label for="switch12" data-on="YES" data-off="NO!"></label>
<label for="switch12">Are you like Siftal?</label>
</div>
</div>
<h3>Special use</h3>
<div class="example">
<h4>Gender</h4>
<div class="switch1 gender">
<input type="checkbox" name="switchGender" id="switchGender">
<label for="switchGender"></label>
<label for="switchGender">Gender</label>
</div>
</div>
</div>
</div>
<script src="../dist/js/siftal.min.js"></script>
</body>
</html>