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 ^^:

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

Comments

[Alex]

Jumping in on this older post because I’m curious how your setup evolved. Have you tried any newer lightweight CSS frameworks since then, or did PaperCSS stick as your long-term choice? I’ve been experimenting with pairing Stencil components with minimal CSS utilities, and I’m wondering how well PaperCSS held up in bigger projects.

[amiceli]

I already tried another lightweight CSS framework like Pico or milligram CSS.

But PapierJS main goal is to us / reproduce PaperCss style. II like the “sketchy,” “drawn” style of PaperCss. I'm adding new component like sidebar or dropdown etc.

And reduce required PaperCss code to use component.

So it's a long-tem choice for PapierJs project.