pure-web-components

About Pure Web Components

Web Components inspired by Pure CSS. 6 web components in 37KBs of uncompressed JS (without CSS or optional polyfills).

Components

• Base
• Button
• Form
• Grid
• Menu
• Table

Features

• 🎛 6 minimal components
• 🎨 Theming using CSS Variables
• 💄 SASS/SCSS
• 🌲 Works in any modern browser (see here)
• 📲 E2E testing
• 📸 Snapshot testing
• 📘 Storybook
• 🔷 Typescript
• ⛓ JSX + VDOM

Documentation

You can find the documentation for all the web components in this library here. You can also browse the Storybook with examples of each component here.

Getting Started

git clone https://github.com/whoisryosuke/pure-web-components.git
cd pure-web-components
yarn
yarn story

To build the component for production, run:

yarn build

To run the unit tests for the components, run:

yarn test

Creating new components

yarn generate pure-component-name-here

You will be prompted by the Stencil CLI about what files you'd like to generate, then it'll output the component into your src/components/ folder.

Using these components

Script tag

• Publish to NPM
• Put a script tag similar to this <script src='https://unpkg.com/pure-web-components@0.0.1/dist/pure-web-components.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, HTML etc

Node Modules

• Run npm install pure-web-components --save
• Put a script tag similar to this <script src='node_modules/pure-web-components/dist/pure-web-components.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, HTML etc

In a stencil-starter app

• Run npm install pure-web-components --save
• Add an import to the npm packages import pure-web-components;
• Then you can use the elements anywhere in your template, JSX, HTML etc

In a React app

Found this guide that explains process well, with reasons why workarounds are used. Short answer: React doesn't pass props to Web Components correctly, so you have to use a combo of refs and utility class. It also handles events differently, using it's own form of synthetic events.

• Add the component(s) to the dependencies: npm install pure-web-components --save
• Import the component(s) using the Stencil loader (usually near the root of the app):

import { defineCustomElements } from "pure-web-components/dist/loader";

defineCustomElements(window);

• Use the component inside the app:

render() {
    return (
    <pure-form>
        <fieldset class="pure-group">
            <input type="text" class="pure-input-1-3" placeholder="Username">
            <input type="text" class="pure-input-1-3" placeholder="Password">
            <input type="text" class="pure-input-1-3" placeholder="Email">
        </fieldset>

        <fieldset class="pure-group">
            <input type="text" class="pure-input-1-3" placeholder="Another Group">
            <textarea class="pure-input-1-3" placeholder="Textareas can work here too"></textarea>
            <input type="text" class="pure-input-1-3" placeholder="Even More Stuff">
            <input type="text" class="pure-input-1-3" placeholder="Last Item">
        </fieldset>
        <pure-button type="submit" class="pure-input-1-3">Sign in</pure-button>
    </pure-form>
    )
}

Customizing the grid

Pure Web Components comes preloaded with 2-8, 12, and 24 column grids using class names formatted like .pure-u-1-4 (1/4 width or 1 part of a 4 column grid).

There are also responsive classes that use CSS media queries to only set the column width for certain viewports. For example, this button will be 1/2 width at mobile, or 1/3 at higher viewports: <div class="pure-u-sm-1-2 pure-u-md-1-3">. These classes require many viewport variations (each grid x column number x viewports = a lot of unused CSS without PurgeCSS). Because of this, only 2-5 and 12 columns are available responsively.

Adding more grid variations

You can enable more grids by editing pure-grid.scss and using the grid-generator SASS mixin. The mixin accepts the number of columns, and an optional breakpoint. These breakpoints are defined in the @mixin respond-from which outputs media queries - also located in the same file.

Todo

• ✅ <pure-button> component
• ✅ <pure-form> component
• ✅ <pure-grid> component
• ✅ <pure-grid> story examples
• ✅ <pure-base> component + story examples
• ✅ <pure-menu> component + story examples
• [] <pure-menu> CSS dropdowns
• ✅ <pure-table> component + story examples
• [] <pure-button-group> component + swap out in other component stories
• ✅ Create documentation
• • ✅ Test out Storybook Docs and MDX
• • ✅ Test out Gatsby using StencilJS and JSON output
• [] Remove old browser polyfills (such as CSS duplicate properties for rgba vs hex)
• [] Create more theming variables
• [] Add more themes
• • [] Dark Mode
• • [] Bootstrap
• • [] Semantic UI