1446 lines
258 KiB
HTML
1446 lines
258 KiB
HTML
<html>
|
|
<head>
|
|
<title>Helcel-OTM</title>
|
|
|
|
<link rel='shortcut icon' href='/public/img/helcel.ico' type='image/x-icon'/>
|
|
<meta charset='utf-8'/>
|
|
<meta name='viewport' content='width=device-width, initial-scale=1'/>
|
|
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,700,300" type="text/css">
|
|
<link rel='stylesheet' href='/public/css/index.css'/>
|
|
|
|
<script src="/public/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
|
|
</head>
|
|
<body>
|
|
<!-- Full size -->
|
|
<div class="bg-dark">
|
|
<div class="container">
|
|
<div class="row text-center">
|
|
<div class="col-12 col-sm-4">
|
|
<div class="section">
|
|
<img src="img/lightweight.png" alt="Lightweight" width="118"> <br>
|
|
<h2 class="text-withSubtitle text-big text-white">Lightweight <br>
|
|
<span class="text-medium text-gray">37 kB (8.9 kB gzipped).</span></h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-sm-4">
|
|
<div class="section">
|
|
<img src="img/customizable.png" alt="Customizable" width="118"> <br>
|
|
<h2 class="text-withSubtitle text-big text-white">Customizable<br>
|
|
<span class="text-medium text-gray">Fonts, colors, sizes...</span>
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-4">
|
|
<div class="section">
|
|
<h2 class="text-withSubtitle text-big text-white">
|
|
<img src="img/opensource.png" alt="Open Source" width="118"> <br>
|
|
Open Source <br>
|
|
|
|
<span class="text-medium text-gray">To nerds, by nerds.</span>
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container">
|
|
<a class="anchor" name="install"></a>
|
|
|
|
<!-- <div class="row">
|
|
<div class="col-sm-12 col-md-3">
|
|
<div id="js-sidebar" class="sidebar pb-big section">
|
|
<div class="">
|
|
<h3 class="text-medium text-gray">Get tarted</h3>
|
|
<ul class="mb-big">
|
|
<li><a href="#badges">Quick install</a></li>
|
|
<li><a href="#">Download</a></li>
|
|
<li><a href="#">Theme customization</a></li>
|
|
</ul>
|
|
<h3 class="text-medium text-gray">Components</h3>
|
|
<ul class="mb-big">
|
|
<li><a href="#badges">Badges</a></li>
|
|
<li><a href="#">Buttons</a></li>
|
|
<li><a href="#">Forms</a></li>
|
|
<li><a href="#">Forms collapsed</a></li>
|
|
<li><a href="#">Loaders</a></li>
|
|
<li><a href="#">Notifications</a></li>
|
|
<li><a href="#">Pagination</a></li>
|
|
<li><a href="#">Tables</a></li>
|
|
<li><a href="#">Tabs</a></li>
|
|
<li><a href="#">Tags</a></li>
|
|
</ul>
|
|
<h3 class="text-medium text-gray">Utilities</h3>
|
|
<ul>
|
|
<li><a href="#">Aligners</a></li>
|
|
<li><a href="#">Borders</a></li>
|
|
<li><a href="#">Colors</a></li>
|
|
<li><a href="#">Containers</a></li>
|
|
<li><a href="#">Full width box</a></li>
|
|
<li><a href="#">Opacity</a></li>
|
|
<li><a href="#">Typography</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-md-9"> -->
|
|
<!-- Install -->
|
|
<div class="section">
|
|
<h2 class="text-huge">Quick install</h2>
|
|
<h3 class="text-medium">1.- Get the files via NPM</h3>
|
|
<pre class=" language-js"><code class=" language-js">npm install sierra<span class="token operator">-</span>library <span class="token operator">--</span>save<span class="token operator">-</span>dev</code></pre>
|
|
<h3 class="text-medium">2.- Import the library from your SCSS files</h3>
|
|
<pre class=" language-js"><code class=" language-js">@<span class="token keyword">import</span> <span class="token string">'sierra-library/lib/index'</span><span class="token punctuation">;</span></code></pre>
|
|
<h3 class="text-medium">3.- Ready to compile!</h3>
|
|
<p>Need help about that? take a look at our <a href="https://sierra-library.github.io/examples/example1/index.html">example page</a> and <a href="https://github.com/sierra-library/sierra-library.github.io/tree/master/examples/example1">its code</a>. </p>
|
|
<a class="anchor" name="download"></a>
|
|
</div>
|
|
<!-- Download -->
|
|
<div class="section">
|
|
<h2 class="text-huge">Download</h2>
|
|
<p>Download ready-to-use <a href="http://sierra-library.github.io/css/styles.css">compiled CSS</a> or <a href="http://sierra-library.github.io/css/styles.min.css">minified CSS</a> files, and include it in your HTML file:
|
|
</p>
|
|
<pre class=" language-js"><code class=" language-js"><span class="token operator"><</span>link rel<span class="token operator">=</span><span class="token string">"stylesheet"</span> type<span class="token operator">=</span><span class="token string">"text/css"</span> media<span class="token operator">=</span><span class="token string">"all"</span> href<span class="token operator">=</span><span class="token string">"css/styles.min.css"</span><span class="token operator">></span></code></pre>
|
|
|
|
<p class="mb-none">Otherwise you can compile Sierra Library with your own tools by downloading our <a href="https://github.com/sierra-library/sierra/archive/master.zip">source SCSS</a> files.</p>
|
|
|
|
</div>
|
|
<!-- Customization -->
|
|
<div class="section">
|
|
<h2 class="text-huge">Theme customization</h2>
|
|
<p>If you want to customize Sierra library's theme settings, including fonts, margins, paddings and/or colors, create your own custom-settings file and add it just before importing Sierra files:</p>
|
|
<pre class=" language-js"><code class=" language-js">@<span class="token keyword">import</span> <span class="token string">'custom-settings'</span><span class="token punctuation">;</span>
|
|
@<span class="token keyword">import</span> <span class="token string">'sierra-library/lib/index'</span><span class="token punctuation">;</span></code></pre>
|
|
<p>This <a href="https://github.com/sierra-library/sierra-library.github.io/blob/master/examples/example1/scss/custom-settings.scss">custom-settings.scss</a> file should contain all those SCSS variables you want to overwrite. Check all settings you can customize in the <a href="https://github.com/sierra-library/sierra/blob/master/src/_settings.scss">settings library file</a>.</p>
|
|
<p>However, we recommend to duplicate all variables in order to make sure your styles are not being compromised in eventual library updates.</p>
|
|
<p><strong>Having troubles?</strong> take a look at this theme customization examples:</p>
|
|
|
|
<div class="examples">
|
|
<div class="mb-big example1">
|
|
<a href="https://sierra-library.github.io/examples/example1/index.html">
|
|
<img src="img/example1.jpg" alt="example1" width="200"> <br>
|
|
</a>
|
|
<a href="https://sierra-library.github.io/examples/example1/index.html">View page
|
|
</a>
|
|
<span class="text-gray">or</span>
|
|
<a href="https://github.com/sierra-library/sierra-library.github.io/tree/master/examples/example1">view code</a>
|
|
</div>
|
|
<div class="mb-big example2">
|
|
<a href="https://sierra-library.github.io/examples/example2/index.html">
|
|
<img src="img/example2.jpg" alt="example2" width="200"> <br>
|
|
</a>
|
|
<a href="https://sierra-library.github.io/examples/example2/index.html">
|
|
View page
|
|
</a>
|
|
<span class="text-gray">or</span>
|
|
<a href="https://github.com/sierra-library/sierra-library.github.io/tree/master/examples/example2">view code</a>
|
|
</div>
|
|
</div>
|
|
<a class="anchor" name="components"></a>
|
|
</div>
|
|
<!-- Components -->
|
|
<div class="">
|
|
<section>
|
|
<!-- Badges -->
|
|
<section class="">
|
|
<h2 id="onents" class="text-huge">Components</h2>
|
|
<h2 class="text-big">Badges</h2>
|
|
<h3 class="text-medium text-gray">Colors</h3>
|
|
<div class="example-code border rounded-corners mb-small">
|
|
<div class="p-big border-bottom">
|
|
<ul>
|
|
<li class="badge">
|
|
default
|
|
</li>
|
|
<li class="badge badge--primary">
|
|
primary
|
|
</li>
|
|
<li class="badge badge--secondary">
|
|
secondary
|
|
</li>
|
|
<li class="badge badge--dark">
|
|
dark
|
|
</li>
|
|
<li class="badge badge--success">
|
|
success
|
|
</li>
|
|
<li class="badge badge--warning">
|
|
warning
|
|
</li>
|
|
<li class="badge badge--error">
|
|
error
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>badge<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>default<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>badge badge--primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>primary<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>badge badge--secondary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>secondary<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>badge badge--dark<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>dark<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>badge badge--success<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>success<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>badge badge--warning<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>warning<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>badge badge--error<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>error<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
<p class="text-small text-gray mb-big"><a href="https://github.com/sierra-library/sierra/blob/master/src/_settings.scss#L155">Badges color settings</a></p>
|
|
<h3 class="text-medium text-gray">Sizes</h3>
|
|
<div class="example-code border rounded-corners mb-small">
|
|
<div class="p-big border-bottom">
|
|
<ul class="">
|
|
<li class="badge badge--small">
|
|
small badge
|
|
</li>
|
|
<li class="badge">
|
|
default badge
|
|
</li>
|
|
<li class="badge badge--big">
|
|
big badge
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>badge badge--small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>small badge<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>badge<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>default badge<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>badge badge--big<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>big badge<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
<p class="text-small text-gray mb-big"><a href="https://github.com/sierra-library/sierra/blob/master/src/_settings.scss#L146">Badges settings</a></p>
|
|
</section>
|
|
<!-- Buttons -->
|
|
<section class="section">
|
|
<h2 class="text-big">Buttons</h2>
|
|
<div class="example-code border rounded-corners mb-small">
|
|
<div class="p-big border-bottom text-center">
|
|
<button class="button button--primary m-none">Button</button>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button button--primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
<p class="text-small text-gray mb-big"><a href="https://github.com/sierra-library/sierra/blob/master/src/_settings.scss#L165">Buttons settings</a></p>
|
|
<!-- Button colors -->
|
|
<h2 class="text-medium text-gray">Button colors</h2>
|
|
<div class="example-code border rounded-corners mb-big">
|
|
<div class="p-big border-bottom">
|
|
<button class="button button--small button--primary">primary</button>
|
|
<button class="button button--small button--secondary">secondary</button>
|
|
<button class="button button--small button--green">green</button>
|
|
<button class="button button--small button--red">red</button>
|
|
<button class="button button--small button--outlined">outlined</button>
|
|
<button class="button button--small button--transparent">transparent</button>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button button--small button--primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>primary<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button button--small button--secondary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>secondary<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button button--small button--green<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>green<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button button--small button--red<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>red<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button button--small button--outlined<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>outlined<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button button--small button--transparent<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>transparent<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
<!-- Button Mobile full -->
|
|
<h2 class="text-medium text-gray">Mobile full size</h2>
|
|
<div class="example-code border rounded-corners mb-big">
|
|
<div class="p-big border-bottom text-center">
|
|
<button class="button button--primary button--mobileFull m-none">primary</button>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button button--primary button--mobileFull<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
<!-- Button sizes -->
|
|
<h2 class="text-medium text-gray">Button sizes</h2>
|
|
<div class="example-code border rounded-corners mb-big">
|
|
<div class="p-big border-bottom">
|
|
<button class="button button--big">Button big</button>
|
|
<button class="button button--medium">Button default</button>
|
|
<button class="button button--small">Button small</button>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button button--big<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Button big<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Button default<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button button--small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Button small<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Forms -->
|
|
<section class="section">
|
|
<h2 class="text-big">Forms</h2>
|
|
<h3 class="text-medium text-gray">Input</h3>
|
|
<div class="example-code border rounded-corners mb-small">
|
|
<div class="p-big border-bottom">
|
|
<label class="label" for="test10">Input</label>
|
|
<div class="input input-fullWidth">
|
|
<input id="test10" placeholder="Input" type="text">
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>label<span class="token punctuation">"</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>test10<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Input<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input input-fullWidth<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>test10<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Input<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
<p class="text-small text-gray mb-big"><a href="https://github.com/sierra-library/sierra/blob/master/src/_settings.scss#L187">Forms settings</a></p>
|
|
|
|
<h3 class="text-medium text-gray">Inputs with icon</h3>
|
|
<div class="example-code border rounded-corners mb-big">
|
|
<div class="p-big border-bottom">
|
|
<label class="label" for="test10">Input</label>
|
|
<div class="input input-withIcon input-fullWidth">
|
|
<input id="test1" placeholder="Your name" type="text">
|
|
<svg class="input-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g><path d="M257,474.1c-62.5,0-125,0-187.5,0c-17.9,0-29.6-11.2-29.9-29c-0.2-12.7-0.3-25.3,0.2-38c0.6-15,7.9-26.5,20.9-33.6 c42.7-23.3,85.6-46.1,128.3-69.3c3.1-1.7,5-0.1,7.3,1.1c36.5,19.1,73.7,20.7,111.7,4.8c1.1-0.4,2.3-0.7,3.2-1.5 c7.9-6.7,15-4,23.2,0.5c38.3,21.1,76.9,41.8,115.5,62.4c16.7,8.9,24.9,22.3,24.6,41.2c-0.2,10.7,0,21.3,0,32 c-0.1,17.7-11.9,29.4-29.5,29.4C382.3,474.1,319.6,474.1,257,474.1z"></path><path d="M253.9,295.2c-35.2-1.2-64.4-18.6-85.9-49.5C132.8,195,137,123,177.3,76.8c43.8-50.1,116.4-49.8,159.8,0.6 c46.1,53.6,43.2,138.2-6.7,186.8C310,284.1,285.6,294.8,253.9,295.2z"></path></g></svg>
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>label<span class="token punctuation">"</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>test10<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Input<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input input-withIcon input-fullWidth<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>test1<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Your name<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input-icon<span class="token punctuation">"</span></span> <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://www.w3.org/2000/svg<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">xmlns:</span>xlink</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://www.w3.org/1999/xlink<span class="token punctuation">"</span></span> <span class="token attr-name">version</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1.1<span class="token punctuation">"</span></span> <span class="token attr-name">x</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0px<span class="token punctuation">"</span></span> <span class="token attr-name">y</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0px<span class="token punctuation">"</span></span> <span class="token attr-name">viewBox</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0 0 512 512<span class="token punctuation">"</span></span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">enable-background</span><span class="token punctuation">:</span>new 0 0 512 512<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">xml:</span>space</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>preserve<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>g</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>path</span> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>M257,474.1c-62.5,0-125,0-187.5,0c-17.9,0-29.6-11.2-29.9-29c-0.2-12.7-0.3-25.3,0.2-38c0.6-15,7.9-26.5,20.9-33.6 c42.7-23.3,85.6-46.1,128.3-69.3c3.1-1.7,5-0.1,7.3,1.1c36.5,19.1,73.7,20.7,111.7,4.8c1.1-0.4,2.3-0.7,3.2-1.5 c7.9-6.7,15-4,23.2,0.5c38.3,21.1,76.9,41.8,115.5,62.4c16.7,8.9,24.9,22.3,24.6,41.2c-0.2,10.7,0,21.3,0,32 c-0.1,17.7-11.9,29.4-29.5,29.4C382.3,474.1,319.6,474.1,257,474.1z<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>path</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>path</span> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>M253.9,295.2c-35.2-1.2-64.4-18.6-85.9-49.5C132.8,195,137,123,177.3,76.8c43.8-50.1,116.4-49.8,159.8,0.6 c46.1,53.6,43.2,138.2-6.7,186.8C310,284.1,285.6,294.8,253.9,295.2z<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>path</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>g</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
<h3 class="text-medium text-gray">Input with error</h3>
|
|
<div class="example-code border rounded-corners mb-big">
|
|
<div class="p-big border-bottom">
|
|
<label class="label" for="test10">Input</label>
|
|
<div class="input input-fullWidth has-error">
|
|
<input id="test10" placeholder="Input" type="text">
|
|
</div>
|
|
<p class="text-error text-small">Error message</p>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>label<span class="token punctuation">"</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>test10<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Input<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input input-fullWidth<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>test10<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Input<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-error text-small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Error message<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
<h3 class="text-medium text-gray">Select</h3>
|
|
<div class="example-code border rounded-corners mb-big">
|
|
<div class="p-big border-bottom">
|
|
<label class="label" for="country-code">Select</label>
|
|
<div class="select select-fullWidth">
|
|
<select name="country-code" id="country-code">
|
|
<option>Option 1</option>
|
|
<option>Option 2</option>
|
|
<option>Option 3</option>
|
|
<option>Option 4</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>label<span class="token punctuation">"</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>country-code<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Select<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>select select-fullWidth<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Option 4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
<h3 class="text-medium text-gray">Select with error</h3>
|
|
<div class="example-code border rounded-corners mb-big">
|
|
<div class="p-big border-bottom">
|
|
<label class="label" for="country-code">Select</label>
|
|
<div class="select select-fullWidth has-error">
|
|
<select name="country-code" id="country-code">
|
|
<option>Option 1</option>
|
|
<option>Option 2</option>
|
|
<option>Option 3</option>
|
|
<option>Option 4</option>
|
|
</select>
|
|
</div>
|
|
<p class="text-error text-small">Error message</p>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>label<span class="token punctuation">"</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>country-code<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Select<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>select select-fullWidth has-error<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Option 4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-error text-small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Error message<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
<h3 class="text-medium text-gray">Textarea</h3>
|
|
<div class="example-code border rounded-corners mb-big">
|
|
<div class="p-big border-bottom">
|
|
<label class="label" for="message">Textarea</label>
|
|
<div class="textarea textarea-fullWidth">
|
|
<textarea id="message"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>label<span class="token punctuation">"</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>message<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Textarea<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>textarea textarea-fullWidth<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>message<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
<h3 class="text-medium text-gray">Textarea with error</h3>
|
|
<div class="example-code border rounded-corners mb-big">
|
|
<div class="p-big border-bottom">
|
|
<label class="label" for="message">Textarea</label>
|
|
<div class="textarea textarea-fullWidth has-error">
|
|
<textarea id="message"></textarea>
|
|
</div>
|
|
<p class="text-error text-small">Error message</p>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>label<span class="token punctuation">"</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>message<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Textarea<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>textarea textarea-fullWidth has-error<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>message<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-error text-small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Error message<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
<h3 class="text-medium text-gray">Radio buttons</h3>
|
|
<div class="example-code border rounded-corners mb-big">
|
|
<div class="p-big border-bottom">
|
|
<div class="radio">
|
|
<input id="radio1" name="radio" value="" type="radio">
|
|
<label for="radio1">Radio button 1</label>
|
|
</div>
|
|
<div class="radio">
|
|
<input id="radio2" name="radio" value="" type="radio">
|
|
<label for="radio2">Radio button 2</label>
|
|
</div>
|
|
<div class="radio">
|
|
<input id="radio3" name="radio" value="" type="radio">
|
|
<label for="radio3">Radio button 3</label>
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio1<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Radio button 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio2<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Radio button 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio3<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Radio button 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
<h3 class="text-medium text-gray">Checkboxes</h3>
|
|
<div class="example-code border rounded-corners mb-big">
|
|
<div class="p-big border-bottom">
|
|
<div class="checkbox">
|
|
<input id="one" name="#" value="" type="checkbox">
|
|
<label for="one">Checkbox 1</label>
|
|
</div>
|
|
<div class="checkbox">
|
|
<input id="two" name="#" value="" type="checkbox">
|
|
<label for="two">Checkbox 2</label>
|
|
</div>
|
|
<div class="checkbox">
|
|
<input id="three" name="#" value="" type="checkbox">
|
|
<label for="three">Checkbox 3</label>
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>one<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>one<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Checkbox 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>two<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>two<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Checkbox 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>three<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>three<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Checkbox 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Collapsed forms -->
|
|
<section class="section">
|
|
<h2 class="text-big">Forms collapsed</h2>
|
|
<div class="example-code border rounded-corners mb-small">
|
|
<div class="p-big border-bottom">
|
|
<div class="formCollapsed m-none">
|
|
<div class="input formCollapsed-item formCollapsed-itemPrimary">
|
|
<input id="test8" placeholder="Search" type="text">
|
|
</div>
|
|
<button class="formCollapsed-item button button-primary">
|
|
Search
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" m-none language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>formCollapsed<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input formCollapsed-item formCollapsed-itemPrimary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>test8<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Search<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>formCollapsed-item button button-primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
Search
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
<p class="text-small text-gray mb-big"><a href="https://github.com/sierra-library/sierra/blob/master/src/_settings.scss#L187">Forms settings</a></p>
|
|
<div class="example-code border rounded-corners mb-big">
|
|
<div class="p-big border-bottom">
|
|
<div class="formCollapsed m-none">
|
|
<div class="input formCollapsed-item formCollapsed-itemPrimary">
|
|
<input id="test7" placeholder="Search" type="text">
|
|
</div>
|
|
<div class="select formCollapsed-item">
|
|
<select name="country-code" id="country-code">
|
|
<option>One</option>
|
|
<option>Two</option>
|
|
<option>Three</option>
|
|
<option>Four</option>
|
|
</select>
|
|
</div>
|
|
<button class="formCollapsed-item button button-primary">
|
|
Search
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>formCollapsed<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input formCollapsed-item formCollapsed-itemPrimary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>test7<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Search<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>select formCollapsed-item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>country-code<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>country-code<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>One<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Two<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Three<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Four<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>formCollapsed-item button button-primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
Search
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
<div class="example-code border rounded-corners mb-big">
|
|
<div class="p-big border-bottom">
|
|
<div class="formCollapsed m-none">
|
|
<div class="select formCollapsed-item formCollapsed-itemPrimary">
|
|
<select name="country-code" id="country-code">
|
|
<option>Vincent</option>
|
|
<option>Jules</option>
|
|
<option>Mia </option>
|
|
<option>Butch</option>
|
|
<option>Winston </option>
|
|
</select>
|
|
</div>
|
|
<div class="select formCollapsed-item formCollapsed-itemPrimary">
|
|
<select name="country-code" id="country-code">
|
|
<option>Mr. White</option>
|
|
<option>Mr. Orange</option>
|
|
<option>Mr. Pink</option>
|
|
<option>Mr. Blonde</option>
|
|
<option>Nice Guy</option>
|
|
<option>Mr. Brown</option>
|
|
<option>Marvin</option>
|
|
<option>Holdaway</option>
|
|
<option>Mr. Blue</option>
|
|
</select>
|
|
</div>
|
|
<div class="select formCollapsed-item formCollapsed-itemPrimary">
|
|
<select name="country-code" id="country-code">
|
|
<option>Shaw </option>
|
|
<option>Kelly</option>
|
|
<option>Doyle </option>
|
|
<option>Lt. William</option>
|
|
<option>Singleton</option>
|
|
<option>Billie</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>formCollapsed<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>select formCollapsed-item formCollapsed-itemPrimary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>country-code<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>country-code<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Vincent<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Jules<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Mia <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Butch<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>select formCollapsed-item formCollapsed-itemPrimary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>country-code<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>country-code<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Mr. White<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Mr. Orange<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Mr. Pink<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Mr. Blonde<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>select formCollapsed-item formCollapsed-itemPrimary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>country-code<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>country-code<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Shaw <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Kelly<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Doyle <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Lt. William<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Loaders -->
|
|
<section class="section">
|
|
<h2 class="text-big">Loaders</h2>
|
|
<h3 class="text-medium">Loading bar</h3>
|
|
<div class="example-code border rounded-corners mb-small">
|
|
<div class="p-big border-bottom text-center">
|
|
<div style="position:relative;" class="loadingBar"></div>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token comment"><!-- By default it's fixed at the top of the page --></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>loadingBar<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
<p class="text-small text-gray mb-big"><a href="https://github.com/sierra-library/sierra/blob/master/src/_settings.scss#L203">Loading bar settings</a></p>
|
|
|
|
<h3 class="text-medium">Loading spinner</h3>
|
|
<div class="example-code border rounded-corners mb-small">
|
|
<div class="p-big border-bottom text-center">
|
|
<br>
|
|
<div class="loadingSpinner" style="position:relative;">
|
|
<span class="loadingSpinner-inner"></span>
|
|
<span class="loadingSpinner-inner"></span>
|
|
<span class="loadingSpinner-inner"></span>
|
|
<span class="loadingSpinner-inner"></span>
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token comment"><!-- By default it's located at the center of the page --></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>loadingSpinner<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>loadingSpinner-inner<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>loadingSpinner-inner<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>loadingSpinner-inner<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>loadingSpinner-inner<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
<p class="text-small text-gray mb-big"><a href="https://github.com/sierra-library/sierra/blob/master/src/_settings.scss#L208">Loading spinner settings</a></p>
|
|
</section>
|
|
<!-- Notifications -->
|
|
<section class="section">
|
|
<h2 class="text-big">Notifications</h2>
|
|
<div class="example-code border rounded-corners mb-small">
|
|
<div class="p-big border-bottom">
|
|
<div class="notification notification--success"><p>Success message</p></div>
|
|
<div class="notification notification--info"><p>Info message</p></div>
|
|
<div class="notification notification--warning"><p>Warning message</p></div>
|
|
<div class="notification notification--error"><p>Error message</p></div>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>notification notification--success<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Success message<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>notification notification--info<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Info message<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>notification notification--warning<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Warning message<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>notification notification--error<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Error message<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
<p class="text-small text-gray mb-big"><a href="https://github.com/sierra-library/sierra/blob/master/src/_settings.scss#L214">Notifications settings</a></p>
|
|
</section>
|
|
|
|
<!-- Pagination -->
|
|
<section class="section">
|
|
<h2 class="text-big">Pagination</h2>
|
|
<div class="example-code border rounded-corners mb-small">
|
|
<div class="p-big border-bottom">
|
|
<ul class="paginator">
|
|
<li class="paginator-item">
|
|
<a href="javascript:void(0)" class="paginator-itemLink"> < Prev </a>
|
|
</li>
|
|
<li class="paginator-item">
|
|
<a href="javascript:void(0)" class="paginator-itemLink">1</a>
|
|
</li>
|
|
<li class="paginator-item">
|
|
<a href="javascript:void(0)" class="paginator-itemLink is-active">2</a>
|
|
</li>
|
|
<li class="paginator-item">
|
|
<a href="javascript:void(0)" class="paginator-itemLink">Next >
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>paginator<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>paginator-item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>paginator-itemLink<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Prev<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>paginator-item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>paginator-itemLink<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>paginator-item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>paginator-itemLink is-active<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>paginator-item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>paginator-itemLink<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Next<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
<p class="text-small text-gray mb-big"><a href="https://github.com/sierra-library/sierra/blob/master/src/_settings.scss#L220">Pagination settings</a></p>
|
|
</section>
|
|
<!-- Tables -->
|
|
<section class="section">
|
|
<h2 class="text-big">Tables</h2>
|
|
<h3 class="text-medium text-gray">Standard</h3>
|
|
<div class="example-code border rounded-corners mb-small">
|
|
<div class="p-big border-bottom">
|
|
<table class="table">
|
|
<thead>
|
|
<tr class="text-small text-left">
|
|
<th>Header 1</th>
|
|
<th>Header 2</th>
|
|
<th>Header 3</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Lemon</td>
|
|
<td>Orange</td>
|
|
<td>Kiwi</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Sugar</td>
|
|
<td>Salt</td>
|
|
<td>Pepper</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Fork</td>
|
|
<td>Knife</td>
|
|
<td>Spoon</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Cup</td>
|
|
<td>Glass</td>
|
|
<td>Pitcher</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>table<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>thead</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-small text-left<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Header 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Header 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Header 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>thead</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tbody</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Lemon<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Orange<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Kiwi<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Sugar<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Salt<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Pepper<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Fork<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Knife<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Spoon<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Cup<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Glass<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Pitcher<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tbody</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
<p class="text-small text-gray mb-big"><a href="https://github.com/sierra-library/sierra/blob/master/src/_settings.scss#L229">Table settings</a></p>
|
|
|
|
<h3 class="text-medium text-gray">Responsive</h3>
|
|
<div class="example-code border rounded-corners mb-big">
|
|
<div class="p-big border-bottom">
|
|
<table class="table table--responsive">
|
|
<tbody><tr class="text-small">
|
|
<th>First column</th>
|
|
<th>Second column</th>
|
|
<th>Third column</th>
|
|
</tr>
|
|
<tr>
|
|
<td data-th="First column">Blue</td>
|
|
<td data-th="Second column">One</td>
|
|
<td data-th="Third column">My life fades</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-th="First column">Green</td>
|
|
<td data-th="Second column">Two</td>
|
|
<td data-th="Third column">When the world was powered by the black fuel... and the desert sprouted great cities of pipe and steel. </td>
|
|
</tr>
|
|
<tr>
|
|
<td data-th="First column">Yellow</td>
|
|
<td data-th="Second column">Three</td>
|
|
<td data-th="Third column">A whirlwind of looting, a firestorm of fear. Men began to feed on men. A whirlwind of looting, a firestorm of fear. Men began to feed on men. </td>
|
|
</tr>
|
|
</tbody></table>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>table table--responsive<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>thead</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>First column<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Second column<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Third column<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>thead</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tbody</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">data-th</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>First column<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Blue<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">data-th</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Second column<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>One<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">data-th</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Third column<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>My life fades<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">data-th</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>First column<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Green<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">data-th</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Second column<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Two<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">data-th</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Third column<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>When the world was powered by the black fuel... and the desert sprouted great cities of pipe and steel. <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">data-th</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>First column<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Yellow<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">data-th</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Second column<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Three<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">data-th</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Third column<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>A whirlwind of looting, a firestorm of fear. Men began to feed on men. A whirlwind of looting, a firestorm of fear. Men began to feed on men. <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tbody</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Tabs -->
|
|
<section class="section">
|
|
<h2 class="text-big">Tabs</h2>
|
|
<div class="example-code border rounded-corners mb-small">
|
|
<div class="p-big border-bottom">
|
|
<div class="tabs">
|
|
<a href="#" class="tabs-item js-tab">Tab 1</a>
|
|
<a href="#" class="tabs-item is-selected js-tab">Tab 2</a>
|
|
<a href="#" class="tabs-item js-tab">Tab 3</a>
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>tabs<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>tabs-item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Tab 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>tabs-item is-selected<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Tab 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>tabs-item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Tab 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
<p class="text-small text-gray mb-big"><a href="https://github.com/sierra-library/sierra/blob/master/src/_settings.scss#L242">Tabs settings</a></p>
|
|
</section>
|
|
<!-- Tags -->
|
|
<section class="section">
|
|
<h2 class="text-big">Tags</h2>
|
|
<div class="example-code border rounded-corners mb-small">
|
|
<div class="p-big border-bottom">
|
|
<ul>
|
|
<li class="tag">
|
|
<a href="javascript:void(0)">fantasy</a>
|
|
</li>
|
|
<li class="tag">
|
|
<a href="javascript:void(0)">fiction</a>
|
|
</li>
|
|
<li class="tag">
|
|
<a href="javascript:void(0)">contemporary</a>
|
|
</li>
|
|
<li class="tag">
|
|
<a href="javascript:void(0)">horror</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>tag<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>fantasy<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>tag<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>fiction<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>tag<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>contemporary<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>tag<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>horror<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
<p class="text-small text-gray mb-big"><a href="https://github.com/sierra-library/sierra/blob/master/src/_settings.scss#L253">Tags settings</a></p>
|
|
<a class="anchor" name="utilities"></a>
|
|
</section>
|
|
<!-- Aligners -->
|
|
<section class="section">
|
|
<h2 class="text-huge">Utilities</h2>
|
|
<h2 class="text-big">Aligners</h2>
|
|
<h3 class="text-medium text-gray">Space between</h3>
|
|
<div class="example-code border rounded-corners mb-big">
|
|
<div class="p-big border-bottom">
|
|
<div class="aligner aligner--spaceBetween">
|
|
<div><img src="img/img4.jpg" alt="Image 4" width="50"></div>
|
|
<div><img src="img/img2.jpg" alt="Image 2" width="50"></div>
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>aligner aligner--spaceBetween<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>img/img4.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>img/img2.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
<h3 class="text-medium text-gray">Space around</h3>
|
|
<div class="example-code border rounded-corners mb-big">
|
|
<div class="p-big border-bottom">
|
|
<div class="aligner aligner--spaceAround">
|
|
<div><img src="img/img2.jpg" alt="Image 4" width="50"></div>
|
|
<div><img src="img/img3.jpg" alt="Image 3" width="50"></div>
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>aligner aligner--spaceAround<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>img/img2.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>img/img1.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
<h3 class="text-medium text-gray">Content start</h3>
|
|
<div class="example-code border rounded-corners mb-big">
|
|
<div class="p-big border-bottom">
|
|
<div class="aligner aligner--contentStart">
|
|
<div><img src="img/img6.jpg" alt="Image 4" width="50"></div>
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>aligner aligner--contentStart<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>img/img6.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
<h3 class="text-medium text-gray">Content end</h3>
|
|
<div class="example-code border rounded-corners mb-big">
|
|
<div class="p-big border-bottom">
|
|
<div class="aligner aligner--contentEnd">
|
|
<div><img src="img/img2.jpg" alt="Image 2" width="50"></div>
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>aligner aligner--contentEnd<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>img/img2.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
<h3 class="text-medium text-gray">Center vertical</h3>
|
|
<div class="example-code border rounded-corners mb-big">
|
|
<div class="p-big border-bottom">
|
|
<div class="aligner aligner--centerVertical" style="height: 100px;">
|
|
<div><img src="img/img3.jpg" alt="Image 4" width="50"></div>
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>aligner aligner--centerVertical<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>img/img3.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
<h3 class="text-medium text-gray">Center vertical and horizontal</h3>
|
|
<div class="example-code border rounded-corners mb-big">
|
|
<div class="p-big border-bottom">
|
|
<div class="aligner aligner--centerHoritzontal aligner--centerVertical" style="height: 100px;">
|
|
<div><img src="img/img1.jpg" alt="Image 4" width="50"></div>
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>aligner aligner--centerHoritzontal aligner--centerVertical<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>img/img1.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
<h3 class="text-medium text-gray">Align to bottom</h3>
|
|
<div class="example-code border rounded-corners mb-big">
|
|
<div class="p-big border-bottom">
|
|
<div class="aligner" style="height: 100px;">
|
|
<div class="aligner--itemBottom"><img src="img/img4.jpg" alt="Image 4" width="50"></div>
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>aligner<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>aligner--itemBottom<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>img/img4.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Image 4<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Borders -->
|
|
<section class="section">
|
|
<h2 class="text-big">Borders</h2>
|
|
<h3 class="text-medium text-gray">Top bottom</h3>
|
|
<div class="example-code border rounded-corners mb-big">
|
|
<div class="p-huge border-bottom">
|
|
<div class="border-top border-bottom"><br></div>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>border-top border-bottom<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
<h3 class="text-medium text-gray">Left right</h3>
|
|
<div class="example-code border rounded-corners mb-big">
|
|
<div class="p-huge border-bottom">
|
|
<div class="border-left border-right"><br></div>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>border-left border-right<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
<h3 class="text-medium text-gray">Bordered</h3>
|
|
<div class="example-code border rounded-corners mb-big">
|
|
<div class="p-huge border-bottom">
|
|
<div class="border"><br></div>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>border<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Colors -->
|
|
<section class="section">
|
|
<h2 class="text-big">Colors</h2>
|
|
<h3 class="text-medium text-gray">Primary / secondary</h3>
|
|
<div class="example-code border rounded-corners mb-small">
|
|
<div class="p-big border-bottom">
|
|
<div class="aligner aligner--spaceAround">
|
|
<div class="flex-grow bg-primary"><br><br></div>
|
|
<div class="flex-grow bg-secondary"><br><br></div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>aligner aligner--spaceAround<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>flex-grow bg-primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>flex-grow bg-secondary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
<p class="text-small text-gray mb-big">Customize all colors overwriting <a href="https://github.com/sierra-library/sierra/blob/master/src/_settings.scss#L8">color settings variables</a></p>
|
|
<h3 class="text-medium text-gray">Success / info / error / warning</h3>
|
|
<div class="example-code border rounded-corners mb-big">
|
|
<div class="p-big border-bottom">
|
|
<div class="aligner aligner--spaceAround">
|
|
<div class="flex-grow bg-success"><br><br></div>
|
|
<div class="flex-grow bg-info"><br><br></div>
|
|
<div class="flex-grow bg-warning"><br><br></div>
|
|
<div class="flex-grow bg-error"><br><br></div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>aligner aligner--spaceAround<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>flex-grow bg-success<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>flex-grow bg-info<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>flex-grow bg-warning<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>flex-grow bg-error<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
<h3 class="text-medium text-gray">Others</h3>
|
|
<div class="example-code border rounded-corners mb-big">
|
|
<div class="p-big border-bottom">
|
|
<div class="aligner aligner--spaceAround">
|
|
<div class="flex-grow bg-white"><br><br></div>
|
|
<div class="flex-grow bg-gray-light"><br><br></div>
|
|
<div class="flex-grow bg-gray"><br><br></div>
|
|
<div class="flex-grow bg-dark"><br><br></div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>aligner aligner--spaceAround<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>flex-grow bg-white<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>flex-grow bg-gray-light<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>flex-grow bg-gray<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>flex-grow bg-dark<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Containers -->
|
|
<section class="section">
|
|
<h2 class="text-big">Containers</h2>
|
|
<h3 class="text-medium text-gray">Standard</h3>
|
|
<div class="example-code border rounded-corners mb-big">
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
<h3 class="text-medium text-gray">Medium</h3>
|
|
<div class="example-code border rounded-corners mb-big">
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>container-medium<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
<h3 class="text-medium text-gray">Small</h3>
|
|
<div class="example-code border rounded-corners mb-big">
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>container-small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Grid -->
|
|
<section class="section">
|
|
<h3 class="text-big">Grid</h3>
|
|
<h3 class="text-medium text-gray">Equal width columns</h3>
|
|
<div class="example-code border rounded-corners mb-big">
|
|
<div class="p-big border-bottom text-center">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col bg-gray-light"><br><br></div>
|
|
<div class="col bg-gray"><br><br></div>
|
|
<div class="col bg-gray-light"><br><br></div>
|
|
<div class="col bg-gray"><br><br></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col bg-gray-light<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col bg-gray<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col bg-gray-light<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col bg-gray<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
<h3 class="text-medium text-gray">Equal width, responsive columns</h3>
|
|
<div class="example-code border rounded-corners mb-big">
|
|
<div class="p-big border-bottom text-center">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-sm bg-gray-light p-medium text-gray">3/12</div>
|
|
<div class="col-sm bg-gray p-medium text-white">3/12</div>
|
|
<div class="col-sm bg-gray-light p-medium text-gray">3/12</div>
|
|
<div class="col-sm bg-gray p-medium text-white">3/12</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-sm bg-gray-light p-medium text-gray<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>3/12<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-sm bg-gray p-medium text-white<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>3/12<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-sm bg-gray-light p-medium text-gray<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>3/12<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-sm bg-gray p-medium text-white<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>3/12<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
|
|
Available responsive classes:
|
|
|
|
col-sm <span class="token comment"><!-- Equal width on small, medium, large and extra large devices --></span>
|
|
col-md <span class="token comment"><!-- Equal width on medium, large, and extra large devices --></span>
|
|
col-lg <span class="token comment"><!-- Equal width on large, and extra large devices --></span>
|
|
col-xl <span class="token comment"><!-- Equal width on extra large devices --></span>
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
<h3 class="text-medium text-gray">Variable width</h3>
|
|
<div class="example-code border rounded-corners mb-big">
|
|
<div class="p-big border-bottom text-center">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-sm-4 bg-gray-light p-medium text-gray">4/12</div>
|
|
<div class="col-sm-2 bg-gray p-medium text-white">2/12</div>
|
|
<div class="col-sm-4 bg-gray-light p-medium text-gray">4/12</div>
|
|
<div class="col-sm-2 bg-gray p-medium text-white">2/12</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-sm-4 bg-gray-light p-medium text-gray<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>4/12<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-sm-2 bg-gray p-medium text-white<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>2/12<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-sm-4 bg-gray-light p-medium text-gray<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>4/12<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-sm-2 bg-gray p-medium text-white<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>2/12<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
<h3 class="text-medium text-gray">Nesting</h3>
|
|
<div class="example-code border rounded-corners mb-big">
|
|
<div class="p-big border-bottom text-center">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col bg-gray-light p-medium text-gray">
|
|
<p class="mb-small">Col</p>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col bg-gray p-medium text-white">Nested col</div>
|
|
<div class="col bg-white p-medium ">Nested col</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col bg-gray p-medium text-white"><p class="mb-small">Col</p></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token comment"><!-- First level row --></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col bg-gray-light p-medium text-gray<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>mb-small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Col<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token comment"><!-- Nested row --></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col bg-gray p-medium text-white<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Nested col<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col bg-white p-medium <span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Nested col<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col bg-gray p-medium text-white<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>mb-small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Col<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Image modifiers -->
|
|
<section class="section">
|
|
<h3 class="text-big">Image modifiers</h3>
|
|
<h3 class="text-medium text-gray">Circle</h3>
|
|
<div class="example-code border rounded-corners mb-big">
|
|
<div class="p-big border-bottom text-center">
|
|
<img class="rounded" src="img/img1.jpg" alt="Image 1" width="100">
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>rounded<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>img/img1.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
<h3 class="text-medium text-gray">Rouded corners</h3>
|
|
<div class="example-code border rounded-corners mb-big">
|
|
<div class="p-big border-bottom text-center">
|
|
<img class="rounded-corners" src="img/img6.jpg" alt="Image 1" width="100">
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>rounded-corners<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>img/img6.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Full width box -->
|
|
<section class="section">
|
|
<h2 class="text-big">Full width box</h2>
|
|
<div class="example-code border rounded-corners mb-big">
|
|
<div class="p-big border-bottom">
|
|
<div class="section bg-dark">
|
|
<div class="container text-center">
|
|
<h3 class="text-huge text-white text-withSubtitle">We can be heroes</h3>
|
|
<h4 class="text-big text-gray m-none">just for one day</h4>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>section bg-dark<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>container text-center<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-huge text-white text-withSubtitle<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>We can be heroes<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h4</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-big text-gray m-none<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>just for one day<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Opacity -->
|
|
<section class="section">
|
|
<h3 class="text-big">Opacity low</h3>
|
|
<div class="example-code border rounded-corners mb-big">
|
|
<div class="p-big border-bottom text-center">
|
|
<img class="opacity-low" src="img/img1.jpg" alt="Image 1" width="150">
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>opacity-low<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Spacing -->
|
|
<section class="section">
|
|
<h3 class="text-big">Spacing</h3>
|
|
<h2 class="text-medium text-gray">Margins</h2>
|
|
<div class="example-code border rounded-corners mb-big">
|
|
<div class="p-big border-bottom text-center aligner aligner--centerHoritzontal aligner--centerVertical">
|
|
<div class="bg-gray-light">
|
|
<img class="m-big" src="img/img3.jpg" alt="Image 1" width="75">
|
|
</div>
|
|
</div>
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>bg-gray-light<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>m-big<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>img/img3.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Image 1<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>75<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
|
|
Available margin classes:
|
|
|
|
m-xsmall <span class="token comment"><!-- Margin extra small --></span>
|
|
m-small <span class="token comment"><!-- Margin small --></span>
|
|
m-medium <span class="token comment"><!-- Margin medium --></span>
|
|
m-big <span class="token comment"><!-- Margin big --></span>
|
|
m-huge <span class="token comment"><!-- Margin huge --></span>
|
|
|
|
mb-xsmall <span class="token comment"><!-- Margin bottom extra small --></span>
|
|
mb-small <span class="token comment"><!-- Margin bottom small --></span>
|
|
mb-medium <span class="token comment"><!-- Margin bottom medium --></span>
|
|
mb-big <span class="token comment"><!-- Margin bottom big --></span>
|
|
mb-huge <span class="token comment"><!-- Margin bottom huge --></span>
|
|
|
|
m-none <span class="token comment"><!-- Margin none --></span>
|
|
</code></pre>
|
|
</div>
|
|
<h2 class="text-medium text-gray">Paddings</h2>
|
|
<div class="example-code border rounded-corners mb-big">
|
|
<div class="p-big border-bottom text-center">
|
|
<div class="bg-gray-light p-huge"><span>Lorem ipsum</span></div>
|
|
</div>
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>p-huge bg-gray-light<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>Lorem ipsum<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
|
|
Available padding classes:
|
|
|
|
p-small <span class="token comment"><!-- Padding small --></span>
|
|
p-medium <span class="token comment"><!-- Padding medium --></span>
|
|
p-big <span class="token comment"><!-- Padding big --></span>
|
|
p-huge <span class="token comment"><!-- Padding huge --></span>
|
|
|
|
pb-small <span class="token comment"><!-- Padding bottom small --></span>
|
|
pb-medium <span class="token comment"><!-- Padding bottom medium --></span>
|
|
pb-big <span class="token comment"><!-- Padding bottom big --></span>
|
|
pb-huge <span class="token comment"><!-- Padding bottom huge --></span>
|
|
</code></pre>
|
|
</div>
|
|
</section>
|
|
<!-- Typography -->
|
|
<section class="section">
|
|
<h2 class="text-big">Typography</h2>
|
|
<h2 class="text-medium text-gray">Sizes</h2>
|
|
<div class="example-code border rounded-corners mb-big">
|
|
<div class="p-big border-bottom">
|
|
<p class="text-huge">Lorem ipsum dolor sit amet</p>
|
|
<p class="text-big">Lorem ipsum dolor sit amet</p>
|
|
<p class="text-medium">Lorem ipsum dolor sit amet</p>
|
|
<p class="text-small">Lorem ipsum dolor sit amet</p>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-huge<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Lorem ipsum dolor sit amet<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-big<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Lorem ipsum dolor sit amet<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-medium<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Lorem ipsum dolor sit amet<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Lorem ipsum dolor sit amet<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
<!-- Typography text w/ subtitle -->
|
|
<h2 class="text-medium text-gray">Text with subtitle</h2>
|
|
<div class="example-code border rounded-corners mb-big">
|
|
<div class="p-big border-bottom">
|
|
<p class="text-big text-withSubtitle">Text medium</p>
|
|
<p class="text-medium text-gray">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-big text-withSubtitle<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Text medium<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-medium text-gray<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Lorem ipsum dolor sit amet<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
<!-- Typography text w/ subtitle -->
|
|
<h2 class="text-medium text-gray">Default</h2>
|
|
<div class="example-code border rounded-corners mb-big">
|
|
<div class="p-big border-bottom">
|
|
<p class="m-none">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat repellendus nostrum molestiae, nisi <a href="#">commodi eveniet</a>! Veritatis omnis quas distinctio, possimus ratione. Facere iure ea laborum dicta, et aliquam, aspernatur modi.</p>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat repellendus nostrum molestiae, nisi <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>commodi eveniet<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>! Veritatis omnis quas distinctio, possimus ratione. Facere iure ea laborum dicta, et aliquam, aspernatur modi.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
<!-- Typograpy colors -->
|
|
<h2 class="text-medium text-gray">Colors</h2>
|
|
<div class="example-code border rounded-corners mb-big">
|
|
<div class="p-big border-bottom">
|
|
<p class="text-gray">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae atque ut quis enim tenetur culpa voluptatem explicabo accusantium saepe rerum officiis temporibus.</p>
|
|
<p class="text-primary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae atque ut quis enim tenetur culpa voluptatem explicabo accusantium saepe rerum officiis temporibus.</p>
|
|
<p class="text-success">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae atque ut quis enim tenetur culpa voluptatem explicabo accusantium saepe rerum officiis temporibus.</p>
|
|
<p class="text-error">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae atque ut quis enim tenetur culpa voluptatem explicabo accusantium saepe rerum officiis temporibus.</p>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-gray<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Lorem ipsum dolor sit amet...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Lorem ipsum dolor sit amet...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-success<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Lorem ipsum dolor sit amet...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-error<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Lorem ipsum dolor sit amet...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
<h2 class="text-medium text-gray">Text aligners</h2>
|
|
<div class="example-code border rounded-corners mb-big">
|
|
<div class="p-big border-bottom">
|
|
<p class="text-center">Lorem ipsum dolor sit amet</p>
|
|
<p class="text-right">Lorem ipsum dolor sit amet</p>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-center<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Lorem ipsum dolor sit amet<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-right<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Lorem ipsum dolor sit amet<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
<h2 class="text-medium text-gray">Modifiers</h2>
|
|
<div class="example-code border rounded-corners mb-big">
|
|
<div class="p-big border-bottom">
|
|
<p class="text-uppercase">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae atque ut quis enim tenetur culpa voluptatem explicabo accusantium saepe rerum officiis temporibus.</p>
|
|
<p class="text-lineThrough">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae atque ut quis enim tenetur culpa voluptatem explicabo accusantium saepe rerum officiis temporibus.</p>
|
|
<p class="text-italic">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae atque ut quis enim tenetur culpa voluptatem explicabo accusantium saepe rerum officiis temporibus.</p>
|
|
<p class="text-underline">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae atque ut quis enim tenetur culpa voluptatem explicabo accusantium saepe rerum officiis temporibus.</p>
|
|
</div>
|
|
<div class="">
|
|
<pre class=" language-markup"><code class=" language-markup" data-language="markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-uppercase<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Lorem ipsum dolor sit amet...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-lineThrough<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Lorem ipsum dolor sit amet...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-italic<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Lorem ipsum dolor sit amet...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-underline<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Lorem ipsum dolor sit amet...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<footer class="bg-dark">
|
|
<div class="container">
|
|
<div class="section text-center text-small">
|
|
<p class="text-white">
|
|
<img src="/public/img/helcel.png" alt="helcel logo" width="100"><br><br>
|
|
Built with ❤ by Helcel <br><span class="text-small text-gray">v0.0.1</span>
|
|
</p>
|
|
|
|
<p class="text-gray"><a href="https://git.helcel.net">Helcel Git</a></p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html> |