diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..b2dadf3 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,9 @@ +root = true + +[*] +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true +indent_style = space +indent_size = 2 diff --git a/README.md b/README.md index 21e8058..08f29af 100644 --- a/README.md +++ b/README.md @@ -11,14 +11,14 @@ View the demo & docs at [getpapercss.com](https://www.getpapercss.com) [![Download](/img/screenshots/download-minified.PNG)][download-minified] ### NPM -PaperCSS is now available on NPM as of version 1.1.0. Install with `npm install papercss --save` and find the CSS in: +PaperCSS is now available on NPM as of version 1.2.0. 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. You can use either: -- 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.2.0/dist/paper.css +- https://unpkg.com/papercss@1.2.0/dist/paper.min.css ## Quick Start ```html @@ -28,13 +28,15 @@ Don't want to download it? That's cool. You can just link to PaperCSS via unpkg' - + Document -
-

Some Fresh Title

-

This is where some content would go.

+
+
+

Some Fresh Title

+

This is where some content would go.

+
@@ -64,10 +66,12 @@ Here's the full workflow for customization: - Once `npm start` or `npm run build` has been run then it will create the new css so that the new color can be used as a text, border or background ## Contributing -Check out what's been added but not yet releases at [develop.getpapercss.com](https://develop.getpapercss.com) +Check out what's been added but not yet released at [develop.getpapercss.com](https://develop.getpapercss.com) 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. +Please before sending a PR, make sure you are using the `.editorconfig` file with your IDE. If your IDE doesn't natively support editorconfig files, you can use an extension. For example in Atom there is the [editorconfig package](https://atom.io/packages/editorconfig), as well for [Sublime](https://github.com/sindresorhus/editorconfig-sublime), [VS Code](https://github.com/editorconfig/editorconfig-vscode), [Vim](https://github.com/editorconfig/editorconfig-vim), ... + Similar to customizing, make sure you have Git, Node, and NPM on your system. - fork the repo via the fork button in the upper left - run `git clone https://github.com/[your_username]/papercss.git` @@ -81,7 +85,7 @@ Similar to customizing, make sure you have Git, Node, and NPM on your system. - Finally, open a pull request on this repo. Be sure to include any pictures and details on what you changed! - Once approved, your changes will be merged to the develop branch where it will eventually be added to a release that ends up in the master branch. 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, create your hotfix branch off of the master branch instead of develop: `git checkout -b hotfix-1.X.X master` +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-1.X.X 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 :) @@ -95,5 +99,5 @@ If you are new to Git or Less, this would be a great project to get your feet we ## Credits Shouts outs to Tiffany Rayside for creating Imperfect Buttons, which was an inspiration for this project. https://codepen.io/tmrDevelops/pen/VeRvKX -[download]: https://github.com/rhyneav/papercss/releases/download/v1.1.0/paper.css -[download-minified]: https://github.com/rhyneav/papercss/releases/download/v1.1.0/paper.min.css +[download]: https://github.com/rhyneav/papercss/releases/download/v1.2.0/paper.css +[download-minified]: https://github.com/rhyneav/papercss/releases/download/v1.2.0/paper.min.css diff --git a/img/favicon.ico b/img/favicon.ico new file mode 100644 index 0000000..fe3d558 Binary files /dev/null and b/img/favicon.ico differ diff --git a/index.html b/index.html index fad9493..e914a4a 100644 --- a/index.html +++ b/index.html @@ -4,9 +4,12 @@ - + PaperCSS · the less formal CSS framework + + + @@ -20,13 +23,13 @@ - - + + -
- +
+
@@ -60,6 +63,7 @@
  • Utilities
  • Images
  • Alerts
    • +
  • Article
    • @@ -259,6 +263,21 @@ <button class="disabled">Disabled</button> <button disabled>Disabled</button>
    +

    Colors

    + + + + + +
    + 
    +  <input type="button" class="paper-btn btn-primary" value="Primary"/>
+  <input type="button" class="btn-secondary" value="Secondary"/>
+  <button class="btn-success">Success</button>
+  <button class="btn-warning">Warning</button>
+  <button class="btn-danger">Danger</button>
+
    +

    Forms

    @@ -284,6 +303,14 @@
    +
    + + +
    +
    + + +