Skip to content
Toolkit for component-oriented styling
JavaScript
Branch: master
Clone or download

Latest commit

dependabot Bump handlebars from 4.0.11 to 4.5.3 (#354)
Bumps [handlebars](https://github.com/wycats/handlebars.js) from 4.0.11 to 4.5.3.
- [Release notes](https://github.com/wycats/handlebars.js/releases)
- [Changelog](https://github.com/wycats/handlebars.js/blob/master/release-notes.md)
- [Commits](handlebars-lang/handlebars.js@v4.0.11...v4.5.3)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Latest commit 90843b8 May 29, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/workflows Assert flow error messages (#357) Feb 7, 2020
docs Add docs on Flow generic annotations (#281) Dec 12, 2018
packages Add styletron-engine-monolithic (#356) May 4, 2020
.editorconfig Added editorconfig file Dec 8, 2016
.eslintrc.js Sort client side media queries correctly (#335) Sep 4, 2019
.flowconfig V4 implementation (#217) Feb 24, 2018
.gitignore docs(contrib): add guide and mini app (#343) Oct 21, 2019
.prettierrc.json Sort client side media queries correctly (#335) Sep 4, 2019
.travis.yml Add Flow support for null values (#346) Oct 22, 2019
CHANGELOG.md V4 implementation (#217) Feb 24, 2018
CONTRIBUTING.md docs(contrib): add guide and mini app (#343) Oct 21, 2019
LICENSE Initial commit Mar 31, 2016
README.md cleanup READMEs (#325) Jun 21, 2019
TRADEOFFS.md Update TRADEOFFs.md Mar 1, 2018
lerna.json Bump lerna and deps Feb 24, 2018
package.json Update csstype and Flow versions (#344) Oct 22, 2019
renovate.json Add renovate.json Jan 8, 2018
yarn.lock Bump handlebars from 4.0.11 to 4.5.3 (#354) May 29, 2020

README.md

Styletron logo

build status

Styletron is an universal toolkit for component-oriented styling. It falls into the CSS in JS category. Styletron works great with React but can be used with other frameworks or plain JS as well.

Go to our documentation at styletron.org!

Usage with React

import { styled } from "styletron-react";

// Create a styled component by passing an element name and a style object
const RedAnchor = styled("a", { color: "red" });
<RedAnchor href="/foo">Hello</RedAnchor>;

// Or pass a function that takes props and returns a style object
const Panel = styled("div", props => {
  return { backgroundColor: props.$alert ? "orange" : "lightblue" };
});
<Panel $alert>Hello</Panel>;

// Do you prefer hooks?
import { useStyletron } from "styletron-react";
const [css] = useStyletron();
<a className={css({ color: "red" })} href="/foo">
  Hello
</a>;

Getting Started

Check the documentation to setup Styletron with Next.js, Gatsby or plain React/JS apps.

Looking for v3.x docs? | v3.x to v4.x migration guide

Design principles

  1. Component-oriented
    • Stateless, single-element styled components as base styling primitive
    • Prop interfaces for conditional/dynamic styling
  2. Embrace typed JavaScript
    • Composition of styles via (typed) JavaScript objects
    • No extra tooling (e.g. Webpack loaders, Babel plugins, etc.)
  3. Portability and flexibility
    • Portability of styled components across different rendering engines (e.g. atomic CSS)

See docs/design.md for more details.

Packages

You can’t perform that action at this time.