diff --git a/.gitignore b/.gitignore index 18071f9..73a0b0d 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,4 @@ npm-debug.log /dist /tests/node_modules .DS_Store +/public diff --git a/documentation/archetypes/default.md b/documentation/archetypes/default.md new file mode 100644 index 0000000..17a3207 --- /dev/null +++ b/documentation/archetypes/default.md @@ -0,0 +1,5 @@ +--- +title: "{{ replace .TranslationBaseName "-" " " | title }}" +date: {{ .Date }} +draft: true +--- diff --git a/documentation/config.toml b/documentation/config.toml new file mode 100644 index 0000000..c0c5d72 --- /dev/null +++ b/documentation/config.toml @@ -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 diff --git a/documentation/content/_index.md b/documentation/content/_index.md new file mode 100644 index 0000000..734cf99 --- /dev/null +++ b/documentation/content/_index.md @@ -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. + +
+ +#### NPM + +PaperCSS is now available on NPM as of version 1.1.0. Install withnpm
+install papercss --save
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
+
+
+
+
+
+
+
+ This is where some content would go.
+Insprired by Imprefect Buttons
+ + + +Link +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.
+ +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.
+ +This is another example of a card without image. Cards are also meant to be used without images, but with text/links/buttons.
+ First link + Second link +This is another example of a card without image. Cards are also meant to be used without images, but with text/links/buttons.
+ First link + Second link +You can also place image on the bottom of the card.
+ +You can also place image on the bottom of the card.
+ +You can also place image on the bottom of the card.
+ +You can also place image on the bottom of the card.
+ +Popover left position
+Popover top position
+Popover bottom position
+Popover right position
+Popover left position
+Popover top position
+Popover bottom position
+Popover right position
+``` + +But you can also popover on pretty much any element you want, it can be on a button, on a table cell, ... + +`
+
+Print files backwards using tac
+
+To stop a process, hit ctrl + c
+
+
+ function add(x, y) {
+ return x + y;
+ }
+
+
+#### Code:
+
+```html
+Let's make some pretty <code>
+Print files backwards using tac
+To stop a process, hit ctrl + c
+
+ function add(x, y) {
+ return x + y;
+ }
+
+```
diff --git a/documentation/content/docs/content/images.md b/documentation/content/docs/content/images.md
new file mode 100644
index 0000000..ef0ca89
--- /dev/null
+++ b/documentation/content/docs/content/images.md
@@ -0,0 +1,44 @@
+---
+title: Images
+---
+### Responsive
+
+Images by default are responsive
+
+
+
+#### Code:
+
+```html
+
+```
+
+### Float
+
+You can also float responsive images to fit neatly with your text
+
+ 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.
+ 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
+
+
+ Lorem ipsum dolor.......
+
+ Aenean mauris tellus......
+
+```
+
+### 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`.
+
+
+
+#### Code:
+
+```html
+
+```
diff --git a/documentation/content/docs/content/lists.md b/documentation/content/docs/content/lists.md
new file mode 100644
index 0000000..7260682
--- /dev/null
+++ b/documentation/content/docs/content/lists.md
@@ -0,0 +1,82 @@
+---
+title: Lists
+---
+
+### Ordered Lists
+
+
+ - Do this
+ - Then this
+ - Finally this
+ - Then we'll go one deeper
+
+ - Dillon
+ - Francis
+
+ - What if we went...
+ - One more deeper?
+
+ - DJ
+ - Hanzel
+
+ - Five levels should be enough
+ - Right?
+
+
+
+
+ - But don't forget this
+
+
+### Unordered Lists
+
+
+ - Let's try this
+ - Let's try this again
+
+ - And now we are nested
+ - Pretty cool?
+
+ - The list items are just text
+ - From this font
+
+ - We'll keep going
+ - Until we hit
+
+ - LEVEL 5
+
+
+
+
+ - And now we're are the top!
+
+
+#### Codes:
+
+```html
+
+ - Do this
+ - Then this
+ - Finally this
+ - Then we'll go one deeper
+
+ - Dillon
+ - Francis
+
+ - What if we went...
+ - One more deeper?
+
+ - DJ
+ - Hanzel
+
+ - Five levels should be enough
+ - Right?
+
+
+
+
+ - But don't forget this
+
+
+
+```
diff --git a/documentation/content/docs/content/tables.md b/documentation/content/docs/content/tables.md
new file mode 100644
index 0000000..52b1d3c
--- /dev/null
+++ b/documentation/content/docs/content/tables.md
@@ -0,0 +1,139 @@
+---
+title: Tables
+---
+### Regular
+
+
+
+
+ #
+ Name
+ Position
+ Location
+
+
+
+
+ 1
+ Bob Dylan
+ Musician
+ California, USA
+
+
+ 2
+ Eric Clapton
+ Musician
+ Ohio, USA
+
+
+ 3
+ Daniel Kahneman
+ Psychologist
+ California, USA
+
+
+
+
+### Hover
+
+
+
+
+ #
+ Name
+ Position
+ Location
+
+
+
+
+ 1
+ Bob Dylan
+ Musician
+ California, USA
+
+
+ 2
+ Eric Clapton
+ Musician
+ Ohio, USA
+
+
+ 3
+ Daniel Kahneman
+ Psychologist
+ California, USA
+
+
+
+
+### Alternating
+
+
+
+
+ #
+ Name
+ Position
+ Location
+
+
+
+
+ 1
+ Bob Dylan
+ Musician
+ California, USA
+
+
+ 2
+ Eric Clapton
+ Musician
+ Ohio, USA
+
+
+ 3
+ Daniel Kahneman
+ Psychologist
+ California, USA
+
+
+
+
+#### Code:
+```html
+
+
+
+ #
+ Name
+ Position
+ Location
+
+
+
+
+ 1
+ Bob Dylan
+ Musician
+ California, USA
+
+
+ 2
+ Eric Clapton
+ Musician
+ Ohio, USA
+
+
+ 3
+ Daniel Kahneman
+ Psychologist
+ California, USA
+
+
+
+
+
+
+
+```
diff --git a/documentation/content/docs/content/typography.md b/documentation/content/docs/content/typography.md
new file mode 100644
index 0000000..bc0bb9c
--- /dev/null
+++ b/documentation/content/docs/content/typography.md
@@ -0,0 +1,36 @@
+---
+title: Typography
+slug: 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
+Heading 1
+Heading 2
+Heading 3
+Heading 4
+Heading 5
+Heading 6
+Lorem ipsum dolor....
+```
diff --git a/documentation/content/docs/layout/_index.md b/documentation/content/docs/layout/_index.md
new file mode 100644
index 0000000..5110e41
--- /dev/null
+++ b/documentation/content/docs/layout/_index.md
@@ -0,0 +1,3 @@
+---
+title: Layout
+---
diff --git a/documentation/content/docs/layout/flexbox.md b/documentation/content/docs/layout/flexbox.md
new file mode 100644
index 0000000..98415a5
--- /dev/null
+++ b/documentation/content/docs/layout/flexbox.md
@@ -0,0 +1,149 @@
+---
+title: Flexbox
+slug: 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.
+
+
+
+ col-4 col
+ col-4 col
+ col-4 col
+
+
+ col-3 col
+ col-9 col
+
+
+ sm-6 md-8 lg-10 col
+ sm-6 md-4 lg-2 col
+
+
+ sm-5 col
+ col-fill col
+ col-fill col
+
+
+ Aligned
+ Left (default)
+
+
+ Aligned
+ Right (flex-right)
+
+
+ Aligned
+ Center (flex-center)
+
+
+ Aligned
+ to edges (flex-edges)
+
+
+ Aligned
+ to be evenly spaced (flex-spaces)
+
+
+ Aligned top
+ Aligned top
+
+ 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.
+
+
+
+ Aligned middle
+ Aligned middle
+
+ 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.
+
+
+
+ Aligned bottom
+ Aligned bottom
+
+ 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.
+
+
+
+ Align bottom
+ Align middle
+ Align top
+
+ 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.
+
+
+
+
+#### Code:
+
+```html
+
+ col-4 col
+ col-4 col
+ col-4 col
+
+
+ col-3 col
+ col-9 col
+
+
+ sm-6 md-8 lg-10 col
+ sm-6 md-4 lg-2 col
+
+
+ sm-5 col
+ col-fill col
+ col-fill col
+
+
+ Aligned
+ Left (default)
+
+
+ Aligned
+ Right (flex-right)
+
+
+ Aligned
+ Center (flex-center)
+
+
+ Aligned
+ to edges (flex-edges)
+
+
+ Aligned
+ to be evenly spaced (flex-spaces)
+
+
+ Aligned top
+
+ 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.
+
+
+
+ Aligned middle
+
+ 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.
+
+
+
+ Aligned bottom
+
+ 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.
+
+
+
+ Align bottom
+ Align middle
+ Align top
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
+
+
+```
diff --git a/documentation/content/docs/utilities/_index.md b/documentation/content/docs/utilities/_index.md
new file mode 100644
index 0000000..85877a5
--- /dev/null
+++ b/documentation/content/docs/utilities/_index.md
@@ -0,0 +1,3 @@
+---
+title: Utilities
+---
diff --git a/documentation/content/docs/utilities/borders.md b/documentation/content/docs/utilities/borders.md
new file mode 100644
index 0000000..4aa5fa9
--- /dev/null
+++ b/documentation/content/docs/utilities/borders.md
@@ -0,0 +1,169 @@
+---
+title: Borders & Shadows
+slug: borders
+---
+### Borders
+
+
+ Default Border
+ Border-2
+ Border-3
+
+
+ Border-4
+ Border-5
+ Border-6
+
+
+#### Code:
+
+```html
+
+ Default Border
+ Border-2
+ Border-3
+
+
+ Border-4
+ Border-5
+ Border-6
+
+```
+
+### Border Colors
+
+
+ Border primary
+ Border secondary
+ Border success
+ Border warning
+ Border danger
+ Border white
+
+
+#### Code:
+
+```html
+
+ Border primary
+ Border secondary
+ Border success
+ Border warning
+ Border danger
+ Border white
+
+
+ Border primary
+ Border secondary
+ Border success
+ Border warning
+ Border danger
+ Border white
+
+```
+
+### 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.
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+#### Code:
+
+```html
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+```
+
+### Border Styles
+
+
+ Dashed
+ Dotted
+ Dashed Thick
+ Dotted Thick
+
+
+#### Code:
+
+```html
+
+ Dashed
+ Dotted
+ Dashed Thick
+ Dotted Thick
+
+```
+
+### Shadows
+
+
+ Large
+ Default
+ Small
+ Hover
+
+
+#### Code:
+
+```html
+
+ Large
+ Default
+ Small
+ Hover
+
+```
+
+### Child Shadows
+
+Use this if you want all children to have a shadow.
+
+
+ Shadow
+ Shadow
+ Shadow
+
+
+#### Code:
+
+```html
+
+ Shadow
+ Shadow
+ Shadow
+
+```
+
+### Child Shadows Hover
+
+Use this if you want all children to have a shadow... that changes on hover
+
+
+ Shadow
+ Shadow
+ Shadow
+
+
+#### Code:
+
+```html
+
+ Shadow
+ Shadow
+ Shadow
+
+```
diff --git a/documentation/content/docs/utilities/colors.md b/documentation/content/docs/utilities/colors.md
new file mode 100644
index 0000000..9582d8a
--- /dev/null
+++ b/documentation/content/docs/utilities/colors.md
@@ -0,0 +1,44 @@
+---
+title: Colors
+---
+### Text
+
+Text primary
+Text secondary
+Text success
+Text warning
+Text danger
+Text muted
+
+#### Code:
+
+```html
+Text primary
+Text secondary
+Text success
+Text warning
+Text danger
+Text muted
+```
+
+### Backgrounds
+
+
+ Background primary
+ Background secondary
+ Background success
+ Background warning
+ Background danger
+
+
+#### Code:
+
+```html
+
+ Background primary
+ Background secondary
+ Background success
+ Background warning
+ Background danger
+
+```
diff --git a/documentation/content/docs/utilities/spacing.md b/documentation/content/docs/utilities/spacing.md
new file mode 100644
index 0000000..e47875d
--- /dev/null
+++ b/documentation/content/docs/utilities/spacing.md
@@ -0,0 +1,37 @@
+---
+title: Spacing
+---
+### Margin
+
+ Margin
+ Margin-large
+ Margin-top-small
+
+
+#### Code:
+
+```html
+
+ Margin
+ Margin-large
+ Margin-top-small
+
+```
+
+### Padding
+
+
+ Padding-small
+ Padding-none
+ Padding-left-large
+
+
+#### Code:
+
+```html
+
+ Padding-small
+ Padding-none
+ Padding-left-large
+
+```
diff --git a/documentation/layouts/_default/li.html b/documentation/layouts/_default/li.html
new file mode 100644
index 0000000..572324e
--- /dev/null
+++ b/documentation/layouts/_default/li.html
@@ -0,0 +1,5 @@
+
+
+ {{- .Title -}}
+
+
diff --git a/documentation/layouts/_default/list.html b/documentation/layouts/_default/list.html
new file mode 100644
index 0000000..e5610aa
--- /dev/null
+++ b/documentation/layouts/_default/list.html
@@ -0,0 +1,15 @@
+{{ partial "header" . }}
+
+
+ {{ .Title }}
+
+ {{ .Content }}
+
+
+ {{ range .Pages }}
+ {{ .Render "li" }}
+ {{ end }}
+
+
+
+{{ partial "footer" . }}
diff --git a/documentation/layouts/_default/single.html b/documentation/layouts/_default/single.html
new file mode 100644
index 0000000..a7ffb1e
--- /dev/null
+++ b/documentation/layouts/_default/single.html
@@ -0,0 +1,8 @@
+{{ partial "header" . }}
+
+
+ {{ .Title }}
+ {{ .Content }}
+
+
+{{ partial "footer" . }}
diff --git a/documentation/layouts/index.html b/documentation/layouts/index.html
new file mode 100644
index 0000000..30593fc
--- /dev/null
+++ b/documentation/layouts/index.html
@@ -0,0 +1,8 @@
+{{ partial "header" . }}
+
+
+ {{ .Title }}
+ {{ .Content }}
+
+
+{{ partial "footer" . }}
\ No newline at end of file
diff --git a/documentation/layouts/partials/data/title b/documentation/layouts/partials/data/title
new file mode 100644
index 0000000..2bd70bf
--- /dev/null
+++ b/documentation/layouts/partials/data/title
@@ -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 -}}
diff --git a/documentation/layouts/partials/footer.html b/documentation/layouts/partials/footer.html
new file mode 100644
index 0000000..083eed8
--- /dev/null
+++ b/documentation/layouts/partials/footer.html
@@ -0,0 +1,7 @@
+
+ Made with 💛 by Rhyne and some fantastic contributors!
+
+
+