mirror of
https://github.com/papercss/papercss
synced 2024-06-02 14:02:34 +02:00
Merge branch 'MunifTanjim-hugo' into develop
This commit is contained in:
commit
911554861c
2
.gitignore
vendored
2
.gitignore
vendored
|
@ -3,3 +3,5 @@ npm-debug.log
|
|||
/dist
|
||||
/tests/node_modules
|
||||
.DS_Store
|
||||
/public
|
||||
.vscode
|
||||
|
|
|
@ -3,4 +3,4 @@ npm-debug.log
|
|||
index.html
|
||||
demo.css
|
||||
/img
|
||||
yarn.lock
|
||||
yarn.lock
|
||||
|
|
5
docs/archetypes/default.md
Normal file
5
docs/archetypes/default.md
Normal file
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: "{{ replace .TranslationBaseName "-" " " | title }}"
|
||||
date: {{ .Date }}
|
||||
draft: true
|
||||
---
|
19
docs/config.toml
Normal file
19
docs/config.toml
Normal file
|
@ -0,0 +1,19 @@
|
|||
baseURL = "https://getpapercss.com"
|
||||
title = "PaperCSS"
|
||||
|
||||
# Directories
|
||||
publishDir = "../public"
|
||||
|
||||
# Syntax Highlighting ( https://gohugo.io/content-management/syntax-highlighting/ )
|
||||
pygmentsCodefences = true
|
||||
|
||||
[params.info]
|
||||
description = "the less formal CSS framework"
|
||||
title404 = "Nothing's here!"
|
||||
|
||||
[params.seo]
|
||||
# Title Separator: - – — · • * ⋆ | ~ « » < >
|
||||
titleSeparator = "•"
|
||||
|
||||
[blackfriday]
|
||||
hrefTargetBlank = true
|
69
docs/content/_index.md
Normal file
69
docs/content/_index.md
Normal file
|
@ -0,0 +1,69 @@
|
|||
---
|
||||
title: Get PaperCSS
|
||||
menu: main
|
||||
weight: -270
|
||||
---
|
||||
|
||||
#### Download
|
||||
|
||||
`Download` the latest version (1.1.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.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>
|
||||
|
||||
#### NPM
|
||||
|
||||
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:
|
||||
|
||||
* node_modules/papercss/dist/paper.css
|
||||
* node_modules/papercss/dist/paper.min.css
|
||||
|
||||
#### CDN
|
||||
|
||||
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.1.0/dist/paper.css](https://unpkg.com/papercss@1.1.0/dist/paper.css)
|
||||
* [https://unpkg.com/papercss@1.1.0/dist/paper.min.css](https://unpkg.com/papercss@1.1.0/dist/paper.min.css)
|
||||
|
||||
Here's a quck snippet to get started with PaperCSS:
|
||||
|
||||
```html
|
||||
<!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>
|
||||
```
|
||||
|
||||
#### Build it Yourself
|
||||
|
||||
If you'd rather customize things, you can build the CSS yourself via the git
|
||||
repo
|
||||
|
||||
```sh
|
||||
git clone [repo url]
|
||||
npm install
|
||||
npm run build
|
||||
```
|
||||
|
||||
Grab the CSS out of the /dist folder created
|
||||
|
||||
You can also go into src/colors.less before building to change around the colors
|
||||
of your new CSS.
|
24
docs/content/about.md
Normal file
24
docs/content/about.md
Normal file
|
@ -0,0 +1,24 @@
|
|||
---
|
||||
title: About
|
||||
slug: about
|
||||
menu: main
|
||||
weight: -90
|
||||
---
|
||||
|
||||
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. Check
|
||||
out the Git repo for more info!
|
5
docs/content/docs/_index.md
Normal file
5
docs/content/docs/_index.md
Normal file
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: Docs
|
||||
menu: main
|
||||
weight: -240
|
||||
---
|
4
docs/content/docs/components/_index.md
Normal file
4
docs/content/docs/components/_index.md
Normal file
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: Components
|
||||
description: PaperCSS Components
|
||||
---
|
33
docs/content/docs/components/alerts.md
Normal file
33
docs/content/docs/components/alerts.md
Normal file
|
@ -0,0 +1,33 @@
|
|||
---
|
||||
title: Alerts
|
||||
description: PaperCSS Alerts
|
||||
---
|
||||
<div class="row flex-spaces">
|
||||
<div class="alert alert-primary">
|
||||
Alert-primary
|
||||
</div>
|
||||
<div class="alert alert-secondary">
|
||||
Alert-secondary
|
||||
</div>
|
||||
<div class="alert alert-success">
|
||||
Alert-success
|
||||
</div>
|
||||
<div class="alert alert-warning">
|
||||
Alert-warning
|
||||
</div>
|
||||
<div class="alert alert-danger">
|
||||
Alert-danger
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<div class="row flex-spaces">
|
||||
<div class="alert alert-primary">Alert-primary</div>
|
||||
<div class="alert alert-secondary">Alert-secondary</div>
|
||||
<div class="alert alert-success">Alert-success</div>
|
||||
<div class="alert alert-warning">Alert-warning</div>
|
||||
<div class="alert alert-danger">Alert-danger</div>
|
||||
</div>
|
||||
```
|
42
docs/content/docs/components/articles.md
Normal file
42
docs/content/docs/components/articles.md
Normal 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>
|
||||
```
|
30
docs/content/docs/components/badges.md
Normal file
30
docs/content/docs/components/badges.md
Normal file
|
@ -0,0 +1,30 @@
|
|||
---
|
||||
title: Badges
|
||||
description: PaperCSS Badges
|
||||
---
|
||||
### Default
|
||||
|
||||
You can customize badges colors with secondary, success, warning, danger classes.
|
||||
|
||||
# Example h1 heading <span class="badge">123</span>
|
||||
|
||||
## Example h2 heading <span class="badge secondary">123</span>
|
||||
|
||||
### Example h3 heading <span class="badge success">123</span>
|
||||
|
||||
#### Example h4 heading <span class="badge warning">123</span>
|
||||
|
||||
##### Example h5 heading <span class="badge danger">123</span>
|
||||
|
||||
###### Example h6 heading <span class="badge">123</span>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<h1>Example h1 heading <span class="badge">123</span></h1>
|
||||
<h2>Example h2 heading <span class="badge secondary">123</span></h2>
|
||||
<h3>Example h3 heading <span class="badge success">123</span></h3>
|
||||
<h4>Example h4 heading <span class="badge warning">123</span></h4>
|
||||
<h5>Example h5 heading <span class="badge danger">123</span></h5>
|
||||
<h6>Example h6 heading <span class="badge">123</span></h6>
|
||||
```
|
55
docs/content/docs/components/buttons.md
Normal file
55
docs/content/docs/components/buttons.md
Normal file
|
@ -0,0 +1,55 @@
|
|||
---
|
||||
title: Buttons
|
||||
description: PaperCSS Buttons
|
||||
---
|
||||
|
||||
Insprired by [Imprefect Buttons](https://codepen.io/tmrDevelops/pen/VeRvKX)
|
||||
|
||||
<button class="btn-large">Large</button>
|
||||
<button>Default</button>
|
||||
<button class="btn-small">Small</button>
|
||||
<a href="#" class="paper-btn">Link</a>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-6 col">
|
||||
<button class="btn-block">Block level</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="disabled">Disabled</button>
|
||||
<button disabled>Disabled</button>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<p>Insprired by <a href="https://codepen.io/tmrDevelops/pen/VeRvKX" target="_blank">Imprefect Buttons</a></p>
|
||||
<button class="btn-large">Large</button>
|
||||
<button>Default</button>
|
||||
<button class="btn-small">Small</button>
|
||||
<a href="#" class="paper-btn">Link</a>
|
||||
<div class="row">
|
||||
<div class="col-6 col">
|
||||
<button class="btn-block">Block level</button>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
```
|
120
docs/content/docs/components/cards.md
Normal file
120
docs/content/docs/components/cards.md
Normal file
|
@ -0,0 +1,120 @@
|
|||
---
|
||||
title: Cards
|
||||
description: PaperCSS Cards
|
||||
---
|
||||
### Full card example
|
||||
|
||||
It is possible to not put all the sub-classes like card-title, card-subtitle, card-text, ... But instead the framework will recognize the element properly if it's a h4, h5, p, ... And you need to put all this content on a div with card class.
|
||||
|
||||
<div class="row flex-center">
|
||||
<div class="card" style="width: 20rem;">
|
||||
<img class="image-top" src="https://picsum.photos/768" alt="Card example image">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">My awesome Paper card!</h4>
|
||||
<h5 class="card-subtitle">Nice looking subtitle.</h5>
|
||||
<p class="card-text">Notice that the card width in this example have been set to 20rem, otherwise it will try to fill the current container/row where the card is.</p>
|
||||
<button>Let me go here!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<div class="card" style="width: 20rem;">
|
||||
<img src="https://picsum.photos/768" alt="Card example image">
|
||||
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">My awesome Paper card!</h4>
|
||||
<h5 class="card-subtitle">Nice looking subtitle.</h5>
|
||||
<p class="card-text">Notice that the card width in this example have been set to 20rem, otherwise it will try to fill the current container/row where the card is.</p>
|
||||
<button>Let me go here!</button>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Card title, text, links
|
||||
|
||||
<div class="row flex-center">
|
||||
<div class="card" style="width: 20rem;">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">My awesome Paper card!</h4>
|
||||
<h5 class="card-subtitle">Nice looking subtitle.</h5>
|
||||
<p class="card-text">This is another example of a card without image. Cards are also meant to be used without images, but with text/links/buttons.</p>
|
||||
<a class="card-link" href="#">First link</a>
|
||||
<a class="card-link" href="#">Second link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<div class="card" style="width: 20rem;">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">My awesome Paper card!</h4>
|
||||
<h5 class="card-subtitle">Nice looking subtitle.</h5>
|
||||
<p class="card-text">This is another example of a card without image. Cards are also meant to be used without images, but with text/links/buttons.</p>
|
||||
<a class="card-link" href="#">First link</a>
|
||||
<a class="card-link" href="#">Second link</a>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Image on top or bottom
|
||||
|
||||
<div class="row flex-center">
|
||||
<div class="card" style="width: 20rem;">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">My awesome Paper card!</h4>
|
||||
<h5 class="card-subtitle">Nice looking subtitle.</h5>
|
||||
<p class="card-text">You can also place image on the bottom of the card.</p>
|
||||
<button>Let me go here!</button>
|
||||
</div>
|
||||
<img class="image-bottom" src="https://unsplash.it/550/250" alt="Card example image">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<div class="card" style="width: 20rem;">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">My awesome Paper card!</h4>
|
||||
<h5 class="card-subtitle">Nice looking subtitle.</h5>
|
||||
<p class="card-text">You can also place image on the bottom of the card.</p>
|
||||
<button>Let me go here!</button>
|
||||
</div>
|
||||
<img class="image-bottom" src="https://unsplash.it/550/250" alt="Card example image">
|
||||
</div>
|
||||
```
|
||||
|
||||
### Header and footer
|
||||
|
||||
<div class="row flex-center">
|
||||
<div class="card" style="width: 20rem;">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">My awesome Paper card!</h4>
|
||||
<h5 class="card-subtitle">Nice looking subtitle.</h5>
|
||||
<p class="card-text">You can also place image on the bottom of the card.</p>
|
||||
<button>Let me go here!</button>
|
||||
</div>
|
||||
<div class="card-footer">Footer</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<div class="card" style="width: 20rem;">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">My awesome Paper card!</h4>
|
||||
<h5 class="card-subtitle">Nice looking subtitle.</h5>
|
||||
<p class="card-text">You can also place image on the bottom of the card.</p>
|
||||
<button>Let me go here!</button>
|
||||
</div>
|
||||
<div class="card-footer">Footer</div>
|
||||
</div>
|
||||
```
|
160
docs/content/docs/components/collapsible.md
Normal file
160
docs/content/docs/components/collapsible.md
Normal 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>
|
||||
```
|
111
docs/content/docs/components/forms.md
Normal file
111
docs/content/docs/components/forms.md
Normal file
|
@ -0,0 +1,111 @@
|
|||
---
|
||||
title: Forms
|
||||
description: PaperCSS Forms
|
||||
---
|
||||
<div class="form-group">
|
||||
<label for="paperInputs1">Input</label>
|
||||
<input type="text" placeholder="Nice input" id="paperInputs1">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col sm-4">
|
||||
<div class="form-group">
|
||||
<label for="paperInputs2">Block Level</label>
|
||||
<input class="input-block" type="text" id="paperInputs2">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col sm-8">
|
||||
<div class="form-group">
|
||||
<label for="paperInputs3">Block Level</label>
|
||||
<input class="input-block" type="text" id="paperInputs3">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="paperInputs4">Disabled</label>
|
||||
<input type="text" placeholder="Disabled" id="paperInputs4" disabled>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="paperSelects1">Select</label>
|
||||
<select id="paperSelects1">
|
||||
<option value="1">Option 1</option>
|
||||
<option value="2">Option 2</option>
|
||||
<option value="3">Option 3</option>
|
||||
<select>
|
||||
</div>
|
||||
<fieldset class="form-group">
|
||||
<legend>Some Radio Buttons</legend>
|
||||
<label for="paperRadios1" class="paper-radio">
|
||||
<input type="radio" name="paperRadios" id="paperRadios1" value="option 1">
|
||||
<span>This is the first option
|
||||
<span>
|
||||
</label>
|
||||
<label for="paperRadios2" class="paper-radio">
|
||||
<input type="radio" name="paperRadios" id="paperRadios2" value="option 2">
|
||||
<span>This is the second option
|
||||
<span>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset class="form-group">
|
||||
<legend>Some Check Boxes</legend>
|
||||
<label for="paperChecks1" class="paper-check">
|
||||
<input type="checkbox" name="paperChecks" id="paperChecks1" value="option 1">
|
||||
<span>This is the first check</span>
|
||||
</label>
|
||||
<label for="paperChecks2" class="paper-check">
|
||||
<input type="checkbox" name="paperChecks" id="paperChecks2" value="option 2">
|
||||
<span>This is the second check</span>
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<div class="form-group">
|
||||
<label for="paperInputs1">Input</label>
|
||||
<input type="text" placeholder="Nice input" id="paperInputs1">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col sm-4">
|
||||
<div class="form-group">
|
||||
<label for="paperInputs2">Block Level</label>
|
||||
<input class="input-block" type="text" id="paperInputs2">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col sm-8">
|
||||
<div class="form-group">
|
||||
<label for="paperInputs3">Block Level</label>
|
||||
<input class="input-block" type="text" id="paperInputs3">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="paperInputs4">Disabled</label>
|
||||
<input type="text" placeholder="Disabled" id="paperInputs4" disabled>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="paperSelects1">Select</label>
|
||||
<select id="paperSelects1">
|
||||
<option value="1">Option 1</option>
|
||||
<option value="2">Option 2</option>
|
||||
<option value="3">Option 3</option>
|
||||
<select>
|
||||
</div>
|
||||
<fieldset class="form-group">
|
||||
<legend>Some Radio Buttons</legend>
|
||||
<label for="paperRadios1" class="paper-radio">
|
||||
<input type="radio" name="paperRadios" id="paperRadios1" value="option 1"> <span>This is the first option<span>
|
||||
</label>
|
||||
<label for="paperRadios2" class="paper-radio">
|
||||
<input type="radio" name="paperRadios" id="paperRadios2" value="option 2"> <span>This is the second option<span>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset class="form-group">
|
||||
<legend>Some Check Boxes</legend>
|
||||
<label for="paperChecks1" class="paper-check">
|
||||
<input type="checkbox" name="paperChecks" id="paperChecks1" value="option 1"> <span>This is the first check</span>
|
||||
</label>
|
||||
<label for="paperChecks2" class="paper-check">
|
||||
<input type="checkbox" name="paperChecks" id="paperChecks2" value="option 2"> <span>This is the second check</span>
|
||||
</label>
|
||||
</fieldset>
|
||||
```
|
71
docs/content/docs/components/modals.md
Normal file
71
docs/content/docs/components/modals.md
Normal 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>
|
||||
```
|
47
docs/content/docs/components/popovers.md
Normal file
47
docs/content/docs/components/popovers.md
Normal file
|
@ -0,0 +1,47 @@
|
|||
---
|
||||
title: Popovers
|
||||
description: PaperCSS Popovers
|
||||
---
|
||||
### Basic usage
|
||||
|
||||
You can add popovers, also called tooltips, on your elements. popover attribute is the popover text content, popover-position attribute can be: top, left, right, bottom.
|
||||
|
||||
<div class="row flex-spaces">
|
||||
<div class="sm-3 col">
|
||||
<p popover="Popover on left" popover-position="left">Popover left position</p>
|
||||
</div>
|
||||
<div class="sm-3 col">
|
||||
<p popover="Popover on top" popover-position="top">Popover top position</p>
|
||||
</div>
|
||||
<div class="sm-3 col">
|
||||
<p popover="Popover on bottom" popover-position="bottom">Popover bottom position</p>
|
||||
</div>
|
||||
<div class="sm-3 col">
|
||||
<p popover="Popover on right" popover-position="right">Popover right position</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<p popover="Popover on left" popover-position="left">Popover left position</p>
|
||||
<p popover="Popover on top" popover-position="top">Popover top position</p>
|
||||
<p popover="Popover on bottom" popover-position="bottom">Popover bottom position</p>
|
||||
<p popover="Popover on right" popover-position="right">Popover right position</p>
|
||||
```
|
||||
|
||||
But you can also popover on pretty much any element you want, it can be on a button, on a table cell, ...
|
||||
|
||||
<div class="row flex-center">
|
||||
<div class="sm-6 col">
|
||||
<button popover="Popover on top" popover-position="top">Popover on top and on a button!</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<button popover="Popover on top" popover-position="top">Popover on top and on a button!</button>
|
||||
```
|
||||
|
||||
|
89
docs/content/docs/components/tabs.md
Normal file
89
docs/content/docs/components/tabs.md
Normal 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>
|
||||
```
|
4
docs/content/docs/content/_index.md
Normal file
4
docs/content/docs/content/_index.md
Normal file
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: Content
|
||||
description: PaperCSS Content
|
||||
---
|
27
docs/content/docs/content/code.md
Normal file
27
docs/content/docs/content/code.md
Normal file
|
@ -0,0 +1,27 @@
|
|||
---
|
||||
title: Code
|
||||
description: PaperCSS Code
|
||||
---
|
||||
Let's make some pretty `<code>`
|
||||
|
||||
Print files backwards using <kbd>tac</kbd>
|
||||
|
||||
To stop a process, hit <kbd>ctrl + c</kbd>
|
||||
|
||||
<pre><code>function add(x, y) {
|
||||
return x + y;
|
||||
}
|
||||
</code></pre>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<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><code>function add(x, y) {
|
||||
return x + y;
|
||||
}
|
||||
</code></pre>
|
||||
```
|
45
docs/content/docs/content/images.md
Normal file
45
docs/content/docs/content/images.md
Normal file
|
@ -0,0 +1,45 @@
|
|||
---
|
||||
title: Images
|
||||
description: PaperCSS Images
|
||||
---
|
||||
### Responsive
|
||||
|
||||
Images by default are responsive
|
||||
|
||||
<img src="https://unsplash.it/900" alt="Random Unsplash">
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<img src="https://unsplash.it/900" alt="Random Unsplash">
|
||||
```
|
||||
|
||||
### Float
|
||||
|
||||
You can also float responsive images to fit neatly with your text
|
||||
|
||||
<img src="https://unsplash.it/200" alt="Smaller Unsplash" class="float-left"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non elit sed lorem vulputate consectetur sed vel orci. Nunc orci metus, hendrerit viverra diam a, viverra efficitur nisi. Suspendisse ante sapien, porta vitae augue et, pulvinar posuere nibh. Suspendisse id commodo sem, vestibulum malesuada erat. Duis luctus est sit amet nisl maximus porta. Curabitur tempor nisi tincidunt ultricies rutrum. Nam finibus turpis ut nibh dignissim, in tincidunt mauris suscipit. Curabitur sollicitudin mi quis orci semper, nec egestas nibh mollis. Aenean pellentesque lectus rutrum, ultrices felis malesuada, finibus purus. Morbi eleifend pellentesque justo, quis vestibulum mi. Donec porta ipsum tellus, ac scelerisque lectus pellentesque eget. Etiam quis rutrum dui. Nulla facilisi. Donec imperdiet mattis mi nec fringilla. Donec mollis augue sed viverra placerat. Donec varius, sem sed porttitor euismod, est nunc varius tellus, eget molestie urna arcu ac turpis. Phasellus id sem elit. Vivamus pellentesque mauris vel ex laoreet varius. Vivamus non tempor libero. Nam consectetur nisi erat, ac varius elit porttitor quis. Morbi ullamcorper, tortor in sagittis tempus, justo ipsum pretium urna, ut bibendum nisl orci et eros. Quisque ut ipsum neque. Integer sapien dolor, vestibulum id maximus ac, pharetra eu augue.
|
||||
<img src="https://unsplash.it/100" alt="Smallerer Unsplash" class="float-right"> Aenean mauris tellus, facilisis sed quam non, tincidunt rutrum risus. Fusce quam urna, commodo vitae nunc condimentum, efficitur commodo libero. Sed dignissim odio enim, ac pharetra dui laoreet id. Suspendisse nec accumsan erat. Integer sit amet leo arcu. Proin sagittis blandit tempor. Vivamus at egestas lectus. Mauris eros tellus, egestas ac neque eget, lacinia sagittis ante. Phasellus faucibus suscipit erat, eget malesuada neque congue non.
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<p>
|
||||
<img src="https://unsplash.it/200" class="float-left">
|
||||
Lorem ipsum dolor.......
|
||||
<img src="https://unsplash.it/100" class="float-right">
|
||||
Aenean mauris tellus......
|
||||
</p>
|
||||
```
|
||||
|
||||
### No Responsive & No Borders
|
||||
|
||||
If you don't like the default, you can just add the class `no-responsive` to prevent the image from being responsive. You can also remove the default border with `no-border`.
|
||||
|
||||
<img src="https://unsplash.it/300" alt="Not responsive Unsplash" class="no-responsive no-border">
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<img src="https://unsplash.it/300" class="no-responsive no-border">
|
||||
```
|
92
docs/content/docs/content/lists.md
Normal file
92
docs/content/docs/content/lists.md
Normal file
|
@ -0,0 +1,92 @@
|
|||
---
|
||||
title: Lists
|
||||
description: PaperCSS Lists
|
||||
---
|
||||
|
||||
### Ordered Lists
|
||||
|
||||
<ol>
|
||||
<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>
|
||||
<ol>
|
||||
<li>What if we went...</li>
|
||||
<li>One more deeper?</li>
|
||||
<ol>
|
||||
<li>DJ</li>
|
||||
<li>Hanzel</li>
|
||||
<ol>
|
||||
<li>Five levels should be enough</li>
|
||||
<li>Right?</li>
|
||||
</ol>
|
||||
</ol>
|
||||
</ol>
|
||||
</ol>
|
||||
<li>But don't forget this</li>
|
||||
</ol>
|
||||
|
||||
### Unordered 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>
|
||||
<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>
|
||||
<ul>
|
||||
<li>LEVEL 5</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</ul>
|
||||
</ul>
|
||||
<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
|
||||
<ol>
|
||||
<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>
|
||||
<ol>
|
||||
<li>What if we went...</li>
|
||||
<li>One more deeper?</li>
|
||||
<ol>
|
||||
<li>DJ</li>
|
||||
<li>Hanzel</li>
|
||||
<ol>
|
||||
<li>Five levels should be enough</li>
|
||||
<li>Right?</li>
|
||||
</ol>
|
||||
</ol>
|
||||
</ol>
|
||||
</ol>
|
||||
<li>But don't forget this</li>
|
||||
</ol>
|
||||
|
||||
<!-- Replace ol with ul for unordered lists. Go up to 5 levels deep! -->
|
||||
```
|
140
docs/content/docs/content/tables.md
Normal file
140
docs/content/docs/content/tables.md
Normal file
|
@ -0,0 +1,140 @@
|
|||
---
|
||||
title: Tables
|
||||
description: PaperCSS Tables
|
||||
---
|
||||
### Regular
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Location</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Bob Dylan</td>
|
||||
<td>Musician</td>
|
||||
<td>California, USA</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Eric Clapton</td>
|
||||
<td>Musician</td>
|
||||
<td>Ohio, USA</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Daniel Kahneman</td>
|
||||
<td>Psychologist</td>
|
||||
<td>California, USA</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
### Hover
|
||||
|
||||
<table class="table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Location</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Bob Dylan</td>
|
||||
<td>Musician</td>
|
||||
<td>California, USA</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Eric Clapton</td>
|
||||
<td>Musician</td>
|
||||
<td>Ohio, USA</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Daniel Kahneman</td>
|
||||
<td>Psychologist</td>
|
||||
<td>California, USA</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
### Alternating
|
||||
|
||||
<table class="table-alternating">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Location</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Bob Dylan</td>
|
||||
<td>Musician</td>
|
||||
<td>California, USA</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Eric Clapton</td>
|
||||
<td>Musician</td>
|
||||
<td>Ohio, USA</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Daniel Kahneman</td>
|
||||
<td>Psychologist</td>
|
||||
<td>California, USA</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
#### Code:
|
||||
```html
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Location</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Bob Dylan</td>
|
||||
<td>Musician</td>
|
||||
<td>California, USA</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Eric Clapton</td>
|
||||
<td>Musician</td>
|
||||
<td>Ohio, USA</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Daniel Kahneman</td>
|
||||
<td>Psychologist</td>
|
||||
<td>California, USA</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Add table-hover or table-alternating to change the style of the table -->
|
||||
<table class="table-hover">
|
||||
<table class="table-alternating">
|
||||
```
|
36
docs/content/docs/content/typography.md
Normal file
36
docs/content/docs/content/typography.md
Normal file
|
@ -0,0 +1,36 @@
|
|||
---
|
||||
title: Typography
|
||||
description: PaperCSS Typography
|
||||
---
|
||||
|
||||
How pretty is the text?
|
||||
|
||||
# Heading 1
|
||||
|
||||
## Heading 2
|
||||
|
||||
### Heading 3
|
||||
|
||||
#### Heading 4
|
||||
|
||||
##### Heading 5
|
||||
|
||||
###### Heading 6
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultrices, eros
|
||||
non elementum accumsan, massa nulla aliquam libero, ut posuere justo nibh ac
|
||||
ipsum. Aliquam blandit commodo justo at laoreet. Suspendisse potenti. Duis magna
|
||||
neque, venenatis non libero a, tincidunt convallis diam. Donec vel fermentum
|
||||
ante. Quisque diam nisl, vestibulum imperdiet sapien nec, interdum fringilla
|
||||
lorem. Morbi sed arcu facilisis, maximus justo vel, porttitor nisl. Nam suscipit
|
||||
metus facilisis iaculis vestibulum.
|
||||
|
||||
```html
|
||||
<h1>Heading 1</h1>
|
||||
<h2>Heading 2</h2>
|
||||
<h3>Heading 3</h3>
|
||||
<h4>Heading 4</h4>
|
||||
<h5>Heading 5</h5>
|
||||
<h6>Heading 6</h6>
|
||||
<p>Lorem ipsum dolor....</p>
|
||||
```
|
4
docs/content/docs/layout/_index.md
Normal file
4
docs/content/docs/layout/_index.md
Normal file
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: Layout
|
||||
description: PaperCSS Layout
|
||||
---
|
149
docs/content/docs/layout/flexbox.md
Normal file
149
docs/content/docs/layout/flexbox.md
Normal file
|
@ -0,0 +1,149 @@
|
|||
---
|
||||
title: Flexbox
|
||||
description: PaperCSS Flexbox
|
||||
---
|
||||
|
||||
### Flexgrid
|
||||
|
||||
The flexgrid is a grid system that supports up to 12 columns per row. Because it
|
||||
uses flexbox (rather than just %widths), we also get the benefit of the fun
|
||||
parts of flexbox like alignment in more complex ways than normal.
|
||||
|
||||
<div class="demo">
|
||||
<div class="row">
|
||||
<div class="col-4 col">col-4 col</div>
|
||||
<div class="col-4 col">col-4 col</div>
|
||||
<div class="col-4 col">col-4 col</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-3 col">col-3 col</div>
|
||||
<div class="col-9 col">col-9 col</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="sm-6 md-8 lg-10 col">sm-6 md-8 lg-10 col</div>
|
||||
<div class="sm-6 md-4 lg-2 col">sm-6 md-4 lg-2 col</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="sm-5 col">sm-5 col</div>
|
||||
<div class="col-fill col">col-fill col</div>
|
||||
<div class="col-fill col">col-fill col</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="sm-4 col">Aligned</div>
|
||||
<div class="sm-4 col">Left (default)</div>
|
||||
</div>
|
||||
<div class="row flex-right">
|
||||
<div class="sm-4 col">Aligned</div>
|
||||
<div class="sm-4 col">Right (flex-right)</div>
|
||||
</div>
|
||||
<div class="row flex-center">
|
||||
<div class="sm-4 col">Aligned</div>
|
||||
<div class="sm-4 col">Center (flex-center)</div>
|
||||
</div>
|
||||
<div class="row flex-edges">
|
||||
<div class="sm-4 col">Aligned</div>
|
||||
<div class="sm-4 col">to edges (flex-edges)</div>
|
||||
</div>
|
||||
<div class="row flex-spaces">
|
||||
<div class="sm-4 col">Aligned</div>
|
||||
<div class="sm-4 col">to be evenly spaced (flex-spaces)</div>
|
||||
</div>
|
||||
<div class="row flex-top">
|
||||
<div class="sm-4 col">Aligned top</div>
|
||||
<div class="sm-4 col">Aligned top</div>
|
||||
<div class="sm-4 col">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row flex-middle">
|
||||
<div class="sm-4 col">Aligned middle</div>
|
||||
<div class="sm-4 col">Aligned middle</div>
|
||||
<div class="sm-4 col">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row flex-bottom">
|
||||
<div class="sm-4 col">Aligned bottom</div>
|
||||
<div class="sm-4 col">Aligned bottom</div>
|
||||
<div class="sm-4 col">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="sm-3 col align-bottom">Align bottom</div>
|
||||
<div class="sm-3 col align-middle">Align middle</div>
|
||||
<div class="sm-3 col align-top">Align top</div>
|
||||
<div class="sm-3 col">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<div class="row">
|
||||
<div class="col-4 col">col-4 col</div>
|
||||
<div class="col-4 col">col-4 col</div>
|
||||
<div class="col-4 col">col-4 col</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-3 col">col-3 col</div>
|
||||
<div class="col-9 col">col-9 col</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="sm-6 md-8 lg-10 col">sm-6 md-8 lg-10 col</div>
|
||||
<div class="sm-6 md-4 lg-2 col">sm-6 md-4 lg-2 col</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="sm-5 col">sm-5 col</div>
|
||||
<div class="col-fill col">col-fill col</div>
|
||||
<div class="col-fill col">col-fill col</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="sm-4 col">Aligned</div>
|
||||
<div class="sm-4 col">Left (default)</div>
|
||||
</div>
|
||||
<div class="row flex-right">
|
||||
<div class="sm-4 col">Aligned</div>
|
||||
<div class="sm-4 col">Right (flex-right)</div>
|
||||
</div>
|
||||
<div class="row flex-center">
|
||||
<div class="sm-4 col">Aligned</div>
|
||||
<div class="sm-4 col">Center (flex-center)</div>
|
||||
</div>
|
||||
<div class="row flex-edges">
|
||||
<div class="sm-4 col">Aligned</div>
|
||||
<div class="sm-4 col">to edges (flex-edges)</div>
|
||||
</div>
|
||||
<div class="row flex-spaces">
|
||||
<div class="sm-4 col">Aligned</div>
|
||||
<div class="sm-4 col">to be evenly spaced (flex-spaces)</div>
|
||||
</div>
|
||||
<div class="row flex-top">
|
||||
<div class="sm-6 col">Aligned top</div>
|
||||
<div class="sm-6 col">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row flex-middle">
|
||||
<div class="sm-6 col">Aligned middle</div>
|
||||
<div class="sm-6 col">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row flex-bottom">
|
||||
<div class="sm-6 col">Aligned bottom</div>
|
||||
<div class="sm-6 col">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="sm-3 col align-bottom">Align bottom</div>
|
||||
<div class="sm-3 col align-middle">Align middle</div>
|
||||
<div class="sm-3 col align-top">Align top</div>
|
||||
<div class="sm-3 col">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
```
|
4
docs/content/docs/utilities/_index.md
Normal file
4
docs/content/docs/utilities/_index.md
Normal file
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: Utilities
|
||||
description: PaperCSS Utilities
|
||||
---
|
170
docs/content/docs/utilities/borders.md
Normal file
170
docs/content/docs/utilities/borders.md
Normal file
|
@ -0,0 +1,170 @@
|
|||
---
|
||||
title: Borders & Shadows
|
||||
slug: borders
|
||||
description: PaperCSS Borders & Shadows
|
||||
---
|
||||
### Borders
|
||||
|
||||
<div class="row flex-spaces">
|
||||
<div class="sm-3 col border border-primary">Default Border</div>
|
||||
<div class="sm-3 col border border-2 border-primary">Border-2</div>
|
||||
<div class="sm-3 col border border-3 border-primary">Border-3</div>
|
||||
</div>
|
||||
<div class="row flex-spaces">
|
||||
<div class="sm-3 col border border-4 border-primary">Border-4</div>
|
||||
<div class="sm-3 col border border-5 border-primary">Border-5</div>
|
||||
<div class="sm-3 col border border-6 border-primary">Border-6</div>
|
||||
</div>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<div class="row flex-spaces">
|
||||
<div class="sm-3 col border border-primary">Default Border</div>
|
||||
<div class="sm-3 col border border-2 border-primary">Border-2</div>
|
||||
<div class="sm-3 col border border-3 border-primary">Border-3</div>
|
||||
</div>
|
||||
<div class="row flex-spaces">
|
||||
<div class="sm-3 col border border-4 border-primary">Border-4</div>
|
||||
<div class="sm-3 col border border-5 border-primary">Border-5</div>
|
||||
<div class="sm-3 col border border-6 border-primary">Border-6</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Border Colors
|
||||
|
||||
<div class="row child-borders">
|
||||
<div class="sm-2 col border border-primary">Border primary</div>
|
||||
<div class="sm-2 col border border-secondary">Border secondary</div>
|
||||
<div class="sm-2 col border border-success">Border success</div>
|
||||
<div class="sm-2 col border border-warning">Border warning</div>
|
||||
<div class="sm-2 col border border-danger">Border danger</div>
|
||||
<div class="sm-2 col border background-primary border-white">Border white</div>
|
||||
</div>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<div class="row child-borders">
|
||||
<div class="sm-2 col border border-primary">Border primary</div>
|
||||
<div class="sm-2 col border border-secondary">Border secondary</div>
|
||||
<div class="sm-2 col border border-success">Border success</div>
|
||||
<div class="sm-2 col border border-warning">Border warning</div>
|
||||
<div class="sm-2 col border border-danger">Border danger</div>
|
||||
<div class="sm-2 col border background-primary border-white">Border white</div>
|
||||
</div>
|
||||
<div class="row child-borders">
|
||||
<div class="sm-2 col border border-primary">Border primary</div>
|
||||
<div class="sm-2 col border border-secondary">Border secondary</div>
|
||||
<div class="sm-2 col border border-success">Border success</div>
|
||||
<div class="sm-2 col border border-warning">Border warning</div>
|
||||
<div class="sm-2 col border border-danger">Border danger</div>
|
||||
<div class="sm-2 col border background-primary border-white">Border white</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Child Borders
|
||||
|
||||
Use this if you want all children to have a border. This will alternate through the different border styles defined above instead of having to add the border class for each element.
|
||||
|
||||
<div class="row flex-center child-borders">
|
||||
<div class="sm-2 col">1</div>
|
||||
<div class="sm-2 col">2</div>
|
||||
<div class="sm-2 col">3</div>
|
||||
<div class="sm-2 col">4</div>
|
||||
<div class="sm-2 col">5</div>
|
||||
<div class="sm-2 col">6</div>
|
||||
</div>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<div class="row flex-center child-borders">
|
||||
<div class="sm-2 col">1</div>
|
||||
<div class="sm-2 col">2</div>
|
||||
<div class="sm-2 col">3</div>
|
||||
<div class="sm-2 col">4</div>
|
||||
<div class="sm-2 col">5</div>
|
||||
<div class="sm-2 col">6</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Border Styles
|
||||
|
||||
<div class="row flex-spaces child-borders">
|
||||
<div class="sm-3 col border-dashed">Dashed</div>
|
||||
<div class="sm-3 col border-dotted">Dotted</div>
|
||||
<div class="sm-3 col border-dashed border-thick">Dashed Thick</div>
|
||||
<div class="sm-3 col border-dotted border-thick">Dotted Thick</div>
|
||||
</div>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<div class="row flex-spaces child-borders">
|
||||
<div class="sm-3 col border-dashed">Dashed</div>
|
||||
<div class="sm-3 col border-dotted">Dotted</div>
|
||||
<div class="sm-3 col border-dashed border-thick">Dashed Thick</div>
|
||||
<div class="sm-3 col border-dotted border-thick">Dotted Thick</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Shadows
|
||||
|
||||
<div class="row flex-spaces child-borders">
|
||||
<div class="sm-3 col shadow shadow-large">Large</div>
|
||||
<div class="sm-3 col shadow">Default</div>
|
||||
<div class="sm-3 col shadow shadow-small">Small</div>
|
||||
<div class="sm-3 col shadow shadow-hover">Hover</div>
|
||||
</div>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<div class="row flex-spaces child-borders">
|
||||
<div class="sm-3 col shadow shadow-large">Large</div>
|
||||
<div class="sm-3 col shadow">Default</div>
|
||||
<div class="sm-3 col shadow shadow-small">Small</div>
|
||||
<div class="sm-3 col shadow shadow-hover">Hover</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Child Shadows
|
||||
|
||||
Use this if you want all children to have a shadow.
|
||||
|
||||
<div class="row flex-spaces child-borders child-shadows">
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
</div>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<div class="row flex-spaces child-borders child-shadows">
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Child Shadows Hover
|
||||
|
||||
Use this if you want all children to have a shadow... that changes on hover
|
||||
|
||||
<div class="row flex-spaces child-borders child-shadows-hover">
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
</div>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<div class="row flex-spaces child-borders child-shadows-hover">
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
<div class="sm-3 col">Shadow</div>
|
||||
</div>
|
||||
```
|
45
docs/content/docs/utilities/colors.md
Normal file
45
docs/content/docs/utilities/colors.md
Normal file
|
@ -0,0 +1,45 @@
|
|||
---
|
||||
title: Colors
|
||||
description: PaperCSS Colors
|
||||
---
|
||||
### Text
|
||||
|
||||
<p class="text-primary">Text primary</p>
|
||||
<p class="text-secondary">Text secondary</p>
|
||||
<p class="text-success">Text success</p>
|
||||
<p class="text-warning">Text warning</p>
|
||||
<p class="text-danger">Text danger</p>
|
||||
<p class="text-muted">Text muted</p>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<p class="text-primary">Text primary</p>
|
||||
<p class="text-secondary">Text secondary</p>
|
||||
<p class="text-success">Text success</p>
|
||||
<p class="text-warning">Text warning</p>
|
||||
<p class="text-danger">Text danger</p>
|
||||
<p class="text-muted">Text muted</p>
|
||||
```
|
||||
|
||||
### Backgrounds
|
||||
|
||||
<div class="row flex-center">
|
||||
<div class="sm-2 col background-primary">Background primary</div>
|
||||
<div class="sm-2 col background-secondary">Background secondary</div>
|
||||
<div class="sm-2 col background-success">Background success</div>
|
||||
<div class="sm-2 col background-warning">Background warning</div>
|
||||
<div class="sm-2 col background-danger">Background danger</div>
|
||||
</div>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<div class="row flex-center">
|
||||
<div class="sm-2 col background-primary">Background primary</div>
|
||||
<div class="sm-2 col background-secondary">Background secondary</div>
|
||||
<div class="sm-2 col background-success">Background success</div>
|
||||
<div class="sm-2 col background-warning">Background warning</div>
|
||||
<div class="sm-2 col background-danger">Background danger</div>
|
||||
</div>
|
||||
```
|
38
docs/content/docs/utilities/spacing.md
Normal file
38
docs/content/docs/utilities/spacing.md
Normal file
|
@ -0,0 +1,38 @@
|
|||
---
|
||||
title: Spacing
|
||||
description: PaperCSS Spacing
|
||||
---
|
||||
### Margin
|
||||
<div class="row flex-spaces child-borders">
|
||||
<div class="sm-3 col margin">Margin</div>
|
||||
<div class="sm-3 col margin-large">Margin-large</div>
|
||||
<div class="sm-3 col margin-top-small">Margin-top-small</div>
|
||||
</div>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<div class="row flex-spaces child-borders">
|
||||
<div class="sm-3 col margin">Margin</div>
|
||||
<div class="sm-3 col margin-large">Margin-large</div>
|
||||
<div class="sm-3 col margin-top-small">Margin-top-small</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Padding
|
||||
|
||||
<div class="row flex-spaces child-borders">
|
||||
<div class="sm-3 col padding-small">Padding-small</div>
|
||||
<div class="sm-3 col padding-none">Padding-none</div>
|
||||
<div class="sm-3 col padding-left-large">Padding-left-large</div>
|
||||
</div>
|
||||
|
||||
#### Code:
|
||||
|
||||
```html
|
||||
<div class="row flex-spaces child-borders">
|
||||
<div class="sm-3 col padding-small">Padding-small</div>
|
||||
<div class="sm-3 col padding-none">Padding-none</div>
|
||||
<div class="sm-3 col padding-left-large">Padding-left-large</div>
|
||||
</div>
|
||||
```
|
13
docs/layouts/_default/li.html
Normal file
13
docs/layouts/_default/li.html
Normal file
|
@ -0,0 +1,13 @@
|
|||
<div class='col sm-6 md-4'>
|
||||
<div class='card'>
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">{{- .Title -}}</h4>
|
||||
<div class="card-text">
|
||||
{{- .Params.description -}}
|
||||
</div>
|
||||
<a class='paper-btn btn-block' href='{{ .Permalink | relURL }}'>
|
||||
Let's see!
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
33
docs/layouts/_default/list.html
Normal file
33
docs/layouts/_default/list.html
Normal file
|
@ -0,0 +1,33 @@
|
|||
{{ partial "header" . }}
|
||||
|
||||
<div class='section'>
|
||||
<h2>{{ .Title }}</h2>
|
||||
|
||||
{{ .Content }}
|
||||
|
||||
<div class='row flex-spaces'>
|
||||
|
||||
{{ range .Sections }}
|
||||
<div class='collapsible full-width'>
|
||||
<input id='collapsible-section-{{ .Title | urlize }}' type='checkbox' name='collapsible-section' checked>
|
||||
<label for="collapsible-section-{{ .Title | urlize }}">{{ .Title }}</label>
|
||||
<div class='collapsible-body'>
|
||||
<ul>
|
||||
{{ range .Pages }}
|
||||
<li>
|
||||
<a href='{{ .Permalink | relURL }}'>{{- .Title -}}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ range .Pages }}
|
||||
{{ .Render "li" }}
|
||||
{{ end }}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ partial "footer" . }}
|
8
docs/layouts/_default/single.html
Normal file
8
docs/layouts/_default/single.html
Normal file
|
@ -0,0 +1,8 @@
|
|||
{{ partial "header" . }}
|
||||
|
||||
<div class='section'>
|
||||
<h2>{{ .Title }}</h2>
|
||||
{{ .Content }}
|
||||
</div>
|
||||
|
||||
{{ partial "footer" . }}
|
8
docs/layouts/index.html
Normal file
8
docs/layouts/index.html
Normal file
|
@ -0,0 +1,8 @@
|
|||
{{ partial "header" . }}
|
||||
|
||||
<div class='section'>
|
||||
<h2>{{ .Title }}</h2>
|
||||
{{ .Content }}
|
||||
</div>
|
||||
|
||||
{{ partial "footer" . }}
|
12
docs/layouts/partials/data/title
Normal file
12
docs/layouts/partials/data/title
Normal file
|
@ -0,0 +1,12 @@
|
|||
{{- $title := ( .Title ) -}}
|
||||
{{- $siteTitle := ( .Site.Title ) -}}
|
||||
{{- $title404 := ( .Site.Params.info.title404 | default $title ) -}}
|
||||
{{- $sep := ( .Site.Params.seo.titleSeparator | default "•" ) -}}
|
||||
|
||||
{{- if .IsHome -}}
|
||||
{{ print $siteTitle " " $sep " " $.Site.Params.info.description }}
|
||||
{{- else if eq .Kind "404" -}}
|
||||
{{ $title404 }} {{ $sep }} {{ $siteTitle }}
|
||||
{{- else -}}
|
||||
{{ $title }} {{ $sep }} {{ $siteTitle }}
|
||||
{{- end -}}
|
7
docs/layouts/partials/footer.html
Normal file
7
docs/layouts/partials/footer.html
Normal file
|
@ -0,0 +1,7 @@
|
|||
</div>
|
||||
</div>
|
||||
{{ partial "nav/sidebar" . }}
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
8
docs/layouts/partials/head/head.html
Normal file
8
docs/layouts/partials/head/head.html
Normal file
|
@ -0,0 +1,8 @@
|
|||
<head>
|
||||
{{ partial "head/meta" . }}
|
||||
|
||||
<title>{{ partial "data/title" . }}</title>
|
||||
<link rel='canonical' href='{{ .Permalink }}'>
|
||||
|
||||
{{ partial "head/includes" . }}
|
||||
</head>
|
3
docs/layouts/partials/head/includes.html
Normal file
3
docs/layouts/partials/head/includes.html
Normal file
|
@ -0,0 +1,3 @@
|
|||
<!-- Styles -->
|
||||
<link rel='stylesheet' href='/assets/paper.css'>
|
||||
<link rel='stylesheet' href='/assets/demo.css'>
|
11
docs/layouts/partials/head/meta.html
Normal file
11
docs/layouts/partials/head/meta.html
Normal file
|
@ -0,0 +1,11 @@
|
|||
<meta charset='utf-8'>
|
||||
<meta name='viewport' content='width=device-width, initial-scale=1'>
|
||||
<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 }}
|
8
docs/layouts/partials/head/opengraph.html
Normal file
8
docs/layouts/partials/head/opengraph.html
Normal file
|
@ -0,0 +1,8 @@
|
|||
<!-- Twitter -->
|
||||
<meta name="twitter:description" content="The less formal CSS framework">
|
||||
<meta name="twitter:title" content="PaperCSS">
|
||||
|
||||
<!-- OpenGraph -->
|
||||
<meta property="og:url" content="https://www.getpapercss.com/">
|
||||
<meta property="og:title" content="PaperCSS">
|
||||
<meta property="og:description" content="The less formal CSS framework">
|
24
docs/layouts/partials/header.html
Normal file
24
docs/layouts/partials/header.html
Normal file
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
{{ partial "head/head" . }}
|
||||
|
||||
|
||||
|
||||
<body>
|
||||
<div id='top' class='row site'>
|
||||
<div class='sm-12 md-8 col'>
|
||||
<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" . }}
|
||||
</div>
|
||||
<div class="to-top">
|
||||
<a href="#top" class="paper-btn margin">^</a>
|
||||
</div>
|
9
docs/layouts/partials/nav/main.html
Normal file
9
docs/layouts/partials/nav/main.html
Normal file
|
@ -0,0 +1,9 @@
|
|||
<div class="row flex-center child-borders">
|
||||
{{ range .Site.Menus.main }}
|
||||
{{- $isCurrent := ( or ( $.IsMenuCurrent "main" . ) ( $.HasMenuCurrent "main" . ) ) -}}
|
||||
<a class='paper-btn margin{{- if $isCurrent }} current{{- end -}}' href='{{ .URL }}'>
|
||||
{{- .Name -}}
|
||||
</a>
|
||||
{{ end }}
|
||||
<a href="https://github.com/rhyneav/papercss" target="_blank" class="paper-btn margin">Github</a>
|
||||
</div>
|
31
docs/layouts/partials/nav/sidebar.html
Normal file
31
docs/layouts/partials/nav/sidebar.html
Normal file
|
@ -0,0 +1,31 @@
|
|||
<div class='sm-12 md-4 col sidebar'>
|
||||
{{ range .Site.Sections }}
|
||||
<div class='paper'>
|
||||
<h3 class='sidebar-title' style='text-align:center'>
|
||||
<a href='/docs'>PaperCSS Documentation</a>
|
||||
</h3>
|
||||
<div class='row'>
|
||||
{{ range .Sections }}
|
||||
<div class='collapsible full-width'>
|
||||
<input id='collapsible-{{ .Title | urlize }}' type='radio' name='collapsible'>
|
||||
<label for="collapsible-{{ .Title | urlize }}">{{ .Title }}</label>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
{{ range .Pages }}
|
||||
<li>
|
||||
<a href='{{ .Permalink | relURL }}'>{{ .Title }}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
<div class='paper'>
|
||||
<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>
|
3
docs/layouts/shortcodes/button.html
Normal file
3
docs/layouts/shortcodes/button.html
Normal file
|
@ -0,0 +1,3 @@
|
|||
<button {{- with .Get 0 }} class='btn-{{- . -}}' {{- end -}}>
|
||||
{{ .Inner }}
|
||||
</button>
|
13
demo.css → docs/static/assets/demo.css
vendored
13
demo.css → docs/static/assets/demo.css
vendored
|
@ -2,7 +2,7 @@ body {
|
|||
background-image: url("/img/geometry2.png")
|
||||
}
|
||||
.demo .row .col {
|
||||
background-color: #eee;
|
||||
background-color: #eee;
|
||||
}
|
||||
.demo .row .col:nth-child(even) {
|
||||
background-color: #ddd;
|
||||
|
@ -12,7 +12,7 @@ body {
|
|||
margin-bottom: 2rem;
|
||||
}
|
||||
.summary a {
|
||||
color: #41403e;
|
||||
color: #41403e;
|
||||
}
|
||||
img.no-responsive {
|
||||
max-width: -webkit-fill-available;
|
||||
|
@ -36,4 +36,11 @@ img.no-responsive {
|
|||
}
|
||||
.demo-title:hover + .to-top {
|
||||
opacity: 0
|
||||
}
|
||||
}
|
||||
.sidebar-title a {
|
||||
color: inherit;
|
||||
background: none;
|
||||
}
|
||||
.collapsible.full-width {
|
||||
width: 100%;
|
||||
}
|
1974
docs/static/assets/paper.css
vendored
Normal file
1974
docs/static/assets/paper.css
vendored
Normal file
File diff suppressed because it is too large
Load diff
1
docs/static/assets/paper.min.css
vendored
Normal file
1
docs/static/assets/paper.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
0
img/favicon.ico → docs/static/favicon.ico
vendored
0
img/favicon.ico → docs/static/favicon.ico
vendored
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
44
gulpfile.js
44
gulpfile.js
|
@ -1,16 +1,11 @@
|
|||
'use strict';
|
||||
|
||||
const gulp = require('gulp'),
|
||||
connect = require('gulp-connect'),
|
||||
sass = require('gulp-sass'),
|
||||
cleanCSS = require('gulp-clean-css'),
|
||||
rename = require('gulp-rename');
|
||||
|
||||
gulp.task('webserver', function() {
|
||||
connect.server({
|
||||
livereload: true
|
||||
});
|
||||
});
|
||||
rename = require('gulp-rename'),
|
||||
exec = require('child_process').execFile,
|
||||
hugo = require('hugo-bin')
|
||||
|
||||
gulp.task('sass', function() {
|
||||
gulp.src('src/**/*.scss')
|
||||
|
@ -18,19 +13,44 @@ gulp.task('sass', function() {
|
|||
.pipe(cleanCSS({format: 'beautify'}))
|
||||
.pipe(rename('paper.css'))
|
||||
.pipe(gulp.dest('dist'))
|
||||
.pipe(connect.reload());
|
||||
.pipe(gulp.dest('docs/static/assets'));
|
||||
});
|
||||
|
||||
gulp.task('watch', function () {
|
||||
gulp.watch('src/**/*.scss', ['sass']);
|
||||
});
|
||||
|
||||
gulp.task('hugo-server', function (cb) {
|
||||
let hugo_process = exec(
|
||||
hugo, ['server', '--source=docs', '--disableFastRender'],
|
||||
function (err, stdout, stderr) {
|
||||
console.log(stderr);
|
||||
return err ? cb(err) : cb();
|
||||
}
|
||||
);
|
||||
hugo_process.stdout.pipe(process.stdout);
|
||||
return hugo_process;
|
||||
})
|
||||
|
||||
gulp.task('hugo-build', function (cb) {
|
||||
let hugo_process = exec(
|
||||
hugo, ['--source=docs'],
|
||||
function (err, stdout, stderr) {
|
||||
console.log(stderr);
|
||||
return err ? cb(err) : cb();
|
||||
}
|
||||
);
|
||||
hugo_process.stdout.pipe(process.stdout);
|
||||
return hugo_process;
|
||||
})
|
||||
|
||||
gulp.task('minify-css', () => {
|
||||
return gulp.src('src/**/*.scss')
|
||||
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
|
||||
.pipe(rename('paper.min.css'))
|
||||
.pipe(gulp.dest('dist'));
|
||||
.pipe(gulp.dest('dist'))
|
||||
.pipe(gulp.dest('docs/static/assets'));
|
||||
});
|
||||
|
||||
gulp.task('default', ['sass', 'webserver', 'watch']);
|
||||
gulp.task('build', ['sass', 'minify-css']);
|
||||
gulp.task('default', ['sass','watch','hugo-server']);
|
||||
gulp.task('build', ['sass','minify-css','hugo-build']);
|
||||
|
|
1482
index.html
1482
index.html
File diff suppressed because it is too large
Load diff
6
netlify.toml
Normal file
6
netlify.toml
Normal file
|
@ -0,0 +1,6 @@
|
|||
[build]
|
||||
publish = "public"
|
||||
command = "hugo --source=docs"
|
||||
|
||||
[build.environment]
|
||||
HUGO_VERSION = "0.30"
|
2796
package-lock.json
generated
2796
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
@ -31,6 +31,11 @@
|
|||
"chai": "^4.1.2",
|
||||
"gulp-sass": "^3.1.0",
|
||||
"http-server": "^0.9.0",
|
||||
"gulp-less": "3.3.2",
|
||||
"gulp-plumber": "1.1.0",
|
||||
"gulp-rename": "1.2.2",
|
||||
"gulp-watch-less": "1.0.1",
|
||||
"hugo-bin": "^0.17.0",
|
||||
"install": "0.10.1",
|
||||
"jake": "^8.0.15",
|
||||
"jshint": "^2.9.4",
|
||||
|
|
Loading…
Reference in a new issue