This content originally appeared on DEV Community and was authored by amiceli
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 ^^:
<div class="row flex-spaces child-borders">
<label class="paper-btn margin" for="modal-1">Open Modal!</label>
</div>
<input class="modal-state" id="modal-1" type="checkbox">
<div class="modal">
<label class="modal-bg" for="modal-1"></label>
<div class="modal-body">
<label class="btn-close" for="modal-1">X</label>
<h4 class="modal-title">Modal Title</h4>
<h5 class="modal-subtitle">Modal Subtitle</h5>
<p class="modal-text">This is an example of a modal implemented with pure CSS! :D</p>
<label for="modal-1">Nice!</label>
</div>
</div>
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:
<p-tabs>
<p-tab title="Assassin's Creed Unity">
<!-- content -->
</p-tab>
<p-tab title="Assassin's Creed Mirage" selected>
<!-- content -->
</p-tab>
<p-tab title="Assassin's Creed II">
<!-- content -->
</p-tab>
</p-tabs>
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.
This content originally appeared on DEV Community and was authored by amiceli
amiceli | Sciencx (2025-02-23T14:06:55+00:00) PapierJS – PaperCSS with stencil and storybook. Retrieved from https://www.scien.cx/2025/02/23/papierjs-papercss-with-stencil-and-storybook/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.