diff --git a/.gitignore b/.gitignore index 1778ff3..6df51dc 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,11 @@ /node_modules npm-debug.log -/dist -/tests/node_modules \ No newline at end of file +/tests/node_modules +.DS_Store +/public +.vscode + +# Ignore compiled CSS +/docs/static/assets/paper.css +/docs/static/assets/paper.min.css +/dist \ No newline at end of file diff --git a/.npmignore b/.npmignore index 560747c..6c0bea1 100644 --- a/.npmignore +++ b/.npmignore @@ -2,5 +2,8 @@ npm-debug.log index.html demo.css +yarn.lock /img -yarn.lock \ No newline at end of file +/docs +/public +/tests \ No newline at end of file diff --git a/.stylelintrc.json b/.stylelintrc.json new file mode 100644 index 0000000..300429a --- /dev/null +++ b/.stylelintrc.json @@ -0,0 +1,15 @@ +{ + "extends": "stylelint-config-sass-guidelines", + "plugins": [ + "stylelint-scss" + ], + "rules": { + "max-nesting-depth": 5, + "property-no-vendor-prefix": null, + "value-no-vendor-prefix": null, + "selector-no-qualifying-type": null, + "selector-max-compound-selectors": null, + "scss/selector-no-redundant-nesting-selector": null, + "scss/at-extend-no-missing-placeholder": null + } +} diff --git a/.travis.yml b/.travis.yml index 4ee69f6..8410c70 100644 --- a/.travis.yml +++ b/.travis.yml @@ -14,7 +14,14 @@ addons: packages: - google-chrome-stable fluxbox +before_install: + - npm install -g npm@5.10.0 + +install: + - npm ci + before_script: + - npm run stylelint - "sh -e /etc/init.d/xvfb start" - sleep 3 - fluxbox >/dev/null 2>&1 & diff --git a/license b/LICENSE.md similarity index 89% rename from license rename to LICENSE.md index 755e428..eeec5e1 100644 --- a/license +++ b/LICENSE.md @@ -1,4 +1,6 @@ -Copyright 2017 Rhyne Vlaservich +## ISC Licence + +Copyright (c) 2017–2018, Rhyne Vlaservich 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. diff --git a/README.md b/README.md index 268f002..5d0207d 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@

- PaperCSS logo + PaperCSS logo

PaperCSS

@@ -40,9 +40,11 @@ There are several options available: ## Content of the framework -We provide compiled CSS (`paper.css`) as well as minified CSS (`paper.min.css`). You can also use single components that are build into `papercss/dist/components`. +We provide compiled CSS (`paper.css`) as well as minified CSS (`paper.min.css`). -You can also play with original, source files, written in LESS, in `src/`. +You can choose which components you may want to use. Only the components that get imported in `src/styles.scss` will be compiled into `dist/paper.css`. + +You can also play with original, source files, written in SCSS, in `src/`. ## Documentation @@ -52,11 +54,11 @@ You can also view the develop branch at [develop.getpapercss.com](https://develo ## Customizing -You can customize PaperCSS easily, clone the repo, run `npm install` and make any changes to `.less` files in `src/`. +You can customize PaperCSS easily, clone the repo, run `npm install` and make any changes to `.scss` files in `src/`. -The main places you might want to make changes would be `colors.less` or `fonts.less`, where you can specify new colors or fonts for your CSS build. +The main place you might want to make changes would be `core/_config.scss`, where you can specify new colors or fonts for your CSS build. -After you make changes, be sure to build the new CSS files. Do so by running `npm run build` and get them from the `dist/` folder. +After you make changes, be sure to build the new CSS files. Do so by running `gulp build` and get them from the `dist/` folder. ## Contributing @@ -71,24 +73,26 @@ Once you are ready to contribute, here the workflow you should follow: - Change your current branch to `develop`: `git checkout develop` - 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-" - Start the local web-server: `gulp` or `npm start` -- Once done commit and push your changes to your fork. -- Open a pull request on the origin papercss repo. Be sure to include any picture and/or details on what you have done, it will helps reviewers **a lot**! +- Write some code! +- Check to make sure your code is following style rules with `npm run stylelint` +- Once done commit and push your changes to your fork. The linter is also run as a precommit hook. +- 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**! - 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 in terms of 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. 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 master and develop to keep the branches consistent. ## About -I got tired of mODerN STylEs and clean pages on the internet. I also wanted to learn more about Flexbox and Less. So I made PaperCSS to solve these two challenges of mine :) +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). The goal of PaperCSS is to be as minimal as possible when adding classes. For example, a button should just look like a paper button. There shouldn't be a need to add a class such as `paper-button`. Because of this, adding PaperCSS to a markdown generated page should instantly paper-ize it. -While I'm proud of how it's turned out so far, I think there's a lot that can still be done to make it better. Such things as refactoring, adding more utility classes and more border types (like dashed/dotted) could really polish off this framework. That's why it's open sourced and available for pull requests! +Feel free to use it for wireframes, webapps, blogs, or whatever else you can think of! -If you are new to Git or Less, this would be a great project to get your feet wet with. I'd be happy to help walk you through the pull request process. +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. ## Credits and license -Code and documentation under [ISC license](https://github.com/papercss/papercss/blob/master/license∏). +Code and documentation under [ISC license](https://github.com/papercss/papercss/blob/master/license). Shout out to Tiffany Rayside for creating Imperfect Buttons, which was an inspiration for this project. https://codepen.io/tmrDevelops/pen/VeRvKX diff --git a/docs/archetypes/default.md b/docs/archetypes/default.md new file mode 100644 index 0000000..17a3207 --- /dev/null +++ b/docs/archetypes/default.md @@ -0,0 +1,5 @@ +--- +title: "{{ replace .TranslationBaseName "-" " " | title }}" +date: {{ .Date }} +draft: true +--- diff --git a/docs/config.toml b/docs/config.toml new file mode 100644 index 0000000..6f6b67a --- /dev/null +++ b/docs/config.toml @@ -0,0 +1,20 @@ +baseURL = "https://getpapercss.com" +title = "PaperCSS" + +# Directories +publishDir = "../public" + +# Syntax Highlighting ( https://gohugo.io/content-management/syntax-highlighting/ ) +pygmentsCodefences = true +pygmentsStyle = "emacs" + +[params.info] +description = "the less formal CSS framework" +title404 = "Nothing's here!" + +[params.seo] +# Title Separator: - – — · • * ⋆ | ~ « » < > +titleSeparator = "•" + +[blackfriday] +hrefTargetBlank = true diff --git a/docs/content/_index.md b/docs/content/_index.md new file mode 100644 index 0000000..405a84d --- /dev/null +++ b/docs/content/_index.md @@ -0,0 +1,67 @@ +--- +title: Get PaperCSS +menu: main +weight: -270 +--- + +#### Download + +Download the latest version (1.5.4) using either of the links below. Or +download an older release via Github. + +
+ CSS File + Minified CSS File + Github Releases +
+ +#### NPM + +PaperCSS is available on NPM, current version 1.5.4. Install with npm 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.5.4/dist/paper.css](https://unpkg.com/papercss@1.5.4/dist/paper.css) +* [https://unpkg.com/papercss@1.5.4/dist/paper.min.css](https://unpkg.com/papercss@1.5.4/dist/paper.min.css) + +Here's a quck snippet to get started with PaperCSS: + +```html + + + + + + + + Document + + +
+

Some Fresh Title

+

This is where some content would go.

+
+ + +``` + +#### Build it Yourself + +If you'd rather customize things, you can build the CSS yourself via the git repo + +```sh +git clone https://github.com/papercss/papercss.git +cd papercss +npm install +npm run build +``` + +Grab the CSS out of the /dist folder created + +You can also go into src/core/_config.scss before building to change around the global styles of your new CSS. diff --git a/docs/content/about.md b/docs/content/about.md new file mode 100644 index 0000000..69d3ae3 --- /dev/null +++ b/docs/content/about.md @@ -0,0 +1,14 @@ +--- +title: About +slug: about +menu: main +weight: -90 +--- + +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). + +The goal of PaperCSS is to be as minimal as possible when adding classes. For example, a button should just look like a paper button. There shouldn't be a need to add a class such as `paper-button`. Because of this, adding PaperCSS to a markdown generated page should instantly paper-ize it. + +Feel free to use it for wireframes, webapps, blogs, or whatever else you can think of! It is licensed under the [ISC License](https://github.com/papercss/papercss/blob/master/license), so use it wherever you want to. + +If you are new to Git or SCSS, this would be a great project to get your feet wet with. I'd be happy to help walk you through the pull request process. Check out the [Git repo](https://github.com/papercss/papercss) for more info! diff --git a/docs/content/docs/_index.md b/docs/content/docs/_index.md new file mode 100644 index 0000000..818cc05 --- /dev/null +++ b/docs/content/docs/_index.md @@ -0,0 +1,5 @@ +--- +title: Documentation +menu: main +weight: -240 +--- diff --git a/docs/content/docs/components/_index.md b/docs/content/docs/components/_index.md new file mode 100644 index 0000000..aebef2e --- /dev/null +++ b/docs/content/docs/components/_index.md @@ -0,0 +1,4 @@ +--- +title: Components +description: PaperCSS Components +--- diff --git a/docs/content/docs/components/alerts.md b/docs/content/docs/components/alerts.md new file mode 100644 index 0000000..1c76c5b --- /dev/null +++ b/docs/content/docs/components/alerts.md @@ -0,0 +1,33 @@ +--- +title: Alerts +description: PaperCSS Alerts +--- +
+
+ Alert-primary +
+
+ Alert-secondary +
+
+ Alert-success +
+
+ Alert-warning +
+
+ Alert-danger +
+
+ +#### Code: + +```html +
+
Alert-primary
+
Alert-secondary
+
Alert-success
+
Alert-warning
+
Alert-danger
+
+``` diff --git a/docs/content/docs/components/articles.md b/docs/content/docs/components/articles.md new file mode 100644 index 0000000..a25c1b6 --- /dev/null +++ b/docs/content/docs/components/articles.md @@ -0,0 +1,42 @@ +--- +title: Articles +description: PaperCSS Articles +--- +
+

+ Article Title +

+

+ Written by Super User on 24 November 2017. Posted in Blog +

+

+ 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. +

+

+ 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? +

+

+ 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? +

+ +
+ + +
+
+ +#### Code: + +```html + +``` diff --git a/docs/content/docs/components/badges.md b/docs/content/docs/components/badges.md new file mode 100644 index 0000000..a3dfe8b --- /dev/null +++ b/docs/content/docs/components/badges.md @@ -0,0 +1,30 @@ +--- +title: Badges +description: PaperCSS Badges +--- +### Default + +You can customize badges colors with secondary, success, warning, danger classes. + +# Example h1 heading 123 + +## Example h2 heading 123 + +### Example h3 heading 123 + +#### Example h4 heading 123 + +##### Example h5 heading 123 + +###### Example h6 heading 123 + +#### Code: + +```html +

Example h1 heading 123

+

Example h2 heading 123

+

Example h3 heading 123

+

Example h4 heading 123

+
Example h5 heading 123
+
Example h6 heading 123
+``` diff --git a/docs/content/docs/components/buttons.md b/docs/content/docs/components/buttons.md new file mode 100644 index 0000000..5045c84 --- /dev/null +++ b/docs/content/docs/components/buttons.md @@ -0,0 +1,55 @@ +--- +title: Buttons +description: PaperCSS Buttons +--- + +Insprired by [Imprefect Buttons](https://codepen.io/tmrDevelops/pen/VeRvKX) + + + + +Link + +
+
+ +
+
+ + + + +#### Code: + +```html +

Insprired by Imprefect Buttons

+ + + +Link +
+
+ +
+
+ + +``` + +### Colors + + + + + + + +#### Code: + +```html + + + + + +``` diff --git a/docs/content/docs/components/cards.md b/docs/content/docs/components/cards.md new file mode 100644 index 0000000..463500c --- /dev/null +++ b/docs/content/docs/components/cards.md @@ -0,0 +1,120 @@ +--- +title: Cards +description: PaperCSS Cards +--- +### Full card example + +It is possible to not put all the sub-classes like card-title, card-subtitle, card-text, ... But instead the framework will recognize the element properly if it's a h4, h5, p, ... And you need to put all this content on a div with card class. + +
+
+ Card example image +
+

My awesome Paper card!

+
Nice looking subtitle.
+

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.

+ +
+
+
+ +#### Code: + +```html +
+ Card example image + +
+

My awesome Paper card!

+
Nice looking subtitle.
+

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.

+ +
+
+``` + +### Card title, text, links + +
+
+
+

My awesome Paper card!

+
Nice looking subtitle.
+

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 +
+
+
+ +#### Code: + +```html +
+
+

My awesome Paper card!

+
Nice looking subtitle.
+

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 +
+
+``` + +### Image on top or bottom + +
+
+
+

My awesome Paper card!

+
Nice looking subtitle.
+

You can also place image on the bottom of the card.

+ +
+ Card example image +
+
+ +#### Code: + +```html +
+
+

My awesome Paper card!

+
Nice looking subtitle.
+

You can also place image on the bottom of the card.

+ +
+ Card example image +
+``` + +### Header and footer + +
+
+
Header
+
+

My awesome Paper card!

+
Nice looking subtitle.
+

You can also place image on the bottom of the card.

+ +
+
Footer
+
+
+ +#### Code: + +```html +
+
Header
+
+

My awesome Paper card!

+
Nice looking subtitle.
+

You can also place image on the bottom of the card.

+ +
+
Footer
+
+``` diff --git a/docs/content/docs/components/collapsible.md b/docs/content/docs/components/collapsible.md new file mode 100644 index 0000000..78e0b21 --- /dev/null +++ b/docs/content/docs/components/collapsible.md @@ -0,0 +1,160 @@ +--- +title: Collapsibles +description: PaperCSS Collapsibles +--- + +Collapsibles are elements that expand when you click on them. You can hide/reveal content back on clicking. + +
+
+ + +
+ + Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs. + +
+
+
+ + +
+ + Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken. Pork belly meatball t-bone bresaola tail filet mignon kevin turkey ribeye shank flank doner cow kielbasa shankle. + +
+
+
+ + +
+ + Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs. + +
+
+
+ + +
+ + Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken. Pork belly meatball t-bone bresaola tail filet mignon kevin turkey ribeye shank flank doner cow kielbasa shankle. + +
+
+
+ + +#### Code: + +```html +
+
+ + +
+ Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken... +
+
+
+ + +
+ Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola... +
+
+
+ + +
+ Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken... +
+
+
+ + +
+ Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola... +
+
+
+``` + +### Accordions + +Use `input type="radio"` when you want to keep only one element collapsed at a time. + +
+
+ + +
+ + Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs. + +
+
+
+ + +
+ + Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken. Pork belly meatball t-bone bresaola tail filet mignon kevin turkey ribeye shank flank doner cow kielbasa shankle. + +
+
+
+ + +
+ + Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs. + +
+
+
+ + +
+ + Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken. Pork belly meatball t-bone bresaola tail filet mignon kevin turkey ribeye shank flank doner cow kielbasa shankle. + +
+
+
+ + +#### Code: + +```html +
+
+ + +
+ Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken... +
+
+
+ + +
+ Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola... +
+
+
+ + +
+ Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken... +
+
+
+ + +
+ Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola... +
+
+
+``` diff --git a/docs/content/docs/components/forms.md b/docs/content/docs/components/forms.md new file mode 100644 index 0000000..faa56f1 --- /dev/null +++ b/docs/content/docs/components/forms.md @@ -0,0 +1,127 @@ +--- +title: Forms +description: PaperCSS Forms +--- +
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ Some Radio Buttons + + +
+
+ Some Check Boxes + + +
+ +#### Code: + +```html +
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ Some Radio Buttons + + +
+
+ Some Check Boxes + + +
+``` diff --git a/docs/content/docs/components/modals.md b/docs/content/docs/components/modals.md new file mode 100644 index 0000000..34c4f06 --- /dev/null +++ b/docs/content/docs/components/modals.md @@ -0,0 +1,79 @@ +--- +title: Modals +description: PaperCSS Modals +--- +### Simple modal example + +This can be used to implement modals along with features like title, subtitle, text, button and links. Just use whichever component you need for your modal with proper classes and leave the rest on the framework. + +
+ +
+ +
+ +
+ +

Modal Title

+
Modal Subtitle
+

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

+ +
+
+ +#### Code: + +```html +
+ +
+ +
+ +
+ +

Modal Title

+
Modal Subtitle
+

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

+ +
+
+``` + +### Modal with title, text and links + +
+ +
+ +
+ +
+ +

Modal Title

+
Modal Subtitle
+

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

+ Get PaperCSS + +
+
+ +#### Code: + +```html +
+ +
+ +
+ +
+ +

Modal Title

+
Modal Subtitle
+

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

+ Get PaperCSS + +
+
+``` diff --git a/docs/content/docs/components/navbar.md b/docs/content/docs/components/navbar.md new file mode 100644 index 0000000..af015d5 --- /dev/null +++ b/docs/content/docs/components/navbar.md @@ -0,0 +1,131 @@ +--- +title: Navbar +description: PaperCSS Navbar +--- + + + + + +#### Code: + +Add ```.fixed``` to ```