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 with examples of each component here.
Getting Started
git clone https://github.com/whoisryosuke/pure-web-components.gitcd pure-web-componentsyarnyarn 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):
; ;
- Use the component inside the app:
{ 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