siftal

<!DOCTYPE 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>Button</h2> <p>Use Siftal's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.</p> </div> <div class="cbox"> <h3>Simple 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"> <button class="mA3 btn">Default Btn</button> <button class="mA3 btn primary">Primary</button> <button class="mA3 btn secondary">Secondary</button> <button class="mA3 btn light">Light</button> <button class="mA3 btn dark">Dark</button> <a class="mA3 btn link">a simple link</a> </div> <div class="example"> <button class="mA3 btn success">Success</button> <button class="mA3 btn danger">Danger</button> <button class="mA3 btn warn">Warn</button> <button class="mA3 btn info">Info</button> </div> </div> <div class="cbox"> <h3>Button tags</h3> <p>The <code class="code1">.btn</code> classes are designed to be used with the <code class="code1"><button></code> element. However, you can also use these classes on <code class="code1"><a></code> or <code class="code1"><input></code> elements (though some browsers may apply a slightly different rendering).</p> <p>When using button classes on <code class="code1"><a></code> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a <code class="code1">role='button'</code> to appropriately convey their purpose to assistive technologies such as screen readers.</p> <div class="example"> <a class="mA3 btn" href="#" role="button">Link</a> <a class="mA3 btn primary" href="#" role="button">Link</a> <button class="mA3 btn secondary" type="submit">Button</button> <input class="mA3 btn success" type="button" value="Input Button"> <input class="mA3 btn danger" type="submit" value="Input Submit"> <input class="mA3 btn warn" type="reset" value="Input Reset"> <a class="mA3 btn link" href="#" role="button">Link!</a> </div> </div> <div class="cbox"> <h3>Outline buttons</h3> <p>In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the <code class="code1">.outline</code> ones to remove all background images and colors on any button.</p> <div class="example"> <button class="mA3 btn outline">Default Btn</button> <button class="mA3 btn outline primary">Primary</button> <button class="mA3 btn outline secondary">Secondary</button> <button class="mA3 btn outline light">Light</button> <button class="mA3 btn outline dark">Dark</button> <a class="mA3 btn outline link">a simple link</a> </div> <div class="example"> <button class="mA3 btn outline success">Success</button> <button class="mA3 btn outline danger">Danger</button> <button class="mA3 btn outline warn">Warn</button> <button class="mA3 btn outline info">Info</button> </div> </div> <div class="cbox"> <h3>Inverted</h3> <p>A button can be formatted to appear on dark backgrounds</p> <div class="example bg-black"> <button class="mA3 btn">Default Btn</button> <button class="mA3 btn primary">Primary</button> <button class="mA3 btn secondary">Secondary</button> <button class="mA3 btn light">Light</button> <button class="mA3 btn dark">Dark</button> <a class="mA3 btn link">a simple link</a> </div> <div class="example bg-black"> <button class="mA3 btn success">Success</button> <button class="mA3 btn danger">Danger</button> <button class="mA3 btn warn">Warn</button> <button class="mA3 btn info">Info</button> </div> <div class="example bg-black"> <button class="mA3 btn outline success">Success</button> <button class="mA3 btn outline danger">Danger</button> <button class="mA3 btn outline warn">Warn</button> <button class="mA3 btn outline info">Info</button> </div> </div> <div class="cbox"> <h3>Sizes</h3> <p>Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.</p> <div class="example"> <button class="btn xs mA3 success">Extra small xs</button> <button class="btn sm mA3 danger">Small sm</button> <button class="mA3 btn primary">Normal</button> <button class="btn lg mA3 warn">Large lg</button> <button class="btn xl mA3 info">Extra Large xl</button> </div> <div class="example"> <button class="mA3 btn primary block">Primary Block</button> <button class="mA3 btn secondary block">Secondary block</button> </div> </div> <div class="cbox"> <h3>Active state</h3> <p>Buttons will appear pressed (with a darker background) when active. There’s no need to add a class to <code class="code1"><button></code>s as they use a pseudo-class. However, you can still force the same active appearance with .active should you need to replicate the state programmatically.</p> <div class="example"> <button class="mA3 btn primary">Primary</button> <button class="mA3 btn success">Success</button> <button class="mA3 btn danger">Danger</button> <button class="mA3 btn warn">Warn</button> <button class="mA3 btn info">Info</button> </div> <div class="example"> <button class="btn active mA3 primary">Primary</button> <button class="btn active mA3 success">Success</button> <button class="btn active mA3 danger">Danger</button> <button class="btn active mA3 warn">Warn</button> <button class="btn active mA3 info">Info</button> </div> </div> <div class="cbox"> <h3>Disabled state</h3> <p>Make buttons look inactive by adding the disabled boolean attribute to any <code class="code1"><button></code> element.</p> <p>Disabled buttons using the <code class="code1"><a></code> element behave a bit different because <code class="code1"><a></code>s don’t support the <code class="code1">disabled</code> attribute, so you must add the <code class="code1">.disabled</code> class to make it visually appear disabled.</p> <div class="example"> <button class="mA3 btn primary">Normal</button> <button class="mA3 btn primary" disabled="">disabled</button> <button class="mA3 btn primary disabled">.disabled</button> <a href="#" class="mA3 btn secondary disabled">.disabled Link</a> </div> <div class="callout warn"> <h4>Link functionality caveat</h4> <p>The <code class="code1">.disabled</code> class uses <code class="code1">pointer-events: none</code> to try to disable the link functionality of <code class="code1"><a></code>s, but that CSS property is not yet standardized. In addition, even in browsers that do support <code class="code1">pointer-events: none</code>, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, add a <code class="code1">tabindex='-1'</code> attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.</p> </div> </div> </div> <script src="../dist/js/siftal.min.js"></script> </body> </html>