mirror of
https://github.com/papercss/papercss
synced 2024-06-08 08:52:25 +02:00
Merge branch 'develop' into feature-dark-mode
This commit is contained in:
commit
36056e4737
|
@ -6,18 +6,18 @@ weight: -270
|
||||||
|
|
||||||
#### Download
|
#### Download
|
||||||
|
|
||||||
Download the latest version (1.6.1) using either of the links below. Or
|
Download the latest version (1.7.0) using either of the links below. Or
|
||||||
download an older release via Github.
|
download an older release via GitHub.
|
||||||
|
|
||||||
<div class="row flex-spaces text-center">
|
<div class="row flex-spaces text-center">
|
||||||
<a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases/download/v1.6.1/paper.css">CSS File</a>
|
<a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases/download/v1.7.0/paper.css">CSS File</a>
|
||||||
<a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases/download/v1.6.1/paper.min.css">Minified CSS File</a>
|
<a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases/download/v1.7.0/paper.min.css">Minified CSS File</a>
|
||||||
<a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases">Github Releases</a>
|
<a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases">GitHub Releases</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
#### NPM
|
#### NPM
|
||||||
|
|
||||||
PaperCSS is available on NPM, current version 1.6.1. Install with <code>npm install papercss --save</code> and find the CSS in:
|
PaperCSS is available on NPM, current version 1.7.0. Install with <code>npm install papercss --save</code> and find the CSS in:
|
||||||
|
|
||||||
* node_modules/papercss/dist/paper.css
|
* node_modules/papercss/dist/paper.css
|
||||||
* node_modules/papercss/dist/paper.min.css
|
* node_modules/papercss/dist/paper.min.css
|
||||||
|
@ -27,8 +27,8 @@ PaperCSS is available on NPM, current version 1.6.1. Install with <code>npm inst
|
||||||
Don't want to download it? That's cool. You can just link to PaperCSS via
|
Don't want to download it? That's cool. You can just link to PaperCSS via
|
||||||
[unpkg's CDN](https://unpkg.com/#/). You can use either:
|
[unpkg's CDN](https://unpkg.com/#/). You can use either:
|
||||||
|
|
||||||
* [https://unpkg.com/papercss@1.6.1/dist/paper.css](https://unpkg.com/papercss@1.6.1/dist/paper.css)
|
* [https://unpkg.com/papercss@1.7.0/dist/paper.css](https://unpkg.com/papercss@1.7.0/dist/paper.css)
|
||||||
* [https://unpkg.com/papercss@1.6.1/dist/paper.min.css](https://unpkg.com/papercss@1.6.1/dist/paper.min.css)
|
* [https://unpkg.com/papercss@1.7.0/dist/paper.min.css](https://unpkg.com/papercss@1.7.0/dist/paper.min.css)
|
||||||
|
|
||||||
Here's a quick snippet to get started with PaperCSS:
|
Here's a quick snippet to get started with PaperCSS:
|
||||||
|
|
||||||
|
@ -39,7 +39,7 @@ Here's a quick snippet to get started with PaperCSS:
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
<link rel="stylesheet" href="https://unpkg.com/papercss@1.6.1/dist/paper.min.css">
|
<link rel="stylesheet" href="https://unpkg.com/papercss@1.7.0/dist/paper.min.css">
|
||||||
<title>Document</title>
|
<title>Document</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
@ -9,6 +9,6 @@ PaperCSS was originally made by [@rhyneav](https://github.com/rhyneav) to be som
|
||||||
|
|
||||||
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.
|
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.
|
||||||
|
|
||||||
Feel free to use it for wireframes, webapps, blogs, or whatever else you can think of! It is licensed under the [ISC License](https://github.com/papercss/papercss/blob/master/license), so use it wherever you want to.
|
Feel free to use it for wireframes, webapps, blogs, or whatever else you can think of! It is licensed under the [ISC License](https://github.com/papercss/papercss/blob/master/LICENSE.md), so use it wherever you want to.
|
||||||
|
|
||||||
If you are new to Git or SCSS, 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](https://github.com/papercss/papercss) for more info!
|
If you are new to Git or SCSS, 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](https://github.com/papercss/papercss) for more info!
|
||||||
|
|
|
@ -9,23 +9,27 @@ description: PaperCSS Lists
|
||||||
<li>Do this</li>
|
<li>Do this</li>
|
||||||
<li>Then this</li>
|
<li>Then this</li>
|
||||||
<li>Finally this</li>
|
<li>Finally this</li>
|
||||||
<li>Then we'll go one deeper</li>
|
<li>Then we'll go one deeper
|
||||||
<ol>
|
<ol>
|
||||||
<li>Dillon</li>
|
<li>Dillon</li>
|
||||||
<li>Francis</li>
|
<li>Francis
|
||||||
<ol>
|
<ol>
|
||||||
<li>What if we went...</li>
|
<li>What if we went...</li>
|
||||||
<li>One more deeper?</li>
|
<li>One more deeper?
|
||||||
<ol>
|
<ol>
|
||||||
<li>DJ</li>
|
<li>DJ</li>
|
||||||
<li>Hanzel</li>
|
<li>Hanzel
|
||||||
<ol>
|
<ol>
|
||||||
<li>Five levels should be enough</li>
|
<li>Five levels should be enough</li>
|
||||||
<li>Right?</li>
|
<li>Right?</li>
|
||||||
</ol>
|
</ol>
|
||||||
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
|
</li>
|
||||||
<li>But don't forget this</li>
|
<li>But don't forget this</li>
|
||||||
</ol>
|
</ol>
|
||||||
|
|
||||||
|
@ -33,22 +37,26 @@ description: PaperCSS Lists
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li>Let's try this</li>
|
<li>Let's try this</li>
|
||||||
<li>Let's try this again</li>
|
<li>Let's try this again
|
||||||
<ul>
|
<ul>
|
||||||
<li>And now we are nested</li>
|
<li>And now we are nested</li>
|
||||||
<li>Pretty cool?</li>
|
<li>Pretty cool?
|
||||||
<ul>
|
<ul>
|
||||||
<li>The list items are just text</li>
|
<li>The list items are just text</li>
|
||||||
<li>From this font</li>
|
<li>From this font
|
||||||
<ul>
|
<ul>
|
||||||
<li>We'll keep going</li>
|
<li>We'll keep going</li>
|
||||||
<li>Until we hit</li>
|
<li>Until we hit
|
||||||
<ul>
|
<ul>
|
||||||
<li>LEVEL 5</li>
|
<li>LEVEL 5</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</li>
|
||||||
<li>And now we're are the top!</li>
|
<li>And now we're are the top!</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
@ -68,23 +76,27 @@ description: PaperCSS Lists
|
||||||
<li>Do this</li>
|
<li>Do this</li>
|
||||||
<li>Then this</li>
|
<li>Then this</li>
|
||||||
<li>Finally this</li>
|
<li>Finally this</li>
|
||||||
<li>Then we'll go one deeper</li>
|
<li>Then we'll go one deeper
|
||||||
<ol>
|
<ol>
|
||||||
<li>Dillon</li>
|
<li>Dillon</li>
|
||||||
<li>Francis</li>
|
<li>Francis
|
||||||
<ol>
|
<ol>
|
||||||
<li>What if we went...</li>
|
<li>What if we went...</li>
|
||||||
<li>One more deeper?</li>
|
<li>One more deeper?
|
||||||
<ol>
|
<ol>
|
||||||
<li>DJ</li>
|
<li>DJ</li>
|
||||||
<li>Hanzel</li>
|
<li>Hanzel
|
||||||
<ol>
|
<ol>
|
||||||
<li>Five levels should be enough</li>
|
<li>Five levels should be enough</li>
|
||||||
<li>Right?</li>
|
<li>Right?</li>
|
||||||
</ol>
|
</ol>
|
||||||
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
|
</li>
|
||||||
<li>But don't forget this</li>
|
<li>But don't forget this</li>
|
||||||
</ol>
|
</ol>
|
||||||
|
|
||||||
|
|
53
docs/content/docs/layout/container.md
Normal file
53
docs/content/docs/layout/container.md
Normal file
|
@ -0,0 +1,53 @@
|
||||||
|
---
|
||||||
|
title: Container
|
||||||
|
description: PaperCSS Container
|
||||||
|
---
|
||||||
|
|
||||||
|
The container is usually at the root of the HTML and holds all of the content in a fixed size. PaperCSS supports a few
|
||||||
|
different sizes to make setting your content within a certain max-width easy. Don't forget to add the `.paper` class to
|
||||||
|
give you site some extra paper flair!
|
||||||
|
|
||||||
|
<div class='paper container margin-bottom-large'>
|
||||||
|
<h4>Responsive Container!</h4>
|
||||||
|
<p>The default</p>
|
||||||
|
<p>
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class='paper container container-lg margin-bottom-large'>
|
||||||
|
<h4>Large Container!</h4>
|
||||||
|
<p>Using <code>container-lg</code><p>
|
||||||
|
<p>
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class='paper container container-md margin-bottom-large'>
|
||||||
|
<h4>Medium Container!</h4>
|
||||||
|
<p>Using <code>container-md</code><p>
|
||||||
|
<p>
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class='paper container container-sm margin-bottom-large'>
|
||||||
|
<h4>Small Container!</h4>
|
||||||
|
<p>Using <code>container-sm</code><p>
|
||||||
|
<p>
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class='paper container container-xs margin-bottom-large'>
|
||||||
|
<h4>Extra Small Container!</h4>
|
||||||
|
<p>Using <code>container-xs</code><p>
|
||||||
|
<p>
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
</div>
|
|
@ -25,7 +25,7 @@
|
||||||
{{ end }}
|
{{ end }}
|
||||||
<div class='paper'>
|
<div class='paper'>
|
||||||
<div class="row flex-center">
|
<div class="row flex-center">
|
||||||
<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>
|
<p>Made with 💛 by <a href="https://vlaservich.com" target="_blank">Rhyne</a> and some <a href="https://github.com/rhyneav/papercss/graphs/contributors">fantastic contributors</a>!</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -64,6 +64,6 @@ gulp.task('lint-css', function() {
|
||||||
}));
|
}));
|
||||||
})
|
})
|
||||||
|
|
||||||
gulp.task('default', gulp.series('sass', 'minify-css', 'hugo-build'));
|
gulp.task('default', gulp.series('sass', 'minify-css', 'hugo-server'));
|
||||||
gulp.task('build', gulp.series('sass', 'minify-css', 'hugo-build'));
|
gulp.task('build', gulp.series('sass', 'minify-css', 'hugo-build'));
|
||||||
gulp.task('postinstall', gulp.series('sass', 'minify-css'));
|
gulp.task('postinstall', gulp.series('sass', 'minify-css'));
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "papercss",
|
"name": "papercss",
|
||||||
"version": "1.6.1",
|
"version": "1.7.0",
|
||||||
"description": "The less formal CSS framework.",
|
"description": "The less formal CSS framework.",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
.tabs {
|
.tabs {
|
||||||
.content {
|
.content {
|
||||||
display: none;
|
display: none;
|
||||||
|
flex-basis: 100%;
|
||||||
padding: 0.75rem 0 0;
|
padding: 0.75rem 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -13,7 +14,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@for $num from 1 through 5 {
|
@for $num from 1 through 5 {
|
||||||
&[id='tab#{$num}']:checked ~ div[id='content#{$num}'] {
|
&[id$='tab#{$num}']:checked~div[id$='content#{$num}'] {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -11,6 +11,30 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
&.container-xs {
|
||||||
|
max-width: $xsmall-screen;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
&.container-sm {
|
||||||
|
max-width: $small-screen;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
&.container-md {
|
||||||
|
max-width: $medium-screen;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
&.container-lg {
|
||||||
|
max-width: $large-screen;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.section {
|
.section {
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
|
|
Loading…
Reference in a new issue