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

• 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 or app's root
• Then you can use the element anywhere in your template, JSX, HTML etc

Developing Components

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

1. Add the component(s) to the dependencies: npm install pure-web-components --save
2. 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);

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

Credits

• Pure CSS
• StencilJS
• GatsbyJS