mirror of
https://github.com/papercss/papercss
synced 2024-06-07 16:32:15 +02:00
Merge branch 'hotfix-docsupdateforcdn'
This commit is contained in:
rhyneav
commit
b14deaa765
47
README.md
47
README.md
|
|
@ -3,20 +3,42 @@
|
|||
|
||||
## Demo & Docs
|
||||
View the demo & docs at [getpapercss.com](https://www.getpapercss.com)
|
||||
|
||||
|
||||
|
||||
## Download
|
||||
[][download]
|
||||
[][download-minified]
|
||||
|
||||
## About
|
||||
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 PaperCSS to solve these two challenges of mine :)
|
||||
### NPM
|
||||
PaperCSS is now available on NPM as of version 1.1.0. Install with `npm install papercss --save` and find the CSS in:
|
||||
- node_modules/papercss/dist/paper.css
|
||||
- node_modules/papercss/dist/paper.min.css
|
||||
|
||||
The goal of PaperCSS 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 `paper-button`. Because of this, adding PaperCSS to a markdown generated page should instantly paper-ize it.
|
||||
### CDN
|
||||
Don't want to download it? That's cool. You can just link to PaperCSS via unpkg's CDN. You can use either:
|
||||
- https://unpkg.com/papercss@1.1.0/dist/paper.css
|
||||
- https://unpkg.com/papercss@1.1.0/dist/paper.min.css
|
||||
|
||||
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!
|
||||
|
||||
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.
|
||||
## Quick Start
|
||||
```
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<link rel="stylesheet" href="https://unpkg.com/papercss@1.1.0/dist/paper.min.css">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="paper container">
|
||||
<h1>Some Fresh Title</h1>
|
||||
<p>This is where some content would go.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## Customizing
|
||||
To customize PaperCSS, clone the Git repo, run `npm install`, and make any chages to the .less files within /src
|
||||
|
|
@ -59,8 +81,17 @@ Similar to customizing, make sure you have Git, Node, and NPM on your system.
|
|||
|
||||
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`
|
||||
|
||||
## About
|
||||
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 PaperCSS to solve these two challenges of mine :)
|
||||
|
||||
The goal of PaperCSS 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 `paper-button`. Because of this, adding PaperCSS to a markdown generated page should instantly paper-ize it.
|
||||
|
||||
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!
|
||||
|
||||
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.
|
||||
|
||||
## Credits
|
||||
Shouts outs to Tiffany Rayside for creating Imperfect Buttons, which was an inspiration for this project. https://codepen.io/tmrDevelops/pen/VeRvKX
|
||||
|
||||
[download]: https://github.com/rhyneav/papercss/releases/download/v1.0.0/paper.css
|
||||
[download-minified]: https://github.com/rhyneav/papercss/releases/download/v1.0.0/paper.min.css
|
||||
[download]: https://github.com/rhyneav/papercss/releases/download/v1.1.0/paper.css
|
||||
[download-minified]: https://github.com/rhyneav/papercss/releases/download/v1.1.0/paper.min.css
|
||||
|
|
|
|||
38
index.html
38
index.html
|
|
@ -1041,13 +1041,47 @@ function add(x, y) {
|
|||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2 id="download">Download</h2>
|
||||
<h2 id="download">Download and Link</h2>
|
||||
<h4>Download</h4>
|
||||
<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.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>
|
||||
<h4>NPM</h4>
|
||||
<p>PaperCSS is now available on NPM as of version 1.1.0. Install with <code>npm install papercss --save</code> and find the CSS in:</p>
|
||||
<ul>
|
||||
<li>node_modules/papercss/dist/paper.css</li>
|
||||
<li>node_modules/papercss/dist/paper.min.css</li>
|
||||
</ul>
|
||||
<h4>CDN</h4>
|
||||
<p>Don't want to download it? That's cool. You can just link to PaperCSS via <a href="https://unpkg.com/#/">unpkg's CDN</a>. You can use either:</p>
|
||||
<ul>
|
||||
<li><a href="https://unpkg.com/papercss@1.1.0/dist/paper.css">https://unpkg.com/papercss@1.1.0/dist/paper.css</a></li>
|
||||
<li><a href="https://unpkg.com/papercss@1.1.0/dist/paper.min.css">https://unpkg.com/papercss@1.1.0/dist/paper.min.css</a></li>
|
||||
</ul>
|
||||
<p>Here's a quck snippet to get started with PaperCSS:</p>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<link rel="stylesheet" href="https://unpkg.com/papercss@1.1.0/dist/paper.min.css">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="paper container">
|
||||
<h1>Some Fresh Title</h1>
|
||||
<p>This is where some content would go.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html></pre>
|
||||
</div>
|
||||
<h4>Build it Yourself</h4>
|
||||
<p>If you'd rather customize things, you can build the CSS yourself via the git repo</p>
|
||||
<ol>
|
||||
<li><code>git clone [repo url]</code></li>
|
||||
|
|
@ -1065,7 +1099,7 @@ function add(x, y) {
|
|||
<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>
|
||||
<p>Made with 💛 by <a href="https://vlaservi.ch" target="_blank">Rhyne</a> and some <a href="https://github.com/rhyneav/papercss/graphs/contributors">fantastic contributors</a>!</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in a new issue