mirror of
https://github.com/papercss/papercss
synced 2024-05-28 03:22:47 +02:00
Add remaining code snippets
This commit is contained in:
rhyneav
parent
81939906f0
commit
32492eeb9b
102
index.html
102
index.html
|
|
@ -26,6 +26,7 @@
|
|||
<div id="flexbox" class="section">
|
||||
<h2>Flexbox</h2>
|
||||
<h4>Flexgrid</h4>
|
||||
<p>The flexgrid is a base 12 grid system that utilizes 3 different view widths.</p>
|
||||
<div class="demo">
|
||||
<div class="row">
|
||||
<div class="col-4 col">col-4 col</div>
|
||||
|
|
@ -547,6 +548,19 @@ function add(x, y) {
|
|||
<div class="sm-3 col border border-5 border-primary">Border-5</div>
|
||||
<div class="sm-3 col border border-6 border-primary">Border-6</div>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<div class="row flex-spaces">
|
||||
<div class="sm-3 col border border-primary">Default Border</div>
|
||||
<div class="sm-3 col border border-2 border-primary">Border-2</div>
|
||||
<div class="sm-3 col border border-3 border-primary">Border-3</div>
|
||||
</div>
|
||||
<div class="row flex-spaces">
|
||||
<div class="sm-3 col border border-4 border-primary">Border-4</div>
|
||||
<div class="sm-3 col border border-5 border-primary">Border-5</div>
|
||||
<div class="sm-3 col border border-6 border-primary">Border-6</div>
|
||||
</div></pre>
|
||||
</div>
|
||||
<h4>Border Colors</h4>
|
||||
<div class="row child-borders">
|
||||
<div class="sm-2 col border border-primary">Border primary</div>
|
||||
|
|
@ -556,6 +570,25 @@ function add(x, y) {
|
|||
<div class="sm-2 col border border-danger">Border danger</div>
|
||||
<div class="sm-2 col border background-primary border-white">Border white</div>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<div class="row child-borders">
|
||||
<div class="sm-2 col border border-primary">Border primary</div>
|
||||
<div class="sm-2 col border border-secondary">Border secondary</div>
|
||||
<div class="sm-2 col border border-success">Border success</div>
|
||||
<div class="sm-2 col border border-warning">Border warning</div>
|
||||
<div class="sm-2 col border border-danger">Border danger</div>
|
||||
<div class="sm-2 col border background-primary border-white">Border white</div>
|
||||
</div>
|
||||
<div class="row child-borders">
|
||||
<div class="sm-2 col border border-primary">Border primary</div>
|
||||
<div class="sm-2 col border border-secondary">Border secondary</div>
|
||||
<div class="sm-2 col border border-success">Border success</div>
|
||||
<div class="sm-2 col border border-warning">Border warning</div>
|
||||
<div class="sm-2 col border border-danger">Border danger</div>
|
||||
<div class="sm-2 col border background-primary border-white">Border white</div>
|
||||
</div></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>
|
||||
<div class="row flex-center child-borders">
|
||||
|
|
@ -566,6 +599,17 @@ function add(x, y) {
|
|||
<div class="sm-2 col">5</div>
|
||||
<div class="sm-2 col">6</div>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<div class="row flex-center child-borders">
|
||||
<div class="sm-2 col">1</div>
|
||||
<div class="sm-2 col">2</div>
|
||||
<div class="sm-2 col">3</div>
|
||||
<div class="sm-2 col">4</div>
|
||||
<div class="sm-2 col">5</div>
|
||||
<div class="sm-2 col">6</div>
|
||||
</div></pre>
|
||||
</div>
|
||||
<h4>Shadows</h4>
|
||||
<div class="row flex-spaces child-borders">
|
||||
<div class="sm-3 col shadow shadow-large">Large</div>
|
||||
|
|
@ -573,6 +617,15 @@ function add(x, y) {
|
|||
<div class="sm-3 col shadow shadow-small">Small</div>
|
||||
<div class="sm-3 col shadow shadow-hover">Hover</div>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<div class="row flex-spaces child-borders">
|
||||
<div class="sm-3 col shadow shadow-large">Large</div>
|
||||
<div class="sm-3 col shadow">Default</div>
|
||||
<div class="sm-3 col shadow shadow-small">Small</div>
|
||||
<div class="sm-3 col shadow shadow-hover">Hover</div>
|
||||
</div></pre>
|
||||
</div>
|
||||
<h4>Child Shadows</h4>
|
||||
<p>Use this if you want all children to have a shadow.</p>
|
||||
<div class="row flex-spaces child-borders child-shadows">
|
||||
|
|
@ -580,6 +633,14 @@ function add(x, y) {
|
|||
<div class="sm-3 col">Shadow</div>
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<div class="row flex-spaces child-borders child-shadows">
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
</div></pre>
|
||||
</div>
|
||||
<h4>Child Shadows Hover</h4>
|
||||
<p>Use this if you want all children to have a shadow... that changes on hover</p>
|
||||
<div class="row flex-spaces child-borders child-shadows-hover">
|
||||
|
|
@ -587,6 +648,14 @@ function add(x, y) {
|
|||
<div class="sm-3 col">Shadow</div>
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<div class="row flex-spaces child-borders child-shadows-hover">
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
</div></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Utilities</h2>
|
||||
|
|
@ -596,18 +665,38 @@ function add(x, y) {
|
|||
<div class="sm-3 col margin-large">Margin-large</div>
|
||||
<div class="sm-3 col margin-top-small">Margin-top-small</div>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<div class="row flex-spaces child-borders">
|
||||
<div class="sm-3 col margin">Margin</div>
|
||||
<div class="sm-3 col margin-large">Margin-large</div>
|
||||
<div class="sm-3 col margin-top-small">Margin-top-small</div>
|
||||
</div></pre>
|
||||
</div>
|
||||
<h4>Padding</h4>
|
||||
<div class="row flex-spaces child-borders">
|
||||
<div class="sm-3 col padding-small">Padding-small</div>
|
||||
<div class="sm-3 col padding-none">Padding-none</div>
|
||||
<div class="sm-3 col padding-left-large">Padding-left-large</div>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<div class="row flex-spaces child-borders">
|
||||
<div class="sm-3 col padding-small">Padding-small</div>
|
||||
<div class="sm-3 col padding-none">Padding-none</div>
|
||||
<div class="sm-3 col padding-left-large">Padding-left-large</div>
|
||||
</div></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Images</h2>
|
||||
<h4>Responsive</h4>
|
||||
<p>Images by default are responsive</p>
|
||||
<img src="https://unsplash.it/900" alt="Random Unsplash">
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<img src="https://unsplash.it/900" alt="Random Unsplash"></pre>
|
||||
</div>
|
||||
<h4>Float</h4>
|
||||
<p>You can also float responsive images to fit neatly with your text</p>
|
||||
<p>
|
||||
|
|
@ -617,9 +706,22 @@ function add(x, y) {
|
|||
<img src="https://unsplash.it/100" alt="Smallerer Unsplash" class="float-right">
|
||||
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>
|
||||
<p>
|
||||
<img src="https://unsplash.it/200" class="float-left">
|
||||
Lorem ipsum dolor.......
|
||||
<img src="https://unsplash.it/100" class="float-right">
|
||||
Aenean mauris tellus......
|
||||
</p></pre>
|
||||
</div>
|
||||
<h4>No Responsive & 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>
|
||||
<img src="https://unsplash.it/300" class="no-responsive no-border"></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2 id="download">Download</h2>
|
||||
|
|
|
|||
|
|
@ -20,11 +20,11 @@
|
|||
"homepage": "https://github.com/rhyneav/papercss#readme",
|
||||
"devDependencies": {
|
||||
"gulp": "3.9.1",
|
||||
"gulp-clean-css": "^3.9.0",
|
||||
"gulp-clean-css": "3.9.0",
|
||||
"gulp-connect": "5.0.0",
|
||||
"gulp-less": "3.3.2",
|
||||
"gulp-plumber": "1.1.0",
|
||||
"gulp-rename": "^1.2.2",
|
||||
"gulp-rename": "1.2.2",
|
||||
"gulp-watch-less": "1.0.1",
|
||||
"install": "0.10.1",
|
||||
"less": "2.7.2",
|
||||
|
|
|
|||
Loading…
Reference in a new issue