❤
npm
Sign UpSign In

destijl
TypeScript icon, indicating that this package has built-in type declarations

0.0.10 • Public • Published

De Stijl

An opinionated way to style React components.


Overview

De Stijl is a very thin layer on top of Glamor to provide a preferred way of working with css in React. It scopes de-duplicates and prefixes css, and allows hovers, media queries and psuedo selectors.

Quick start

  • yarn add --dev destijl
  • import { Style, Styling } from "destijl";

Write inline styles using the Style function. You can optionally add hovers, media queries and psuedo css selectors. Then, use them in a React component. Every html tag now accepts a css property that you can use to set the style directly on any html element.

const style = Style({ border: "1px solid red" });
 
style.hover({ border: "1px solid green" });
 
const tree = <div css={style} />;

Use the Styling tag in your html head, which generates the css for all the children.

const Template = props => {
  return (
    <html>
      <head>
        <Styling body={props.children} />
      </head>
      <body>{props.children}</body>
    </html>
  );
};

Why is it great?

  • It provide a very natural way for designers to write css.
  • It allows for hovers, media queries and psuedo selectors, unlike inline css.
  • It relies on TypeScript types to assist with writing css.
  • By relying on Glamor, it scopes, de-duplicates and prefixes css, avoiding many common errors.

Gotcha's

  • Stijl monkey patches React.createElement to allow each html tag to use a convenience css property.

Readme

Keywords

none

Package Sidebar

Install

npm i destijl

Weekly Downloads

0

Version

0.0.10

License

MIT

Unpacked Size

34.4 kB

Total Files

29

Last publish

Collaborators

  • koenbok
Try on RunKit
Report malware