siftal
Version:
CSS Framework, not bad ;)
314 lines (267 loc) • 10.9 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>
<input type="text" placeholder="Type..." class="input">
<h4>Focus</h4>
<input type="text" placeholder="Type..." class="input focus">
<h4>Active</h4>
<input type="text" placeholder="Type..." class="input active">
<h4>Readonly</h4>
<input type="text" placeholder="Type..." class="input" readonly="">
<h4>Disabled</h4>
<input type="text" placeholder="Type..." class="input disabled">
<input type="text" placeholder="Type..." class="input" disabled="">
</div>
<h4>All type of input conditions</h4>
<div class="example">
<input type="text" placeholder="Type..." value="Error" class="input error">
<input type="text" placeholder="Type..." value="Warn" class="input warning">
<input type="text" placeholder="Type..." value="Ok" class="input ok">
</div>
</div>
<div class="cbox">
<h3>Extra Examples with input class and multiple part</h3>
<div class="example">
<h4>Normal</h4>
<div class="input">
<input type="text" placeholder="Type...">
</div>
<h4>Focus</h4>
<div class="input focus">
<input type="text" placeholder="Type...">
</div>
<h4>Active</h4>
<div class="input active">
<input type="text" placeholder="Type...">
</div>
<h4>Readonly</h4>
<div class="input">
<input type="text" placeholder="Type..." readonly="">
</div>
<h4>Disabled</h4>
<span class="input disabled">
<input type="text" placeholder="Type...">
</span>
<span class="input">
<input type="text" placeholder="Type..." disabled="">
</span>
</div>
<h4>All type of input conditions</h4>
<div class="example">
<span class="input error">
<input type="text" placeholder="Type..." value="Error">
</span>
<span class="input warning">
<input type="text" placeholder="Type..." value="Warn">
</span>
<span class="input ok">
<input type="text" placeholder="Type..." value="Ok">
</span>
</div>
<h4>Add conditions class to input el</h4>
<div class="example">
<span class="input">
<input type="text" placeholder="Type..." value="Error" class="error">
</span>
<span class="input">
<input type="text" placeholder="Type..." value="Warn" class="warning">
</span>
<span class="input">
<input type="text" placeholder="Type..." value="Ok" class="ok">
</span>
</div>
</div>
<div class="cbox">
<h3>Simple input with label</h3>
<div class="example">
<label for="inputLabel1">Name</label>
<div class="input">
<input type="text" placeholder="Type..." id="inputLabel1">
</div>
<label for="inputLabel2">Family</label>
<div class="input">
<input type="text" placeholder="Type..." id="inputLabel2">
</div>
<label for="inputLabel3">Email</label>
<div class="input ltr">
<input type="text" placeholder="Type..." id="inputLabel3">
</div>
</div>
</div>
<div class="cbox">
<h4>Extra features</h4>
<div class="example">
<div class="input pTB10">
<label class="addon" for="sAddon1">@</label>
<input type="text" placeholder="Type..." id="sAddon1">
</div>
<div class="input pTB10">
<input type="text" placeholder="Type..." id="sAddon2">
<label class="addon" for="sAddon2">@Ermile.com</label>
</div>
<div class="input pTB10">
<label class="addon" for="sAddon3">https://ermile.com/users/</label>
<input type="text" placeholder="Your username" id="sAddon3">
</div>
<div class="input pTB10">
<label class="addon" for="sAddon4">$</label>
<input type="text" placeholder="Type..." id="sAddon4">
<label class="addon" for="sAddon4">.00</label>
</div>
<div class="input pTB10">
<label class="addon" for="sAddon5">$</label>
<input type="text" placeholder="Type..." id="sAddon5">
<label class="addon basic" for="sAddon5">.00</label>
</div>
<div class="input pTB10">
<label class="addon" for="sAddon6">$</label>
<label class="addon" for="sAddon6">0.00</label>
<input type="text" placeholder="Type..." id="sAddon6">
</div>
<div class="input pTB10">
<i class="sf-at addon"></i>
<input type="text" placeholder="Type...">
</div>
<div class="input pTB10">
<i class="sf-load-c spiny addon"></i>
<input type="text" placeholder="Waiting..." readonly="">
</div>
</div>
</div>
<div class="cbox">
<h4>Fix addons</h4>
<div class="example">
<div class="input pTB10 fix">
<label class="addon" for="sAddon21">Before @</label>
<input type="text" placeholder="Type..." id="sAddon21">
</div>
<div class="input pTB10 fix">
<input type="text" placeholder="Type..." id="sAddon22">
<label class="addon" for="sAddon22">.com After</label>
</div>
<div class="input pTB10 fix">
<label class="addon" for="sAddon22">https://</label>
<input type="text" placeholder="Type..." id="sAddon22">
<label class="addon" for="sAddon22">.com</label>
</div>
</div>
</div>
<div class="cbox">
<h4>Sizing</h4>
<div class="example">
<div class="input pTB10 xs">
<label class="addon" for="sAddon21">@</label>
<input type="text" placeholder="Type..." id="sAddon21">
</div>
<div class="input pTB10 sm">
<label class="addon" for="sAddon22">@</label>
<input type="text" placeholder="Type..." id="sAddon22">
</div>
<div class="input pTB10 error">
<label class="addon" for="sAddon23">@</label>
<input type="text" placeholder="Type..." id="sAddon23">
</div>
<div class="input pTB10 lg warning">
<label class="addon" for="sAddon24">@</label>
<input type="text" placeholder="Type..." id="sAddon24">
</div>
<div class="input pTB10 xl ok">
<label class="addon" for="sAddon25">@</label>
<input type="text" placeholder="Type..." id="sAddon25">
</div>
</div>
</div>
<div class="cbox">
<h4>Button addons</h4>
<div class="example">
<div class="input pTB10">
<input type="text" placeholder="Search...">
<button class="addon btn">Search</button>
</div>
<div class="input pTB10">
<label class="addon" for="sAddon31">@</label>
<input type="text" placeholder="Type..." id="sAddon31">
<button class="addon btn primary">Go!</button>
</div>
<div class="input pTB10">
<label class="addon" for="sAddon32">@</label>
<input type="text" placeholder="Type..." id="sAddon32">
<button class="addon btn success">Search</button>
</div>
<div class="input pTB10">
<button class="addon btn warn">Hey!</button>
<input type="text" placeholder="Type..." id="sAddon32">
<button class="addon btn info">Ding Ding!</button>
</div>
<div class="input pTB10 lg w200">
<button class="addon btn warn">+</button>
<input type="number" placeholder="Type..." class="txtc">
<button class="addon btn success">-</button>
</div>
<div class="input pTB10 lg w200">
<span class="addon btn danger" data-val="-5" data-connect="plus">+</span>
<input type="number" placeholder="Time.." class="txtc" name="plus" step="5" min="0" max="1440">
<span class="addon btn success" data-val="10" data-connect="plus">-</span>
</div>
</div>
</div>
<div class="cbox">
<h4>Simple file input</h4>
<div class="example">
<div class="input pTB10">
<input type="file">
</div>
</div>
<h4>Simple file input only accept images</h4>
<div class="example">
<div class="input pTB10">
<input type="file" accept="image/gif, image/jpeg, image/png">
</div>
</div>
<h4>Simple avatar selector with simple preview</h4>
<div class="example">
<div class="input preview pTB10">
<input type="file" accept="image/gif, image/jpeg, image/png" id="anyfile1" data-preview="">
<label for="anyfile1" data-tippy="" data-original-title="Simple Title"></label>
</div>
<div class="input preview pTB10">
<input type="file" accept="image/gif, image/jpeg, image/png" id="avatar1" data-preview="">
<label for="avatar1" data-tippy="" data-original-title="Simple Title"></label>
</div>
<div class="input preview pTB10">
<input type="file" accept="image/gif, image/jpeg, image/png" id="logo1" data-preview="">
<label for="logo1" data-tippy="" data-original-title="Simple Title"></label>
</div>
</div>
<h4>Simple file input with min 100kb and max 200kb size!</h4>
<div class="example">
<div class="input pTB10">
<input type="file" data-min="100" data-max="200">
</div>
</div>
</div>
</div>
<script src="../dist/js/siftal.min.js"></script>
</body>
</html>