shiny new docs

This commit is contained in:
MunifTanjim 2017-12-28 12:07:35 +06:00
parent cf1a11472a
commit 9b2342a3f4
No known key found for this signature in database
GPG key ID: 9FA86B9EC363F224
53 changed files with 3922 additions and 2615 deletions

View file

@ -0,0 +1,42 @@
---
title: Articles
description: PaperCSS Articles
---
<article class="article">
<h1 class="article-title">
<a href="#">Article Title</a>
</h1>
<p class="article-meta">
Written by <a href="#">Super User</a> on 24 November 2017. Posted in <a href="#">Blog</a>
</p>
<p class="text-lead">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur repellendus excepturi, consequatur illo rerum, non sint asperiores dolore sapiente, vitae blanditiis. Officiis at quaerat modi earum, fugiat magni impedit, aperiam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti iure totam nam debitis aliquid impedit, et quas omnis aspernatur optio molestias ex laborum quia. Ducimus culpa tempore, veritatis officia delectus dolore dignissimos reprehenderit vero, sunt odit placeat est non molestiae ipsa nam velit in iusto hic quasi similique facere. Maxime?
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti iure totam nam debitis aliquid impedit, et quas omnis aspernatur optio molestias ex laborum quia. Ducimus culpa tempore, veritatis officia delectus dolore dignissimos reprehenderit vero, sunt odit placeat est non molestiae ipsa nam velit in iusto hic quasi similique facere. Maxime?
</p>
<div class="row">
<button>Read More</button>
<button>5 Comments</button>
</div>
</article>
#### Code:
```html
<article class="article">
<h1 class="article-title"><a href="">Article Title</a></h1>
<p class="article-meta">Written by <a href="#">Super User</a></p>
<p class="text-lead"> Lorem... </p>
<p>Lorem...</p>
<div class="row">
<button>Read More</button>
<button>5 Comments</button>
</div>
</article>
```

View file

@ -35,3 +35,21 @@ Insprired by [Imprefect Buttons](https://codepen.io/tmrDevelops/pen/VeRvKX)
<button class="disabled">Disabled</button>
<button disabled>Disabled</button>
```
### Colors
<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>
#### Code:
```html
<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>
```

View file

@ -0,0 +1,160 @@
---
title: Collapsibles
description: PaperCSS Collapsibles
---
Collapsibles are elements that expand when you click on them. You can hide/reveal content back on clicking.
<div class="row">
<div class="collapsible">
<input id="collapsible1" type="checkbox" name="collapsible">
<label for="collapsible1">First</label>
<div class="collapsible-body">
<span>
Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
</span>
</div>
</div>
<div class="collapsible">
<input id="collapsible2" type="checkbox" name="collapsible">
<label for="collapsible2">Second</label>
<div class="collapsible-body">
<span>
Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken. Pork belly meatball t-bone bresaola tail filet mignon kevin turkey ribeye shank flank doner cow kielbasa shankle.
</span>
</div>
</div>
<div class="collapsible">
<input id="collapsible3" type="checkbox" name="collapsible">
<label for="collapsible3">Third</label>
<div class="collapsible-body">
<span>
Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
</span>
</div>
</div>
<div class="collapsible">
<input id="collapsible4" type="checkbox" name="collapsible">
<label for="collapsible4">Fourth</label>
<div class="collapsible-body">
<span>
Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken. Pork belly meatball t-bone bresaola tail filet mignon kevin turkey ribeye shank flank doner cow kielbasa shankle.
</span>
</div>
</div>
</div>
#### Code:
```html
<div class="row">
<div class="collapsible">
<input id="collapsible1" type="checkbox" name="collapsible">
<label for="collapsible1">First</label>
<div class="collapsible-body">
<span>Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken...</span>
</div>
</div>
<div class="collapsible">
<input id="collapsible2" type="checkbox" name="collapsible">
<label for="collapsible2">Second</label>
<div class="collapsible-body">
<span>Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola...</span>
</div>
</div>
<div class="collapsible">
<input id="collapsible3" type="checkbox" name="collapsible">
<label for="collapsible3">Third</label>
<div class="collapsible-body">
<span>Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken...</span>
</div>
</div>
<div class="collapsible">
<input id="collapsible4" type="checkbox" name="collapsible">
<label for="collapsible4">Fourth</label>
<div class="collapsible-body">
<span>Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola...</span>
</div>
</div>
</div>
```
### Accordions
Use `input type="radio"` when you want to keep only one element collapsed at a time.
<div class="row">
<div class="collapsible">
<input id="collapsible5" type="radio" name="collapsible">
<label for="collapsible5">First</label>
<div class="collapsible-body">
<span>
Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
</span>
</div>
</div>
<div class="collapsible">
<input id="collapsible6" type="radio" name="collapsible">
<label for="collapsible6">Second</label>
<div class="collapsible-body">
<span>
Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken. Pork belly meatball t-bone bresaola tail filet mignon kevin turkey ribeye shank flank doner cow kielbasa shankle.
</span>
</div>
</div>
<div class="collapsible">
<input id="collapsible7" type="radio" name="collapsible">
<label for="collapsible7">Third</label>
<div class="collapsible-body">
<span>
Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
</span>
</div>
</div>
<div class="collapsible">
<input id="collapsible8" type="radio" name="collapsible">
<label for="collapsible8">Fourth</label>
<div class="collapsible-body">
<span>
Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken. Pork belly meatball t-bone bresaola tail filet mignon kevin turkey ribeye shank flank doner cow kielbasa shankle.
</span>
</div>
</div>
</div>
#### Code:
```html
<div class="row">
<div class="collapsible">
<input id="collapsible5" type="radio" name="collapsible">
<label for="collapsible5">First</label>
<div class="collapsible-body">
<span>Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken...</span>
</div>
</div>
<div class="collapsible">
<input id="collapsible6" type="radio" name="collapsible">
<label for="collapsible6">Second</label>
<div class="collapsible-body">
<span>Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola...</span>
</div>
</div>
<div class="collapsible">
<input id="collapsible7" type="radio" name="collapsible">
<label for="collapsible7">Third</label>
<div class="collapsible-body">
<span>Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken...</span>
</div>
</div>
<div class="collapsible">
<input id="collapsible8" type="radio" name="collapsible">
<label for="collapsible8">Fourth</label>
<div class="collapsible-body">
<span>Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola...</span>
</div>
</div>
</div>
```

View file

@ -0,0 +1,71 @@
---
title: Modals
description: PaperCSS Modals
---
### Simple modal example
This can be used to implement modals along with features like title, subtitle, text, button and links. Just use whichever component you need for your modal with proper classes and leave the rest on the framework.
<div class="row flex-spaces child-borders">
<a href="#modal-1" class="paper-btn margin">Open Modal!</a>
</div>
<div class="modal row flex-spaces" id="modal-1">
<div class="modal-body">
<a href="#modals" class="btn-close">x</a>
<h4 class="modal-title">Modal Title</h4>
<h5 class="modal-subtitle">Modal Subtitle</h5>
<p class="modal-text">This is an example of modal which is implemented with pure CSS! :D</p>
<a href="#modals"><button>Nice!</button></a>
</div>
</div>
#### Code:
```html
<div class="row flex-space child-borders">
<a href="modal-1" class="paper-btn margin">Open Modal!</a>
</div>
<div class="modal row flex-space" id="modal-1">
<div class="modal-body">
<a class="btn-close" href="#modals">x</a>
<h4 class="modal-title">Modal Title</h4>
<h5 class="modal-subtitle">Modal Subtitle</h5>
<p class="modal-text">This is an example of modal which is implemented with pure CSS! :D</p>
<button>Nice!</button>
</div>
</div>
```
### Modal with title, text and links
<div class="row flex-spaces child-borders">
<a href="#modal-2" class="paper-btn margin">Another Modal!</a>
</div>
<div class="modal row flex-spaces" id="modal-2">
<div class="modal-body">
<a href="#modals" class="btn-close">x</a>
<h4 class="modal-title">Modal Title</h4>
<h5 class="modal-subtitle">Modal Subtitle</h5>
<p class="modal-text">This is an example of modal which is implemented with pure CSS! :D</p>
<a class="modal-link" href="#modals">OK</a>
<a class="modal-link" href="#modals">Close</a>
</div>
</div>
#### Code:
```html
<div class="row flex-space child-borders">
<a href="modal-1" class="paper-btn margin">Open Modal!</a>
</div>
<div class="modal row flex-space" id="modal-1">
<div class="modal-body">
<a class="btn-close" href="#modals">x</a>
<h4 class="modal-title">Modal Title</h4>
<h5 class="modal-subtitle">Modal Subtitle</h5>
<p class="modal-text">This is an example of modal which is implemented with pure CSS! :D</p>
<a class="modal-link" href="#modals">OK</a>
<a class="modal-link" href="#modals">Close</a>
</div>
</div>
```

View file

@ -0,0 +1,89 @@
---
title: Tabs
description: PaperCSS Tabs
---
<div class="row flex-spaces tabs">
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">Tab 1</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">Tab 2</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">Tab 3</label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4">Tab 4</label>
<div class="content" id="content1">
<p>
Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
</p>
<p>
Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
</p>
</div>
<div class="content" id="content2">
<p>
Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken. Pork belly meatball t-bone bresaola tail filet mignon kevin turkey ribeye shank flank doner cow kielbasa shankle. Pig swine chicken hamburger, tenderloin turkey rump ball tip sirloin frankfurter meatloaf boudin brisket ham hock. Hamburger venison brisket tri-tip andouille pork belly ball tip short ribs biltong meatball chuck. Pork chop ribeye tail short ribs, beef hamburger meatball kielbasa rump corned beef porchetta landjaeger flank. Doner rump frankfurter meatball meatloaf, cow kevin pork pork loin venison fatback spare ribs salami beef ribs.
</p>
</div>
<div class="content" id="content3">
<p>
Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
</p>
<p>
Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
</p>
</div>
<div class="content" id="content4">
<p>
Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken. Pork belly meatball t-bone bresaola tail filet mignon kevin turkey ribeye shank flank doner cow kielbasa shankle. Pig swine chicken hamburger, tenderloin turkey rump ball tip sirloin frankfurter meatloaf boudin brisket ham hock. Hamburger venison brisket tri-tip andouille pork belly ball tip short ribs biltong meatball chuck. Pork chop ribeye tail short ribs, beef hamburger meatball kielbasa rump corned beef porchetta landjaeger flank. Doner rump frankfurter meatball meatloaf, cow kevin pork pork loin venison fatback spare ribs salami beef ribs.
</p>
</div>
</div>
#### Code:
```html
<div class="row flex-spaces tabs">
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">Tab 1</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">Tab 2</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">Tab 3</label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4">Tab 4</label>
<div class="content" id="content1">
<p>
Bacon ipsum dolor sit amet beef venison beef ribs kielbasa...
</p>
<p>
Brisket meatball turkey short loin boudin leberkas meatloaf...
</p>
</div>
<div class="content" id="content2">
<p>
Bacon ipsum dolor sit amet landjaeger sausage brisket...
</p>
</div>
<div class="content" id="content3">
<p>
Bacon ipsum dolor sit amet beef venison beef ribs kielbasa...
</p>
<p>
Brisket meatball turkey short loin boudin leberkas meatloaf...
</p>
</div>
<div class="content" id="content4">
<p>
Bacon ipsum dolor sit amet landjaeger sausage brisket...
</p>
</div>
</div>
```

View file

@ -8,21 +8,20 @@ Print files backwards using <kbd>tac</kbd>
To stop a process, hit <kbd>ctrl + c</kbd>
<pre>
function add(x, y) {
return x + y;
}
</pre>
<pre><code>function add(x, y) {
return x + y;
}
</code></pre>
#### Code:
```html
<p>Let's make some pretty <code>&lt;code&gt;</code></p>
<p>Let's make some pretty <code><code></code></p>
<p>Print files backwards using <kbd>tac</kbd></p>
<p>To stop a process, hit <kbd>ctrl + c</kbd></p>
<pre>
function add(x, y) {
return x + y;
}
</pre>
<pre><code>function add(x, y) {
return x + y;
}
</code></pre>
```

View file

@ -52,6 +52,15 @@ description: PaperCSS Lists
<li>And now we're are the top!</li>
</ul>
### Inline List
<ul class="inline">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
#### Codes:
```html

View file

@ -9,7 +9,7 @@ description: PaperCSS Spacing
<div class="sm-3 col margin-top-small">Margin-top-small</div>
</div>
#### Code:
#### Code:
```html
<div class="row flex-spaces child-borders">
@ -27,7 +27,7 @@ description: PaperCSS Spacing
<div class="sm-3 col padding-left-large">Padding-left-large</div>
</div>
#### Code:
#### Code:
```html
<div class="row flex-spaces child-borders">

View file

@ -0,0 +1,8 @@
<div class="row flex-right">
<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>
</div>
</body>
</html>

View file

@ -0,0 +1,3 @@
<!-- Styles -->
<link rel='stylesheet' href='/assets/paper.css'>
<link rel='stylesheet' href='/assets/demo.css'>

View file

@ -3,6 +3,9 @@
<meta name='description' content='The less formal CSS framework.'>
<meta name='author' content='Rhyneav and PaperCSS contributors.'>
<!-- Favicon -->
<link rel='shortcut icon' href='/favicon.ico' type='image/x-icon'>
{{ partial "head/opengraph" . }}
{{ .Hugo.Generator }}

View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
{{ partial "head/head" . }}
<body>
<div class="container paper">
<div class="paper">
<div class="demo-title">
<div class="row flex-center">
<div class="text-center">
<h1>{{ .Site.Title }}</h1>
<h3>{{ .Site.Params.info.description }}</h3>
</div>
</div>
{{ partial "nav/main" . }}

File diff suppressed because it is too large Load diff

1
docs/static/assets/paper.min.css vendored Normal file

File diff suppressed because one or more lines are too long

View file

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

View file

@ -1,7 +0,0 @@
<div class="row flex-right">
<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>
</html>

View file

@ -1,3 +0,0 @@
<!-- Styles -->
<link rel='stylesheet' href='/paper.css'>
<link rel='stylesheet' href='/demo.css'>

View file

@ -1,17 +0,0 @@
<!DOCTYPE html>
<html>
{{ partial "head/head" . }}
<body>
<div class="container paper">
<div class="demo-title">
<div class="row flex-center">
<div class="text-center">
<h1>{{ .Site.Title }}</h1>
<h3>{{ .Site.Params.info.description }}</h3>
</div>
</div>
{{ partial "nav/main" . }}

File diff suppressed because one or more lines are too long

View file

@ -13,7 +13,7 @@ gulp.task('sass', function() {
.pipe(cleanCSS({format: 'beautify'}))
.pipe(rename('paper.css'))
.pipe(gulp.dest('dist'))
.pipe(gulp.dest('documentation/static'));
.pipe(gulp.dest('docs/static/assets'));
});
gulp.task('watch', function () {
@ -22,7 +22,7 @@ gulp.task('watch', function () {
gulp.task('hugo-server', function (cb) {
let hugo_process = exec(
hugo, ['server', '--source=documentation', '--disableFastRender'],
hugo, ['server', '--source=docs', '--disableFastRender'],
function (err, stdout, stderr) {
console.log(stderr);
return err ? cb(err) : cb();
@ -34,7 +34,7 @@ gulp.task('hugo-server', function (cb) {
gulp.task('hugo-build', function (cb) {
let hugo_process = exec(
hugo, ['--source=documentation'],
hugo, ['--source=docs'],
function (err, stdout, stderr) {
console.log(stderr);
return err ? cb(err) : cb();
@ -49,7 +49,7 @@ gulp.task('minify-css', () => {
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(rename('paper.min.css'))
.pipe(gulp.dest('dist'))
.pipe(gulp.dest('documentation/static'));
.pipe(gulp.dest('docs/static/assets'));
});
gulp.task('default', ['sass','watch','hugo-server']);

1482
index.html

File diff suppressed because it is too large Load diff

View file

@ -1,6 +1,6 @@
[build]
publish = "public"
command = "hugo --source=documentation"
command = "hugo --source=docs"
[build.environment]
HUGO_VERSION = "0.30"

2332
yarn.lock

File diff suppressed because it is too large Load diff