mirror of
https://github.com/papercss/papercss
synced 2024-05-27 19:12:41 +02:00
Start documenting...
This commit is contained in:
rhyneav
parent
ce0ee0743f
commit
81196cba13
3
demo.css
3
demo.css
|
|
@ -6,4 +6,7 @@ body {
|
|||
}
|
||||
.demo .row .col:nth-child(even) {
|
||||
background-color: #ddd;
|
||||
}
|
||||
.docs {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
244
index.html
244
index.html
|
|
@ -55,7 +55,7 @@
|
|||
</div>
|
||||
<div class="row flex-center">
|
||||
<div class="sm-4 col">Aligned</div>
|
||||
<div class="sm-4 col">Right (flex-right)</div>
|
||||
<div class="sm-4 col">Center (flex-center)</div>
|
||||
</div>
|
||||
<div class="row flex-edges">
|
||||
<div class="sm-4 col">Aligned</div>
|
||||
|
|
@ -66,20 +66,23 @@
|
|||
<div class="sm-4 col">to be evenly spaced (flex-spaces)</div>
|
||||
</div>
|
||||
<div class="row flex-top">
|
||||
<div class="sm-6 col">Aligned top</div>
|
||||
<div class="sm-6 col">
|
||||
<div class="sm-4 col">Aligned top</div>
|
||||
<div class="sm-4 col">Aligned top</div>
|
||||
<div class="sm-4 col">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row flex-middle">
|
||||
<div class="sm-6 col">Aligned middle</div>
|
||||
<div class="sm-6 col">
|
||||
<div class="sm-4 col">Aligned middle</div>
|
||||
<div class="sm-4 col">Aligned middle</div>
|
||||
<div class="sm-4 col">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row flex-bottom">
|
||||
<div class="sm-6 col">Aligned bottom</div>
|
||||
<div class="sm-6 col">
|
||||
<div class="sm-4 col">Aligned bottom</div>
|
||||
<div class="sm-4 col">Aligned bottom</div>
|
||||
<div class="sm-4 col">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -92,6 +95,74 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<div class="row">
|
||||
<div class="col-4 col">col-4 col</div>
|
||||
<div class="col-4 col">col-4 col</div>
|
||||
<div class="col-4 col">col-4 col</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-3 col">col-3 col</div>
|
||||
<div class="col-9 col">col-9 col</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="sm-6 md-8 lg-10 col">sm-6 md-8 lg-10 col</div>
|
||||
<div class="sm-6 md-4 lg-2 col">sm-6 md-4 lg-2 col</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="sm-5 col">sm-5 col</div>
|
||||
<div class="col-fill col">col-fill col</div>
|
||||
<div class="col-fill col">col-fill col</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="sm-4 col">Aligned</div>
|
||||
<div class="sm-4 col">Left (default)</div>
|
||||
</div>
|
||||
<div class="row flex-right">
|
||||
<div class="sm-4 col">Aligned</div>
|
||||
<div class="sm-4 col">Right (flex-right)</div>
|
||||
</div>
|
||||
<div class="row flex-center">
|
||||
<div class="sm-4 col">Aligned</div>
|
||||
<div class="sm-4 col">Right (flex-right)</div>
|
||||
</div>
|
||||
<div class="row flex-edges">
|
||||
<div class="sm-4 col">Aligned</div>
|
||||
<div class="sm-4 col">to edges (flex-edges)</div>
|
||||
</div>
|
||||
<div class="row flex-spaces">
|
||||
<div class="sm-4 col">Aligned</div>
|
||||
<div class="sm-4 col">to be evenly spaced (flex-spaces)</div>
|
||||
</div>
|
||||
<div class="row flex-top">
|
||||
<div class="sm-6 col">Aligned top</div>
|
||||
<div class="sm-6 col">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row flex-middle">
|
||||
<div class="sm-6 col">Aligned middle</div>
|
||||
<div class="sm-6 col">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row flex-bottom">
|
||||
<div class="sm-6 col">Aligned bottom</div>
|
||||
<div class="sm-6 col">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="sm-3 col align-bottom">Align bottom</div>
|
||||
<div class="sm-3 col align-middle">Align middle</div>
|
||||
<div class="sm-3 col align-top">Align top</div>
|
||||
<div class="sm-3 col">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Typography</h2>
|
||||
|
|
@ -107,6 +178,16 @@
|
|||
magna neque, venenatis non libero a, tincidunt convallis diam. Donec vel fermentum ante. Quisque diam nisl, vestibulum
|
||||
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>
|
||||
<h1>Heading 1</h1>
|
||||
<h2>Heading 2</h2>
|
||||
<h3>Heading 3</h3>
|
||||
<h4>Heading 4</h4>
|
||||
<h5>Heading 5</h5>
|
||||
<h6>Heading 6</h6>
|
||||
<p>Lorem ipsum dolor....</p></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Buttons</h2>
|
||||
|
|
@ -114,6 +195,12 @@
|
|||
<button class="btn-large">Large</button>
|
||||
<button>Default</button>
|
||||
<button class="btn-small">Small</button>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<button class="btn-large">Large</button>
|
||||
<button>Default</button>
|
||||
<button class="btn-small">Small</button></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Forms</h2>
|
||||
|
|
@ -147,6 +234,39 @@
|
|||
<input type="checkbox" name="paperChecks" id="paperChecks2" value="option 2"> <span>This is the second check</span>
|
||||
</label>
|
||||
</fieldset>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<div class="form-group">
|
||||
<label>Input</label>
|
||||
<input type="text">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Select</label>
|
||||
<select>
|
||||
<option value="1">Option 1</option>
|
||||
<option value="2">Option 2</option>
|
||||
<option value="3">Option 3</option>
|
||||
<select>
|
||||
</div>
|
||||
<fieldset class="form-group">
|
||||
<legend>Some Radio Buttons</legend>
|
||||
<label for="paperRadios1" class="paper-radio">
|
||||
<input type="radio" name="paperRadios" id="paperRadios1" value="option 1"> <span>This is the first option<span>
|
||||
</label>
|
||||
<label for="paperRadios2" class="paper-radio">
|
||||
<input type="radio" name="paperRadios" id="paperRadios2" value="option 2"> <span>This is the second option<span>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset class="form-group">
|
||||
<legend>Some Check Boxes</legend>
|
||||
<label for="paperChecks1" class="paper-check">
|
||||
<input type="checkbox" name="paperChecks" id="paperChecks1" value="option 1"> <span>This is the first check</span>
|
||||
</label>
|
||||
<label for="paperChecks2" class="paper-check">
|
||||
<input type="checkbox" name="paperChecks" id="paperChecks2" value="option 2"> <span>This is the second check</span>
|
||||
</label>
|
||||
</fieldset></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Lists</h2>
|
||||
|
|
@ -195,6 +315,34 @@
|
|||
</ul>
|
||||
<li>And now we're are the top!</li>
|
||||
</ul>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<ol>
|
||||
<li>Do this</li>
|
||||
<li>Then this</li>
|
||||
<li>Finally this</li>
|
||||
<li>Then we'll go one deeper</li>
|
||||
<ol>
|
||||
<li>Dillon</li>
|
||||
<li>Francis</li>
|
||||
<ol>
|
||||
<li>What if we went...</li>
|
||||
<li>One more deeper?</li>
|
||||
<ol>
|
||||
<li>DJ</li>
|
||||
<li>Hanzel</li>
|
||||
<ol>
|
||||
<li>Five levels should be enough</li>
|
||||
<li>Right?</li>
|
||||
</ol>
|
||||
</ol>
|
||||
</ol>
|
||||
</ol>
|
||||
<li>But don't forget this</li>
|
||||
</ol>
|
||||
|
||||
<!-- Replace ol with ul for unordered lists. Go up to 5 levels deep! --></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Code</h2>
|
||||
|
|
@ -205,6 +353,17 @@
|
|||
function add(x, y) {
|
||||
return x + y;
|
||||
} </pre>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<p>Let's make some pretty <code>&lt;code&gt;</code></p>
|
||||
<p>Print files backwards using <kbd>tac</kbd></p>
|
||||
<p>To stop a process, hit <kbd>ctrl + c</kbd></p>
|
||||
<pre>
|
||||
function add(x, y) {
|
||||
return x + y;
|
||||
}
|
||||
</pre></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Tables</h2>
|
||||
|
|
@ -301,6 +460,43 @@ function add(x, y) {
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Location</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Bob Dylan</td>
|
||||
<td>Musician</td>
|
||||
<td>California, USA</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Eric Claption</td>
|
||||
<td>Musician</td>
|
||||
<td>Ohio, USA</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Daniel Kahneman</td>
|
||||
<td>Psychologist</td>
|
||||
<td>California, USA</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Add table-hover or table-alternating to change the style of the table -->
|
||||
<table class="table-hover">
|
||||
<table class="table-alternating"></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Colors</h2>
|
||||
|
|
@ -310,6 +506,14 @@ function add(x, y) {
|
|||
<p class="text-success">Text success</p>
|
||||
<p class="text-warning">Text warning</p>
|
||||
<p class="text-danger">Text danger</p>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<p class="text-primary">Text primary</p>
|
||||
<p class="text-secondary">Text secondary</p>
|
||||
<p class="text-success">Text success</p>
|
||||
<p class="text-warning">Text warning</p>
|
||||
<p class="text-danger">Text danger</p> </pre>
|
||||
</div>
|
||||
<h4>Backgrounds</h4>
|
||||
<div class="row flex-center">
|
||||
<div class="sm-2 col background-primary">Background primary</div>
|
||||
|
|
@ -318,19 +522,29 @@ function add(x, y) {
|
|||
<div class="sm-2 col background-warning">Background warning</div>
|
||||
<div class="sm-2 col background-danger">Background danger</div>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<div class="row flex-center">
|
||||
<div class="sm-2 col background-primary">Background primary</div>
|
||||
<div class="sm-2 col background-secondary">Background secondary</div>
|
||||
<div class="sm-2 col background-success">Background success</div>
|
||||
<div class="sm-2 col background-warning">Background warning</div>
|
||||
<div class="sm-2 col background-danger">Background danger</div>
|
||||
</div></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Borders & Shadows</h2>
|
||||
<h4>Borders</h4>
|
||||
<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-1</div>
|
||||
<div class="sm-3 col border border-3 border-primary">Border-2</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-3</div>
|
||||
<div class="sm-3 col border border-5 border-primary">Border-4</div>
|
||||
<div class="sm-3 col border border-6 border-primary">Border-5</div>
|
||||
<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>
|
||||
<h4>Border Colors</h4>
|
||||
<div class="row child-borders">
|
||||
|
|
@ -359,12 +573,14 @@ function add(x, y) {
|
|||
<div class="sm-3 col shadow shadow-hover">Hover</div>
|
||||
</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">
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
</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">
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
|
|
@ -406,10 +622,10 @@ function add(x, y) {
|
|||
</div>
|
||||
<div class="section">
|
||||
<h2 id="about">About</h2>
|
||||
<p>I got tired of straight lines and clean pages on the internet. I also wanted to learn more about flexbox and less. So I made Paper CSS to solve these two challenges of mine :)</p>
|
||||
<p>I got tired of mODerN STylEs and clean pages on the internet. I also wanted to learn more about Flexbox and Less. So I made Paper CSS to solve these two challenges of mine :)</p>
|
||||
<p>The goal of Paper CSS is to be as minimal as possible when adding classes. For example, a button should just look like a paper button. There shouldn't be a need to add a class such as <code>paper-button</code>. Because of this, adding Paper CSS to a markdown generated page should instantly paper-ize it.</p>
|
||||
<p>While I'm proud of how it's turned out so far, I think there's a lot that can still be done to make it better. Such things as refactoring, adding more utility classes and more border types (like dashed/dotted) could really polish off this framework. That's why it's open sourced and available for pull requests!</p>
|
||||
<p>If you are new to git/less, this would be a great project to get your feet wet with. I'd be happy to help walk you through the pull request process!</p>
|
||||
<p>If you are new to Git or Less, this would be a great project to get your feet wet with. I'd be happy to help walk you through the pull request process. Check out the Git repo for more info!</p>
|
||||
</div>
|
||||
<div class="row flex-right">
|
||||
<p>Made with 💛 by <a href="https://vlaservi.ch" target="_blank">Rhyne</a></p>
|
||||
|
|
|
|||
|
|
@ -17,10 +17,11 @@ pre {
|
|||
padding: 1em;
|
||||
font-size: 80%;
|
||||
line-height: 1.5;
|
||||
color: #41403E;
|
||||
color: @primary;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
background-color: lighten(@primary, 70%);
|
||||
background-color: lighten(@primary, 73%);
|
||||
border: 1px solid lighten(@primary, 50%);
|
||||
border-radius: 3px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
|
@ -21,6 +21,7 @@ input, select {
|
|||
display: inline-block;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
// TODO: make these classes implicit. We can find out what class to apply based on its type
|
||||
.paper-radio, .paper-check {
|
||||
display: block;
|
||||
margin-bottom: .5rem;
|
||||
|
|
|
|||
Loading…
Reference in a new issue