Pure Web Components

13 November, 2019

I created Pure Web Components as a personal project to experiment with the new Web Components standard. Pure CSS is a CSS framework by Yahoo that has a tiny footprint (3.8kB) with only 6 components. I thought it'd be a great small-scale experiment to migrate an existing CSS codebase and component library to a more modern level.

Pure Web Components logo horizontal

Pure Web Components is a component library with 6 web components that reflect their CSS counterparts. Each component comes bundled with it's own CSS, and scoped to the shadow DOM where possible. It's built using StencilJS, a framework for developing Web Components.

Pure Web Components frontpage

See the documentation | Browse source code on Github

The documentation is also a reflection of the original site where possible, taking much of it's content and design. The documentation was created using GatsbyJS, and is a blazing fast React-powered PWA. Content is hosted in Markdown files, which allow for authoring in Markdown, as well as Web Components that are piped in.

You can find the full breakdown of the documentation tech stack and process in my blog post here.

The component pages featured a props table (pulled from Markdown, generated by StencilJS). The table itself uses <pure-table>, the web component from the library. Each coding example is also "live" and editable.

Pure Web Components frontpage

๐Ÿ”— This post was filed under

Blue square avatar white centered hiragana text reading Ryosuke

@Ryosuke3 years ago