Skip to content
Web Components inspired by Pure CSS
TypeScript CSS JavaScript HTML
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook knobs, a11y, bg, + options addon Nov 13, 2019
src 👕 can't string as boolean - needs "check" Jan 24, 2020
.editorconfig 🎉 Stencil component template Nov 7, 2019
.eslintrc.json 🔧 set React version (or get error) Jan 24, 2020
.gitignore 🔨 Remove npm package lock - yarn pref Nov 13, 2019
LICENSE ⚡️ Pure's Yahoo License Nov 22, 2019
Pure Web Components - Cover.png 📚 Project images + better use instructions Dec 2, 2019
Pure Web Components - Horizontal.png 📚 Project images + better use instructions Dec 2, 2019
Pure Web Components - Stacked.png 📚 Project images + better use instructions Dec 2, 2019
commitlint.config.js Commitlint + gitmoji config Jan 24, 2020
package.json 🔧 Move husky to dev deps Jan 24, 2020
readme.md 📚 better quick start Dec 2, 2019
stencil.config.ts 👕 prettier run Nov 8, 2019
tsconfig.json
yarn.lock Commitlint + gitmoji config Jan 24, 2020

readme.md

Pure Web Components Logo

npm npm bundle size Built With Stencil Browse our Storybook NPM

About Pure Web Components

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

Components

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 logo 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);
  1. 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

You can’t perform that action at this time.