papercss

Fix so popovers do not appear when hovering over the area occupied by the (still invisible) popover. Thank you @donmccurdy and @Oli8!

Fixes some misc color styles found in dark mode including alerts, buttons, and popovers.

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)

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)

Some helpful clean up provided here provided by @ChocolateLoverRaj (and even a commit or two from yours truly)

• Docs have been updated to include new build commands
• NPM packages have been updated to fix dependency audit and deprecation warnings
• A bug with dark mode alert variables has been fixed

Nothing to see here! Just adding back the SCSS source to the NPM package.

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

Input Ranges

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

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.

@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/

Outline Buttons

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

Switch

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

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!

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.

@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/

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/

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

@pynej fixed a padding issue when using badges within lists in #156.

@muyaszed hooked us up with a fix for #147 where radio and check boxes weren't working in Firefox. They are now!

PS: v1.5.2 was skipped because of an issue with the CDN and that NPM won't republish over the same version.

v1.5.0 threw a module error when installing from NPM as a result of adding stylelinter (whoops). This release fixes that error (issue #151).

The CSS in this version and v1.5.0 are the same, the only change is in the NPM scripts around building PaperCSS.

Navbar

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

Big Screen:

Small Screen (open and close):

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!

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.

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!

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

Accordions

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!

Small patch to get modal imports together and output their CSS as expected.

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

Inline Lists

Why should lists only be vertical?

Tabs

Tabs made with pure CSS. Pretty neat, right?

Modals

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

Another style:

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.

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!

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:

Large Inputs

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

Articles

Build a blog using PaperCSS right out of the box

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!

In addition to popovers added in 1.0.1, this release features the addition of:

Cards

Badges

Border Styles

Alerts

Disabled Buttons/Inputs

Contributors

Thank you to @TotomInc, @Fraham, and @joelwallis for their contributions to these new features!