react-shed
react-shed is a version of shed.css created specifically with react in mind. It implements shed dynamically using glamorous, modularscale, and pure-color.
INSTALL
in your project:
yarn add react-shed
make sure you install the peer dependencies:
yarn add react glamorous
in your app root:
import React from 'react';import render from 'react-dom';import ThemeProvider from 'glamorous';import Shed createTheme reset from 'react-shed';import App from 'app'; // use `createTheme` to customize colors, typefaces, scale, etcconst TED_THEME = ; ;
USE
now you can build components using shed.css properties:
<Shed ="span" ="1" ="red" ="b" ="1/3"> margin-left and margin-right of '1' on your scale color of red display block and width 1of3</Shed>
CAVEATS
- it hard dependency on styled-components. If there's a smaller / better / faster alternative, I'm open to the idea.
jsx
disallows hyphenated property names, so any property that has a hyphen in shed (flx-g
for example), becomes the un-hyphenated version of itself (flxg
). The value can remain hyphenated.- it doesn't handle media queries. I recommend
react-media
.
THE SYNTAX IS UGLY-ISH
I get you. How about something like this?
<div.shed ="black">stuff</div.shed>
There's a babel
transform for that!
babel-plugin-shed
enables
this sugar. Install it with yarn add -D babel-plugin-shed
and add it to your
babel configuration.