siftal
Version:
CSS Framework, not bad ;)
134 lines (109 loc) • 5.95 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>Messages</h2>
<p>Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.</p>
</div>
<div class="cbox">
<h3>Examples</h3>
<p>Siftal includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.</p>
<div class="example">
<div class="msg primary">This is a primary message or alert. check it out!</div>
<div class="msg secondary">This is a secondary message or alert. check it out!</div>
<div class="msg success">This is a success message or alert. check it out!</div>
<div class="msg danger">This is a danger message or alert. check it out!</div>
<div class="msg warn">This is a warning message or alert. check it out!</div>
<div class="msg info">This is a info message or alert. check it out!</div>
<div class="msg light">This is a light message or alert. check it out!</div>
<div class="msg dark">This is a dark message or alert. check it out!</div>
<div class="msg pain">This is a pain message or alert. check it out!</div>
</div>
<h3>Examples with light color</h3>
<div class="example">
<div class="msg primary2">This is a primary2 message or alert. check it out!</div>
<div class="msg secondary2">This is a secondary2 message or alert. check it out!</div>
<div class="msg success2">This is a success2 message or alert. check it out!</div>
<div class="msg danger2">This is a danger2 message or alert. check it out!</div>
<div class="msg warn2">This is a warning2 message or alert. check it out!</div>
<div class="msg info2">This is a info2 message or alert. check it out!</div>
<div class="msg light2">This is a light2 message or alert. check it out!</div>
<div class="msg dark2">This is a dark2 message or alert. check it out!</div>
</div>
</div>
<div class="cbox">
<h3>Link color</h3>
<p>Use the <code class="code1">.link</code> utility class to quickly provide matching colored links within any alert.</p>
<div class="example">
<div class="msg primary">This is a primary alert with <a href="#">an example link</a>. Give it a click if you like.</div>
<div class="msg secondary">This is a secondary alert with <a href="#">an example link</a>. Give it a click if you like.</div>
<div class="msg success">This is a success alert with <a href="#">an example link</a>. Give it a click if you like.</div>
<div class="msg danger">This is a danger alert with <a href="#">an example link</a>. Give it a click if you like.</div>
<div class="msg warn">This is a warning alert with <a href="#">an example link</a>. Give it a click if you like.</div>
<div class="msg info">This is a info alert with <a href="#">an example link</a>. Give it a click if you like.</div>
<div class="msg light">This is a light alert with <a href="#">an example link</a>. Give it a click if you like.</div>
<div class="msg dark">This is a dark alert with <a href="#">an example link</a>. Give it a click if you like.</div>
</div>
</div>
<div class="cbox">
<h3>Additional content</h3>
<p>Alerts can also contain additional HTML elements like headings, paragraphs and dividers.</p>
<div class="msg success">
<h4 class="heading">Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
<hr>
<p>Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
</div>
<div class="cbox">
<h3>Compact</h3>
<p>A message can only take up the width of its content.</p>
<div class="msg info compact">Aww yeah, you successfully read this important alert message. Sign up now!</div>
</div>
<div class="cbox">
<h3>Another type of usage</h3>
<h4>List Message</h4>
<p>A message with a list</p>
<div class="msg danger2">
<div class="title">Was this what you wanted?</div>
<ul class="list">
<li>It's good to see you again.</li>
<li>Did you know it's been a while?</li>
</ul>
</div>
<div class="msg f">
<div class="cauto">
<span class="sf-car fs40 pA10 pRa25 vlbottom"></span>
</div>
<div class="c">
<h3>Have you heard about our car?</h3>
<p>Get the best news of the year!</p>
</div>
</div>
<div class="msg primary2 f">
<div class="cauto">
<span class="sf-yang-ying spiny fs20 pA10 pRa25 vlmiddle"></span>
</div>
<div class="c">
<div class="title">Just one second</div>
<p>We're fetching that content for you. What content!?</p>
</div>
</div>
</div>
</div>
<script src="../dist/js/siftal.min.js"></script>
</body>
</html>