Web Components inspired by Pure CSS. 6 web components in 37KBs of uncompressed JS (without CSS or optional polyfills).
- 🎛 6 minimal components
- 🎨 Theming using CSS Variables
- 💄 SASS/SCSS
- 🌲 Works in any modern browser (see here)
- 📲 E2E testing
- 📸 Snapshot testing
- 📘 Storybook
- 🔷 Typescript
- ⛓ JSX + VDOM
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.
- 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
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
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.
- 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
- 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
- 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
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>
)
}
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.
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.
- ✅
<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