├── netlify.toml ├── .browserslistrc ├── docs ├── content │ ├── docs │ │ ├── _index.md │ │ ├── layout │ │ │ ├── _index.md │ │ │ ├── container.md │ │ │ └── flexbox.md │ │ ├── content │ │ │ ├── _index.md │ │ │ ├── code.md │ │ │ ├── typography.md │ │ │ ├── lists.md │ │ │ ├── images.md │ │ │ └── tables.md │ │ ├── components │ │ │ ├── _index.md │ │ │ ├── breadcrumb.md │ │ │ ├── badges.md │ │ │ ├── popovers.md │ │ │ ├── articles.md │ │ │ ├── buttons.md │ │ │ ├── modals.md │ │ │ ├── alerts.md │ │ │ ├── navbar.md │ │ │ ├── tabs.md │ │ │ ├── cards.md │ │ │ ├── progress.md │ │ │ ├── collapsible.md │ │ │ └── forms.md │ │ └── utilities │ │ │ ├── _index.md │ │ │ ├── spacing.md │ │ │ ├── dark-mode.md │ │ │ ├── colors.md │ │ │ └── borders.md │ ├── about.md │ └── _index.md ├── static │ ├── favicon.ico │ ├── img │ │ └── geometry2.png │ └── assets │ │ ├── demo.css │ │ └── syntax.css ├── layouts │ ├── shortcodes │ │ └── button.html │ ├── partials │ │ ├── footer.html │ │ ├── head │ │ │ ├── includes.html │ │ │ ├── head.html │ │ │ ├── opengraph.html │ │ │ └── meta.html │ │ ├── nav │ │ │ ├── main.html │ │ │ └── sidebar.html │ │ ├── data │ │ │ └── title │ │ └── header.html │ ├── index.html │ └── _default │ │ ├── single.html │ │ ├── li.html │ │ └── list.html ├── archetypes │ └── default.md └── config.toml ├── img └── screenshots │ ├── download.PNG │ ├── preview.gif │ └── download-minified.PNG ├── .gitignore ├── .editorconfig ├── .npmignore ├── .github └── PULL_REQUEST_TEMPLATE.md ├── .stylelintrc.json ├── src ├── components │ ├── _breadcrumb.scss │ ├── _badges.scss │ ├── _article.scss │ ├── _tabs.scss │ ├── _progress.scss │ ├── _accordion.scss │ ├── _alerts.scss │ ├── _cards.scss │ ├── _popovers.scss │ ├── _utilities.scss │ ├── _modals.scss │ ├── _buttons.scss │ ├── _navbar.scss │ └── _forms.scss ├── utilities │ ├── _shadows.scss │ └── _borders.scss ├── content │ ├── _images.scss │ ├── _tables.scss │ ├── _fonts.scss │ ├── _code.scss │ └── _lists.scss ├── styles.scss ├── layout │ ├── _container.scss │ └── _flexbox.scss └── core │ ├── _reset.scss │ ├── _mixins.scss │ └── _config.scss ├── LICENSE.md ├── DISTRIBUTING.md ├── package.json ├── CONTRIBUTING.md ├── CODE_OF_CONDUCT.md └── README.md /netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | publish = "public" 3 | -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | # Browsers that we support (see https://browserl.ist/) 2 | 3 | defaults 4 | -------------------------------------------------------------------------------- /docs/content/docs/_index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Documentation 3 | menu: main 4 | weight: -240 5 | --- 6 | -------------------------------------------------------------------------------- /docs/content/docs/layout/_index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Layout 3 | description: PaperCSS Layout 4 | --- 5 | -------------------------------------------------------------------------------- /docs/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/donmccurdy/papercss/master/docs/static/favicon.ico -------------------------------------------------------------------------------- /docs/content/docs/content/_index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Content 3 | description: PaperCSS Content 4 | --- 5 | -------------------------------------------------------------------------------- /docs/content/docs/components/_index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Components 3 | description: PaperCSS Components 4 | --- 5 | -------------------------------------------------------------------------------- /docs/content/docs/utilities/_index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Utilities 3 | description: PaperCSS Utilities 4 | --- 5 | -------------------------------------------------------------------------------- /img/screenshots/download.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/donmccurdy/papercss/master/img/screenshots/download.PNG -------------------------------------------------------------------------------- /img/screenshots/preview.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/donmccurdy/papercss/master/img/screenshots/preview.gif -------------------------------------------------------------------------------- /docs/static/img/geometry2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/donmccurdy/papercss/master/docs/static/img/geometry2.png -------------------------------------------------------------------------------- /docs/layouts/shortcodes/button.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/screenshots/download-minified.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/donmccurdy/papercss/master/img/screenshots/download-minified.PNG -------------------------------------------------------------------------------- /docs/archetypes/default.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "{{ replace .TranslationBaseName "-" " " | title }}" 3 | date: {{ .Date }} 4 | draft: true 5 | --- 6 | -------------------------------------------------------------------------------- /docs/layouts/partials/footer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | {{ partial "nav/sidebar" . }} 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /docs/layouts/index.html: -------------------------------------------------------------------------------- 1 | {{ partial "header" . }} 2 | 3 |
4 |

{{ .Title }}

5 | {{ .Content }} 6 |
7 | 8 | {{ partial "footer" . }} -------------------------------------------------------------------------------- /docs/layouts/_default/single.html: -------------------------------------------------------------------------------- 1 | {{ partial "header" . }} 2 | 3 |
4 |

{{ .Title }}

5 | {{ .Content }} 6 |
7 | 8 | {{ partial "footer" . }} 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | npm-debug.log 3 | /tests/node_modules 4 | .DS_Store 5 | /public 6 | .vscode 7 | 8 | # Ignore compiled CSS 9 | /docs/static/assets/paper.css 10 | /docs/static/assets/paper.min.css 11 | -------------------------------------------------------------------------------- /docs/layouts/partials/head/includes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | end_of_line = lf 5 | charset = utf-8 6 | trim_trailing_whitespace = true 7 | insert_final_newline = true 8 | indent_style = space 9 | indent_size = 2 10 | quote_type = single 11 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | /.github 2 | /build 3 | /docs 4 | /img 5 | /node_modules 6 | /public 7 | .browserslistrc 8 | .editorconfig 9 | .stylelintrc.json 10 | CODE_OF_CONDUCT.md 11 | CONTRIBUTING.md 12 | netlify.toml 13 | npm-debug.log 14 | -------------------------------------------------------------------------------- /docs/layouts/partials/head/head.html: -------------------------------------------------------------------------------- 1 | 2 | {{ partial "head/meta" . }} 3 | 4 | {{ partial "data/title" . }} 5 | 6 | 7 | {{ partial "head/includes" . }} 8 | 9 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ## Brief description 2 | 3 | ... 4 | 5 | ## Developer Certificate of Origin 6 | 7 | - [ ] I certify that these changes according to the Developer Certificate of Origin 1.1 as described at . 8 | 9 | ## Sample pictures 10 | 11 | ... 12 | 13 | ## Further details 14 | 15 | ... 16 | -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "stylelint-config-sass-guidelines", 3 | "plugins": [ 4 | "stylelint-scss" 5 | ], 6 | "rules": { 7 | "max-nesting-depth": 5, 8 | "selector-no-qualifying-type": null, 9 | "selector-max-compound-selectors": null, 10 | "scss/selector-no-redundant-nesting-selector": null, 11 | "scss/at-extend-no-missing-placeholder": null 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /docs/layouts/partials/head/opengraph.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /docs/layouts/_default/li.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

{{- .Title -}}

5 |
6 | {{- .Params.description -}} 7 |
8 | 9 | Let's see! 10 | 11 |
12 |
13 |
14 | -------------------------------------------------------------------------------- /docs/layouts/partials/head/meta.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | {{ partial "head/opengraph" . }} 10 | 11 | {{ hugo.Generator }} 12 | -------------------------------------------------------------------------------- /docs/layouts/partials/nav/main.html: -------------------------------------------------------------------------------- 1 |
2 | {{ range .Site.Menus.main }} 3 | {{- $isCurrent := ( or ( $.IsMenuCurrent "main" . ) ( $.HasMenuCurrent "main" . ) ) -}} 4 | 5 | {{- .Name -}} 6 | 7 | {{ end }} 8 | Github 9 |
10 | -------------------------------------------------------------------------------- /docs/content/docs/components/breadcrumb.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Breadcrumb 3 | description: PaperCSS Breadcrumb 4 | --- 5 | 6 | 11 | 12 | #### Code: 13 | 14 | ```html 15 | 20 | ``` 21 | -------------------------------------------------------------------------------- /docs/layouts/partials/data/title: -------------------------------------------------------------------------------- 1 | {{- $title := ( .Title ) -}} 2 | {{- $siteTitle := ( .Site.Title ) -}} 3 | {{- $title404 := ( .Site.Params.info.title404 | default $title ) -}} 4 | {{- $sep := ( .Site.Params.seo.titleSeparator | default "•" ) -}} 5 | 6 | {{- if .IsHome -}} 7 | {{ print $siteTitle " " $sep " " $.Site.Params.info.description }} 8 | {{- else if eq .Kind "404" -}} 9 | {{ $title404 }} {{ $sep }} {{ $siteTitle }} 10 | {{- else -}} 11 | {{ $title }} {{ $sep }} {{ $siteTitle }} 12 | {{- end -}} 13 | -------------------------------------------------------------------------------- /src/components/_breadcrumb.scss: -------------------------------------------------------------------------------- 1 | ul.breadcrumb { 2 | list-style: none; 3 | padding: 10px 16px; 4 | 5 | li { 6 | display: inline; 7 | font-size: 20px; 8 | 9 | &::before { 10 | content: ''; 11 | } 12 | 13 | a { 14 | @include color('color', 'secondary'); 15 | background-image: none; 16 | text-decoration: none; 17 | 18 | &:hover { 19 | text-decoration: underline; 20 | } 21 | } 22 | } 23 | 24 | li + li::before { 25 | content: '/\00a0'; 26 | padding: 8px; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/utilities/_shadows.scss: -------------------------------------------------------------------------------- 1 | .shadow { 2 | @include shadow(); 3 | 4 | &.shadow-large { 5 | @include shadow(large); 6 | } 7 | 8 | &.shadow-small { 9 | @include shadow(small); 10 | } 11 | 12 | &.shadow-hover { 13 | &:hover { 14 | @include shadow(hover); 15 | } 16 | } 17 | } 18 | 19 | .child-shadows > * { 20 | @include shadow(); 21 | } 22 | 23 | .child-shadows { 24 | .shadow-none { 25 | box-shadow: none; 26 | } 27 | } 28 | 29 | .child-shadows-hover > * { 30 | @include shadow(); 31 | 32 | &:hover { 33 | @include shadow(hover); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /docs/content/docs/content/code.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Code 3 | description: PaperCSS Code 4 | --- 5 | Let's make some pretty `` 6 | 7 | Print files backwards using tac 8 | 9 | To stop a process, hit ctrl + c 10 | 11 | 
function add(x, y) {
12 |   return x + y;
13 | }
14 |
15 | 16 | #### Code: 17 | 18 | ```html 19 |

Let's make some pretty

20 |

Print files backwards using tac

21 |

To stop a process, hit ctrl + c

22 | 23 | 
function add(x, y) {
24 |   return x + y;
25 | }
26 |
27 | ``` 28 | -------------------------------------------------------------------------------- /src/content/_images.scss: -------------------------------------------------------------------------------- 1 | img { 2 | @include border-style(); 3 | @include color('border-color', 'primary'); 4 | border-style: solid; 5 | border-width: 2px; 6 | display: block; 7 | height: auto; 8 | max-width: 100%; 9 | 10 | &.float-left { 11 | float: left; 12 | margin: 1rem 1rem 1rem 0; 13 | } 14 | 15 | &.float-right { 16 | float: right; 17 | margin: 1rem 0 1rem 1rem; 18 | } 19 | 20 | &.no-responsive { 21 | display: initial; 22 | height: initial; 23 | max-width: initial; 24 | } 25 | 26 | &.no-border { 27 | border: 0; 28 | border-radius: 0; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /docs/config.toml: -------------------------------------------------------------------------------- 1 | baseURL = "https://getpapercss.com" 2 | title = "PaperCSS" 3 | 4 | # Directories 5 | publishDir = "../public" 6 | 7 | # Syntax Highlighting ( https://gohugo.io/content-management/syntax-highlighting/ ) 8 | pygmentsCodefences = true 9 | pygmentsStyle = "emacs" 10 | pygmentsUseClasses=true 11 | 12 | [params.info] 13 | description = "the less formal CSS framework" 14 | title404 = "Nothing's here!" 15 | 16 | [params.seo] 17 | # Title Separator: - – — · • * ⋆ | ~ « » < > 18 | titleSeparator = "•" 19 | 20 | [markup] 21 | defaultMarkdownHandler = "blackfriday" 22 | [markup.blackFriday] 23 | hrefTargetBlank = true 24 | -------------------------------------------------------------------------------- /src/components/_badges.scss: -------------------------------------------------------------------------------- 1 | .badge { 2 | @include border-style(); 3 | @include color('color', 'white'); 4 | @include color('background-color', 'muted'); 5 | @include color('border-color', 'primary'); 6 | border: 2px solid; 7 | border-color: transparent; 8 | display: inline-block; 9 | font-size: 75%; 10 | font-weight: 700; 11 | line-height: 1; 12 | padding: 0.25em 0.4em; 13 | text-align: center; 14 | vertical-align: baseline; 15 | white-space: nowrap; 16 | } 17 | 18 | @each $colorName, $color in $colors { 19 | .badge.#{$colorName} { 20 | @include color('background-color', #{$colorName}); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /docs/layouts/partials/header.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{ partial "head/head" . }} 5 | 6 | 7 | 8 | 9 |
10 |
11 |
12 |
13 |
14 |
15 |

{{ .Site.Title }}

16 |

{{ .Site.Params.info.description }}

17 |
18 |
19 | 20 | {{ partial "nav/main" . }} 21 |
22 |
23 | ^ 24 |
25 | -------------------------------------------------------------------------------- /src/components/_article.scss: -------------------------------------------------------------------------------- 1 | article { 2 | .article-title { 3 | font-size: 3rem; 4 | } 5 | 6 | .article-meta { 7 | @include color(color, 'muted-text'); 8 | font-size: 15px; 9 | 10 | a { 11 | @include color(color, 'muted-text'); 12 | background-image: none; 13 | 14 | &:hover { 15 | @include color(color, 'light-dark'); 16 | } 17 | } 18 | } 19 | 20 | .text-lead { 21 | font-size: 30px; 22 | line-height: 1.3; 23 | margin: 35px; 24 | } 25 | 26 | button { 27 | &:not(:first-of-type) { 28 | margin-left: 2rem; 29 | @include resp(xs) { 30 | margin-left: 0; 31 | } 32 | } 33 | } 34 | 35 | p { 36 | line-height: 1.6; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | ## ISC Licence 2 | 3 | Copyright (c) 2017–2018, Rhyne Vlaservich 4 | 5 | Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. 8 | -------------------------------------------------------------------------------- /DISTRIBUTING.md: -------------------------------------------------------------------------------- 1 | For distributing a new version to Github, NPM, and the CDN 2 | 3 | 1. Ensure the build is up to date with `npm run build` 4 | 2. Update all version numbers in the app using [Semantic Versioning](https://semver.org/). Ex renaming `1.8.0` to `1.8.1` for a patch. 5 | 1. package.json 6 | 2. package-lock.json 7 | 3. docs/content/_index.md 8 | 3. Create commit of the new version with the changed version files: `v1.8.3` 9 | 4. Push to master 10 | 5. Create new release in the Github UI 11 | 1. Create a new tag with the same name as the commit: `v1.8.3` 12 | 2. Add details about the additions and fixes 13 | 3. Upload the files in `dist` to the "Attach Binaries" section (`paper.css` and `paper.min.css`) 14 | 6. Publish to NPM with `npm publish`. The CDN will automatically pick up the new files 15 | -------------------------------------------------------------------------------- /src/content/_tables.scss: -------------------------------------------------------------------------------- 1 | table { 2 | box-sizing: border-box; 3 | max-width: 100%; 4 | overflow-x: auto; 5 | width: 100%; 6 | 7 | @include resp(xsmall) { 8 | thead tr th { 9 | padding: 2%; 10 | } 11 | 12 | tbody tr td { 13 | padding: 2%; 14 | } 15 | } 16 | 17 | thead tr th { 18 | line-height: 1.5; 19 | padding: 8px; 20 | text-align: left; 21 | vertical-align: bottom; 22 | } 23 | 24 | tbody tr td { 25 | border-top: 1px dashed lighten($primary, 60%); 26 | line-height: 1.5; 27 | padding: 8px; 28 | vertical-align: top; 29 | } 30 | 31 | &.table-hover tbody tr:hover { 32 | @include color('color', 'secondary'); 33 | } 34 | 35 | &.table-alternating tbody tr:nth-of-type(even) { 36 | color: lighten($primary, 25%); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /docs/layouts/_default/list.html: -------------------------------------------------------------------------------- 1 | {{ partial "header" . }} 2 | 3 |
4 |

{{ .Title }}

5 | 6 | {{ .Content }} 7 | 8 |
9 | 10 | {{ range .Sections }} 11 |
12 | 13 | 14 |
15 |
16 | {{ range .Pages }} 17 | {{- .Title -}} 18 | {{ end }} 19 |
20 |
21 |
22 | {{ end }} 23 | 24 | {{ range .Pages }} 25 | {{ .Render "li" }} 26 | {{ end }} 27 | 28 |
29 |
30 | 31 | {{ partial "footer" . }} 32 | -------------------------------------------------------------------------------- /src/components/_tabs.scss: -------------------------------------------------------------------------------- 1 | .tabs { 2 | .content { 3 | display: none; 4 | flex-basis: 100%; 5 | padding: 0.75rem 0 0; 6 | } 7 | 8 | input { 9 | display: none; 10 | 11 | &:checked + label { 12 | @include color(color, 'primary'); 13 | @include color('border-bottom-color', 'secondary'); 14 | border-bottom-style: solid; 15 | border-bottom-width: 3px; 16 | } 17 | 18 | @for $num from 1 through 5 { 19 | &[id$='tab#{$num}']:checked~div[id$='content#{$num}'] { 20 | display: block; 21 | } 22 | } 23 | } 24 | 25 | label { 26 | @include color('color', primary-light); 27 | display: inline-block; 28 | font-weight: 600; 29 | margin: 0 0 -1px; 30 | padding: 0.75rem; 31 | text-align: center; 32 | 33 | &:hover { 34 | @include color('color', muted); 35 | cursor: pointer; 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/content/_fonts.scss: -------------------------------------------------------------------------------- 1 | html { 2 | @include color('color', 'primary'); 3 | font-family: $body-font, sans-serif; 4 | font-size: $global-font-size; 5 | } 6 | 7 | p, 8 | a, 9 | button, 10 | li, 11 | table, 12 | thead, 13 | tbody, 14 | th, 15 | tr, 16 | td, 17 | input, 18 | textarea, 19 | select, 20 | option { 21 | font-family: $body-font, sans-serif; 22 | } 23 | 24 | h1, 25 | h2, 26 | h3, 27 | h4, 28 | h5, 29 | h6 { 30 | font-family: $header-font, sans-serif; 31 | font-weight: normal; 32 | } 33 | 34 | h1 { 35 | font-size: 4rem; 36 | } 37 | 38 | h2 { 39 | font-size: 3rem; 40 | } 41 | 42 | h3 { 43 | font-size: 2rem; 44 | } 45 | 46 | h4 { 47 | font-size: 1.5rem; 48 | } 49 | 50 | h5 { 51 | font-size: 1rem; 52 | } 53 | 54 | h6 { 55 | font-size: 0.8rem; 56 | } 57 | 58 | .text-left { 59 | text-align: left; 60 | } 61 | 62 | .text-center { 63 | text-align: center; 64 | } 65 | 66 | .text-right { 67 | text-align: right; 68 | } 69 | -------------------------------------------------------------------------------- /docs/content/docs/content/typography.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Typography 3 | description: PaperCSS Typography 4 | --- 5 | 6 | How pretty is the text? 7 | 8 | # Heading 1 9 | 10 | ## Heading 2 11 | 12 | ### Heading 3 13 | 14 | #### Heading 4 15 | 16 | ##### Heading 5 17 | 18 | ###### Heading 6 19 | 20 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultrices, eros 21 | non elementum accumsan, massa nulla aliquam libero, ut posuere justo nibh ac 22 | ipsum. Aliquam blandit commodo justo at laoreet. Suspendisse potenti. Duis magna 23 | neque, venenatis non libero a, tincidunt convallis diam. Donec vel fermentum 24 | ante. Quisque diam nisl, vestibulum imperdiet sapien nec, interdum fringilla 25 | lorem. Morbi sed arcu facilisis, maximus justo vel, porttitor nisl. Nam suscipit 26 | metus facilisis iaculis vestibulum. 27 | 28 | ```html 29 |

Heading 1

30 |

Heading 2

31 |

Heading 3

32 |

Heading 4

33 |
Heading 5
34 |
Heading 6
35 |

Lorem ipsum dolor....

36 | ``` 37 | -------------------------------------------------------------------------------- /docs/content/docs/components/badges.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Badges 3 | description: PaperCSS Badges 4 | --- 5 | ### Default 6 | 7 | You can customize badges colors with secondary, success, warning, danger classes. 8 | 9 | # Example h1 heading 123 10 | 11 | ## Example h2 heading 123 12 | 13 | ### Example h3 heading 123 14 | 15 | #### Example h4 heading 123 16 | 17 | ##### Example h5 heading 123 18 | 19 | ###### Example h6 heading 123 20 | 21 | #### Code: 22 | 23 | ```html 24 |

Example h1 heading 123

25 |

Example h2 heading 123

26 |

Example h3 heading 123

27 |

Example h4 heading 123

28 |
Example h5 heading 123
29 |
Example h6 heading 123
30 | ``` 31 | -------------------------------------------------------------------------------- /src/styles.scss: -------------------------------------------------------------------------------- 1 | @charset 'UTF-8'; 2 | 3 | /* PaperCSS core */ 4 | @import 'core/config'; 5 | @import 'core/mixins'; 6 | @import 'core/reset'; 7 | 8 | /* Layout styling */ 9 | @import 'layout/container'; 10 | @import 'layout/flexbox'; 11 | 12 | /* Content styling */ 13 | @import 'content/code'; 14 | @import 'content/fonts'; 15 | @import 'content/images'; 16 | @import 'content/lists'; 17 | @import 'content/tables'; 18 | 19 | /* Utilities */ 20 | @import 'utilities/borders'; 21 | @import 'utilities/shadows'; 22 | 23 | /* Components */ 24 | @import 'components/accordion'; 25 | @import 'components/alerts'; 26 | @import 'components/article'; 27 | @import 'components/badges'; 28 | @import 'components/breadcrumb'; 29 | @import 'components/buttons'; 30 | @import 'components/cards'; 31 | @import 'components/forms'; 32 | @import 'components/modals'; 33 | @import 'components/popovers'; 34 | @import 'components/progress'; 35 | @import 'components/tabs'; 36 | @import 'components/utilities'; 37 | @import 'components/navbar'; 38 | 39 | // @media print { 40 | // @import 'layout/print'; 41 | // } 42 | -------------------------------------------------------------------------------- /src/content/_code.scss: -------------------------------------------------------------------------------- 1 | code { 2 | @include color('color', 'secondary'); 3 | @include color('background-color', 'primary-shaded-70'); 4 | border-radius: 3px; 5 | font-size: 80%; 6 | padding: 2px 4px; 7 | } 8 | 9 | kbd { 10 | @include color('color', 'primary-inverse'); 11 | @include color('background-color', 'primary'); 12 | border-radius: 3px; 13 | font-size: 80%; 14 | padding: 2px 4px; 15 | } 16 | 17 | pre { 18 | @include color('color', 'inverse-primary'); 19 | @include color('background-color', 'primary-shaded-70'); 20 | @include color('border-color', 'primary-shaded-50'); 21 | 22 | border-radius: 3px; 23 | border-style: solid; 24 | border-width: 1px; 25 | display: block; 26 | font-size: 80%; 27 | line-height: 1.5; 28 | overflow-x: auto; 29 | padding: 1em; 30 | white-space: pre; 31 | word-break: break-all; 32 | word-wrap: break-word; 33 | 34 | code { 35 | @include color('color', 'inverse-primary'); 36 | background: transparent; 37 | display: block; 38 | font-size: inherit; 39 | padding: initial; 40 | white-space: pre; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/content/_lists.scss: -------------------------------------------------------------------------------- 1 | ol { 2 | list-style-type: decimal; 3 | 4 | ol { 5 | list-style-type: upper-alpha; 6 | 7 | ol { 8 | list-style-type: upper-roman; 9 | 10 | ol { 11 | list-style-type: lower-alpha; 12 | 13 | ol { 14 | list-style-type: lower-roman; 15 | } 16 | } 17 | } 18 | } 19 | } 20 | 21 | ul { 22 | @include li-bullet('-'); 23 | list-style: none; 24 | margin-left: 0; 25 | 26 | li { 27 | text-indent: -7px; 28 | 29 | .badge, 30 | [popover-bottom]::after, 31 | [popover-left]::after, 32 | [popover-right]::after, 33 | [popover-top]::after { 34 | text-indent: 0; 35 | } 36 | 37 | &::before { 38 | left: -7px; 39 | position: relative; 40 | } 41 | } 42 | 43 | ul { 44 | @include li-bullet('+'); 45 | 46 | ul { 47 | @include li-bullet('~'); 48 | 49 | ul { 50 | @include li-bullet('⤍'); 51 | 52 | ul { 53 | @include li-bullet('⁎'); 54 | } 55 | } 56 | } 57 | } 58 | 59 | &.inline li { 60 | display: inline; 61 | margin-left: 5px; 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /docs/static/assets/demo.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-image: url("/img/geometry2.png") 3 | } 4 | html.dark body { 5 | background: #41403e; 6 | } 7 | #top { 8 | max-width: 1440px; 9 | } 10 | .demo .row .col { 11 | background-color: #eee; 12 | } 13 | .demo .row .col:nth-child(even) { 14 | background-color: #ddd; 15 | } 16 | .docs { 17 | margin-top: 2rem; 18 | margin-bottom: 2rem; 19 | } 20 | .summary a { 21 | color: #41403e; 22 | } 23 | img.no-responsive { 24 | max-width: -webkit-fill-available; 25 | max-width: -moz-available; 26 | } 27 | .to-top { 28 | opacity: 1; 29 | display: inline-block; 30 | padding: 1em; 31 | position: fixed; 32 | bottom: 1em; 33 | right: 1em 34 | } 35 | .to-top .paper-btn { 36 | padding: .6em 1em; 37 | border-top-left-radius: 185px 160px; 38 | border-top-right-radius: 200px 195px; 39 | border-bottom-right-radius: 160px 195px; 40 | border-bottom-left-radius: 185px 190px 41 | } 42 | .demo-title:hover + .to-top { 43 | opacity: 0 44 | } 45 | .sidebar-title a { 46 | color: inherit; 47 | background: none; 48 | } 49 | .collapsible.full-width { 50 | width: 100%; 51 | } 52 | -------------------------------------------------------------------------------- /docs/content/docs/utilities/spacing.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Spacing 3 | description: PaperCSS Spacing 4 | --- 5 | ### Margin 6 |
7 |
Margin
8 |
Margin-large
9 |
Margin-top-small
10 |
11 | 12 | #### Code: 13 | 14 | ```html 15 |
16 |
Margin
17 |
Margin-large
18 |
Margin-top-small
19 |
20 | ``` 21 | 22 | ### Padding 23 | 24 |
25 |
Padding-small
26 |
Padding-none
27 |
Padding-left-large
28 |
29 | 30 | #### Code: 31 | 32 | ```html 33 |
34 |
Padding-small
35 |
Padding-none
36 |
Padding-left-large
37 |
38 | ``` 39 | -------------------------------------------------------------------------------- /docs/layouts/partials/nav/sidebar.html: -------------------------------------------------------------------------------- 1 |
2 | {{ range .Site.Sections }} 3 |
4 |

5 | Documentation 6 |

7 |
8 | {{ range .Sections }} 9 |
10 | 11 | 12 |
13 |
    14 | {{ range .Pages }} 15 |
  • 16 | {{ .Title }} 17 |
    • 18 | {{ end }} 19 |
20 |
21 |
22 | {{ end }} 23 |
24 |
25 | {{ end }} 26 |
27 |
28 |

Made with 💛 by Rhyne and some fantastic contributors!

29 |
30 |
31 |
32 | -------------------------------------------------------------------------------- /src/components/_progress.scss: -------------------------------------------------------------------------------- 1 | .progress { 2 | @include border-style(5); 3 | @include color('border-color', 'primary'); 4 | border: 2px solid; 5 | box-shadow: $shadow-hover; 6 | height: 1.2rem; 7 | overflow: hidden; 8 | width: 100%; 9 | 10 | .bar { 11 | @include border-style(5); 12 | @include transition; 13 | @include color('background-color', 'primary-light'); 14 | @include color('border-color', 'primary'); 15 | border-right: 2px solid; 16 | display: flex; 17 | flex-direction: column; 18 | font-size: 0.6rem; 19 | height: 100%; 20 | justify-content: center; 21 | text-align: center; 22 | width: 0%; 23 | 24 | &.striped { 25 | @include striped-background($primary-light); 26 | } 27 | 28 | @each $colorName, $color, $color-light in $colors { 29 | &.#{$colorName} { 30 | @include color('background-color', #{$colorName}-light); 31 | 32 | &.striped { 33 | @include striped-background($color-light); 34 | } 35 | } 36 | } 37 | 38 | @for $i from 0 through 100 { 39 | &.w-#{$i} { 40 | width: $i * 1%; 41 | } 42 | } 43 | 44 | &.w-0, 45 | &.w-100 { 46 | border-right: 0; 47 | } 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/utilities/_borders.scss: -------------------------------------------------------------------------------- 1 | .border { 2 | @include color('border-color','primary' ); 3 | border-style: solid; 4 | border-width: 2px; 5 | } 6 | 7 | .border, 8 | .border-1, 9 | .child-borders>*:nth-child(6n+1) { 10 | @include border-style(1); 11 | } 12 | 13 | .border-2, 14 | .child-borders>*:nth-child(6n+2) { 15 | @include border-style(2); 16 | } 17 | 18 | .border-3, 19 | .child-borders>*:nth-child(6n+3) { 20 | @include border-style(3); 21 | } 22 | 23 | .border-4, 24 | .child-borders>*:nth-child(6n+4) { 25 | @include border-style(4); 26 | } 27 | 28 | .border-5, 29 | .child-borders>*:nth-child(6n+5) { 30 | @include border-style(5); 31 | } 32 | 33 | .border-6, 34 | .child-borders>*:nth-child(6n+6) { 35 | @include border-style(6); 36 | } 37 | 38 | .child-borders>* { 39 | @include color('border-color', 'primary'); 40 | border-style: solid; 41 | border-width: 2px; 42 | } 43 | 44 | .border-white { 45 | @include color('border-color', 'white'); 46 | } 47 | 48 | .border-dotted { 49 | border-style: dotted; 50 | } 51 | 52 | .border-dashed { 53 | border-style: dashed; 54 | } 55 | 56 | .border-thick { 57 | border-width: 5px; 58 | } 59 | 60 | @each $colorName, $color in $colors { 61 | .border-#{$colorName} { 62 | @include color('border-color', #{$colorName}); 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /src/layout/_container.scss: -------------------------------------------------------------------------------- 1 | .container { 2 | margin: 0 auto; 3 | max-width: 960px; 4 | position: relative; 5 | width: 100%; 6 | @include resp(medium) { 7 | width: 85%; 8 | } 9 | @include resp(xsmall) { 10 | width: 90%; 11 | } 12 | } 13 | 14 | .container { 15 | &.container-xs { 16 | max-width: $xsmall-screen; 17 | } 18 | } 19 | 20 | .container { 21 | &.container-sm { 22 | max-width: $small-screen; 23 | } 24 | } 25 | 26 | .container { 27 | &.container-md { 28 | max-width: $medium-screen; 29 | } 30 | } 31 | 32 | .container { 33 | &.container-lg { 34 | max-width: $large-screen; 35 | } 36 | } 37 | 38 | .section { 39 | margin-bottom: 2rem; 40 | margin-top: 1rem; 41 | word-wrap: break-word; 42 | 43 | &::after { 44 | @include hr-after; 45 | } 46 | } 47 | 48 | hr { 49 | border: 0; 50 | 51 | &::after { 52 | @include hr-after; 53 | top: -0.75rem; 54 | } 55 | } 56 | 57 | .paper { 58 | @include color('background-color', 'main-background'); 59 | border: 1px solid $primary-light; 60 | box-shadow: -1px 5px 35px -9px hsla(0, 0%, 0%, 0.2); 61 | margin-bottom: 1rem; 62 | margin-top: 1rem; 63 | padding: 2rem; 64 | @include resp(xs) { 65 | margin-bottom: 0; 66 | margin-top: 0; 67 | padding: 1rem; 68 | width: 100%; 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /src/components/_accordion.scss: -------------------------------------------------------------------------------- 1 | .collapsible { 2 | display: flex; 3 | flex-direction: column; 4 | 5 | &:nth-of-type(1) { 6 | @include color('border-top-color', 'muted-light'); 7 | border-top-style: solid; 8 | border-top-width: 1px; 9 | } 10 | 11 | .collapsible-body { 12 | @include color('border-bottom-color', 'muted-light'); 13 | @include color('background-color', 'white-dark-light-80'); 14 | @include transition; 15 | border-bottom-style: solid; 16 | border-bottom-width: 1px; 17 | margin: 0; 18 | max-height: 0; 19 | opacity: 0; 20 | overflow: hidden; 21 | padding: 0 0.75rem; 22 | } 23 | 24 | > input { 25 | display: none; 26 | 27 | &:checked + label { 28 | @include color('color', 'primary'); 29 | } 30 | 31 | &[id^='collapsible']:checked~div.collapsible-body { 32 | margin: 0; 33 | max-height: 960px; 34 | opacity: 1; 35 | padding: 0.75rem; 36 | } 37 | } 38 | 39 | > label { 40 | @include color('color', 'primary'); 41 | @include color('border-bottom-color', 'muted-light'); 42 | border-bottom-style: solid; 43 | border-bottom-width: 1px; 44 | display: inline-block; 45 | font-weight: 600; 46 | margin: 0 0 -1px; 47 | padding: 0.75rem; 48 | text-align: center; 49 | 50 | &:hover { 51 | @include color('color', 'muted'); 52 | cursor: pointer; 53 | } 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /src/components/_alerts.scss: -------------------------------------------------------------------------------- 1 | @mixin btn-close-color($base-color-name) { 2 | @include color('color', #{$base-color-name}-text); 3 | 4 | &:hover, 5 | &:active, 6 | &:focus { 7 | @include color('color', #{$base-color-name}-dark); 8 | } 9 | } 10 | 11 | .alert { 12 | @include color('border-color', 'primary'); 13 | @include border-style(); 14 | border-style: solid; 15 | border-width: 2px; 16 | margin-bottom: 20px; 17 | padding: 15px; 18 | width: 100%; 19 | 20 | &.dismissible { 21 | @include transition; 22 | display: flex; 23 | justify-content: space-between; 24 | max-height: 48rem; 25 | overflow: hidden; 26 | } 27 | 28 | .btn-close { 29 | @include transition; 30 | @include btn-close-color(primary); 31 | cursor: pointer; 32 | margin-left: 0.75rem; 33 | } 34 | } 35 | 36 | @each $color-name, $color, $color-light, $color-text in $colors { 37 | .alert-#{$color-name} { 38 | @include color('color', #{$color-name}-text); 39 | @include color('background-color', #{$color-name}-light); 40 | @include color('border-color', $color-name); 41 | 42 | .btn-close { 43 | @include btn-close-color($color-name); 44 | } 45 | } 46 | } 47 | 48 | .alert-state { 49 | display: none; 50 | 51 | &:checked + .dismissible { 52 | border-width: 0; 53 | margin: 0; 54 | max-height: 0; 55 | opacity: 0; 56 | padding-bottom: 0; 57 | padding-top: 0; 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /src/components/_cards.scss: -------------------------------------------------------------------------------- 1 | .card { 2 | @include shadow; 3 | @include color('border-color', 'muted-light'); 4 | backface-visibility: hidden; 5 | border-style: solid; 6 | border-width: 2px; 7 | display: flex; 8 | flex-direction: column; 9 | position: relative; 10 | will-change: transform; 11 | word-wrap: break-word; 12 | 13 | &:hover { 14 | @include shadow(hover); 15 | } 16 | 17 | .card-header, 18 | .card-footer { 19 | @include color('background-color', 'white-dark'); 20 | @include color('border-color', 'muted-light'); 21 | padding: 0.75rem 1.25rem; 22 | } 23 | 24 | .card-header { 25 | border-bottom-style: solid; 26 | border-bottom-width: 2px; 27 | } 28 | 29 | .card-footer { 30 | border-top-style: solid; 31 | border-top-width: 2px; 32 | } 33 | 34 | .card-body { 35 | flex: 1 1 auto; 36 | padding: 1.25rem; 37 | 38 | .card-title, 39 | h4 { 40 | margin-bottom: 0.5rem; 41 | margin-top: 0; 42 | } 43 | 44 | .card-subtitle, 45 | h5 { 46 | color: $secondary; 47 | margin-bottom: 0.5rem; 48 | margin-top: 0; 49 | } 50 | 51 | .card-text, 52 | p { 53 | margin-bottom: 1rem; 54 | margin-top: 0; 55 | } 56 | 57 | .card-link + .card-link, 58 | a + a { 59 | margin-left: 1.25rem; 60 | } 61 | } 62 | 63 | .image-top, 64 | .image-bottom, 65 | img { 66 | border: 0; 67 | border-radius: 0; 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /docs/content/about.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: About 3 | slug: about 4 | menu: main 5 | weight: -90 6 | --- 7 | 8 | PaperCSS was originally made by [@rhyneav](https://github.com/rhyneav) to be something different than the typical mODerN STylEs and clean pages found in every other CSS framework. It was built with LESS and deployed on a single index.html page before being open sourced. It has since evolved; The CSS source has been rewritten in SCSS and the documentation is now built with Hugo (all thanks to some [wonderful contributors](https://github.com/papercss/papercss/graphs/contributors)). In addition to the original creator, it is maintained by [@Fraham](https://github.com/Fraham) and [@TotomInc](https://github.com/TotomInc). 9 | 10 | 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. 11 | 12 | Feel free to use it for wireframes, webapps, blogs, or whatever else you can think of! It is licensed under the [ISC License](https://github.com/papercss/papercss/blob/master/LICENSE.md), so use it wherever you want to. 13 | 14 | If you are new to Git or SCSS, this would be a great project to get your feet wet with. I'd be happy to help walk you through the pull request process. Check out the [Git repo](https://github.com/papercss/papercss) for more info! 15 | -------------------------------------------------------------------------------- /docs/content/docs/utilities/dark-mode.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Dark Mode 3 | description: PaperCSS Dark Mode 4 | --- 5 | 6 | As of version `1.8.0`, PaperCSS supports a dark mode of the framework. Just add the `.dark` class to your `html` tag! 7 | 8 | #### Examples 9 | 10 | Here's what some of the components look like: 11 | 12 |
13 | 14 | 15 |
16 | 17 | 20 | 21 |
22 |
23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 |
#NamePositionLocation
1Bob DylanMusicianCalifornia, USA
2Eric ClaptonMusicianOhio, USA
3Daniel KahnemanPsychologistCalifornia, USA
55 | 56 | 60 | 61 | #### Code 62 | 63 | ```html 64 | 65 | Dark mode styles are automatically applied with the dark class! 66 | 67 | ``` 68 | -------------------------------------------------------------------------------- /docs/content/docs/components/popovers.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Popovers 3 | description: PaperCSS Popovers 4 | --- 5 | ### Basic usage 6 | 7 | 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. 8 | 9 |
10 |
11 |

Popover left position

12 |
13 |
14 |

Popover top position

15 |
16 |
17 |

Popover bottom position

18 |
19 |
20 |

Popover right position

21 |
22 |
23 | 24 | #### Code: 25 | 26 | ```html 27 |

Popover left position

28 |

Popover top position

29 |

Popover bottom position

30 |

Popover right position

31 | ``` 32 | 33 | But you can also popover on pretty much any element you want, it can be on a button, on a table cell, ... 34 | 35 |
36 |
37 | 38 |
39 |
40 | 41 | #### Code: 42 | 43 | ```html 44 | 45 | ``` 46 | 47 | 48 | -------------------------------------------------------------------------------- /docs/content/docs/utilities/colors.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Colors 3 | description: PaperCSS Colors 4 | --- 5 | ### Text 6 | 7 |

Text primary

8 |

Text secondary

9 |

Text success

10 |

Text warning

11 |

Text danger

12 |

Text muted

13 | 14 | #### Code: 15 | 16 | ```html 17 |

Text primary

18 |

Text secondary

19 |

Text success

20 |

Text warning

21 |

Text danger

22 |

Text muted

23 | ``` 24 | 25 | ### Backgrounds 26 | 27 |
28 |
Background primary
29 |
Background secondary
30 |
Background success
31 |
Background warning
32 |
Background danger
33 |
34 | 35 | #### Code: 36 | 37 | ```html 38 |
39 |
Background primary
40 |
Background secondary
41 |
Background success
42 |
Background warning
43 |
Background danger
44 |
45 | ``` 46 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "papercss", 3 | "version": "1.9.1", 4 | "description": "The less formal CSS framework.", 5 | "main": "dist/paper.css", 6 | "scripts": { 7 | "build": "npm run css:build && npm run hugo:build", 8 | "css:build": "node ./build/build.js", 9 | "dev": "concurrently --kill-others \"npm run dev:hot-reload\" \"npm run hugo:serve\"", 10 | "dev:hot-reload": "node ./build/hot-reload.js", 11 | "hugo:build": "hugo -D --source=docs", 12 | "hugo:serve": "hugo server --source=docs --disableFastRender", 13 | "lint": "npm run stylelint", 14 | "start": "npm run hugo:serve", 15 | "stylelint": "stylelint src/**/*.scss" 16 | }, 17 | "repository": { 18 | "type": "git", 19 | "url": "git+https://github.com/papercss/papercss.git" 20 | }, 21 | "author": "Rhyne Vlaservich ", 22 | "license": "ISC", 23 | "bugs": { 24 | "url": "https://github.com/papercss/papercss/issues" 25 | }, 26 | "homepage": "https://www.getpapercss.com", 27 | "dependencies": {}, 28 | "devDependencies": { 29 | "autoprefixer": "^9.8.6", 30 | "chai": "^4.1.2", 31 | "chalk": "^4.1.0", 32 | "chokidar": "^3.4.2", 33 | "concurrently": "^5.3.0", 34 | "cssnano": "^4.1.10", 35 | "hugo-bin": "^0.62.3", 36 | "postcss": "^7.0.32", 37 | "pre-commit": "^1.2.2", 38 | "rimraf": "^3.0.2", 39 | "sass": "^1.26.10", 40 | "stylelint": "^13.7.2", 41 | "stylelint-config-sass-guidelines": "^7.1.0", 42 | "stylelint-config-standard": "^20.0.0", 43 | "stylelint-order": "^4.1.0", 44 | "stylelint-scss": "^3.18.0", 45 | "write": "^2.0.0" 46 | }, 47 | "pre-commit": [ 48 | "stylelint" 49 | ] 50 | } 51 | -------------------------------------------------------------------------------- /src/layout/_flexbox.scss: -------------------------------------------------------------------------------- 1 | $number-columns: 12; 2 | 3 | @mixin create-flex-classes($colName, $breakpoint: 0) { 4 | @include resp($min: $breakpoint) { 5 | @for $i from 1 through $number-columns { 6 | .#{$colName}-#{$i} { 7 | flex: 0 0 $i * 100% / $number-columns; 8 | max-width: $i * 100% / $number-columns; 9 | } 10 | } 11 | } 12 | } 13 | 14 | .row { 15 | display: flex; 16 | flex-flow: row wrap; 17 | margin-bottom: 1rem; 18 | margin-left: auto; 19 | margin-right: auto; 20 | 21 | &.flex-right { 22 | justify-content: flex-end; 23 | } 24 | 25 | &.flex-center { 26 | justify-content: center; 27 | } 28 | 29 | &.flex-edges { 30 | justify-content: space-between; 31 | } 32 | 33 | &.flex-spaces { 34 | justify-content: space-around; 35 | } 36 | 37 | &.flex-top { 38 | align-items: flex-start; 39 | } 40 | 41 | &.flex-middle { 42 | align-items: center; 43 | } 44 | 45 | &.flex-bottom { 46 | align-items: flex-end; 47 | } 48 | } 49 | 50 | .col { 51 | padding: 1rem; 52 | 53 | @include resp(sm) { 54 | @include col-size(100%); 55 | } 56 | } 57 | 58 | .col-fill { 59 | flex: 1 1 0; 60 | width: auto; 61 | } 62 | 63 | @include create-flex-classes(col); 64 | @include create-flex-classes(xs, $xsmall-screen); 65 | @include create-flex-classes(sm, $small-screen); 66 | @include create-flex-classes(md, $medium-screen); 67 | @include create-flex-classes(lg, $large-screen); 68 | 69 | .align-top { 70 | align-self: flex-start; 71 | } 72 | 73 | .align-middle { 74 | align-self: center; 75 | } 76 | 77 | .align-bottom { 78 | align-self: flex-end; 79 | } 80 | 81 | .container { 82 | margin: 0 auto; 83 | max-width: 960px; 84 | position: relative; 85 | width: 100%; 86 | 87 | @include resp(md) { 88 | width: 85%; 89 | } 90 | @include resp(xs) { 91 | width: 90%; 92 | } 93 | } 94 | -------------------------------------------------------------------------------- /docs/content/docs/components/articles.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Articles 3 | description: PaperCSS Articles 4 | --- 5 |
6 |

7 | Article Title 8 |

9 |

10 | Written by Super User on 24 November 2017. Posted in Blog 11 |

12 |

13 | 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. 14 |

15 |

16 | 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? 17 |

18 |

19 | 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? 20 |

21 | 22 |
23 | 24 | 25 |
26 |
27 | 28 | #### Code: 29 | 30 | ```html 31 |
32 |

Article Title

33 |

Written by Super User

34 |

Lorem...

35 |

Lorem...

36 | 37 |
38 | 39 | 40 |
41 |
42 | ``` 43 | -------------------------------------------------------------------------------- /src/components/_popovers.scss: -------------------------------------------------------------------------------- 1 | // Core popovers 2 | [popover-top], 3 | [popover-right], 4 | [popover-bottom], 5 | [popover-left] { 6 | margin: 24px; 7 | position: relative; 8 | 9 | // Popover hover trigger 10 | &:hover { 11 | &::after { 12 | opacity: 1; 13 | transition: opacity 0.2s ease-out; 14 | } 15 | } 16 | 17 | // Creating popover::after element 18 | &::after { 19 | @include border-style(); 20 | @include transition(opacity); 21 | @include color('background-color', 'light-dark'); 22 | @include color('border-color', 'light-dark'); 23 | @include color('color', 'primary-inverse'); 24 | border-style: solid; 25 | border-width: 2px; 26 | font-size: 0.7em; 27 | left: 50%; 28 | min-width: 80px; 29 | opacity: 0; 30 | padding: 4px 2px; 31 | position: absolute; 32 | text-align: center; 33 | top: -6px; 34 | transform: translateX(-50%) translateY(-100%); 35 | } 36 | } 37 | 38 | // Popover positioning: left, right, top, bottom 39 | [popover-left] { 40 | &::before { 41 | left: 0; 42 | margin-left: -12px; 43 | top: 50%; 44 | transform: translateY(-50%) rotate(-90deg); 45 | } 46 | 47 | &::after { 48 | content: attr(popover-left); 49 | left: 0; 50 | margin-left: -8px; 51 | top: 50%; 52 | transform: translateX(-100%) translateY(-50%); 53 | } 54 | } 55 | 56 | [popover-right] { 57 | &::before { 58 | left: 100%; 59 | margin-left: 1px; 60 | top: 50%; 61 | transform: translatey(-50%) rotate(90deg); 62 | } 63 | 64 | &::after { 65 | content: attr(popover-right); 66 | left: 100%; 67 | margin-left: 8px; 68 | top: 50%; 69 | transform: translateX(0%) translateY(-50%); 70 | } 71 | } 72 | 73 | [popover-top] { 74 | &::before { 75 | left: 50%; 76 | } 77 | 78 | &::after { 79 | content: attr(popover-top); 80 | left: 50%; 81 | } 82 | } 83 | 84 | [popover-bottom] { 85 | &::before { 86 | margin-top: 8px; 87 | top: 100%; 88 | transform: translateX(-50%) translatey(-100%) rotate(-180deg); 89 | } 90 | 91 | &::after { 92 | content: attr(popover-bottom); 93 | margin-top: 8px; 94 | top: 100%; 95 | transform: translateX(-50%) translateY(0%); 96 | } 97 | } 98 | -------------------------------------------------------------------------------- /docs/content/docs/layout/container.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Container 3 | description: PaperCSS Container 4 | --- 5 | 6 | The container is usually at the root of the HTML and holds all of the content in a fixed size. PaperCSS supports a few 7 | different sizes to make setting your content within a certain max-width easy. Don't forget to add the `.paper` class to 8 | give you site some extra paper flair! 9 | 10 |
11 |

Responsive Container!

12 |

The default

13 |

14 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus 15 | erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor. 16 |

17 |
18 | 19 |
20 |

Large Container!

21 |

Using container-lg

22 |

23 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus 24 | erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor. 25 |

26 |
27 | 28 |
29 |

Medium Container!

30 |

Using container-md

31 |

32 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus 33 | erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor. 34 |

35 |
36 | 37 |
38 |

Small Container!

39 |

Using container-sm

40 |

41 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus 42 | erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor. 43 |

44 |
45 | 46 |
47 |

Extra Small Container!

48 |

Using container-xs

49 |

50 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus 51 | erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor. 52 |

53 |
54 | -------------------------------------------------------------------------------- /docs/content/_index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Get PaperCSS 3 | menu: main 4 | weight: -270 5 | --- 6 | 7 | #### Download 8 | 9 | Download the latest version (1.9.1) using either of the links below. Or 10 | download an older release via GitHub. 11 | 12 |
13 | CSS File 14 | Minified CSS File 15 | GitHub Releases 16 |
17 | 18 | #### NPM 19 | 20 | PaperCSS is available on NPM, current version 1.9.1. Install with npm install papercss --save and find the CSS in: 21 | 22 | - node_modules/papercss/dist/paper.css 23 | - node_modules/papercss/dist/paper.min.css 24 | 25 | #### CDN 26 | 27 | Don't want to download it? That's cool. You can just link to PaperCSS via 28 | [unpkg's CDN](https://unpkg.com/#/). You can use either: 29 | 30 | - [https://unpkg.com/papercss@1.9.1/dist/paper.css](https://unpkg.com/papercss@1.9.1/dist/paper.css) 31 | - [https://unpkg.com/papercss@1.9.1/dist/paper.min.css](https://unpkg.com/papercss@1.9.1/dist/paper.min.css) 32 | 33 | Here's a quick snippet to get started with PaperCSS: 34 | 35 | ```html 36 | 37 | 38 | 39 | 40 | 41 | 42 | 46 | Document 47 | 48 | 49 |
50 |

Some Fresh Title

51 |

This is where some content would go.

52 |
53 | 54 | 55 | ``` 56 | 57 | #### Build it Yourself 58 | 59 | If you'd rather customize things, you can build the CSS yourself via the git repo 60 | 61 | ```sh 62 | git clone https://github.com/papercss/papercss.git 63 | cd papercss 64 | npm install 65 | npm run build 66 | ``` 67 | 68 | Grab the CSS out of the /dist folder created 69 | 70 | You can also go into src/core/\_config.scss before building to change around the global styles of your new CSS. 71 | -------------------------------------------------------------------------------- /docs/content/docs/components/buttons.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Buttons 3 | description: PaperCSS Buttons 4 | --- 5 | 6 | Inspired by [Imperfect Buttons](https://codepen.io/tmrDevelops/pen/VeRvKX) 7 | 8 | 9 | 10 | 11 | Link 12 | 13 |
14 |
15 | 16 |
17 |
18 | 19 | 20 | 21 | 22 | #### Code: 23 | 24 | ```html 25 |

Inspired by Imperfect Buttons

26 | 27 | 28 | 29 | Link 30 |
31 |
32 | 33 |
34 |
35 | 36 | 37 | ``` 38 | 39 | ### Colors 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | #### Code: 48 | 49 | ```html 50 | 51 | 52 | 53 | 54 | 55 | ``` 56 | 57 | ### Outline colors 58 | 59 | 60 | 61 | 62 | 63 | Danger 64 | 65 | #### Code: 66 | 67 | ```html 68 | 69 | 70 | 71 | 72 | Danger 73 | ``` -------------------------------------------------------------------------------- /docs/content/docs/content/lists.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Lists 3 | description: PaperCSS Lists 4 | --- 5 | 6 | ### Ordered Lists 7 | 8 |
    9 |
  1. Do this
    2. 10 |
  2. Then this
    3. 11 |
  3. Finally this
    4. 12 |
  4. Then we'll go one deeper 13 |
      14 |
    1. Dillon
      2. 15 |
    2. Francis 16 |
        17 |
      1. What if we went...
        2. 18 |
      2. One more deeper? 19 |
          20 |
        1. DJ
          2. 21 |
        2. Hanzel 22 |
            23 |
          1. Five levels should be enough
            2. 24 |
          2. Right?
            3. 25 |
          26 |
          3. 27 |
        28 |
        3. 29 |
      30 |
      3. 31 |
    32 |
    5. 33 |
  5. But don't forget this
    6. 34 |
35 | 36 | ### Unordered Lists 37 | 38 |
    39 |
  • Let's try this
    • 40 |
  • Let's try this again 41 |
      42 |
    • And now we are nested
      • 43 |
    • Pretty cool? 44 |
        45 |
      • The list items are just text
        • 46 |
      • From this font 47 |
          48 |
        • We'll keep going
          • 49 |
        • Until we hit 50 |
            51 |
          • LEVEL 5
            • 52 |
          53 |
          • 54 |
        55 |
        • 56 |
      57 |
      • 58 |
    59 |
    • 60 |
  • And now we're are the top!
    • 61 |
62 | 63 | ### Inline List 64 | 65 |
    66 |
  • Item 1
    • 67 |
  • Item 2
    • 68 |
  • Item 3
    • 69 |
  • Item 4
    • 70 |
71 | 72 | #### Codes: 73 | 74 | ```html 75 |
    76 |
  1. Do this
    2. 77 |
  2. Then this
    3. 78 |
  3. Finally this
    4. 79 |
  4. Then we'll go one deeper 80 |
      81 |
    1. Dillon
      2. 82 |
    2. Francis 83 |
        84 |
      1. What if we went...
        2. 85 |
      2. One more deeper? 86 |
          87 |
        1. DJ
          2. 88 |
        2. Hanzel 89 |
            90 |
          1. Five levels should be enough
            2. 91 |
          2. Right?
            3. 92 |
          93 |
          3. 94 |
        95 |
        3. 96 |
      97 |
      3. 98 |
    99 |
    5. 100 |
  5. But don't forget this
    6. 101 |
102 | 103 | 104 | 105 | 106 |
    ...
107 | ``` 108 | -------------------------------------------------------------------------------- /src/components/_utilities.scss: -------------------------------------------------------------------------------- 1 | $base: 1rem; 2 | $large: 2rem; 3 | $small: 0.5rem; 4 | 5 | .margin { 6 | margin: $base; 7 | 8 | &-top { 9 | margin-top: $base; 10 | 11 | &-large { 12 | margin-top: $large; 13 | } 14 | 15 | &-small { 16 | margin-top: $small; 17 | } 18 | 19 | &-none { 20 | margin-top: 0; 21 | } 22 | } 23 | 24 | &-right { 25 | margin-right: $base; 26 | 27 | &-large { 28 | margin-right: $large; 29 | } 30 | 31 | &-small { 32 | margin-right: $small; 33 | } 34 | 35 | &-none { 36 | margin-right: 0; 37 | } 38 | } 39 | 40 | &-bottom { 41 | margin-bottom: $base; 42 | 43 | &-large { 44 | margin-bottom: $large; 45 | } 46 | 47 | &-small { 48 | margin-bottom: $small; 49 | } 50 | 51 | &-none { 52 | margin-bottom: 0; 53 | } 54 | } 55 | 56 | &-left { 57 | margin-left: $base; 58 | 59 | &-large { 60 | margin-left: $large; 61 | } 62 | 63 | &-small { 64 | margin-left: $small; 65 | } 66 | 67 | &-none { 68 | margin-left: 0; 69 | } 70 | } 71 | 72 | &-large { 73 | margin: $large; 74 | } 75 | 76 | &-small { 77 | margin: $small; 78 | } 79 | 80 | &-none { 81 | margin: 0; 82 | } 83 | } 84 | 85 | .padding { 86 | padding: $base; 87 | 88 | &-top { 89 | padding-top: $base; 90 | 91 | &-large { 92 | padding-top: $large; 93 | } 94 | 95 | &-small { 96 | padding-top: $small; 97 | } 98 | 99 | &-none { 100 | padding-top: 0; 101 | } 102 | } 103 | 104 | &-right { 105 | padding-right: $base; 106 | 107 | &-large { 108 | padding-right: $large; 109 | } 110 | 111 | &-small { 112 | padding-right: $small; 113 | } 114 | 115 | &-none { 116 | padding-right: 0; 117 | } 118 | } 119 | 120 | &-bottom { 121 | padding-bottom: $base; 122 | 123 | &-large { 124 | padding-bottom: $large; 125 | } 126 | 127 | &-small { 128 | padding-bottom: $small; 129 | } 130 | 131 | &-none { 132 | padding-bottom: 0; 133 | } 134 | } 135 | 136 | &-left { 137 | padding-left: $base; 138 | 139 | &-large { 140 | padding-left: $large; 141 | } 142 | 143 | &-small { 144 | padding-left: $small; 145 | } 146 | 147 | &-none { 148 | padding-left: 0; 149 | } 150 | } 151 | 152 | &-large { 153 | padding: $large; 154 | } 155 | 156 | &-small { 157 | padding: $small; 158 | } 159 | 160 | &-none { 161 | padding: 0; 162 | } 163 | } 164 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ## Contributing 2 | 3 | Check out what's been added but not yet released at [develop.getpapercss.com](https://develop.getpapercss.com) 4 | 5 | This project is open source and contributions are very welcomed. It is also as beginner friendly as possible, so don't be afraid to jump in if you've never contributed to any Git project before! Feel free to reach out if you are new and need help with the process. 6 | 7 | Please before sending a PR, make sure you are properly using the `.editorconfig` file with your IDE. If your IDE doesn't natively support `editorconfig` files, you can use an extension/package/module. For example in Atom there is the [editorconfig package](https://atom.io/packages/editorconfig), as well for [Sublime Text](https://github.com/sindresorhus/editorconfig-sublime), [VS Code](https://github.com/editorconfig/editorconfig-vscode), [Vim](https://github.com/editorconfig/editorconfig-vim), ... 8 | 9 | Once you are ready to contribute, here the workflow you should follow: 10 | 11 | - Fork the repo then clone it: `git clone git@github.com:[your_username]/papercss.git` 12 | - `cd papercss` then install dependencies: `npm install` 13 | - Change your current branch to `develop`: `git checkout develop` 14 | - Create your new branch where you will write your code: `git checkout -b feature-thing develop`. Please be sure to prepend your new feature branch with "feature-" 15 | - Write some code! 16 | - To build the scss (in `src/`) to css (in `dist/`), run `npm run css:build`. Note: you will need to re-run this command to include the latest changes in `src/`. 17 | - To preview your changes, you can run `npm start`. This will start a `localhost` server. 18 | - Check to make sure your code is following style rules with `npm run stylelint` 19 | - Once done commit and push your changes to your fork. The linter is also run as a pre-commit hook. 20 | - Open a pull request on the origin papercss repo. Be sure to include any pictures and/or details on what you have done; it will help reviewers **a lot**! 21 | - When your changes are approved, they will be merged into the `develop` branch, which will finally be merged into the `master` branch when we reach a milestone regarding features and bug fixes. Check out [Vincent Driessen's blog post](http://nvie.com/posts/a-successful-git-branching-model/), [GitFlow](https://datasift.github.io/gitflow/IntroducingGitFlow.html), or [#27](https://github.com/rhyneav/papercss/issues/27) for more details on how this works. 22 | 23 | Note: If you have a hotfix (usually typos and minor documentation tweaks), create your hotfix branch off of the master branch instead of develop: `git checkout -b hotfix-thing master`. The changes will be merged into both the master and develop to keep the branches consistent. -------------------------------------------------------------------------------- /docs/content/docs/content/images.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Images 3 | description: PaperCSS Images 4 | --- 5 | ### Responsive 6 | 7 | Images by default are responsive 8 | 9 | Random Unsplash 10 | 11 | #### Code: 12 | 13 | ```html 14 | Random Unsplash 15 | ``` 16 | 17 | ### Float 18 | 19 | You can also float responsive images to fit neatly with your text 20 | 21 | Smaller Unsplash 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. 22 | Smallerer Unsplash 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. 23 | 24 | #### Code: 25 | 26 | ```html 27 |

28 | 29 | Lorem ipsum dolor....... 30 | 31 | Aenean mauris tellus...... 32 |

33 | ``` 34 | 35 | ### No Responsive & No Borders 36 | 37 | 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`. 38 | 39 | Not responsive Unsplash 40 | 41 | #### Code: 42 | 43 | ```html 44 | 45 | ``` 46 | -------------------------------------------------------------------------------- /src/components/_modals.scss: -------------------------------------------------------------------------------- 1 | .modal { 2 | @include transition(opacity); 3 | background: rgba(#000, 0.6); 4 | bottom: 0; 5 | flex: 1 1 auto; 6 | left: 0; 7 | opacity: 0; 8 | position: fixed; 9 | right: 0; 10 | text-align: left; 11 | top: 0; 12 | visibility: hidden; 13 | word-wrap: break-word; 14 | z-index: 200; 15 | 16 | // modal background 17 | &-bg { 18 | bottom: 0; 19 | cursor: pointer; 20 | left: 0; 21 | position: absolute; 22 | right: 0; 23 | top: 0; 24 | } 25 | 26 | .modal-body { 27 | @include color('color', 'primary'); 28 | @include color('background', 'main-background'); 29 | @include color('border-color', 'muted-light'); 30 | @include transition; 31 | backface-visibility: hidden; 32 | 33 | border: 2px solid; 34 | left: 50%; 35 | padding: 1.25rem; 36 | position: absolute; 37 | top: 0; 38 | transform: translate(-50%, -50%); 39 | 40 | @include resp(sm) { 41 | box-sizing: border-box; 42 | width: 90%; 43 | } 44 | } 45 | 46 | .btn-close { 47 | @include color('color', 'primary-light'); 48 | @include transition; 49 | cursor: pointer; 50 | font-size: 30px; 51 | height: 1.1rem; 52 | position: absolute; 53 | right: 1rem; 54 | text-decoration: none; 55 | top: 1rem; 56 | width: 1.1rem; 57 | 58 | &:hover, 59 | &:active, 60 | &:focus { 61 | @include color('color', 'primary'); 62 | } 63 | } 64 | 65 | h4, 66 | .modal-title { 67 | margin-bottom: 0.5rem; 68 | margin-top: 0; 69 | } 70 | 71 | h5, 72 | .modal-subtitle { 73 | @include color('color', 'secondary'); 74 | margin-bottom: 0.5rem; 75 | margin-top: 0; 76 | } 77 | 78 | p, 79 | .modal-text { 80 | margin-bottom: 1rem; 81 | margin-top: 0; 82 | } 83 | 84 | .modal-link+.modal-link, 85 | a+a { 86 | margin-left: 1.25rem; 87 | } 88 | 89 | .paper-btn { 90 | @include color('background', 'main-background'); 91 | display: inline-block; 92 | text-decoration: none; 93 | } 94 | 95 | .modal-link, 96 | a { 97 | background-image: linear-gradient(5deg, transparent 65%, $secondary 80%, transparent 90%), linear-gradient(165deg, transparent 5%, $secondary 15%, transparent 25%), linear-gradient(165deg, transparent 45%, $secondary 55%, transparent 65%), linear-gradient(15deg, transparent 25%, $secondary 35%, transparent 50%); 98 | background-position: 0 90%; 99 | background-repeat: repeat-x; 100 | background-size: 4px 3px; 101 | cursor: pointer; 102 | text-decoration: none; 103 | 104 | &:hover, 105 | &:focus, 106 | &:visited { 107 | @include color('color', 'primary'); 108 | text-decoration: none; 109 | } 110 | } 111 | } 112 | 113 | .modal-state { 114 | display: none; 115 | 116 | &:checked+.modal { 117 | opacity: 1; 118 | visibility: visible; 119 | 120 | .modal-body { 121 | top: 50%; 122 | } 123 | } 124 | } 125 | -------------------------------------------------------------------------------- /docs/content/docs/content/tables.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Tables 3 | description: PaperCSS Tables 4 | --- 5 | ### Regular 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |
#NamePositionLocation
1Bob DylanMusicianCalifornia, USA
2Eric ClaptonMusicianOhio, USA
3Daniel KahnemanPsychologistCalifornia, USA
37 | 38 | ### Hover 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 |
#NamePositionLocation
1Bob DylanMusicianCalifornia, USA
2Eric ClaptonMusicianOhio, USA
3Daniel KahnemanPsychologistCalifornia, USA
70 | 71 | ### Alternating 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 |
#NamePositionLocation
1Bob DylanMusicianCalifornia, USA
2Eric ClaptonMusicianOhio, USA
3Daniel KahnemanPsychologistCalifornia, USA
103 | 104 | #### Code: 105 | ```html 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 |
#NamePositionLocation
1Bob DylanMusicianCalifornia, USA
2Eric ClaptonMusicianOhio, USA
3Daniel KahnemanPsychologistCalifornia, USA
136 | 137 | 138 | 139 |
140 | ``` 141 | -------------------------------------------------------------------------------- /docs/content/docs/components/modals.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Modals 3 | description: PaperCSS Modals 4 | --- 5 | ### Simple modal example 6 | 7 | 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. 8 | 9 |
10 | 11 |
12 | 13 |
14 | 15 |
16 | 17 |

Modal Title

18 |
Modal Subtitle
19 |

This is an example of modal which is implemented with pure CSS! :D

20 | 21 |
22 |
23 | 24 | #### Code: 25 | 26 | ```html 27 |
28 | 29 |
30 | 31 |
32 | 33 |
34 | 35 |

Modal Title

36 |
Modal Subtitle
37 |

This is an example of modal which is implemented with pure CSS! :D

38 | 39 |
40 |
41 | ``` 42 | 43 | ### Modal with title, text and links 44 | 45 |
46 | 47 |
48 | 49 |
50 | 51 |
52 | 53 |

Modal Title

54 |
Modal Subtitle
55 |

This is another example of modal which is implemented with pure CSS! :D

56 | Get PaperCSS 57 | 58 |
59 |
60 | 61 | #### Code: 62 | 63 | ```html 64 |
65 | 66 |
67 | 68 |
69 | 70 |
71 | 72 |

Modal Title

73 |
Modal Subtitle
74 |

This is another example of modal which is implemented with pure CSS! :D

75 | Get PaperCSS 76 | 77 |
78 |
79 | ``` 80 | -------------------------------------------------------------------------------- /docs/content/docs/components/alerts.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Alerts 3 | description: PaperCSS Alerts 4 | --- 5 | ### Simple alerts 6 | 7 |
8 |
9 | Alert-primary 10 |
11 |
12 | Alert-secondary 13 |
14 |
15 | Alert-success 16 |
17 |
18 | Alert-warning 19 |
20 |
21 | Alert-danger 22 |
23 |
24 | 25 | #### Code: 26 | 27 | ```html 28 |
29 |
Alert-primary
30 |
Alert-secondary
31 |
Alert-success
32 |
Alert-warning
33 |
Alert-danger
34 |
35 | ``` 36 | 37 | ### Dismissible alerts 38 | 39 |
40 | 41 |
42 | Alert-primary 43 | 44 |
45 | 46 |
47 | Alert-secondary 48 | 49 |
50 | 51 |
52 | Alert-success 53 | 54 |
55 | 56 |
57 | Alert-warning 58 | 59 |
60 | 61 |
62 | Alert-danger 63 | 64 |
65 |
66 | 67 | #### Code: 68 | 69 | ```html 70 |
71 | 72 |
73 | Alert-primary 74 | 75 |
76 | 77 |
78 | Alert-secondary 79 | 80 |
81 | 82 |
83 | Alert-success 84 | 85 |
86 | 87 |
88 | Alert-warning 89 | 90 |
91 | 92 |
93 | Alert-danger 94 | 95 |
96 |
97 | ``` 98 | -------------------------------------------------------------------------------- /src/components/_buttons.scss: -------------------------------------------------------------------------------- 1 | button, 2 | .paper-btn, 3 | [type='button'] { 4 | @include border-style(); 5 | @include shadow(); 6 | @include transition(); 7 | @include color('color', 'primary'); 8 | @include color('border-color', 'primary'); 9 | @include color('background-color', 'main-background'); 10 | align-self: center; 11 | background-image: none; 12 | border-style: solid; 13 | border-width: 2px; 14 | cursor: pointer; 15 | display: inline-block; 16 | font-size: 1rem; 17 | outline: none; 18 | padding: 0.75rem; 19 | 20 | @include resp(520px) { 21 | display: inline-block; 22 | margin: 0 auto; 23 | margin-bottom: 1rem; 24 | text-align: center; 25 | } 26 | 27 | &.btn-large { 28 | @include shadow(large); 29 | font-size: 2rem; 30 | padding: 1rem; 31 | } 32 | 33 | &.btn-small { 34 | @include shadow(small); 35 | font-size: 0.75rem; 36 | padding: 0.5rem; 37 | } 38 | 39 | &.btn-block { 40 | display: block; 41 | width: 100%; 42 | } 43 | 44 | &:hover { 45 | @include shadow(hover); 46 | } 47 | 48 | &:focus { 49 | @include color('border-color', 'secondary'); 50 | border-style: solid; 51 | border-width: 2px; 52 | box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, 0.3); 53 | } 54 | 55 | &:active { 56 | border-color: hsla(0, 0%, 0%, 0.2); 57 | transition: none; 58 | } 59 | 60 | &.disabled, 61 | &[disabled] { 62 | cursor: not-allowed; 63 | opacity: 0.5; 64 | } 65 | } 66 | 67 | a { 68 | @include color('color', 'secondary'); 69 | background-image: linear-gradient(5deg, transparent 65%, $secondary 80%, transparent 90%), linear-gradient(165deg, transparent 5%, $secondary 15%, transparent 25%), linear-gradient(165deg, transparent 45%, $secondary 55%, transparent 65%), linear-gradient(15deg, transparent 25%, $secondary 35%, transparent 50%); 70 | background-position: 0 90%; 71 | background-repeat: repeat-x; 72 | background-size: 4px 3px; 73 | text-decoration: none; 74 | 75 | &:visited { 76 | @include color('color', 'primary'); 77 | text-decoration: none; 78 | } 79 | } 80 | 81 | @each $colorName, $color, $color-light, $color-text in $colors { 82 | button.btn-#{$colorName}, 83 | .paper-btn.btn-#{$colorName}, 84 | [type='button'].btn-#{$colorName} { 85 | @include color('color', #{$colorName}-text); 86 | @include color('background-color', #{$colorName}-light); 87 | @include color('border-color', #{$colorName}); 88 | 89 | &:hover { 90 | &:active { 91 | background-color: darken($color-light, 10%); 92 | } 93 | } 94 | } 95 | } 96 | 97 | @each $colorName, $color, $color-light, $color-text in $colors { 98 | button.btn-#{$colorName}-outline, 99 | .paper-btn.btn-#{$colorName}-outline, 100 | [type='button'].btn-#{$colorName}-outline { 101 | @include color('background-color', main-background); 102 | @include color('color', #{$colorName}); 103 | @include color('border-color', #{$colorName}); 104 | 105 | &:hover { 106 | background-color: $color-light; 107 | } 108 | 109 | &:hover { 110 | &:active { 111 | background-color: darken($color-light, 10%); 112 | } 113 | } 114 | } 115 | } 116 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. 6 | 7 | ## Our Standards 8 | 9 | Examples of behavior that contributes to creating a positive environment include: 10 | 11 | * Using welcoming and inclusive language 12 | * Being respectful of differing viewpoints and experiences 13 | * Gracefully accepting constructive criticism 14 | * Focusing on what is best for the community 15 | * Showing empathy towards other community members 16 | 17 | Examples of unacceptable behavior by participants include: 18 | 19 | * The use of sexualized language or imagery and unwelcome sexual attention or advances 20 | * Trolling, insulting/derogatory comments, and personal or political attacks 21 | * Public or private harassment 22 | * Publishing others' private information, such as a physical or electronic address, without explicit permission 23 | * Other conduct which could reasonably be considered inappropriate in a professional setting 24 | 25 | ## Our Responsibilities 26 | 27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. 28 | 29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. 30 | 31 | ## Scope 32 | 33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. 34 | 35 | ## Enforcement 36 | 37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at getpapercss@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. 38 | 39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. 40 | 41 | ## Attribution 42 | 43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version] 44 | 45 | [homepage]: http://contributor-covenant.org 46 | [version]: http://contributor-covenant.org/version/1/4/ 47 | -------------------------------------------------------------------------------- /docs/content/docs/components/navbar.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Navbar 3 | description: PaperCSS Navbar 4 | --- 5 | 6 | 26 | 27 | 47 | 48 | #### Code: 49 | 50 | Add ```.fixed``` to ```