papercss / papercss Goto Github PK

View Code? Open in Web Editor NEW

4.0K 4.0K 217.0 4.62 MB

The Less Formal CSS Framework

Home Page: https://getpapercss.com

License: ISC License

JavaScript 4.35% SCSS 95.65%

css html scss

papercss's Introduction

PaperCSS

The less formal CSS framework, with a quick and easy integration.

Table of contents
Quick-start
Content of the framework
Documentation
Customizing
Contributing
About
Credits and license

Quick-start

There are several options available:

You can download the latest release.
Clone the repo: git clone https://github.com/papercss/papercss.git
Install with npm: npm install papercss
Install with yarn: yarn add papercss
Import it using a CDN (it will automatically download the latest version):
- https://unpkg.com/papercss/dist/paper.min.css
- https://unpkg.com/papercss/dist/paper.css

Content of the framework

We provide compiled CSS (paper.css) as well as minified CSS (paper.min.css).

You can choose which components you may want to use. Only the components that get imported into src/styles.scss will be compiled into dist/paper.css.

You can also play with original, source files, written in SCSS, in src/.

Documentation

You can view the docs at getpapercss.com. Those are directly from the master branch; this means those features are stable and ready to be used in your project.

You can also view the develop branch at develop.getpapercss.com, this includes new features that are coming soon in the master branch. Be warned, a feature in develop can be removed without any prevention.

Customizing

You can customize PaperCSS easily, clone the repo, run npm install and make any changes to .scss files in src/.

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 css:build and get them from the dist/ folder.

Contributing

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 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, as well for Sublime Text, VS Code, Vim, ...

Once you are ready to contribute, here the workflow you should follow:

Fork the repo then clone it: git clone [email protected]:[your_username]/papercss.git
cd papercss then install dependencies: npm install
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-"
Write some code!
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/.
To preview your changes, you can run npm start. This will start a localhost server.
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 pre-commit 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 regarding features and bug fixes. Check out Vincent Driessen's blog post, GitFlow, or #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 the master and develop to keep the branches consistent.

About

PaperCSS was originally made by @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). It is currently maintained by the PaperCSS team.

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, web apps, blogs, or whatever else you can think of!

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.

Shout out to Tiffany Rayside for creating Imperfect Buttons, which was an inspiration for this project. https://codepen.io/tmrDevelops/pen/VeRvKX

papercss's People

Contributors

Stargazers

Watchers

Forkers

fraham landsurveyorsunited brodybits mcgeehan henrymoulton fengweijp umarmughal aunitz dennythecoder schollz bonaxcrimo wintercounter warpsmith kevin1193 maciejmatu afzalsayed96 ki11ua amanbayev toniqhz shreyanshu cdvte mrdogra007 dinojay dannyfeliz jjiro brienhall houjieboys lyrl yuanl00 nevinson mjrlgue hhy5277 nitishk72 muniftanjim azeemba jcwebhole vidgit griefcola kangkai124 paulmand3l xunzhaotech mayhry nanne007 ahrvanovic ionapjolive sanchitgnawali tbroadley prav92 vpineda7 koester sullivanpt blambodhar neetishraj ayatsajedi lbearl underbleu dallinbjohnson csscheck divyansh472 divyanshchaudhary85 saddamhbb lamhotsimamora awonugaso irisxie jupitermandy muyaszed sbn78 pynej kubami9 harrigan anupamasok aysadkozanoglu serotonyn hlerenow iain-s steveng2 tecte wl00887404 phreshhh kai2002 gurugeek edge104 linshuizhaoying saberonline xjhan2016 impressivewebs habeebcycle indidatajones s-you adleytales fws407296762 zhenggch squirrelinsouthern hqdmyjsw kunsanw rahulmeshram tjnane zpqiao rack110 neuropolis

papercss's Issues

Tutorials and examples

I think we should open up the github wiki so we can create some tutorials and examples for anyone how is trying to use PapaperCSS will be able to quickly implement the framework

SEO Improvements

The <head> in the index.html page is very bare bones right now. No title tag, no meta tags of keywords, etc.

Tags to help with SEO are definitely needed, but my knowledge of what's important vs what isn't is limited. Would love to have some help with this so that PaperCSS is easier to discover via search.

Supports only english fonts :(

Hello, the fonts that are used do not support other languages except english. More specifically, I wanted to use papercss for a project in greek but the fonts that are substituted when using greek are really ugly.

Here's how the default styles are displayed when I write greek:

Can you propose any fonts that do support greek and match nice with the overall style?

TIA !

Using paper-btn class on links

For coders like me who use ReactJS it would be nice to be able to style links tags like buttons. This is especially useful when working with routing. Please consider. Right now I believe I cannot style links like buttons.

[not a real issue - presentation issue] github repo presentation gif is too fast

The presentation gif to showcase the documentation is too flashy and fast, which could be annoying but most of all, it doesn't show much! I think it would be a better choice to have it a little bit slower, but that's just my two cents, love u <3

React PaperCSS

I love this! I hope you don'd mind, but i've started going through and turning some of these into React components, which can be found here

https://github.com/Banjerr/react-paper-css

I should have them all "React"-ified soon!

What about Breadcrumbs?

Is there a vision on how Breadcrumbs should look using PaperCSS?
I am trying to apply this framework on a project and it needs to have some breadcrumbs to indicate users current location regarding to sitemap.
Please help or advise

What about React version of the PaperCSS?

Are you considering building a React version of this framework?

Create single component with css extension

We actually only have .less files for single-components, but what if we need to import a single-component in pure CSS? For example, in vuejs-paper-css I need to import the styling of each component (in sass or css since it increase the complexity of the build of each user to add less support).

Here you can see how tedious it is to style a component without being able to import a individual component style from papercss, in css.

Mobile support in chrome browser

The mobile view in chrome browser is not showing up as expected.
Possible Reason:

Download section

Non-responsive image section

Invalid styles in the generated CSS

I've noticed this rules in the generated CSS. The pseudo class hover is applied twice on the same selector.

.paper-btn:hover:hover,
button:hover:hover,
input[type=button]:hover:hover {
  -webkit-box-shadow: 2px 8px 4px -6px rgba(0,0,0,.3);
  -moz-box-shadow: 2px 8px 4px -6px rgba(0,0,0,.3);
  box-shadow: 2px 8px 4px -6px rgba(0,0,0,.3)
}

I think this is caused by this rule in the button.less file:

button, .paper-btn, input[type="button"] {
    &:hover{
        .shadow-hover;
    }
}

and how the class .shadow-hover is styled in shadows.less.

I'm not a LESS expert but I think that there is a problem with the way styles defined for .shadow-hover are extended to button:hover.

PaperCSS Version 1.2 is Released!

Checkout the release details to see what is new :)

Hardcoded colour values

I have noticed there are a few places in the code that uses hardcoded colour values, this does make a bit harder for someone to change the colour values to match their styling.

I would suggest adding new colours for these hardcoded values.

From my quick search i have found these references to hardcoded values

Amazing work !

I didn't know how to contact you so thank you, this is real cool.

I believe we can add more elements like Tabs, I really like how easy it is to pick it and change it (pure CSS wins)

Thank you

More explicit license statement?

Thanks for the nice framework, I found it through the following Tweet: https://twitter.com/speckyboy/status/925407518565851136

In <package.json> the license is set to ISC which I really like (extremely simple and permissive). Is this your intention and can you make it more explicit?

Disabled state for buttons?

Hi there, I think it would be great if there was a styled disabled state for buttons. Unfortunately I have no suggestions on how they would look, though.

Textured backgrounds

How would people like the idea of adding textured backgrounds, similar to these:
http://lea.verou.me/css3patterns/#blueprint-grid
http://lea.verou.me/css3patterns/#lined-paper
This might help the pages to look a bit more like paper

SSL - To enable HTTPS on website

I noticed that SSL is not enabled on getpaperccs.com. I've heard about Let's Encrypt that it provides HTTPS certificates for free and it is fairly simple to install and renew a certificate with them. Refer: https://letsencrypt.org/getting-started/

Code for documentation is no longer maintenable

Having a big index.html file containing all our "examples components" with the lines of code used is not the best thing to do. It's messy and the doc can be a pain to browse for devs, but also a pain for contributors.

My solution here is to keep /index.html as a landing page for the framework (quick description, some pictures, link to GitHub/docs, ...).

Then all the docs will go to /docs where each component will get its own .html such as cards.html or alerts.html.

Doing this will allow us more flexible PRs (when everyone is editing the same index.html file, they have to deal with A LOT of conflicts when they want to merge). But it will also create a more structured documentation, something we should take seriously since the framework is growing a lot.

Should we use a JS framework to do this? Should we go as a SPA or go for the old-school method?

PaperCSS just reached 1,000 stars!

Thanks to everyone who contributed on the code, gave us their idea, feedback, ... PaperCSS is a very interesting framework, and I hope it will grow even more! There is still so much things to do to improve this framework!

Keeping Docs Consistent with Features

#17 looks great and ready to merge into master, but that would update the documentation on getpapercss.com, but would the downloadable css file would not have the updates. That would need to be rebuilt and put into a release. This causes an issue of the documentation not matching the available features if downloaded.

Would it be best to keep a separate branch for what gets shown on getpapercss.com, instead of just using the master branch? That way the most up to date features are in the master, but the download/documentation match up online. Every Sunday could be a release day where the new features are built and released via Github releases, and the website is updated to match.

Does anyone have any thoughts or experience with the best workflow to follow here?

Normalize.css Dependency

Currently, normalize.css is a dev dependency which will cause some problems when packaging for npm. It is also being imported via relative paths, which may also cause issues on npm.

normalize.css either needs to be

Added instead to dependencies in package.json
Or added as a git submodule

The import in src/styles.less will then need to be changed to no longer be relative.

Communication

I think it would be nice to have better communication in the organisation. I would suggest using slack so we can keep track of projects and developments, it also works nicely with web hooks.

Cards =/= Colors

The Summary contains the link "Colors" which actually is a ref to Cards.
Both Cards & Badges are not included in the Summary.

Modals in CSS

Should we add a modal feature to the framework.? This can be implemented using pure CSS but with a drawback that the modal can be opened again by clicking back button or visiting the modal url.
Refer : https://www.mnishiguchi.com/2016/05/10/modal-dialog-with-pure-css/

Inline list

Hi I would like to add inline list feature in this framework. It is just very simple add on that is useful for menu or other things. Below is the example from my branch

First child border style overwritten

When the first child border has custom styles, for example border colour, this style is overwritten by the initial border styling

.border, .border-1, .child-borders > *:nth-child(6n+1) {
    border: 2px solid @primary;
    border-top-left-radius: 255px 15px;
    border-top-right-radius: 15px 225px;
    border-bottom-right-radius: 225px 15px;
    border-bottom-left-radius: 15px 255px;
}

Links on README

It would be beneficial to link to the other PaperCSS projects within the PaperCSS organization on the README. Maybe in a section called "Related Projects"?

Also a link to the slack channel would be great to make sure that it is used as well (#92)

Contributing.md

As the code and community grows it becomes more difficult to keep everything organized. According to GitHub's Building a strong community we need to setup guidelines for repository contributors.
Inspite this is briefly defined in README I feel it must be separated from there due to the length of readme and contribution guidelines must be laid more specifically in another file to follow best practices.

Radio Buttons & Check Boxes do not fill in IE

Internet Explorer 11 (and presumably below) does not render the inline svg for radio buttons and check boxes

It works on Edge, but not older IE browsers. Also, a regular .png file will work, so it looks like the issue is coming from the svg itself.

Linting

In addition to adding an .editorconfig (#54), adding a linter like stylelint would be beneficial in keeping contributions well styled.

Unit tests for colors

Add unit tests that cover background colors.
Add unit tests that cover inheritance of text and background colors.

Version 1.2

A lot of awesome features and fixes have been added over the past couple of weeks. I think it's time to create release branch 1.2 and get ready to launch v1.2!

"Missing" elements suggestion

To celebrate 1k stars and to get ready for PaperCSS v2 (perhaps? 🥇 )
it would be nice to add following elements:

datepicker
sidebar, multilevel sidebar
time picker
icon font - would be awesome to have some icons (perhaps as a stand-alone package)
using icons in form inputs - "input addons"
calendar would be awesome
timelines, wizards, steps - also as breadcrums #50
sliders

p.s.: I really like how much work is done in paper css. But I believe adding this features would allow everyone to transfer one of their exisiting projects completely to PaperCSS.
In my case, I have an admin dashboard for sending newsletters that I am trying to style using papercss. Using other libraries, for datepickers for example, are odd-looking in the whole paper-theme.

Button press animation

There is no animation when a button is pressed. This is not very user-friendly, especially for single-page apps.
Pull request is ready #64

Code related HTML Tags style

The general guideline for using <code> tags goes somewhat like this:

<code> should be used for inline codes that can wrap
<pre><code> should be used for block of codes that shouldn't wrap

Here's an example taken from W3C Recommendation for HTML5:

<p>This is the <code>Panel</code> constructor:</p>
<pre><code>function Panel(element, canClose, closeHandler) {
  this.element = element;
  this.canClose = canClose;
  this.closeHandler = function () { if (closeHandler) closeHandler() };
}</code></pre>

Various markdown parsers do the exact same thing. And various syntax highlighter libraries styles code blocks based on that.

With the current code style, this is a bit broken:

code inside pre tag should have background: transparent and color: inherit to solve this problem:

pre code {
  color: inherit;
  background: transparent;
}

Papper Css gem for Rails

Hi Everyone, since there is already a #81 , I just cretaed a ruby gem to integrate Papercss to rails for whoever using erb for the front-end

Here is the gem - https://github.com/muyaszed/rails_papercss_gem
and here is the Demo - https://rails-papercss.herokuapp.com

Cheers

Include animation

I stumble upon this library which is purely using css. It would be great if we could include some animation library for papercss

https://github.com/daneden/animate.css

Merge Issues

Correct me if I'm wrong
I've noticed that since we are merging PRs to 2 different branches i.e. master for hotfixes and develop for features. This will create merge issues when new features will be merged from develop branch to the master branch. Since, develop branch doesn't gets refreshed from master branch after the hotfixes.
This might be the reason which caused issue #47
IMO to tackle this all the contribution should be done to only develop branch for time being and the code must be modularised so that everyone does not end up changing the same file (index.html) at the same time.

Unit Tests

I have just read this blog post: http://tomek.wiszniewski.cc/how-css-unit-tests-helped-us-move-fast/
This goes over how its possible to write unit tests for css, this would be really handy in this project as it will allow us to have our LESS code tested automatically

Cooperate with paper-css?

From #24 I discovered https://github.com/cognitom/paper-css, last updated 8-9 months ago, which could be handy for some developers. I wonder if we should consider some alternatives such as:

rename this project and see how it works with paper-css
fork paper-css as something like print-paper-css
do nothing

npm package/registry

Hello Rhyne,

Although it's a CSS library, npm is used as default package manager for front-end related stuff. What about publishing papercss to npm? :-)

You have two options:

publish it as a standalone package (the papercss namespace is available)
- good: installing it would be just a matter of npm i -S papercss
- bad: there is already a paper-css package, which may cause confusion to users
publish it in your user's space (e.g.: @rhyneav/papercss)
- good: the naming would match GitHub's URL (e.g.: npm i -S @rhyneav/papercss)
- bad: longer package name

The npm documentation is quite friendly and explains really well how to publish a package. You can also add contributors to it, but I'm still not sure how this second part works (I'm new on this open source creating thing too).

x-index overflow in mobile view

The x index is scroll-able in mobile view. Need to fix this!

Sass port?

I believe a SASS version would be better and have a higher adoption rate. Simply because SASS is more widely used right now and has major framework support like bootstrap etc.

please consider it

Thanks.

Adding modern components such as carousel, cards, modals, popovers, ...

What do you think about adding modern components (that's how I call them) in the framework? Such as popovers, carousel, cards, ...

Also, what do you plan for your framework? Something more complex and complete like Bootstrap, Semantic UI or stay simple with minimal things such as what you already implemented?

Let me know what you think about those components, I would like to implement them if you are okay.