Verious

Very serious styles.

Mission

To provide a set of easy to use React components for designing static websites with Gatsby.

Principles

Static Deployment

Gatsby is used to produce a static website that can be deployed to whole range of services. Verious is simply a component library built for Gatsby and React applications. Check out Gatsby for more information.

Component Based Design

Component HTML, CSS, and javascript code is isolated in a single React component. This abstraction allows designers to build complex layouts in single files using an easy to learn HTML-like syntax.

Reusability

Components can be shared across other components and pages using a simple module system. This ensures a single source of truth for every component which increases efficiency and even allows components to be reused across projects.

Vertical Rhythm

A website should have a regular repeated rhythm built on top of a common baseline to reduce friction and improve familiarity. The baseline grid is responsive to viewport width breaking with the responsive grid.

Abstract Measurements

The responsive and baseline grids provide a set of abstract measurements in design. Designers are encouraged to avoid exact pixels values and instead adopt units that scale across devices.

CSS Underneath

Under the hood, styles are written in SASS, namespaced by component, and compiled to CSS. This provides an easy escape hatch for translating components to vanilla CSS and HTML code.

This site is generated with Gatsby and built with love in Washington, DC.