babel-plugin-css-in-js demo

This is a small demonstration of what babel-plugin-css-in-js is capable of.

Use your browser´s "Inspect Element" tool to see inline styles turned into class names.

You can find the code for all components here.

Media Queries

Resize your browser window (or change your phone´s orientation) to see how media queries take effect.

This paragraph is only visible if your screen is at most 320 logical pixels wide.

This paragraph is only visible if your screen is between 321 and 767 logical pixels wide.

This paragraph is only visible if your screen is between 768 and 1279 logical pixels wide.

This paragraph is only visible if your screen is at least 1280 logical pixels wide.

Theming

Selecting a theme will change the color of both this text and the input.

Bootstrap´s buttons, realized with babel-plugin-css-in-js

Enumerating Bootstrap-style buttons of all types and sizes.