PapierJS - PaperCSS with stencil and storybook

Every time I start a side project, I search for which CSS framework I will use. But Bootstrap, Tailwind, Foundation, etc., are not my thing, so I ended up using PaperCSS. PaperCSS provides nice styles for many elements: forms, cards, navbars, buttons, etc. But using a checkbox to open a dialog is a bit old-school ^^: Open Modal! X Modal Title Modal Subtitle This is an example of a modal implemented with pure CSS! :D Nice! That's why the PapierJS project was born. PapierJS (papier means paper in French) is a web component library built with Stencil and Storybook. The goal is to provide PaperCSS with web components easily: PapierJS will also provide new components like dropdowns, accordion, notification, etc, still using PaperCSS styles. Framework Stencil I use Stencil to create components with shadowRoot. It allows me to use PaperCSS without applying styles globally to the website. I really like Stencil; it’s very helpful for creating components and managing state, props, events, etc. Storybook For providing component specs, playground, and overview, Storybook is awesome! It’s a good practice for me to provide this for components. Specs For specs, I use mdx, which includes readme.md files generated by Stencil. Examples with the p-modal component. This way, we can read about events, methods, props, etc. Overview The Overview section provides a component demo and shows the html code to use it. Example with the p-accordion component. For some stories, I created preview Stencil components. I provide a demo and show the tsx code. Another example with the p-modal component. Playground Playground is similar to the overview, but with Storybook's args features, you can test prop use cases. Examples with the p-button component. Next Currently, there are still a few PaperCSS components to include, such as card and navbar. I will also include new components like autocomplete, spinner, password fields, etc. You can see all available component here : PapierJS and code on github.

Feb 23, 2025 - 15:39

PapierJS - PaperCSS with stencil and storybook

Every time I start a side project, I search for which CSS framework I will use.

But Bootstrap, Tailwind, Foundation, etc., are not my thing, so I ended up using PaperCSS.

PaperCSS provides nice styles for many elements: forms, cards, navbars, buttons, etc.

But using a checkbox to open a dialog is a bit old-school ^^:

 class="row flex-spaces child-borders">
   class="paper-btn margin" for="modal-1">Open Modal!


 class="modal-state" id="modal-1" type="checkbox">
 class="modal">
   class="modal-bg" for="modal-1">
   class="modal-body">
     class="btn-close" for="modal-1">X
     class="modal-title">Modal Title
     class="modal-subtitle">Modal Subtitle
     class="modal-text">This is an example of a modal implemented with pure CSS! :D
     for="modal-1">Nice!

That's why the PapierJS project was born.

PapierJS (papier means paper in French) is a web component library built with Stencil and Storybook.

The goal is to provide PaperCSS with web components easily:


     title="Assassin's Creed Unity">
        
    
     title="Assassin's Creed Mirage" selected>
        
    
     title="Assassin's Creed II">

PapierJS will also provide new components like dropdowns, accordion, notification, etc, still using PaperCSS styles.

Framework

Stencil

I use Stencil to create components with shadowRoot. It allows me to use PaperCSS without applying styles globally to the website.

I really like Stencil; it’s very helpful for creating components and managing state, props, events, etc.

Storybook

For providing component specs, playground, and overview, Storybook is awesome!

It’s a good practice for me to provide this for components.

Specs

For specs, I use mdx, which includes readme.md files generated by Stencil. Examples with the p-modal component. This way, we can read about events, methods, props, etc.

Overview

The Overview section provides a component demo and shows the html code to use it. Example with the p-accordion component.

For some stories, I created preview Stencil components. I provide a demo and show the tsx code. Another example with the p-modal component.

Playground

Playground is similar to the overview, but with Storybook's args features, you can test prop use cases. Examples with the p-button component.

Currently, there are still a few PaperCSS components to include, such as card and navbar.

I will also include new components like autocomplete, spinner, password fields, etc.

You can see all available component here : PapierJS and code on github.