light-design
Version:
Lightest Designed CSS framework.
289 lines (283 loc) • 20 kB
HTML
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>CSS framework</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i"
rel="stylesheet">
<link rel="stylesheet" href="./dist/css/light-design.css" />
<link rel="stylesheet" href="./dist/css/docs.css" />
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="container">
<div class="row">
<div class="col-sm-8">
<div class="cell-wrapper">
<section id="typography">
<h2 class="page-header">Typography</h2>
<div class="ld-docs-section" id="typeHeadings">
<h3>Headings</h3>
<p>All HTML headings,
<code><h1></code> through
<code><h6></code>, are available.
<code>.h1</code> through
<code>.h6</code> classes are also available, for when you want to match the font styling of a heading but still want
your text to be displayed inline.</p>
<div class="ld-example ld-example-type">
<table class="table">
<tbody>
<tr>
<td>
<h1>h1. Bootstrap heading</h1>
</td>
<td class="type-info">Semibold 36px</td>
</tr>
<tr>
<td>
<h2>h2. Bootstrap heading</h2>
</td>
<td class="type-info">Semibold 30px</td>
</tr>
<tr>
<td>
<h3>h3. Bootstrap heading</h3>
</td>
<td class="type-info">Semibold 24px</td>
</tr>
<tr>
<td>
<h4>h4. Bootstrap heading</h4>
</td>
<td class="type-info">Semibold 18px</td>
</tr>
<tr>
<td>
<h5>h5. Bootstrap heading</h5>
</td>
<td class="type-info">Semibold 14px</td>
</tr>
<tr>
<td>
<h6>h6. Bootstrap heading</h6>
</td>
<td class="type-info">Semibold 12px</td>
</tr>
</tbody>
</table>
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt"><h1></span>h1. Bootstrap heading<span class="nt"></h1></span>
<span class="nt"><h2></span>h2. Bootstrap heading<span class="nt"></h2></span>
<span class="nt"><h3></span>h3. Bootstrap heading<span class="nt"></h3></span>
<span class="nt"><h4></span>h4. Bootstrap heading<span class="nt"></h4></span>
<span class="nt"><h5></span>h5. Bootstrap heading<span class="nt"></h5></span>
<span class="nt"><h6></span>h6. Bootstrap heading<span class="nt"></h6></span>
</code></pre>
</figure>
</div>
<p>Create lighter, secondary text in any heading with a generic <code><small></code> tag or the <code>.small</code> class.</p>
<div class="ld-example ld-example-type">
<table class="table"> <tbody> <tr> <td><h1>h1. Bootstrap heading <small>Secondary text</small></h1></td> </tr> <tr> <td><h2>h2. Bootstrap heading <small>Secondary text</small></h2></td> </tr> <tr> <td><h3>h3. Bootstrap heading <small>Secondary text</small></h3></td> </tr> <tr> <td><h4>h4. Bootstrap heading <small>Secondary text</small></h4></td> </tr> <tr> <td><h5>h5. Bootstrap heading <small>Secondary text</small></h5></td> </tr> <tr> <td><h6>h6. Bootstrap heading <small>Secondary text</small></h6></td> </tr> </tbody> </table>
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt"><h1></span>h1. Bootstrap heading <span class="nt"><small></span>Secondary text<span class="nt"></small></h1></span>
<span class="nt"><h2></span>h2. Bootstrap heading <span class="nt"><small></span>Secondary text<span class="nt"></small></h2></span>
<span class="nt"><h3></span>h3. Bootstrap heading <span class="nt"><small></span>Secondary text<span class="nt"></small></h3></span>
<span class="nt"><h4></span>h4. Bootstrap heading <span class="nt"><small></span>Secondary text<span class="nt"></small></h4></span>
<span class="nt"><h5></span>h5. Bootstrap heading <span class="nt"><small></span>Secondary text<span class="nt"></small></h5></span>
<span class="nt"><h6></span>h6. Bootstrap heading <span class="nt"><small></span>Secondary text<span class="nt"></small></h6></span></code></pre>
</figure>
</div>
</div>
<div class="ld-docs-section" id="typeBodyCopy">
<h3>Body copy</h3>
<p>Default font-size is 14px, with line-height of 1.428.</p>
<div class="ld-example ld-example-type">
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><p></span>...<span class="nt"></p></span></code></pre></figure>
</div>
<h3 id="typeLeadBodyCopy">Lead body copy</h3>
<p>Make a paragraph stand out by adding .lead.</p>
<div class="ld-example ld-example-type">
<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><p</span> <span class="na">class=</span><span class="s">"lead"</span><span class="nt">></span>...<span class="nt"></p></span></code></pre></figure>
</div>
</div>
<div class="ld-docs-section" id="typeAlignment">
<h3>Alignment classes</h3>
<p>Easily realign text to components with text alignment classes.</p>
<div class="ld-example ld-example-type">
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-left"</span><span class="nt">></span>Left aligned text.<span class="nt"></p></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-center"</span><span class="nt">></span>Center aligned text.<span class="nt"></p></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-right"</span><span class="nt">></span>Right aligned text.<span class="nt"></p></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-justify"</span><span class="nt">></span>Justified text.<span class="nt"></p></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-nowrap"</span><span class="nt">></span>No wrap text.<span class="nt"></p></span></code></pre></figure>
</div>
<p>These classes also comes for different screen type, like <span class="s">text-lg-left</span>, <span class="s">text-md-left</span>, <span class="s">text-sm-left</span>, <span class="s">text-xs-left</span>.</p>
</div>
<div class="ld-docs-section" id="typeTransformation">
<h3>Transformation classes</h3>
<p>Transform text in components with text capitalization classes.</p>
<div class="ld-example ld-example-type">
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-lowercase"</span><span class="nt">></span>Lowercased text.<span class="nt"></p></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-uppercase"</span><span class="nt">></span>Uppercased text.<span class="nt"></p></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-capitalize"</span><span class="nt">></span>Capitalized text.<span class="nt"></p></span></code></pre></figure>
</div>
<p>These also classes also comes for different screen type, like <span class="s">text-lg-lowercase</span>, <span class="s">text-md-lowercase</span>, <span class="s">text-sm-lowercase</span>, <span class="s">text-xs-lowercase</span>.</p>
</div>
<div class="ld-docs-section" id="typeAddresses">
<h3>Addresses</h3>
<p>Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <code><br></code>.</p>
<div class="ld-example ld-example-type">
<address> <strong>Twitter, Inc.</strong><br> 1355 Market Street, Suite 900<br> San Francisco, CA 94103<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address>
<address> <strong>Full Name</strong><br> <a href="mailto:#">first.last@example.com</a> </address>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><address></span>
<span class="nt"><strong></span>Twitter, Inc.<span class="nt"></strong><br></span>
1355 Market Street, Suite 900<span class="nt"><br></span>
San Francisco, CA 94103<span class="nt"><br></span>
<span class="nt"><abbr</span> <span class="na">title=</span><span class="s">"Phone"</span><span class="nt">></span>P:<span class="nt"></abbr></span> (123) 456-7890
<span class="nt"></address></span>
<span class="nt"><address></span>
<span class="nt"><strong></span>Full Name<span class="nt"></strong><br></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"mailto:#"</span><span class="nt">></span>first.last@example.com<span class="nt"></a></span>
<span class="nt"></address></span></code></pre></figure>
</div>
</div>
<div class="ld-docs-section" id="typeBlockquote">
<h3>Blockquote options</h3>
<p>Style and content changes for simple variations on a standard <code><blockquote></code></p>
<p>Add a <code><footer></code> for identifying the source. Wrap the name of the source work in <code><cite></code>.</p>
<div class="ld-example ld-example-type">
<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><blockquote></span>
<span class="nt"><p></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<span class="nt"></p></span>
<span class="nt"><footer></span>Someone famous in <span class="nt"><cite</span> <span class="na">title=</span><span class="s">"Source Title"</span><span class="nt">></span>Source Title<span class="nt"></cite></footer></span>
<span class="nt"></blockquote></span></code></pre></figure>
</div>
<h4 id="typeAlternateBlockquote">Alternate displays</h4>
<p>Add <code>.blockquote-reverse</code> for a blockquote with right-aligned content.</p>
<div class="ld-example ld-example-type">
<blockquote class="blockquote-reverse"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><blockquote</span> <span class="na">class=</span><span class="s">"blockquote-reverse"</span><span class="nt">></span>
...
<span class="nt"></blockquote></span></code></pre></figure>
</div>
</div>
<div class="ld-docs-section" id="typeLists">
<h3>Lists</h3>
<h4 id="typeUnorderedLists">Unordered</h4>
<p>A list of items in which the order does not explicitly matter.</p>
<div class="ld-example ld-example-type">
<ul> <li>Lorem ipsum dolor sit amet</li> <li>Consectetur adipiscing elit</li> <li>Integer molestie lorem at massa</li> <li>Facilisis in pretium nisl aliquet</li> <li>Nulla volutpat aliquam velit <ul> <li>Phasellus iaculis neque</li> <li>Purus sodales ultricies</li> <li>Vestibulum laoreet porttitor sem</li> <li>Ac tristique libero volutpat at</li> </ul> </li> <li>Faucibus porta lacus fringilla vel</li> <li>Aenean sit amet erat nunc</li> <li>Eget porttitor lorem</li> </ul>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul></span>
<span class="nt"><li></span>...<span class="nt"></li></span>
<span class="nt"></ul></span></code></pre></figure>
</div>
<h4 id="typeOrderedLists">Ordered</h4>
<p>A list of items in which the order does explicitly matter.</p>
<div class="ld-example ld-example-type">
<ol> <li>Lorem ipsum dolor sit amet</li> <li>Consectetur adipiscing elit</li> <li>Integer molestie lorem at massa</li> <li>Facilisis in pretium nisl aliquet</li> <li>Nulla volutpat aliquam velit</li> <li>Faucibus porta lacus fringilla vel</li> <li>Aenean sit amet erat nunc</li> <li>Eget porttitor lorem</li> </ol>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ol></span>
<span class="nt"><li></span>...<span class="nt"></li></span>
<span class="nt"></ol></span></code></pre></figure>
</div>
<h4 id="typeUnstyledLists">Unstyled</h4>
<p>Remove the default <code>list-style</code> and left margin on list items (immediate children only). <strong>This only applies to immediate children list items</strong>, meaning you will need to add the class for any nested lists as well.</p>
<div class="ld-example ld-example-type">
<ul class="list-unstyled"> <li>Lorem ipsum dolor sit amet</li> <li>Consectetur adipiscing elit</li> <li>Integer molestie lorem at massa</li> <li>Facilisis in pretium nisl aliquet</li> <li>Nulla volutpat aliquam velit <ul> <li>Phasellus iaculis neque</li> <li>Purus sodales ultricies</li> <li>Vestibulum laoreet porttitor sem</li> <li>Ac tristique libero volutpat at</li> </ul> </li> <li>Faucibus porta lacus fringilla vel</li> <li>Aenean sit amet erat nunc</li> <li>Eget porttitor lorem</li> </ul>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-unstyled"</span><span class="nt">></span>
<span class="nt"><li></span>...<span class="nt"></li></span>
<span class="nt"></ul></span></code></pre></figure>
</div>
<h4 id="typeInlineLists">Inline</h4>
<p>Place all list items on a single line with <code>display: inline-block;</code> and some light padding.</p>
<div class="ld-example ld-example-type">
<ul class="list-inline"> <li>Lorem ipsum</li> <li>Phasellus iaculis</li> <li>Nulla volutpat</li> </ul>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-inline"</span><span class="nt">></span>
<span class="nt"><li></span>...<span class="nt"></li></span>
<span class="nt"></ul></span></code></pre></figure>
</div>
<h4 id="typeDescription">Description</h4>
<p>A list of terms with their associated descriptions.</p>
<div class="ld-example ld-example-type">
<dl> <dt>Description lists</dt> <dd>A description list is perfect for defining terms.</dd> <dt>Euismod</dt> <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd> <dd>Donec id elit non mi porta gravida at eget metus.</dd> <dt>Malesuada porta</dt> <dd>Etiam porta sem malesuada magna mollis euismod.</dd> </dl>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><dl></span>
<span class="nt"><dt></span>...<span class="nt"></dt></span>
<span class="nt"><dd></span>...<span class="nt"></dd></span>
<span class="nt"></dl></span></code></pre></figure>
</div>
</div>
</section>
</div>
</div>
<div class="col-sm-4">
<div class="cell-wrapper">
<sidebar class="highlight">
<h5>Overview</h5>
<ul class="list-unstyled">
<li>
<a href="#typography">Typography</a>
<ul class="list-unstyled">
<li><a href="#typeHeadings">Headings</a></li>
<li><a href="#typeBodyCopy">Body copy</a></li>
<li><a href="#typeLeadBodyCopy">Lead body copy</a></li>
<li><a href="#typeAlignment">Alignment classes</a></li>
<li><a href="#typeTransformation">Transformation classes</a></li>
<li><a href="#typeAddresses">Addresses</a></li>
<li>
<a href="#typeBlockquote">Blockquote options</a>
<ul class="list-unstyled">
<li><a href="#typeAlternateBlockquote">Alternate displays</a></li>
</ul>
</li>
<li>
<a href="#typeLists">Lists</a>
<ul class="list-unstyled">
<li><a href="#typeUnorderedLists">Unordered</a></li>
<li><a href="#typeOrderedLists">Ordered</a></li>
<li><a href="#typeUnstyledLists">Unstyled</a></li>
<li><a href="#typeInlineLists">Inline</a></li>
<li><a href="#typeDescription">Description</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</sidebar>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="./dist/js/light-design.min.js"></script>
<script>
$(document).ready(function() {
$(window).on('load scroll resize', function(){
$('sidebar').css({
'position': 'absolute',
'top': $(window).scrollTop()
});
});
});
</script>
</body>
</html>