mirror of
https://github.com/papercss/papercss
synced 2024-05-03 06:23:17 +02:00
Merge branch 'develop' into feature-dark-mode
This commit is contained in:
Seifeldin Mahjoub
commit
36056e4737
|
|
@ -6,18 +6,18 @@ weight: -270
|
|||
|
||||
#### Download
|
||||
|
||||
Download the latest version (1.6.1) using either of the links below. Or
|
||||
download an older release via Github.
|
||||
Download the latest version (1.7.0) using either of the links below. Or
|
||||
download an older release via GitHub.
|
||||
|
||||
<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.6.1/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/download/v1.7.0/paper.css">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>
|
||||
</div>
|
||||
|
||||
#### 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.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
|
||||
[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.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.css](https://unpkg.com/papercss@1.7.0/dist/paper.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:
|
||||
|
||||
|
|
@ -39,7 +39,7 @@ Here's a quick snippet to get started with PaperCSS:
|
|||
<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.6.1/dist/paper.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/papercss@1.7.0/dist/paper.min.css">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<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.
|
||||
|
||||
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!
|
||||
|
|
|
|||
|
|
@ -9,23 +9,27 @@ description: PaperCSS Lists
|
|||
<li>Do this</li>
|
||||
<li>Then this</li>
|
||||
<li>Finally this</li>
|
||||
<li>Then we'll go one deeper</li>
|
||||
<ol>
|
||||
<li>Dillon</li>
|
||||
<li>Francis</li>
|
||||
<li>Then we'll go one deeper
|
||||
<ol>
|
||||
<li>What if we went...</li>
|
||||
<li>One more deeper?</li>
|
||||
<ol>
|
||||
<li>DJ</li>
|
||||
<li>Hanzel</li>
|
||||
<li>Dillon</li>
|
||||
<li>Francis
|
||||
<ol>
|
||||
<li>Five levels should be enough</li>
|
||||
<li>Right?</li>
|
||||
<li>What if we went...</li>
|
||||
<li>One more deeper?
|
||||
<ol>
|
||||
<li>DJ</li>
|
||||
<li>Hanzel
|
||||
<ol>
|
||||
<li>Five levels should be enough</li>
|
||||
<li>Right?</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
</ol>
|
||||
</li>
|
||||
<li>But don't forget this</li>
|
||||
</ol>
|
||||
|
||||
|
|
@ -33,22 +37,26 @@ description: PaperCSS Lists
|
|||
|
||||
<ul>
|
||||
<li>Let's try this</li>
|
||||
<li>Let's try this again</li>
|
||||
<ul>
|
||||
<li>And now we are nested</li>
|
||||
<li>Pretty cool?</li>
|
||||
<li>Let's try this again
|
||||
<ul>
|
||||
<li>The list items are just text</li>
|
||||
<li>From this font</li>
|
||||
<ul>
|
||||
<li>We'll keep going</li>
|
||||
<li>Until we hit</li>
|
||||
<li>And now we are nested</li>
|
||||
<li>Pretty cool?
|
||||
<ul>
|
||||
<li>LEVEL 5</li>
|
||||
<li>The list items are just text</li>
|
||||
<li>From this font
|
||||
<ul>
|
||||
<li>We'll keep going</li>
|
||||
<li>Until we hit
|
||||
<ul>
|
||||
<li>LEVEL 5</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li>And now we're are the top!</li>
|
||||
</ul>
|
||||
|
||||
|
|
@ -68,23 +76,27 @@ description: PaperCSS Lists
|
|||
<li>Do this</li>
|
||||
<li>Then this</li>
|
||||
<li>Finally this</li>
|
||||
<li>Then we'll go one deeper</li>
|
||||
<ol>
|
||||
<li>Then we'll go one deeper
|
||||
<ol>
|
||||
<li>Dillon</li>
|
||||
<li>Francis</li>
|
||||
<ol>
|
||||
<li>What if we went...</li>
|
||||
<li>One more deeper?</li>
|
||||
<li>Francis
|
||||
<ol>
|
||||
<li>DJ</li>
|
||||
<li>Hanzel</li>
|
||||
<ol>
|
||||
<li>Five levels should be enough</li>
|
||||
<li>Right?</li>
|
||||
</ol>
|
||||
<li>What if we went...</li>
|
||||
<li>One more deeper?
|
||||
<ol>
|
||||
<li>DJ</li>
|
||||
<li>Hanzel
|
||||
<ol>
|
||||
<li>Five levels should be enough</li>
|
||||
<li>Right?</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
</ol>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>But don't forget this</li>
|
||||
</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 }}
|
||||
<div class='paper'>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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('postinstall', gulp.series('sass', 'minify-css'));
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "papercss",
|
||||
"version": "1.6.1",
|
||||
"version": "1.7.0",
|
||||
"description": "The less formal CSS framework.",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
.tabs {
|
||||
.content {
|
||||
display: none;
|
||||
flex-basis: 100%;
|
||||
padding: 0.75rem 0 0;
|
||||
}
|
||||
|
||||
|
|
@ -13,7 +14,7 @@
|
|||
}
|
||||
|
||||
@for $num from 1 through 5 {
|
||||
&[id='tab#{$num}']:checked ~ div[id='content#{$num}'] {
|
||||
&[id$='tab#{$num}']:checked~div[id$='content#{$num}'] {
|
||||
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 {
|
||||
margin-bottom: 2rem;
|
||||
margin-top: 1rem;
|
||||
|
|
|
|||
Loading…
Reference in a new issue