papercss / papercss Goto Github PK

View Code? Open in Web Editor NEW

4.0K 41.0 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 scss html

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

PaperCSS Version 1.2 is Released!

Checkout the release details to see what is new :)

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.

Linting

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

[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

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/

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

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!

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

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;
}

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.

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

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

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.

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?

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.

Need favicon!

Oops, don't have a favicon yet.

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;
}

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.

Cards =/= Colors

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

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

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.

x-index overflow in mobile view

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

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.

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.

What about React version of the PaperCSS?

Are you considering building a React version of 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?

Missing .editorconfig file

As I see the PRs, everyone is using its own indentation (spaces/tabs, size) and it sometimes mess the file, PR review become a pain.

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

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

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 !

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?

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/

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

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.

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.

Document customizing by patch-package?

I recently discovered patch-package which makes it easy to customize without the need for forking.

I would be happy to contribute documentation assuming this project keeps a permissive license (#9), will need a few weeks due to existing commitments.

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

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

Update release to match documenation.

The current download link (v1.0.1) doesn't include Cards, Badges etc. These classes are only accessible if the user clones and compiles the CSS themselves.

Feature: Textarea in forms

Paper CSS is lacking the textarea which is an important field, especially in forms.

Unit tests for colors

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

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

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

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.

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

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

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)

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!

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!

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.