npm install papercss --save and find the CSS in:
+PaperCSS is available on NPM, current version 1.7.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
@@ -27,8 +27,8 @@ PaperCSS is available on NPM, current version 1.6.1. Install with 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:
-
+
Document
diff --git a/docs/content/about.md b/docs/content/about.md
index 69d3ae3..314f54b 100644
--- a/docs/content/about.md
+++ b/docs/content/about.md
@@ -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!
diff --git a/docs/content/docs/content/lists.md b/docs/content/docs/content/lists.md
index e2bbdf6..41bbe41 100644
--- a/docs/content/docs/content/lists.md
+++ b/docs/content/docs/content/lists.md
@@ -9,23 +9,27 @@ description: PaperCSS Lists
Do this
Then this
Finally this
- Then we'll go one deeper
-
- - Dillon
- - Francis
+ - Then we'll go one deeper
- - What if we went...
- - One more deeper?
-
- - DJ
- - Hanzel
+ - Dillon
+ - Francis
- - Five levels should be enough
- - Right?
+ - What if we went...
+ - One more deeper?
+
+ - DJ
+ - Hanzel
+
+ - Five levels should be enough
+ - Right?
+
+
+
+
-
+
-
+
But don't forget this
@@ -33,22 +37,26 @@ description: PaperCSS Lists
- Let's try this
- - Let's try this again
-
- - And now we are nested
- - Pretty cool?
+ - Let's try this again
- - The list items are just text
- - From this font
-
- - We'll keep going
- - Until we hit
+ - And now we are nested
+ - Pretty cool?
- - LEVEL 5
+ - The list items are just text
+ - From this font
+
+ - We'll keep going
+ - Until we hit
+
+ - LEVEL 5
+
+
+
+
-
+
-
+
And now we're are the top!
@@ -68,23 +76,27 @@ description: PaperCSS Lists
Do this
Then this
Finally this
- Then we'll go one deeper
-
+ - Then we'll go one deeper
+
- Dillon
- - Francis
-
- - What if we went...
- - One more deeper?
+ - Francis
- - DJ
- - Hanzel
-
- - Five levels should be enough
- - Right?
-
+ - What if we went...
+ - One more deeper?
+
+ - DJ
+ - Hanzel
+
+ - Five levels should be enough
+ - Right?
+
+
+
+
-
-
+
+
+
But don't forget this
diff --git a/docs/content/docs/layout/container.md b/docs/content/docs/layout/container.md
new file mode 100644
index 0000000..64edab1
--- /dev/null
+++ b/docs/content/docs/layout/container.md
@@ -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!
+
+
+ Responsive Container!
+ The default
+
+ 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.
+
+
+
+
+ Large Container!
+ Using container-lg
+
+ 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.
+
+
+
+
+ Medium Container!
+ Using container-md
+
+ 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.
+
+
+
+
+ Small Container!
+ Using container-sm
+
+ 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.
+
+
+
+
+ Extra Small Container!
+ Using container-xs
+
+ 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.
+
+
diff --git a/docs/layouts/partials/nav/sidebar.html b/docs/layouts/partials/nav/sidebar.html
index eabf07a..99b137f 100644
--- a/docs/layouts/partials/nav/sidebar.html
+++ b/docs/layouts/partials/nav/sidebar.html
@@ -25,7 +25,7 @@
{{ end }}
- Made with 💛 by Rhyne and some fantastic contributors!
+ Made with 💛 by Rhyne and some fantastic contributors!
diff --git a/gulpfile.js b/gulpfile.js
index c27648e..9666978 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -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'));
diff --git a/package.json b/package.json
index 33a0ba3..296b90f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "papercss",
- "version": "1.6.1",
+ "version": "1.7.0",
"description": "The less formal CSS framework.",
"main": "index.js",
"scripts": {
diff --git a/src/components/_tabs.scss b/src/components/_tabs.scss
index 1d8fb84..1720a4e 100644
--- a/src/components/_tabs.scss
+++ b/src/components/_tabs.scss
@@ -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;
}
}
diff --git a/src/layout/_container.scss b/src/layout/_container.scss
index c9b56fc..63c5429 100644
--- a/src/layout/_container.scss
+++ b/src/layout/_container.scss
@@ -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;