• This repository has been archived on 27/Jan/2019
  • Stars
    star
    183
  • Rank 202,961 (Top 5 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 8 years ago
  • Updated over 5 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Comparing different ways to style components

⚠️ WARNING: This repository is completely out of date, it was made in 2016. Do not rely on any of this information! ⚠️




Click here if you really want to see the old, out of date readme

Comparison

A deeper comparison between a selected few libraries for styling react applications and component libraries.

Scope

Our goal here is to make the same component using various frameworks to compare features and implementations. While the component is small, we built in certain constraints you might have in a real world app (e.g. dangerouslySetInnerHTML) to help compare the libraries. We do a deeper dive with a selected number of frameworks to see how they scale and where the boundaries are.

This repo is set up so all common code is shared – inside the examples themselves, you'll only see what's different to the other methods. That's true even for the build process and dependencies, you'll only see the changes you need to make to the build process and the dependencies you need to add for a certain method, not all of it.

Examples

You can start an example by running npm install in the examples/ folder (only have to do that once), then running npm install inside the folder of the example you want to run and then running npm start.

Here are quick links to all the existing examples: (or just check out the examples/ folder)

We have issues open for the frameworks we're planning on implementing; if you think there's a strong case for adding one that's not on our list please open an issue to let us know!

For a complete reference with less deep-div of all the available frameworks see MicheleBertoli/css-in-js




License

Licensed under the MIT license, copyright (c) 2016-present Maximilian Stoiber, Jed Watson and Joss Mackison

More Repositories

1

styled-components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress πŸ’…
TypeScript
39,930
star
2

polished

A lightweight toolset for writing styles in JavaScript ✨
JavaScript
7,562
star
3

awesome-styled-components

A curated list of awesome styled-components resources πŸ’…
3,283
star
4

xstyled

A utility-first CSS-in-JS framework built for React. πŸ’…πŸ‘©β€πŸŽ€βš‘οΈ
MDX
2,254
star
5

jest-styled-components

πŸ”§ πŸ’… Jest utilities for Styled Components
JavaScript
1,577
star
6

vue-styled-components

Visual primitives for the component age. A simple port for Vue of styled-components πŸ’…
JavaScript
1,362
star
7

styled-theming

Create themes for your app using styled-components
JavaScript
1,168
star
8

css-to-react-native

Convert CSS text to a React Native stylesheet object
JavaScript
1,117
star
9

babel-plugin-styled-components

Improve the debugging experience and add server-side rendering support to styled-components
JavaScript
1,063
star
10

vscode-styled-components

Syntax highlighting for styled-components
JavaScript
911
star
11

stylelint-processor-styled-components

Lint your styled components with stylelint!
JavaScript
657
star
12

styled-components-website

The styled-components website and documentation
MDX
607
star
13

webstorm-styled-components

styled-components highlighting support in IntelliJ editors
Kotlin
377
star
14

vim-styled-components

Vim bundle for http://styled-components.com based javascript files.
Vim Script
300
star
15

elm-styled

Styling your Html Elements with typed Css πŸ’…
Elm
180
star
16

babel-plugin-polished

Compile polished helper functions at build time
JavaScript
138
star
17

styled-elements

Styled components for the DOM.
JavaScript
87
star
18

stylelint-config-styled-components

The shareable stylelint config for stylelint-processor-styled-components
JavaScript
71
star
19

spec

Design Requirements and Spec for a Component-oriented CSS Solution
61
star
20

color-schemer

A React app to help you select a color scheme, built with styled-components and polished
JavaScript
55
star
21

styled-components-codemods

Automatic codemods to upgrade your styled-components code to newer versions.
JavaScript
52
star
22

styled-components-experimentation

A place to play with things that shouldn't be in core
JavaScript
31
star
23

s-c.sh

The styled-components URL shortener!
30
star
24

styled-components-native-code-mod

JavaScript
28
star
25

styled-components.github.io

The styled-components homepage
JavaScript
22
star
26

brand

Logo and brand related materials
11
star
27

benchmark

JavaScript
9
star
28

todomvc

The Speedometer 2.0 React TodoMVC example rebuilt with styled-components
JavaScript
6
star
29

babel-plugin-styled-components-ssr

[EXPERIMENTAL]
JavaScript
2
star
30

use-styled-hook

tbd
1
star