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

Merge branch 'master' into Fraham-MoreButtonStyles

Browse source
This commit is contained in:
Fraham 2017-11-05 16:27:36 +00:00 committed by GitHub
parent da5428e495 c7b18dc413
commit 65ff16da0c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 5062 additions and 60 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;
}

93
index.html
View file

@ -2,27 +2,65 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PaperCSS · the less formal CSS framework</title>
<meta name="description" content="The less formal CSS framework.">
<meta name="author" content="Rhyneav and PaperCSS contributors.">
<!-- Twitter -->
<meta name="twitter:description" content="The less formal CSS framework">
<meta name="twitter:title" content="PaperCSS">
<!-- OpenGraph -->
<meta property="og:url" content="https://www.getpapercss.com/">
<meta property="og:title" content="PaperCSS">
<meta property="og:description" content="The less formal CSS framework">
<!-- Styles -->
<link rel="stylesheet" href="/dist/paper.css">
<link rel="stylesheet" href="/demo.css">
</head>
<body>
<div class="container paper">
<div class="demo-title">
<div class="row flex-center">
<div class="text-center">
<h1>PaperCSS</h1>
<h3>the less formal css framework</h3>
<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" class="paper-btn margin">Github</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">
<h2>Flexbox</h2>
<h4>Flexgrid</h4>
@ -165,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>
@ -190,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>
@ -202,6 +240,8 @@
<button class="btn-block">Block level</button>
</div>
</div>
<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;Imprefect Buttons&lt;/a&gt;&lt;/p&gt;
@ -213,7 +253,9 @@
&lt;div class="col-6 col"&gt;
&lt;button class="btn-block"&gt;Block level&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
&lt;/div&gt;
&lt;button class="disabled"&gt;Disabled&lt;/button&gt;
&lt;button disabled&gt;Disabled&lt;/button&gt;</pre>
</div>
<h4>Colors</h4>
<input type="button" class="paper-btn btn-primary" value="Primary"/>
@ -231,7 +273,7 @@
</pre>
</div>
</div>
<div class="section">
<div id="forms" class="section">
<h2>Forms</h2>
<div class="form-group">
<label>Input</label>
@ -251,6 +293,10 @@
</div>
</div>
</div>
<div class="form-group">
<label>Disabled</label>
<input type="text" placeholder="Disabled" disabled>
</div>
<div class="form-group">
<label>Select</label>
<select>
@ -297,6 +343,10 @@
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="form-group"&gt;
&lt;label&gt;Disabled&lt;/label&gt;
&lt;input type="text" placeholder="Disabled" disabled&gt;
&lt;/div&gt;
&lt;div class="form-group"&gt;
&lt;label&gt;Select&lt;/label&gt;
&lt;select&gt;
@ -326,7 +376,7 @@
</pre>
</div>
</div>
<div class="section">
<div id="lists" class="section">
<h2>Lists</h2>
<h4>Ordered Lists</h4>
<ol>
@ -402,7 +452,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>
@ -423,7 +473,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>
@ -556,7 +606,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>
@ -597,7 +647,8 @@ 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 id="colors" class="section">
<div class="section">
<h2>Cards</h2>
<h4>Full card example</h4>
@ -605,7 +656,7 @@ function add(x, y) {
<div class="row flex-center">
<div class="card" style="width: 20rem;">
<img class="image-top" src="https://picsum.photos/768" alt="Card example image">
<div class="card-body">
<h4 class="card-title">My awesome Paper card!</h4>
<h5 class="card-subtitle">Nice looking subtitle.</h5>
@ -734,7 +785,7 @@ function add(x, y) {
</div>
</div>
<div class="section">
<div id="colors" class="section">
<h2>Colors</h2>
<h4>Text</h4>
<p class="text-primary">Text primary</p>
@ -771,7 +822,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">
@ -909,7 +960,7 @@ function add(x, y) {
&lt;/div&gt;</pre>
</div>
</div>
<div class="section">
<div id="utilities" class="section">
<h2>Utilities</h2>
<h4>Margin</h4>
<div class="row flex-spaces child-borders">
@ -940,7 +991,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>
@ -975,7 +1026,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">
@ -1007,10 +1058,10 @@ function add(x, y) {
</div>
<div class="section">
<h2 id="download">Download</h2>
<p>Download the latest version (1.0.1) using either of the links below. Or download an older release via Github.</p>
<p>Download the latest version (1.1.0) using either of the links below. Or download an older release via Github.</p>
<div class="row flex-spaces text-center">
<a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases/download/v1.0.1/paper.css">CSS File</a>
<a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases/download/v1.0.1/paper.min.css">Minified CSS File</a>
<a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases/download/v1.1.0/paper.css">CSS File</a>
<a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases/download/v1.1.0/paper.min.css">Minified CSS File</a>
<a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases">Github Releases</a>
</div>
<p>If you'd rather customize things, you can build the CSS yourself via the git repo</p>
@ -1035,4 +1086,4 @@ function add(x, y) {
</div>
</body>
</html>
</html>

5
license Normal file
View file

@ -0,0 +1,5 @@
Copyright 2017 Rhyne Vlaservich <rhyneav@gmail.com>
Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

83
package-lock.json generated
View file

@ -515,6 +515,15 @@
"readdirp": "2.1.0"
}
},
"clean-css": {
"version": "4.1.9",
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.1.9.tgz",
"integrity": "sha1-Nc7ornaHpJuYA09w3gDE7dOCYwE=",
"dev": true,
"requires": {
"source-map": "0.5.7"
}
},
"cliui": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz",
@ -1911,6 +1920,18 @@
"stream-array": "0.1.3"
}
},
"gulp-clean-css": {
"version": "3.9.0",
"resolved": "https://registry.npmjs.org/gulp-clean-css/-/gulp-clean-css-3.9.0.tgz",
"integrity": "sha512-CsqaSO2ZTMQI/WwbWloZWBudhsRMKgxBthzxt4bbcbWrjOY4pRFziyK9IH6YbTpaWAPKEwWpopPkpiAEoDofxw==",
"dev": true,
"requires": {
"clean-css": "4.1.9",
"gulp-util": "3.0.8",
"through2": "2.0.3",
"vinyl-sourcemaps-apply": "0.2.1"
}
},
"gulp-connect": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/gulp-connect/-/gulp-connect-5.0.0.tgz",
@ -1956,6 +1977,12 @@
"through2": "2.0.3"
}
},
"gulp-rename": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/gulp-rename/-/gulp-rename-1.2.2.tgz",
"integrity": "sha1-OtRCh2PwXidk3sHGfYaNsnVoeBc=",
"dev": true
},
"gulp-util": {
"version": "3.0.8",
"resolved": "https://registry.npmjs.org/gulp-util/-/gulp-util-3.0.8.tgz",
@ -3402,6 +3429,7 @@
"integrity": "sha512-ZJsOWVJ25E2C5Qedf4w9ePIv5hrPCdDIsHhq89tRxSJCqyIfDAMh0KoU9xeTu7yHT9ZrxPF7mopq1TCWxtMfkw==",
"dev": true,
"requires": {
"JSONStream": "1.3.1",
"abbrev": "1.1.0",
"ansi-regex": "3.0.0",
"ansicolors": "0.3.2",
@ -3433,7 +3461,6 @@
"inherits": "2.0.3",
"ini": "1.3.4",
"init-package-json": "1.10.1",
"JSONStream": "1.3.1",
"lazy-property": "1.0.0",
"libnpx": "9.2.0",
"lockfile": "1.0.3",
@ -3501,6 +3528,27 @@
"write-file-atomic": "2.1.0"
},
"dependencies": {
"JSONStream": {
"version": "1.3.1",
"bundled": true,
"dev": true,
"requires": {
"jsonparse": "1.3.1",
"through": "2.3.8"
},
"dependencies": {
"jsonparse": {
"version": "1.3.1",
"bundled": true,
"dev": true
},
"through": {
"version": "2.3.8",
"bundled": true,
"dev": true
}
}
},
"abbrev": {
"version": "1.1.0",
"bundled": true,
@ -3912,27 +3960,6 @@
}
}
},
"JSONStream": {
"version": "1.3.1",
"bundled": true,
"dev": true,
"requires": {
"jsonparse": "1.3.1",
"through": "2.3.8"
},
"dependencies": {
"jsonparse": {
"version": "1.3.1",
"bundled": true,
"dev": true
},
"through": {
"version": "2.3.8",
"bundled": true,
"dev": true
}
}
},
"lazy-property": {
"version": "1.0.0",
"bundled": true,
@ -7934,12 +7961,6 @@
"integrity": "sha1-wMRFXlTOWhecqHNuczNLTn/WdVM=",
"dev": true
},
"string_decoder": {
"version": "0.10.31",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
"integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
"dev": true
},
"string-width": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
@ -7951,6 +7972,12 @@
"strip-ansi": "3.0.1"
}
},
"string_decoder": {
"version": "0.10.31",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
"integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
"dev": true
},
"stringstream": {
"version": "0.0.5",
"resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",

2
package.json
View file

@ -12,7 +12,7 @@
"type": "git",
"url": "git+https://github.com/rhyneav/papercss.git"
},
"author": "rhyneav",
"author": "Rhyne Vlaservich <rhyneav@gmail.com>",
"license": "ISC",
"bugs": {
"url": "https://github.com/rhyneav/papercss/issues"

3
src/buttons.less
View file

@ -28,6 +28,9 @@ button, .paper-btn, [type="button"] {
&:hover{
.shadow-hover;
}
&.disabled, &[disabled]{
.disabled;
}
}
a {

28
src/forms.less
View file

@ -13,6 +13,14 @@ input, select {
&:focus {
border: 2px solid @secondary;
}
&.disabled, &[disabled]{
.disabled;
}
}
.disabled{
cursor: not-allowed;
opacity: 0.5;
}
.form-group {
@ -30,11 +38,11 @@ input, select {
margin-bottom: .5rem;
cursor: pointer;
input {
border: 0;
height: 1px; margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
border: 0;
height: 1px; margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
display: none;
}
@ -53,10 +61,10 @@ input, select {
vertical-align: -0.25em;
}
input[type="radio"] + span:before {
border-top-left-radius: 1rem 1rem;
border-top-right-radius: 1rem .6rem;
border-bottom-right-radius: 1rem .9rem;
border-bottom-left-radius: .7rem 1rem;
border-top-left-radius: 1rem 1rem;
border-top-right-radius: 1rem .6rem;
border-bottom-right-radius: 1rem .9rem;
border-bottom-left-radius: .7rem 1rem;
}
input[type="checkbox"] + span:before {
border-top-left-radius: 255px 15px;
@ -84,4 +92,4 @@ input, select {
fieldset.form-group {
border: none;
padding: 0;
}
}

4905
yarn.lock Normal file
View file

File diff suppressed because it is too large Load diff