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

Merge branch 'develop' into Fraham-Fix#14

Browse source
This commit is contained in:
Fraham 2017-11-08 12:33:27 +00:00 committed by GitHub
parent 2782d67e85 c83c9b1ef6
commit 78e297927e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 5117 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
.npmignore Normal file
View file

@ -0,0 +1,6 @@
/node_modules
npm-debug.log
index.html
demo.css
/img
yarn.lock

6
README.md
View file

@ -49,11 +49,15 @@ Similar to customizing, make sure you have Git, Node, and NPM on your system.
- run `git clone https://github.com/[your_username]/papercss.git`
- change directories to papercss `cd papercss`
- run `npm install`
- create a new branch for your contribution `git checkout -b my-feature`
- switch to the develop branch `git checkout develop`. This is the branch where features are added. Checking it out will set up the remote tracking to the develop branch on Github.
- create a new branch for your feature off of the develop branch `git checkout -b feature-thing develop`. Please be sure to prepend your new feature branch with "feature-"
- Start the local server to view changes with `npm start`
- _code and stuff_
- Once done, commit and push your changes to your fork
- Finally, open a pull request on this repo. Be sure to include any pictures and details on what you changed!
- Once approved, your changes will be merged to the develop branch where it will eventually be added to a release that ends up in the master branch. Check out [Vincent Driessen's blog post](http://nvie.com/posts/a-successful-git-branching-model/), [GitFlow](https://datasift.github.io/gitflow/IntroducingGitFlow.html), or [#27](https://github.com/rhyneav/papercss/issues/27) for more details on how this works.
Note: If you have a hotfix, create your hotfix branch off of the master branch instead of develop: `git checkout -b hotfix-1.X.X master`
## Credits
Shouts outs to Tiffany Rayside for creating Imperfect Buttons, which was an inspiration for this project. https://codepen.io/tmrDevelops/pen/VeRvKX

3
demo.css
View file

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

108
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,10 +253,27 @@
&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"/>
<input type="button" class="btn-secondary" value="Secondary"/>
<button class="btn-success">Success</button>
<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;
&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>
</div>
</div>
<div class="section">
<div id="forms" class="section">
<h2>Forms</h2>
<div class="form-group">
<label>Input</label>
@ -236,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>
@ -282,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;
@ -311,7 +376,7 @@
</pre>
</div>
</div>
<div class="section">
<div id="lists" class="section">
<h2>Lists</h2>
<h4>Ordered Lists</h4>
<ol>
@ -387,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>
@ -408,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>
@ -541,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>
@ -582,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>
@ -590,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>
@ -719,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>
@ -756,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">
@ -894,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">
@ -925,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>
@ -960,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">
@ -992,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>
@ -1020,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",

4
package.json
View file

@ -1,6 +1,6 @@
{
"name": "papercss",
"version": "1.0.0",
"version": "1.1.0",
"description": "Another CSS framework",
"main": "index.js",
"scripts": {
@ -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"

28
src/buttons.less
View file

@ -1,15 +1,16 @@
button, .paper-btn {
button, .paper-btn, [type="button"] {
.shadow;
align-self:center;
background:transparent;
transition:all .5s ease;
transition:all .5s ease, background-color .1s ease;
color: @primary;
display: inline;
outline:none;
border:solid 2px @primary;
.border;
font-size: 1rem;
padding: .75rem .75rem;
cursor: pointer;
.shadow;
&.btn-large {
.shadow-large;
font-size:2rem;
@ -27,6 +28,9 @@ button, .paper-btn {
&:hover{
.shadow-hover;
}
&.disabled, &[disabled]{
.disabled;
}
}
a {
@ -43,4 +47,20 @@ a {
text-decoration: none;
color: @primary;
}
}
}
.make-button-color-classes(@i: length(@colors)) when (@i > 0) {
.make-button-color-classes(@i - 1);
@color: extract(@colors, @i);
button.btn-@{color}, .paper-btn.btn-@{color}, [type="button"].btn-@{color} {
border-color: @@color;
background-color: ~"@{@{color}-light}";
color: ~"@{@{color}-text}";
&:hover:active{
@darkcolour: ~"@{color}-light";
background-color: darken(@@darkcolour, 10%);
}
}
}
.make-button-color-classes();

7
src/colors.less
View file

@ -17,6 +17,13 @@
@white: rgba(255, 255, 255, 1);
@main-background: rgba(255, 255, 255, 1);
@primary-text: #FFF;
@secondary-text: @primary;
@success-text: @primary;
@warning-text: @primary;
@danger-text: @primary;
@muted-text: @primary;
@colors: primary, secondary, success, warning, danger, muted;
.make-text-color-classes(@i: length(@colors)) when (@i > 0) {

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