Demo: https://ether.thescenery.co/demo/
Ether: A Modular Base for Any Design System
Ether is not a design system—it's a base for any design system to be built upon. It follows The Scenery's opinionated structure on how a design system should be built, focusing on the ability to easily scale and expand over time.
The main three pillars of Ether include Spacing, Color, and Typography.
This project is meant to be a bootstrap of sorts to get your design system project off the ground. We use Styleguidist to document the major aspects of Ether as well as to provide examples on how to implement these pillars inside of a design system.
ether-system-react is built and styled using styled-components. For more information, please see the Styled Components website.
Structure
The meat of this project exists inside the src directory. The src/base folder holds variables which generate Spacing, Color, and Typography values. src/components houses sample components (with documentation and tests) showing how to implement our Ether values.
styleguide-ui/ contains custom components for working with Styleguidist to display Ether values in an easy-to-understand fashion.
How to Use
Currently, Ether is not an npm module. It's more of a how-to. Eventually, this will change as the project matures.
Even so, this project has build scripts so it can be npm linked to any other project. Go ahead! Use Ether as a dependency. It works pretty dang well.
Included Components, Utilities, and Libraries
As of this writing, the currently available components and tools are:
| Name | Category | Description |
|---|---|---|
Button |
component | A simple button component with multiple modes and sizes |
Heading |
component | Typographic component to utilize the heading fontStyle values |
Paragraph |
component | Typographic component to utilize the body fontStyle values |
Spacer |
component | Layout component which utilizes the spacer values. Responsive too! |
mediaQueries |
utility | object which outputs styled-components CSS @media wrappers generated from set breakpoints |
spacerSizes |
library | object containing all spacer size values. Used by Spacer. |
colors |
library | object containing core color values and names. Typically, these values aren't used directly. Please add them to colorVariables for use if needed. |
colorVariables |
library | object containing variables mapped to color library values |
fonts |
library | generated font family/style/weight CSS for use within styled-components |
fontSizes |
library | generated font sizes from base values. Used in all Typography components. Responsive. |
typography |
library | object containing all available font styles for use within Typography components. Outputs styled-component CSS. Responsive. |
A Note on Custom Fonts
While custom fonts are referenced in the styles and displayed inside Styleguidist, you must host your own fonts or add the custom font service CSS to your project to see custom fonts set in your Ether implementation. For example, Ether is using Open Sans with weights 300, 400, and 700 from Google Fonts. Add the following CSS stylesheet link to your project to view the correct font:
<head>
...
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
...
</head>Feedback
Take a look around. Provide feedback! Let us know what you think. Open a PR. Create an issue. Fork it to use for your own project! Ether is a work in progress that we use internally, so things will be improved over time.
Setup
Note: node 8.11.4 is recommended and an .nvmrc file is included for those using nvm.
npm iwill install all dependencies
Development
npm startwill run React Styleguidist at localhost:6060npm testto runjest
Build
npm buildwill compile components into thelib/directory.npm run styleguide:buildwill create a static version for serving inside thedemo/directory
External Use
npm link ../path/to/ether-system-reactfrom your project directory to link to a local copy ofether-system-react.
// import individual components and libraries like so
import { Button, Heading, Spacer, colors, colorVariables } from 'ether-system-react';
// core variables are exported for use externally JUST IN CASE
console.log(colors.yellow);
console.log(colorVariables.semantic.danger);
return (
<Button>Hello, there!</Button>
);
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent