deblan-mirror/papercss
1
0
Fork 0
mirror of https://github.com/papercss/papercss synced 2024-06-07 00:12:29 +02:00
Code Issues Projects Releases Wiki Activity

Merge branch 'afzalsayed96-fix-code-tag' into develop

Browse source
This commit is contained in:
rhyneav 2017-12-07 16:31:49 -05:00
parent 552e24bece e82329ee06
commit d5188bd271
2 changed files with 71 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

154
index.html
View file

@ -144,8 +144,7 @@
</div>
</div>
<div class="docs">
<pre>
&lt;div class=&quot;row&quot;&gt;
<pre><code>&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-4 col&quot;&gt;col-4 col&lt;/div&gt;
&lt;div class=&quot;col-4 col&quot;&gt;col-4 col&lt;/div&gt;
&lt;div class=&quot;col-4 col&quot;&gt;col-4 col&lt;/div&gt;
@ -209,7 +208,7 @@
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
&lt;/div&gt;
&lt;/div&gt;
</pre>
</code></pre>
</div>
</div>
<div id="typography" class="section">
@ -227,14 +226,13 @@
imperdiet sapien nec, interdum fringilla lorem. Morbi sed arcu facilisis, maximus justo vel, porttitor nisl. Nam
suscipit metus facilisis iaculis vestibulum.</p>
<div class="docs">
<pre>
&lt;h1&gt;Heading 1&lt;/h1&gt;
<pre><code>&lt;h1&gt;Heading 1&lt;/h1&gt;
&lt;h2&gt;Heading 2&lt;/h2&gt;
&lt;h3&gt;Heading 3&lt;/h3&gt;
&lt;h4&gt;Heading 4&lt;/h4&gt;
&lt;h5&gt;Heading 5&lt;/h5&gt;
&lt;h6&gt;Heading 6&lt;/h6&gt;
&lt;p&gt;Lorem ipsum dolor....&lt;/p&gt;</pre>
&lt;p&gt;Lorem ipsum dolor....&lt;/p&gt;</code></pre>
</div>
</div>
<div id="buttons" class="section">
@ -252,8 +250,7 @@
<button class="disabled">Disabled</button>
<button disabled>Disabled</button>
<div class="docs">
<pre>
&lt;p&gt;Insprired by &lt;a href="https://codepen.io/tmrDevelops/pen/VeRvKX" target="_blank"&gt;Imperfect Buttons&lt;/a&gt;&lt;/p&gt;
<pre><code>&lt;p&gt;Insprired by &lt;a href="https://codepen.io/tmrDevelops/pen/VeRvKX" target="_blank"&gt;Imperfect Buttons&lt;/a&gt;&lt;/p&gt;
&lt;button class="btn-large"&gt;Large&lt;/button&gt;
&lt;button&gt;Default&lt;/button&gt;
&lt;button class="btn-small"&gt;Small&lt;/button&gt;
@ -264,7 +261,7 @@
&lt;/div&gt;
&lt;/div&gt;
&lt;button class="disabled"&gt;Disabled&lt;/button&gt;
&lt;button disabled&gt;Disabled&lt;/button&gt;</pre>
&lt;button disabled&gt;Disabled&lt;/button&gt;</code></pre>
</div>
<h4>Colors</h4>
<input type="button" class="paper-btn btn-primary" value="Primary"/>
@ -273,13 +270,12 @@
<button class="btn-warning">Warning</button>
<button class="btn-danger">Danger</button>
<div class="docs">
<pre>
&lt;input type="button" class="paper-btn btn-primary" value="Primary"/&gt;
<pre><code> &lt;input type="button" class="paper-btn btn-primary" value="Primary"/&gt;
&lt;input type="button" class="btn-secondary" value="Secondary"/&gt;
&lt;button class="btn-success"&gt;Success&lt;/button&gt;
&lt;button class="btn-warning"&gt;Warning&lt;/button&gt;
&lt;button class="btn-danger"&gt;Danger&lt;/button&gt;
</pre>
</code></pre>
</div>
</div>
<div id="forms" class="section">
@ -341,8 +337,7 @@
</label>
</fieldset>
<div class="docs">
<pre>
&lt;div class="form-group"&gt;
<pre><code>&lt;div class="form-group"&gt;
&lt;label for="paperInputs1"&gt;Input&lt;/label&gt;
&lt;input type="text" placeholder="Nice input" id="paperInputs1"&gt;
&lt;/div&gt;
@ -398,7 +393,7 @@
&lt;input type="checkbox" name="paperChecks" id="paperChecks2" value="option 2"&gt; &lt;span&gt;This is the second check&lt;/span&gt;
&lt;/label&gt;
&lt;/fieldset&gt;
</pre>
</code></pre>
</div>
</div>
<div id="lists" class="section">
@ -456,8 +451,7 @@
<li>Item 4</li>
</ul>
<div class="docs">
<pre>
&lt;ol&gt;
<pre><code>&lt;ol&gt;
&lt;li&gt;Do this&lt;/li&gt;
&lt;li&gt;Then this&lt;/li&gt;
&lt;li&gt;Finally this&lt;/li&gt;
@ -481,7 +475,7 @@
&lt;li&gt;But don't forget this&lt;/li&gt;
&lt;/ol&gt;
&lt;!-- Replace ol with ul for unordered lists. Go up to 5 levels deep! --&gt;</pre>
&lt;!-- Replace ol with ul for unordered lists. Go up to 5 levels deep! --&gt;</code></pre>
</div>
</div>
<div id="code" class="section">
@ -494,15 +488,14 @@ function add(x, y) {
return x + y;
} </pre>
<div class="docs">
<pre>
&lt;p&gt;Let's make some pretty &lt;code&gt;&amp;lt;code&amp;gt;&lt;/code&gt;&lt;/p&gt;
<pre><code>&lt;p&gt;Let's make some pretty &lt;code&gt;&amp;lt;code&amp;gt;&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;Print files backwards using &lt;kbd&gt;tac&lt;/kbd&gt;&lt;/p&gt;
&lt;p&gt;To stop a process, hit &lt;kbd&gt;ctrl + c&lt;/kbd&gt;&lt;/p&gt;
&lt;pre&gt;
function add(x, y) {
return x + y;
}
&lt;/pre&gt;</pre>
&lt;/pre&gt;</code></pre>
</div>
</div>
<div id="tables" class="section">
@ -601,8 +594,7 @@ function add(x, y) {
</tbody>
</table>
<div class="docs">
<pre>
&lt;table&gt;
<pre><code>&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;#&lt;/th&gt;
@ -635,7 +627,7 @@ function add(x, y) {
&lt;!-- Add table-hover or table-alternating to change the style of the table --&gt;
&lt;table class=&quot;table-hover&quot;&gt;
&lt;table class=&quot;table-alternating&quot;&gt;</pre>
&lt;table class=&quot;table-alternating&quot;&gt;</code></pre>
</div>
</div>
<div id="popovers" class="section">
@ -659,11 +651,10 @@ function add(x, y) {
</div>
<div class="docs">
<pre>
&lt;p popover-left="Popover on left"&gt;Popover left position&lt;/p&gt;
<pre><code>&lt;p popover-left="Popover on left"&gt;Popover left position&lt;/p&gt;
&lt;p popover-top="Popover on top"&gt;Popover top position&lt;/p&gt;
&lt;p popover-bottom="Popover on bottom"&gt;Popover bottom position&lt;/p&gt;
&lt;p popover-right="Popover on right"&gt;Popover right position&lt;/p&gt;</pre>
&lt;p popover-right="Popover on right"&gt;Popover right position&lt;/p&gt;</code></pre>
</div>
<p>But you can also popover on pretty much any element you want, it can be on a button, on a table cell, ...</p>
@ -675,8 +666,7 @@ function add(x, y) {
</div>
<div class="docs">
<pre>
&lt;button popover-top="Popover on top"&gt;Popover on top and on a button!&lt;/button&gt;</pre>
<pre><code>&lt;button popover-top="Popover on top"&gt;Popover on top and on a button!&lt;/button&gt;</code></pre>
</div>
</div>
@ -698,8 +688,7 @@ function add(x, y) {
</div>
<div class="docs">
<pre>
&lt;div class="card" style="width: 20rem;"&gt;
<pre><code>&lt;div class="card" style="width: 20rem;"&gt;
&lt;img src="https://picsum.photos/768" alt="Card example image"&gt;
&lt;div class="card-body"&gt;
@ -708,7 +697,7 @@ function add(x, y) {
&lt;p class="card-text"&gt;Notice that the card width in this example have been set to 20rem, otherwise it will try to fill the current container/row where the card is.&lt;/p&gt;
&lt;button&gt;Let me go here!&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
&lt;/div&gt;</code></pre>
</div>
<h4>Card title, text, links</h4>
@ -725,8 +714,7 @@ function add(x, y) {
</div>
<div class="docs">
<pre>
&lt;div class="card" style="width: 20rem;"&gt;
<pre><code>&lt;div class="card" style="width: 20rem;"&gt;
&lt;div class="card-body"&gt;
&lt;h4 class="card-title"&gt;My awesome Paper card!&lt;/h4&gt;
&lt;h5 class="card-subtitle"&gt;Nice looking subtitle.&lt;/h5&gt;
@ -734,7 +722,7 @@ function add(x, y) {
&lt;a class="card-link" href="#"&gt;First link&lt;/a&gt;
&lt;a class="card-link" href="#"&gt;Second link&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
&lt;/div&gt;</code></pre>
</div>
<h4>Image on top or bottom</h4>
@ -751,8 +739,7 @@ function add(x, y) {
</div>
<div class="docs">
<pre>
&lt;div class="card" style="width: 20rem;"&gt;
<pre><code>&lt;div class="card" style="width: 20rem;"&gt;
&lt;div class="card-body"&gt;
&lt;h4 class="card-title"&gt;My awesome Paper card!&lt;/h4&gt;
&lt;h5 class="card-subtitle"&gt;Nice looking subtitle.&lt;/h5&gt;
@ -760,7 +747,7 @@ function add(x, y) {
&lt;button&gt;Let me go here!&lt;/button&gt;
&lt;/div&gt;
&lt;img class="image-bottom" src="https://unsplash.it/550/250" alt="Card example image"&gt;
&lt;/div&gt;</pre>
&lt;/div&gt;</code></pre>
</div>
<h4>Header and footer</h4>
@ -778,8 +765,7 @@ function add(x, y) {
</div>
<div class="docs">
<pre>
&lt;div class="card" style="width: 20rem;"&gt;
<pre><code>&lt;div class="card" style="width: 20rem;"&gt;
&lt;div class="card-header"&gt;Header&lt;/div&gt;
&lt;div class="card-body"&gt;
&lt;h4 class="card-title"&gt;My awesome Paper card!&lt;/h4&gt;
@ -789,7 +775,7 @@ function add(x, y) {
&lt;/div&gt;
&lt;div class="card-footer"&gt;Footer&lt;/div&gt;
&lt;/div&gt;
</pre>
</code></pre>
</div>
</div>
@ -806,13 +792,12 @@ function add(x, y) {
<h6>Example h6 heading <span class="badge">123</span></h6>
<div class="docs">
<pre>
&lt;h1&gt;Example h1 heading &lt;span class="badge"&gt;123&lt;/span&gt;&lt;/h1&gt;
<pre><code>&lt;h1&gt;Example h1 heading &lt;span class="badge"&gt;123&lt;/span&gt;&lt;/h1&gt;
&lt;h2&gt;Example h2 heading &lt;span class="badge secondary"&gt;123&lt;/span&gt;&lt;/h2&gt;
&lt;h3&gt;Example h3 heading &lt;span class="badge success"&gt;123&lt;/span&gt;&lt;/h3&gt;
&lt;h4&gt;Example h4 heading &lt;span class="badge warning"&gt;123&lt;/span&gt;&lt;/h4&gt;
&lt;h5&gt;Example h5 heading &lt;span class="badge danger"&gt;123&lt;/span&gt;&lt;/h5&gt;
&lt;h6&gt;Example h6 heading &lt;span class="badge"&gt;123&lt;/span&gt;&lt;/h6&gt;</pre>
&lt;h6&gt;Example h6 heading &lt;span class="badge"&gt;123&lt;/span&gt;&lt;/h6&gt;</code></pre>
</div>
</div>
@ -826,13 +811,12 @@ function add(x, y) {
<p class="text-danger">Text danger</p>
<p class="text-muted">Text muted</p>
<div class="docs">
<pre>
&lt;p class=&quot;text-primary&quot;&gt;Text primary&lt;/p&gt;
<pre><code>&lt;p class=&quot;text-primary&quot;&gt;Text primary&lt;/p&gt;
&lt;p class=&quot;text-secondary&quot;&gt;Text secondary&lt;/p&gt;
&lt;p class=&quot;text-success&quot;&gt;Text success&lt;/p&gt;
&lt;p class=&quot;text-warning&quot;&gt;Text warning&lt;/p&gt;
&lt;p class=&quot;text-danger&quot;&gt;Text danger&lt;/p&gt;
&lt;p class="text-muted"&gt;Text muted&lt;/p&gt; </pre>
&lt;p class="text-muted"&gt;Text muted&lt;/p&gt; </code></pre>
</div>
<h4>Backgrounds</h4>
<div class="row flex-center">
@ -843,14 +827,13 @@ function add(x, y) {
<div class="sm-2 col background-danger">Background danger</div>
</div>
<div class="docs">
<pre>
&lt;div class=&quot;row flex-center&quot;&gt;
<pre><code>&lt;div class=&quot;row flex-center&quot;&gt;
&lt;div class=&quot;sm-2 col background-primary&quot;&gt;Background primary&lt;/div&gt;
&lt;div class=&quot;sm-2 col background-secondary&quot;&gt;Background secondary&lt;/div&gt;
&lt;div class=&quot;sm-2 col background-success&quot;&gt;Background success&lt;/div&gt;
&lt;div class=&quot;sm-2 col background-warning&quot;&gt;Background warning&lt;/div&gt;
&lt;div class=&quot;sm-2 col background-danger&quot;&gt;Background danger&lt;/div&gt;
&lt;/div&gt;</pre>
&lt;/div&gt;</code></pre>
</div>
</div>
<div id="borders" class="section">
@ -867,8 +850,7 @@ function add(x, y) {
<div class="sm-3 col border border-6 border-primary">Border-6</div>
</div>
<div class="docs">
<pre>
&lt;div class="row flex-spaces"&gt;
<pre><code>&lt;div class="row flex-spaces"&gt;
&lt;div class="sm-3 col border border-primary"&gt;Default Border&lt;/div&gt;
&lt;div class="sm-3 col border border-2 border-primary"&gt;Border-2&lt;/div&gt;
&lt;div class="sm-3 col border border-3 border-primary"&gt;Border-3&lt;/div&gt;
@ -877,7 +859,7 @@ function add(x, y) {
&lt;div class="sm-3 col border border-4 border-primary"&gt;Border-4&lt;/div&gt;
&lt;div class="sm-3 col border border-5 border-primary"&gt;Border-5&lt;/div&gt;
&lt;div class="sm-3 col border border-6 border-primary"&gt;Border-6&lt;/div&gt;
&lt;/div&gt;</pre>
&lt;/div&gt;</code></pre>
</div>
<h4>Border Colors</h4>
<div class="row child-borders">
@ -889,8 +871,7 @@ function add(x, y) {
<div class="sm-2 col border background-primary border-white">Border white</div>
</div>
<div class="docs">
<pre>
&lt;div class="row child-borders"&gt;
<pre><code>&lt;div class="row child-borders"&gt;
&lt;div class="sm-2 col border border-primary"&gt;Border primary&lt;/div&gt;
&lt;div class="sm-2 col border border-secondary"&gt;Border secondary&lt;/div&gt;
&lt;div class="sm-2 col border border-success"&gt;Border success&lt;/div&gt;
@ -905,7 +886,7 @@ function add(x, y) {
&lt;div class="sm-2 col border border-warning"&gt;Border warning&lt;/div&gt;
&lt;div class="sm-2 col border border-danger"&gt;Border danger&lt;/div&gt;
&lt;div class="sm-2 col border background-primary border-white"&gt;Border white&lt;/div&gt;
&lt;/div&gt;</pre>
&lt;/div&gt;</code></pre>
</div>
<h4>Child Borders</h4>
<p>Use this if you want all children to have a border. This will alternate through the different border styles defined above instead of having to add the border class for each element.</p>
@ -918,15 +899,14 @@ function add(x, y) {
<div class="sm-2 col">6</div>
</div>
<div class="docs">
<pre>
&lt;div class="row flex-center child-borders"&gt;
<pre><code>&lt;div class="row flex-center child-borders"&gt;
&lt;div class="sm-2 col"&gt;1&lt;/div&gt;
&lt;div class="sm-2 col"&gt;2&lt;/div&gt;
&lt;div class="sm-2 col"&gt;3&lt;/div&gt;
&lt;div class="sm-2 col"&gt;4&lt;/div&gt;
&lt;div class="sm-2 col"&gt;5&lt;/div&gt;
&lt;div class="sm-2 col"&gt;6&lt;/div&gt;
&lt;/div&gt;</pre>
&lt;/div&gt;</code></pre>
</div>
<h4>Border Styles</h4>
<div class="row flex-spaces child-borders">
@ -936,13 +916,12 @@ function add(x, y) {
<div class="sm-3 col border-dotted border-thick">Dotted Thick</div>
</div>
<div class="docs">
<pre>
&lt;div class="row flex-spaces child-borders"&gt;
<pre><code>&lt;div class="row flex-spaces child-borders"&gt;
&lt;div class="sm-3 col border-dashed"&gt;Dashed&lt;/div&gt;
&lt;div class="sm-3 col border-dotted"&gt;Dotted&lt;/div&gt;
&lt;div class="sm-3 col border-dashed border-thick"&gt;Dashed Thick&lt;/div&gt;
&lt;div class="sm-3 col border-dotted border-thick"&gt;Dotted Thick&lt;/div&gt;
&lt;/div&gt;</pre>
&lt;/div&gt;</code></pre>
</div>
<h4>Shadows</h4>
<div class="row flex-spaces child-borders">
@ -952,13 +931,12 @@ function add(x, y) {
<div class="sm-3 col shadow shadow-hover">Hover</div>
</div>
<div class="docs">
<pre>
&lt;div class="row flex-spaces child-borders"&gt;
<pre><code>&lt;div class="row flex-spaces child-borders"&gt;
&lt;div class="sm-3 col shadow shadow-large"&gt;Large&lt;/div&gt;
&lt;div class="sm-3 col shadow"&gt;Default&lt;/div&gt;
&lt;div class="sm-3 col shadow shadow-small"&gt;Small&lt;/div&gt;
&lt;div class="sm-3 col shadow shadow-hover"&gt;Hover&lt;/div&gt;
&lt;/div&gt;</pre>
&lt;/div&gt;</code></pre>
</div>
<h4>Child Shadows</h4>
<p>Use this if you want all children to have a shadow.</p>
@ -968,12 +946,11 @@ function add(x, y) {
<div class="sm-3 col">Shadow</div>
</div>
<div class="docs">
<pre>
&lt;div class="row flex-spaces child-borders child-shadows"&gt;
<pre><code>&lt;div class="row flex-spaces child-borders child-shadows"&gt;
&lt;div class="sm-3 col"&gt;Shadow&lt;/div&gt;
&lt;div class="sm-3 col"&gt;Shadow&lt;/div&gt;
&lt;div class="sm-3 col"&gt;Shadow&lt;/div&gt;
&lt;/div&gt;</pre>
&lt;/div&gt;</code></pre>
</div>
<h4>Child Shadows Hover</h4>
<p>Use this if you want all children to have a shadow... that changes on hover</p>
@ -983,12 +960,11 @@ function add(x, y) {
<div class="sm-3 col">Shadow</div>
</div>
<div class="docs">
<pre>
&lt;div class="row flex-spaces child-borders child-shadows-hover"&gt;
<pre><code>&lt;div class="row flex-spaces child-borders child-shadows-hover"&gt;
&lt;div class="sm-3 col"&gt;Shadow&lt;/div&gt;
&lt;div class="sm-3 col"&gt;Shadow&lt;/div&gt;
&lt;div class="sm-3 col"&gt;Shadow&lt;/div&gt;
&lt;/div&gt;</pre>
&lt;/div&gt;</code></pre>
</div>
</div>
<div id="utilities" class="section">
@ -1000,12 +976,11 @@ function add(x, y) {
<div class="sm-3 col margin-top-small">Margin-top-small</div>
</div>
<div class="docs">
<pre>
&lt;div class="row flex-spaces child-borders"&gt;
<pre><code>&lt;div class="row flex-spaces child-borders"&gt;
&lt;div class="sm-3 col margin"&gt;Margin&lt;/div&gt;
&lt;div class="sm-3 col margin-large"&gt;Margin-large&lt;/div&gt;
&lt;div class="sm-3 col margin-top-small"&gt;Margin-top-small&lt;/div&gt;
&lt;/div&gt;</pre>
&lt;/div&gt;</code></pre>
</div>
<h4>Padding</h4>
<div class="row flex-spaces child-borders">
@ -1014,12 +989,11 @@ function add(x, y) {
<div class="sm-3 col padding-left-large">Padding-left-large</div>
</div>
<div class="docs">
<pre>
&lt;div class="row flex-spaces child-borders"&gt;
<pre><code>&lt;div class="row flex-spaces child-borders"&gt;
&lt;div class="sm-3 col padding-small"&gt;Padding-small&lt;/div&gt;
&lt;div class="sm-3 col padding-none"&gt;Padding-none&lt;/div&gt;
&lt;div class="sm-3 col padding-left-large"&gt;Padding-left-large&lt;/div&gt;
&lt;/div&gt;</pre>
&lt;/div&gt;</code></pre>
</div>
</div>
<div id="images" class="section">
@ -1028,8 +1002,7 @@ function add(x, y) {
<p>Images by default are responsive</p>
<img src="https://unsplash.it/900" alt="Random Unsplash">
<div class="docs">
<pre>
&lt;img src="https://unsplash.it/900" alt="Random Unsplash"&gt;</pre>
<pre><code>&lt;img src="https://unsplash.it/900" alt="Random Unsplash"&gt;</code></pre>
</div>
<h4>Float</h4>
<p>You can also float responsive images to fit neatly with your text</p>
@ -1041,20 +1014,18 @@ function add(x, y) {
Aenean mauris tellus, facilisis sed quam non, tincidunt rutrum risus. Fusce quam urna, commodo vitae nunc condimentum, efficitur commodo libero. Sed dignissim odio enim, ac pharetra dui laoreet id. Suspendisse nec accumsan erat. Integer sit amet leo arcu. Proin sagittis blandit tempor. Vivamus at egestas lectus. Mauris eros tellus, egestas ac neque eget, lacinia sagittis ante. Phasellus faucibus suscipit erat, eget malesuada neque congue non.
</p>
<div class="docs">
<pre>
&lt;p&gt;
<pre><code>&lt;p&gt;
&lt;img src="https://unsplash.it/200" class="float-left"&gt;
Lorem ipsum dolor.......
&lt;img src="https://unsplash.it/100" class="float-right"&gt;
Aenean mauris tellus......
&lt;/p&gt;</pre>
&lt;/p&gt;</code></pre>
</div>
<h4>No Responsive &amp; No Borders</h4>
<p>If you don't like the default, you can just add the class <code>no-responsive</code> to prevent the image from being responsive. You can also remove the default border with <code>no-border</code>.</p>
<img src="https://unsplash.it/300" alt="Not responsive Unsplash" class="no-responsive no-border">
<div class="docs">
<pre>
&lt;img src="https://unsplash.it/300" class="no-responsive no-border"&gt;</pre>
<pre><code>&lt;img src="https://unsplash.it/300" class="no-responsive no-border"&gt;</code></pre>
</div>
</div>
<div id="alerts" class="section">
@ -1077,14 +1048,13 @@ function add(x, y) {
</div>
</div>
<div class="docs">
<pre>
&lt;div class="row flex-spaces"&gt;
<pre><code> &lt;div class="row flex-spaces"&gt;
&lt;div class="alert alert-primary"&gt;Alert-primary&lt;/div&gt;
&lt;div class="alert alert-secondary"&gt;Alert-secondary&lt;/div&gt;
&lt;div class="alert alert-success"&gt;Alert-success&lt;/div&gt;
&lt;div class="alert alert-warning"&gt;Alert-warning&lt;/div&gt;
&lt;div class="alert alert-danger"&gt;Alert-danger&lt;/div&gt;
&lt;/div&gt;</pre>
&lt;/div&gt;</code></pre>
</div>
</div>
<div id="tabs" class="section">
@ -1213,8 +1183,7 @@ function add(x, y) {
</article>
<div class="docs">
<pre>
&lt;article class="article"&gt;
<pre><code>&lt;article class="article"&gt;
&lt;h1 class="article-title"&gt;&lt;a href=""&gt;Article Title&lt;/a&gt;&lt;/h1&gt;
&lt;p class="article-meta"&gt;Written by &lt;a href="#"&gt;Super User&lt;/a&gt;&lt;/p&gt;
&lt;p class="text-lead"&gt; Lorem... &lt;/p&gt;
@ -1225,7 +1194,7 @@ function add(x, y) {
&lt;button&gt;5 Comments&lt;/button&gt;
&lt;/div&gt;
&lt;/article&gt;
</pre>
</code></pre>
</div>
</div>
@ -1256,8 +1225,7 @@ function add(x, y) {
</ul>
<p>Here's a quck snippet to get started with PaperCSS:</p>
<div class="docs">
<pre>
&lt;!DOCTYPE html&gt;
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
@ -1274,7 +1242,7 @@ function add(x, y) {
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
&lt;/html&gt;</code></pre>
</div>
<h4>Build it Yourself</h4>
<p>If you'd rather customize things, you can build the CSS yourself via the git repo</p>

12
src/code.less
View file

@ -24,5 +24,13 @@ pre {
border: 1px solid lighten(@primary, 50%);
border-radius: 3px;
overflow-x: auto;
white-space: pre-wrap;
}
white-space: pre;
}
pre code{
color: inherit;
background: transparent;
display: block;
font-size: inherit;
padding: initial;
white-space:pre;
}