deblan-mirror/papercss
1
0
Fork 0
mirror of https://github.com/papercss/papercss synced 2024-05-20 14:46:37 +02:00
Code Issues Projects Releases Wiki Activity

Added sumarry

Browse source
This commit is contained in:
Thomas Cazade 2017-11-03 11:48:32 +01:00
parent 5af16d2a8f
commit 832be3789b
2 changed files with 33 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
demo.css
View file

@ -10,4 +10,7 @@ body {
.docs {
margin-top: 2rem;
margin-bottom: 2rem;
}
.summary a {
color: #41403e;
}

41
index.html
View file

@ -34,12 +34,31 @@
<h3>the less formal CSS framework</h3>
</div>
</div>
<div class="row flex-center child-borders">
<a href="#download" class="paper-btn margin">Download</a>
<a href="#flexbox" class="paper-btn margin">Docs</a>
<a href="#about" class="paper-btn margin">About</a>
<a href="https://github.com/rhyneav/papercss" target="_blank" class="paper-btn margin">Github</a>
</div>
<h3>Summary:</h3>
<ul class="summary">
<li><a href="#flexbox">Flexbox</a></li>
<li><a href="#typography">Typography</a></li>
<li><a href="#buttons">Buttons</a></li>
<li><a href="#forms">Forms</a></li>
<li><a href="#lists">Lists</a></li>
<li><a href="#code">Code</a></li>
<li><a href="#tables">Tables</a></li>
<li><a href="#popovers">Popovers</a></li>
<li><a href="#colors">Colors</a></li>
<li><a href="#borders">Borders & shadows</a></li>
<li><a href="#utilities">Utilities</a></li>
<li><a href="#images">Images</a></li>
<li><a href="#alerts">Alerts</a></li>
</ul>
</div>
<div id="flexbox" class="section">
@ -184,7 +203,7 @@
</pre>
</div>
</div>
<div class="section">
<div id="typography" class="section">
<h2>Typography</h2>
<p>How pretty is the text?</p>
<h1>Heading 1</h1>
@ -209,7 +228,7 @@
&lt;p&gt;Lorem ipsum dolor....&lt;/p&gt;</pre>
</div>
</div>
<div class="section">
<div id="buttons" class="section">
<h2>Buttons</h2>
<p>Insprired by <a href="https://codepen.io/tmrDevelops/pen/VeRvKX" target="_blank">Imprefect Buttons</a></p>
<button class="btn-large">Large</button>
@ -235,7 +254,7 @@
&lt;/div&gt;</pre>
</div>
</div>
<div class="section">
<div id="forms" class="section">
<h2>Forms</h2>
<div class="form-group">
<label>Input</label>
@ -330,7 +349,7 @@
</pre>
</div>
</div>
<div class="section">
<div id="lists" class="section">
<h2>Lists</h2>
<h4>Ordered Lists</h4>
<ol>
@ -406,7 +425,7 @@
&lt;!-- Replace ol with ul for unordered lists. Go up to 5 levels deep! --&gt;</pre>
</div>
</div>
<div class="section">
<div id="code" class="section">
<h2>Code</h2>
<p>Let's make some pretty <code>&lt;code&gt;</code></p>
<p>Print files backwards using <kbd>tac</kbd></p>
@ -427,7 +446,7 @@ function add(x, y) {
&lt;/pre&gt;</pre>
</div>
</div>
<div class="section">
<div id="tables" class="section">
<h2>Tables</h2>
<h4>Regular</h4>
<table>
@ -560,7 +579,7 @@ function add(x, y) {
&lt;table class=&quot;table-alternating&quot;&gt;</pre>
</div>
</div>
<div class="section">
<div id="popovers" class="section">
<h2>Popovers</h2>
<h4>Basic usage</h4>
<p>You can add popovers, also called tooltips, on your elements. popover attribute is the popover text content, popover-position attribute can be: top, left, right, bottom.</p>
@ -601,7 +620,7 @@ function add(x, y) {
&lt;button popover="Popover on top" popover-position="top"&gt;Popover on top and on a button!&lt;/button&gt;</pre>
</div>
</div>
<div class="section">
<div id="colors" class="section">
<h2>Colors</h2>
<h4>Text</h4>
<p class="text-primary">Text primary</p>
@ -636,7 +655,7 @@ function add(x, y) {
&lt;/div&gt;</pre>
</div>
</div>
<div class="section">
<div id="borders" class="section">
<h2>Borders &amp; Shadows</h2>
<h4>Borders</h4>
<div class="row flex-spaces">
@ -805,7 +824,7 @@ function add(x, y) {
&lt;/div&gt;</pre>
</div>
</div>
<div class="section">
<div id="images" class="section">
<h2>Images</h2>
<h4>Responsive</h4>
<p>Images by default are responsive</p>
@ -840,7 +859,7 @@ function add(x, y) {
&lt;img src="https://unsplash.it/300" class="no-responsive no-border"&gt;</pre>
</div>
</div>
<div class="section">
<div id="alerts" class="section">
<h2>Alerts</h2>
<div class="row flex-spaces">
<div class="alert alert-primary">