soc-core
Version:
Core sass framework based on Bootstrap
219 lines (196 loc) • 9.98 kB
HTML
<a name="typography"></a>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="page-header">
<h1>Typography <small>building on top of bootstrap</small></h1>
</div>
</div>
<div class="col-sm-12">
<p>The page header above is a simple shell for an h1 to appropriately space out and segment sections of content
on a page. It can utilize the h1's default small element, as well as most other components.</p>
<div class="well"><span>emmet:
<pre><code>.page-header>h1{Typography }>small{building on top of bootstrap}</code></pre>
</span></div>
</div>
<div class="col-md-6">
<div class="soc-panel">
<div class="soc-title">Headings</div>
<div class="soc-content">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
<h3>H3 Heading</h3>
<h4>H4 Heading</h4>
<h5>H5 Heading</h5>
<h6>H6 Heading</h6>
<div class="well"><span>emmet:
<pre><code>h${H$ Heading}*6</code></pre>
</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="soc-panel">
<div class="soc-title">Paragraphs</div>
<div class="soc-content">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<p class="lead">Leading: Lorem ipsum dolor sit amet</p>
<p>Longer text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis aliquet sapien,
quis tincidunt justo. Proin convallis leo lorem, et iaculis purus molestie sed. </p>
<p>Lorem ipsum dolor sit amet</p>
<p class="text-danger">Danger: Lorem ipsum dolor sit amet</p>
<p class="text-success">Succes: Lorem ipsum dolor sit amet</p>
<p class="text-muted">Muted: Lorem ipsum dolor sit amet</p>
<p class="text-info">Info: Lorem ipsum dolor sit amet</p>
<div class="well">
<span>emmets:
<pre><code>p.lead{Leading text}</code></pre>
<pre><code>p.text-danger{Danger text}</code></pre>
<pre><code>p.text-success{Success text}</code></pre>
<pre><code>p.text-muted{Muted text}</code></pre>
<pre><code>p.text-info{Info text}</code></pre>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="soc-panel">
<div class="soc-title">Unordered lists</div>
<div class="soc-content">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Nulla aliquam velit
<ul>
<li>Phasellus iaculis</li>
<li>Ac tristique libero</li>
</ul>
</li>
<li>Faucibus porta lacus</li>
<li>Eget porttitor</li>
</ul>
<div class="well">
<span>emmet:
<pre><code>ul>li{Random text $}*4+(li>ul>li{subitem}*2)+li{last item}</code></pre>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="soc-panel">
<div class="soc-title">Ordered lists</div>
<div class="soc-content">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Nulla aliquam velit</li>
<li>Phasellus iaculis</li>
<li>Ac tristique libero</li>
<li>Faucibus porta lacus</li>
<li>Eget porttitor</li>
</ol>
<div class="well">
<span>emmet:
<pre><code>ol>li{Random text $}*6</code></pre>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="soc-panel">
<div class="soc-title">Alignments</div>
<div class="soc-content">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<p class="text-left">Left align text</p>
<p class="text-center">Center align text</p>
<p class="text-right">Right align text</p>
<div class="well">
<span>emmet:
<pre><code>p.text-left{left}+p.text-center{center}+p.text-right{right}</code></pre>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="soc-panel">
<div class="soc-title">Labels</div>
<div class="soc-content">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="label label-default">Default</div>
<div class="label label-primary">Primary</div>
<div class="label label-success">Success</div>
<div class="label label-info">Info</div>
<div class="label label-warning">Warning</div>
<div class="label label-danger">Danger</div>
<h1>Example heading <span class="label label-default">New</span></h1>
<h2>Example heading <span class="label label-default">New</span></h2>
<h3>Example heading <span class="label label-default">New</span></h3>
<div class="well">
<span>emmets:
<pre><code>.label.label-default{default}+.label.label-primary{primary}+.label.label-success{success}+.label.label-info{info}+.label.label-warning{warning}+.label.label-danger{danger}</code></pre>
<pre><code>(h${Example heading }>span.label.label-default{New})*3</code></pre>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="soc-panel">
<div class="soc-title">Wells</div>
<div class="soc-content">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="well">This is a well</div>
<div class="well well-lg">This is a larger well</div>
<div class="well well-sm">This is a smaller well</div>
<div class="well">
<span>emmets:
<pre><code>.well{This is a well}}</code></pre>
<pre><code>.well.well-lg{This is a larger well}}</code></pre>
<pre><code>.well.well-sm{This is a smaller well}}</code></pre>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>