The Less Formal CSS Framework

Related tags

CSS css html scss
Overview

PaperCSS logo

PaperCSS

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

Table of contents

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

Status

Build status Dependencies Peer dependencies Dev dependencies

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). In addition to the original creator, it is maintained by @Fraham and @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, 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

Comments
  • [WIP] Hugo Documentation Site

    [WIP] Hugo Documentation Site

    Brief description

    WORK IN PROGRESS

    Hugo conversion

    Developer Certificate of Origin

    feature 
    opened by MunifTanjim 30
  • On Windows, animations feel glitched with IE and Mozilla Firefox

    On Windows, animations feel glitched with IE and Mozilla Firefox

    Tested on Windows 7: This is recorded on Mozilla glitch the feel is even worse on IE: glitch ie

    For some reason it works perfectly on Chrome.

    I also have a Mac and it has no glitch either, everything is smooth.

    I believe it would be nice to find a way to have a smooth animation for all major devices.

    Is someone with me to investigate?

    bug 
    opened by antoninadert 29
  • Sass port?

    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.

    enhancement 
    opened by PopcornDesign 29
  • Feature navbar

    Feature navbar

    Brief description

    Updated 21.11.2017 (followed suggested comments - thank you for feedback!)

    • [x] removed JS
    • [x] moved css to less
    • [x] added home icon suggested in comments
    • [x] restored original template md file contents
    • [x] added original version (alternate styling) of navbar without buttons, but with flat links
    • [x] removed custom classes
    • [x] removed button version, went with flat one
    • [x] removed home icon - i think creating matching iconset is another subtask of this project
    • [x] minifed example html and less

    Navbar element for PaperCSS

    Added a small paper-navbar element which does good job at creating simple mobile-friendly top navbar

    This is what it looks like in HTML:

    <nav>
      <label for="menu-toggle">&#9776;</label>
      <input type="checkbox" id="menu-toggle" role="button"></input>
      <ul>
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
</nav>

    The less file is located in navbar.less:

    @grey_background: #c2c2c2;
.active {
	background: @grey_background;
}
nav {
	display: block;
	margin-top: 0px;
	margin-left: 0px;
	label {
		display: none;
	}
	input {
		display: none;
		&:checked {
			&~ul {
				display: block;
			}
		}
	}
	ul {
		&:not(:first-child) {
			margin-top: -20px;
		}
	}
	li {
		font-style: normal;
		padding-left: 16px;
		padding-right: 16px;
		padding-top: 6px;
		padding-bottom: 6px;
		display: inline-block;
		margin-right: 8px;
		&:hover {
			background: @grey_background;
		}
		&:before {
			content: "";
		}
		a {
			background-image: none;
		}
	}
}
@media screen and (max-width : 760px) {
	nav {
		ul {
			position: static;
			&:not(:first-child) {
				display: none;
			}
			li {
				&:not(:first-child) {
					margin-top: 30px;
				}
				float: none;
	      display: block;
	      text-align: left;
				margin-bottom: 1px;
			}
		}
		label {
			display: block;
		}
	}
}

    Developer Certificate of Origin

    Sample pictures

    • [x] removed pictures

    Further details

    This is just a start. Perhaps someone can help enhance it. I think having a simple way to add navbar would be awesome.

    p.s.: I love PaperCSS so far - great framework

    feature 
    opened by amanbayev 27
  • Tutorials and examples

    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

    help wanted 
    opened by Fraham 20
  • Colors change

    Colors change

    Brief description

    Colors improving. More bright colors, changes in contrast for better readability, especially for the dark mode.

    Developer Certificate of Origin

    Sample pictures

    1 - Before & after

    1-before 1-after

    2 - Before & after

    2-before 2-after

    3 - Before & after

    3-before 3-after

    Further details

    There can be a question: is that a good idea — changing neutral dark grey to warmer brown? The thing is, that only a minority of people make modifications to the used frontend frameworks. Most people use it as it is, having no time for design, so, I think, frameworks shouldn't be too neutral and grey. It's good to offer ready color scheme.

    opened by Famaxis 18
  • Sass port

    Sass port

    Brief description :tada:

    resolves #33 SCSS Port of PaperCSS

    Developer Certificate of Origin

    Further details

    see https://github.com/papercss/papercss/pull/122#issuecomment-354085401

    :tada: :tada: :tada:

    opened by koester 16
  • Code for documentation is no longer maintenable

    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?

    help wanted 
    opened by TotomInc 16
  • link - change underline style to match button style

    link - change underline style to match button style

    Brief description

    Fixes: #155 ...

    Developer Certificate of Origin

    Sample pictures

    image

    ...

    Further details

    I made a change to the link element so it matches the button element. The way I did this is by removing the background-image from the a in _buttons.scss and then adding an :after pseudo-element. ...

    opened by serotonyn 15
  • Feature navbar

    Feature navbar

    Brief description

    reformatted the scss.

    Developer Certificate of Origin

    Sample pictures

    ...

    Further details

    ...

    opened by dallinbjohnson 15
  • Update gulp-sass, gulp-plumber, and gulp-clean-css

    Update gulp-sass, gulp-plumber, and gulp-clean-css

    gulp-sass, gulp-plumber, gulp-clean-css

    All of the packages above depend on gulp-util, which is a deprecated package.

    Update gulp-clean-css

    gulp-clean-css should be updated to at least v3.9.1, which is anyways being updated in #214

    Update gulp-plumber

    gulp-plumber should be updated to at least v1.2.

    Update gulp-sass

    gulp-sass should be update to at least v4.0.2.

    This is me asking if I can make a pull request.

    Can I make a pull request with these changes?

    opened by ChocolateLoverRaj 14
  • build(deps): bump decode-uri-component from 0.2.0 to 0.2.2

    build(deps): bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Fix type3 switch component hover effect

    Fix type3 switch component hover effect

    Brief description

    Fixed box-shadow and rotate when the switch component is checked and hovered.

    ...

    Developer Certificate of Origin

    Sample pictures

    Before https://user-images.githubusercontent.com/29003390/204531980-581d4284-e2f6-44ce-b24c-dbd9fe358b18.mov

    After https://user-images.githubusercontent.com/29003390/204532452-c1cecb35-6f4d-43f0-87be-b015951dda22.mov

    opened by kena0ki 0
  • Set html background color to match current theme

    Set html background color to match current theme

    Brief description

    Set background color for <html> element to --main-background variable. This is a pull request for issue #274.

    ...

    Developer Certificate of Origin

    Sample pictures

    Before: white background on dark mode (disable <body> background image & disable custom CSS in demo.css).

    image

    After: Use --main-background color on dark mode (disable <body> background image only).

    image

    Further details

    Nothing.

    opened by tonghoangvu 0
  • Add new component and Fix docs

    Add new component and Fix docs

    Brief description

    Hey, I edit my code again, which I PR before. 279

    • I add a new dropdown component and fix the bug rendering in mobile device. (pop a dropdown window when click it)
    • Fix the navbar docs. (remove fixed in html and add a lang="en" attribute in html tag)

    Problem: When I click it twice in mobile simulator in browser, the color of text is the hover color but not primary color like the picture below. image

    Developer Certificate of Origin

    Sample pictures

    image image image image

    Further details

    I will fix the bugs and add some animation. I have no experience of pull a request, so if there have something wrong please give me a notice. It is your warm help and patience that enable me learn how to use GitHub. ^ ^

    opened by gjssss 0
  • Host font locally

    Host font locally

    As of some changes in the eu-gdpr, loading google fonts directly from google is not allowed anymore. As the url of the google font 'neucha' is hardcoded within the css file, using papercss is not easy anymore for all website owners in the eu. So, I would highly appreciate if there is an option of using papercss with the neucha font hosted locally. Currently, I worked arount with manually changing to a local hosted font, but it's not future proof for updates and so on.

    opened by John-H-Smith 2
  • Can you use Sass module system with PaperCSS?

    Can you use Sass module system with PaperCSS?

    I'm using some of the styles defined by PaperCSS (mostly .border) as a basis for my own styles:

    .name {
  @extend .border;
  background-color: var(--muted-light);
  border-color: transparent;
}

    The import rules for the above go like this:

    @import "papercss/src/core/config";  // color mixin
@import "papercss/src/core/mixins";  // border-style mixin 
@import "papercss/src/utilities/borders";

    Needless to say that this works like a charm. The point is that apparently Sass is deprecating @import in favor of @use. And I can't make it work with a literal replacement:

    @use "papercss/src/core/config"; 
@use "papercss/src/core/mixins";
@use "papercss/src/utilities/borders";

    The error I'm getting is:

    Error: Undefined mixin.
  ╷
2 │   @include color('border-color','primary' );
  │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  papercss/src/utilities/_borders.scss 2:3  @use
  placeholder.scss 4:1                      root stylesheet

    Which AFAIK makes sense because the color mixin is being referenced in borders globally and that's one of the main differences between the @use and @import rules.

    Am I using @use the wrong way here or is it just that PaperCSS does not support it yet?

    opened by almibarss 1
Releases(v1.9.1)

  • v1.9.1(Dec 26, 2022)

  • v1.9.0(Nov 24, 2022)

    Another American holiday, another chance to release some new things for PaperCSS!

    • Update colors for better contrast and dark mode support (thanks @famaxis for getting the ball rolling in #251)
    • Fix default font import to include the recommended font-display: swap (thanks @marvelefe in #266)
    • Fix modals to show over navbars (thanks @mef in #270)
    • Fix Collapsible so that inputs can be displayed (thanks @mef in #277)
    • Fix Sass color unit deprecation (thanks @almibarss in #282)
    Screen Shot 2022-11-24 at 12 31 17 Screen Shot 2022-11-24 at 12 31 35 Source code(tar.gz)
    Source code(zip)
    paper.css(67.22 KB)
    paper.min.css(52.87 KB)

  • v1.8.3(Dec 25, 2021)

    Some small fixes and improvements:

    • Build system has been simplified and streamlined (thank you @TotomInc in #226)
    • .shadow-none has been added to disable shadows on children (thank you @toshihidetagami in #238)
    • bug fix occurring in Firefox 95 on linux, where the paper.css font is not applied to list item tags (thank you @mef in #262)
    Source code(tar.gz)
    Source code(zip)
    paper.css(67.14 KB)
    paper.min.css(52.83 KB)

  • v1.8.2(Nov 26, 2020)

  • v1.8.1(Oct 7, 2020)

  • v1.8.0(Sep 13, 2020)

    This release contains some very exciting features:

    Dark Mode

    A huge thank you to @seifsay3d in #199 for adding in dark mode support! Just add .dark to your html tag to get these awesome new styles. https://www.getpapercss.com/docs/utilities/dark-mode/.

    Screen Shot 2020-09-13 at 14 19 49

    Input Ranges

    PaperCSS now supports inputs with type="range" thanks to @Benbb96 in #213! https://www.getpapercss.com/docs/components/forms/

    Screen Shot 2020-09-13 at 14 20 20

    Dependency Overhaul

    Thanks to @TotomInc, PaperCSS's dependencies have been brought up to date and simplified using a build script instead of Gulp. This is something other CSS frameworks (like Bootstrap) use to keep things simple for contributors and users of the framework alike. Instead of PaperCSS being built on every install, it is built on every release and committed to the repo for full transparency.

    Source code(tar.gz)
    Source code(zip)
    paper.css(67.09 KB)
    paper.min.css(52.71 KB)

  • v1.7.0(Aug 1, 2020)

    @Phreshhh doing the most to add some awesome new features:

    Breadcrumbs

    A fresh new breadcrumb component has landed. Now no one will get lost on your site! https://www.getpapercss.com/docs/components/breadcrumb/

    Screen Shot 2020-08-01 at 16 27 01

    Outline Buttons

    New outline buttons! https://www.getpapercss.com/docs/components/buttons/

    Screen Shot 2020-08-01 at 16 28 39

    Switch

    Not just one, but several new styles of switches! Checkout the few different styles here https://www.getpapercss.com/docs/components/forms/

    switch

    Multiple Container Sizes

    Instead of just one size of container, you can now constrain the size to small, medium, or large. Thank you for the addition @marcuxyz, check it out at https://www.getpapercss.com/docs/layout/container/

    Bug Fixes

    • Multiple tab components are now supported on a page (thank you @Bajena in #207)
    • Tab content position is now fixed (thank you @koester in #205)

    Typos

    I still cannot spell, so thank you to @impressivewebs, @byrro, and @fulldecent for improving the quality of the codebase with the content corrections!

    Source code(tar.gz)
    Source code(zip)
    paper.css(53.41 KB)
    paper.min.css(46.28 KB)

  • v1.6.1(Jan 25, 2019)

    Bug Fixes

    • Hover on button anchors is now consistent with the hover for buttons (thank you @sarramegnag a0c77ba)
    • Building the progress bar CSS no longer throws an error on some systems (thank you again @sarramegnag 8af69f3)
    • Keyboard control on radio buttons now work as expected (thank you @vanillaSlice 6c20a60)
    • Height on select elements are now consistent across browsers (thank you @mert.safak 67d1208)

    Upgrades

    @TotomInc provided some much needed upgrades to our dependencies including upgrading gulp to v4. These upgrades will make future development easier and reduces the vulnerabilities found in npm audit. Thank you kindly!

    Typos

    As per usual, me no spell so good - so thank you @nelsonmestevao, @sarramegnag, @anupamasok, and everyone else who has taken time to improve the documentation of PaperCSS.

    Source code(tar.gz)
    Source code(zip)
    paper.css(45.13 KB)
    paper.min.css(38.75 KB)

  • v1.6.0(Oct 21, 2018)

    @vanillaSlice hooked us up with some awesome new features in this release:

    Dismissible Alerts

    Ever wanted to close out of an alert? Now you can with this update! https://www.getpapercss.com/docs/components/alerts/ alert

    Progress Bars

    Progress bars are here and in many different options. Try them with backgrounds, labels, or even stripes! https://www.getpapercss.com/docs/components/progress/ labelz

    Gulp Auto Prefixer

    No pretty picture for this, but now the gulp build will automatically include vendor prefixes where needed. We don't need to worry about a thing anymore! Here's what is supported: https://browserl.ist/?q=defaults

    Source code(tar.gz)
    Source code(zip)
    paper.css(45.10 KB)
    paper.min.css(38.73 KB)

  • v1.5.4(Sep 30, 2018)

  • v1.5.3(Sep 8, 2018)

  • v1.5.1(Jun 24, 2018)

  • v1.5.0(Jun 22, 2018)

    Navbar

    PaperCSS now has a fancy, new built in Navbar component! It's even responsive on small screens (with no JS required)!

    Big Screen: image

    Small Screen (open and close): nav

    Shout out to @dallinbjohnson for the addition and @koester for the assist!

    Linting

    Styles are now standardized with linting rules for the SCSS. Try it yourself with npm run stylelint. It will output any errors in style formatting.

    The same command is also a pre-commit Git hook ensuring the linter runs before each commit. Yay clean code!

    Source code(tar.gz)
    Source code(zip)
    paper.css(45.46 KB)
    paper.min.css(38.74 KB)

  • v1.4.1(Jan 13, 2018)

    Some good ol' fashioned fixes

    • PaperCSS will now build properly for production installs. (thank you @sullivanpt in #133)
    • Animations should be less glitchy on Windows Firefox. (shout out to @koester in #135)
    • Modals now align to be centered on screen (another thank you to @koester for #131)

    NOTE: In order for modals to center properly, they require some changes to the HTML. View the docs for more details on what this looks like.

    Source code(tar.gz)
    Source code(zip)
    paper.css(43.02 KB)
    paper.min.css(36.67 KB)

  • v1.4.0(Jan 3, 2018)

    LESS -> SCSS

    Holy smokes, PaperCSS, as of version 1.4.0 is no longer a LESS based framework. Its talents have moved on to the world of SCSS for better support and more contributors. Much love to @koester for taking on the rewrite and to everyone else for providing feedback and help in #122. This is a very cool under the hood change, but should not make for any difference in actual styles, other than a smaller CSS file.

    Overhauled Documentation

    Tired of scrolling forever on the page? Documentation is now separated out into multiple pages to keep everying organized and to reduce conflicts with future PRs. It is built with the popular Hugo static site generator, and as a bonus, code documentation now has syntax highlighting! Major shout out to @MunifTanjim for taking this on and to everyone else in #82. Check it out at getpapercss.com! image image

    Collapsibles and Accordions

    Those awesome changes aren't enough? PaperCSS now has more fancy pure CSS features. Use collapsibles to open and close many things, or accordions if you just want to use one at a time.

    Collapsibles

    peek 2017-12-27 12-20

    Accordions

    accpeek 2017-12-27 12-22

    Fixes

    • Some typos
    • README updates

    Contributors

    Thank you to everyone for their contributions to the discussion in issues and PRs. Special thanks to @koester | @MunifTanjim | @TotomInc | @Fraham | @afzalsayed96 | @DanielRuf for their contributions to the code base in this release!

    Source code(tar.gz)
    Source code(zip)
    paper.css(41.82 KB)
    paper.min.css(35.57 KB)

  • v1.3.1(Dec 16, 2017)

  • v1.3.0(Dec 15, 2017)

    Oh wow, are you ready? New features and fixes to make PaperCSS that much better!

    Inline Lists

    Why should lists only be vertical?

    image

    Tabs

    Tabs made with pure CSS. Pretty neat, right?

    peek 2017-12-15 08-38

    Modals

    Another feature normally made with JS done with CSS. Plus it has the paper feel that we all know and love <3

    modal

    Another style:

    image

    Fixes

    • Code snippets scroll horizontally rather than wrap
    • Many typos

    Documentation Updates

    Hate scrolling to the top of the page manually? We now have a hot new button that'll take you there for you. Check the bottom right of your screen as you scroll down the page.

    image

    The Readme on Github is also very improved!

    Under the Hood

    • PaperCSS now has some test coverage to keep elements that don't change much like flexbox, colors, grid stable and consistent.
    • Less files were updated to import styles used within them. This will allow each file to standalone if compiled to CSS.
    • .editorconfig added to keep styling consistent between different contributors.
    • Running npm run build will also generate individual CSS files for each component

    Contributors

    Thank you to everyone for their contributions to the discussion in issues and PRs. Special thanks to @TotomInc | @Fraham | @afzalsayed96 | @paulmand3l | @ilhamwibawa | @valerymelou | @Nilanno | @DanielRuf | @wintercounter | @maciejmatu | @joelwallis | @DannyFeliz | @brodybits | @paulmand3l for their contributions to the code base!

    Source code(tar.gz)
    Source code(zip)
    paper.css(42.73 KB)
    paper.min.css(36.65 KB)

  • v1.2.0(Dec 4, 2017)

    Hot off the presses, cool new features, fixes, and additions to make PaperCSS even better!

    More Buttons

    New button animations for hovering, clicking, and focusing. These bad boys are ready for action. They also come in fresh new colors to match the rest of the theme:

    buttons buttons-color

    Large Inputs

    Wanted to write a novel within a PaperCSS site? Now you can with style support for <textarea>

    image

    Articles

    Build a blog using PaperCSS right out of the box

    image

    Fixes

    • Radio buttons and check boxes work in IE
    • Popovers refactored to be simpler
    • Fixes for invalid styles
    • Many typos :)
    • Many bugs in the documentation page

    Contributors

    Thank you to everyone for their contributions for getting 1.2 released and out the door! @TotomInc | @Fraham | @afzalsayed96 | @DannyFeliz | @valerymelou | @DanielRuf | @joelwallis | @paulmand3l | @brodybits

    And thank you to everyone not explicitly mentioned for their contributions in the issues and PR comments!

    Source code(tar.gz)
    Source code(zip)
    paper.css(41.07 KB)
    paper.min.css(33.80 KB)

  • v1.1.0(Nov 5, 2017)

  • v1.0.1(Oct 31, 2017)

  • v1.0.0(Oct 28, 2017)

  • v0.0.0(Oct 18, 2017)

Owner
PaperCSS
PaperCSS
GitHub https://getpapercss.com
Source code for Chrome/Edge/Firefox/Opera extension Magic CSS (Live editor for CSS, Less & Sass)

Live editor for CSS, Less & Sass (Magic CSS) Extension Live editor for CSS, Less & Sass (Magic CSS) for Google Chrome, Microsoft Edge, Mozilla Firefox

null 210 Dec 13, 2022
Spectre.css - A Lightweight, Responsive and Modern CSS Framework

Spectre.css Spectre.css is a lightweight, responsive and modern CSS framework. Lightweight (~10KB gzipped) starting point for your projects Flexbox-ba

Yan Zhu 11.1k Jan 8, 2023
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

Aphrodite Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation. Support for colocating y

Khan Academy 5.3k Jan 1, 2023
Tiny CSS framework with almost no classes and some pure CSS effects

no.css INTERACTIVE DEMO I am tired of adding classes to style my HTML. I just want to include a .css file and I expect it to style the HTML for me. no

null 96 Dec 10, 2022
Reseter.css - A Futuristic CSS Reset / CSS Normalizer

Reseter.css A CSS Reset/Normalizer Reseter.css is an awesome CSS reset for a website. It is a great tool for any web designer. Reseter.css resets all

Krish Dev DB 1.1k Jan 2, 2023
The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

Bootstrap Sleek, intuitive, and powerful front-end framework for faster and easier web development. Explore Bootstrap docs » Report bug · Request feat

Bootstrap 161k Jan 1, 2023
Modern CSS framework based on Flexbox

Bulma Bulma is a modern CSS framework based on Flexbox. Quick install Bulma is constantly in development! Try it out now: NPM npm install bulma or Yar

Jeremy Thomas 46.6k Dec 31, 2022
A utility-first CSS framework for rapid UI development.

A utility-first CSS framework for rapidly building custom user interfaces. Documentation For full documentation, visit tailwindcss.com. Community For

Tailwind Labs 63.5k Dec 30, 2022
Materialize, a CSS Framework based on Material Design

MaterializeCSS Materialize, a CSS Framework based on material design. -- Browse the docs -- Table of Contents Quickstart Documentation Supported Brows

Alvin Wang 38.8k Jan 2, 2023
A minimalist CSS framework.

A minimalist CSS framework. Why it's awesome Milligram provides a minimal setup of styles for a fast and clean starting point. Just it! Only 2kb gzipp

Milligram 9.9k Jan 4, 2023
Lightweight CSS framework

Material Design CSS Framework MUI is a lightweight CSS framework that follows Google's Material Design guidelines. Use From the CDN: <link href="//cdn

null 4.5k Jan 1, 2023
A classless CSS framework to write modern websites using only HTML.

new.css new.css A classless CSS framework to write modern websites using only HTML. It weighs 4.8kb. All it does is set some sensible defaults and sty

null 3.6k Jan 3, 2023
Front-end framework with a built-in dark mode and full customizability using CSS variables; great for building dashboards and tools.

This is the main branch of the repo, which contains the latest stable release. For the ongoing development, see the develop branch. Halfmoon Front-end

Tahmid (Halfmoon UI) 2.8k Dec 26, 2022
Feature rich CSS framework for the new decade https://shorthandcss.com

Shorthand Shorthand is a CSS framework and does not include any javascript. You can customize the framework by using .scss only. Size Dist File URL Li

Shorthand 251 Sep 24, 2022
A new flexbox based CSS micro-framework.

Strawberry CSS What Strawberry is a new flexbox based CSS micro-framework. A set of common flexbox's utilities focused on making your life easier and

Andrea Simone Costa 74 Sep 26, 2022
A utility-first CSS framework for rapid UI development.

A utility-first CSS framework for rapidly building custom user interfaces. Documentation For full documentation, visit tailwindcss.com. Community For

Tailwind Labs 63.5k Jan 1, 2023
NES-style CSS Framework | ファミコン風CSSフレームワーク

日本語 / 简体中文 / Español / Português / Русский / Français NES.css is a NES-style(8bit-like) CSS Framework. Installation Styles NES.css is available via ei

null 19.2k Jan 5, 2023
A starter CSS framework that actually looks good.

Mustard UI Mustard is a starter CSS framework that actually looks good. Getting Started Mustard UI is currently in release v1.0. Try it out today and

Kyle Logue 1k Dec 28, 2022
Low-level CSS Toolkit – the original Functional/Utility/Atomic CSS library

Basscss Low-level CSS toolkit – the original Functional CSS library https://basscss.com Lightning-Fast Modular CSS with No Side Effects Basscss is a l

Basscss 5.8k Dec 31, 2022