css-in-js - React: CSS in JS techniques comparison

  •        8

React: CSS in JS techniques comparison. More ticks doesn't mean "better", it depends on your needs. For example, if a package supports the css file extraction you can run the autoprefixing at build time.

http://michelebertoli.github.io/css-in-js/
https://github.com/MicheleBertoli/css-in-js

Tags
Implementation
License
Platform

   




Related Projects

jss - JSS is an authoring tool for CSS which uses JavaScript as a host language.

  •    Javascript

JSS is a more powerful abstraction over CSS. It uses JavaScript as a language to describe styles in a declarative and maintainable way. It is a high performance JS to CSS compiler which works at runtime and server-side. This core library is low level and framework agnostic. It is about 6KB (minified and gzipped) and is extensible via plugins API. Feel free to ask any JSS related questions on twitter by using hashtag #cssinjs and mentioning @oleg008, watch my latest talk about "Unique Value Proposition of CSSinJS" and try it on a playground.

postcss-js - PostCSS for React Inline Styles, Free Style and other CSS-in-JS

  •    Javascript

PostCSS for React Inline Styles, Radium, JSS and other CSS-in-JS.For example, to use Stylelint, RTLCSS or postcss-write-svg plugins in your workflow.

react-jss - JSS integration for React.

  •    Javascript

React-JSS provides components for JSS as a layer of abstraction. JSS and the default preset are already built in! Try it out in the playground. React-JSS wraps your component with a higher-order component. It injects a classes prop, which is a simple map of rule names and generated class names. It can act both as a simple wrapping function and as an ES7 decorator.

glamorous - 💄 Maintainable CSS with React

  •    Javascript

With the release of glamorous-primitives, now you can use glamorous with react-sketchapp to manage design systems and use React components for designs.You can find documentation and related examples here.

glamorous-native - React Native component styling solved💄

  •    Javascript

glamorous for React Native. React component styling solved with an elegant (inspired) API, small footprint, and great performance. For full feature documentation, see the glamorous docs. In React Native, we write styles within our JS, but you don't like having to create entire component functions just for styling purposes. You don't want to give a name to something that's purely style-related. And it's kind of annoying to do the StyleSheet.create, conditionals, and props-forwarding song and dance.


emotion - style as a function of state

  •    Javascript

Emotion is a performant and flexible CSS-in-JS library. Building on many other CSS-in-JS libraries, it allows you to style apps quickly with string or object styles. It has predictable composition to avoid specificity issues with CSS. With source maps and labels, Emotion has a great developer experience and great performance with heavy caching in production. Get up and running with a single import.

babel-plugin-css-in-js - A plugin for Babel v6 which transforms inline styles defined in JavaScript modules into class names so they become available to, e

  •    Javascript

A plugin for Babel v6 which transforms inline styles defined in JavaScript modules into class names so they become available to, e.g. the className prop of React elements. While transforming, the plugin processes all JavaScript style definitions found and bundles them up into a CSS file, ready to be requested from your web server. babel-plugin-css-in-js works seamlessly on both client and server. It has built-in support for media queries, pseudo-classes, attribute selectors, and theming. The plugin's options allow you to configure vendor-prefixing, minification, and class name compression.

minify - CSS & JavaScript minifier, in PHP

  •    PHP

And it comes with a huge test suite. The object constructor accepts 0, 1 or multiple paths of files, or even complete CSS/JS content, that should be minified. All CSS/JS passed along, will be combined into 1 minified file.

react-inline - Transform inline styles defined in JavaScript modules into static CSS code and class names so they become available to, e

  •    Javascript

Note: Thanks to the new possibilities of Babel v6+, there's also my babel-plugin-css-in-js project, which works exactly the same but doesn't require a separate CLI/API. If you're using Babel for code transpilation, just put babel-plugin-css-in-js in your build pipeline. Transform inline styles defined in JavaScript modules into static CSS code and class names so they become available to, e.g. the className prop of React elements.

styled-tools - Useful interpolated functions for CSS-in-JS

  •    Javascript

Useful interpolated functions for styled-components 💅, emotion 👩‍🎤, JSS and other CSS-in-JS libraries. Same as prop, except that it returns props.theme[path] instead of props[path].

Ideal-Image-Slider-JS - Quite simply the ideal Image Slider in vanilla JS.

  •    Javascript

Ideal Image Slider is written in vanilla JS and has no dependancies.Next you need to include the CSS file in the <head> section of your HTML and you need to include the script before the </body> tag in your HTML. Note you can optionally include a theme CSS file in the <head> too.

aphrodite - Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

  •    Javascript

Support for colocating your styles with your JavaScript component.If you'd rather watch introductory videos, you can find them here.

frontend-bootcamp - Frontend Workshop from HTML/CSS/JS to TypeScript/React/Redux

  •    TypeScript

In this two-day workshop you'll learn the basics of frontend development while building a working web app. The first day provides an introduction to the fundamentals of the web: HTML, CSS and JavaScript. This is targeted at new and experienced developers alike. On the second day we'll dive into more advanced topics like TypeScript, state management, and testing. While the examples should be accessible to anyone, you'll get the most out of it if you have some prior experience with programming and web technologies.

micron - a [μ] microInteraction library built with CSS Animations and controlled by JavaScript Power

  •    CSS

Micron.JS is a micro interaction library which can be used to add Interactions to different DOM Elements. Micron.JS animates an element using CSS power and the interactive behaviours are controlled by JavaScript. Micron.JS is easy to adapt and can bring interactions to life using html5 data attributes or a chain of JavaScript methods.

free-style - Make CSS easier and more maintainable by using JavaScript

  •    TypeScript

Free-Style is designed to make CSS easier and more maintainable by using JavaScript. There's a great presentation by Christopher Chedeau you should check out.

TinyEditor - A functional HTML/CSS/JS editor in less than 400 bytes

  •    HTML

A functional HTML/CSS/JS editor in less than 400 bytes

react-css-components - Define React presentational components with CSS

  •    Javascript

Define React presentational components with CSS (or even SASS or Less if you like). The implementation is based on CSS modules. In fact React CSS Components is just a thin API on top of CSS modules.

Hardy - Selenium-driven, cucumber-powered CSS testing.

  •    Javascript

This is almost entirely working but not 100%. If you spot a problem, please file an issue. Hardy is a collection of CSS testing steps and a boilerplate testing setup to get you up-and-running with automated CSS testing as quickly as possible. Tests are written in Cucumber and use Selenium. Hardy runs on Node.js and therefore all the example CSS test helpers are written in JS. The functionality behind them can easily be reused in any test setup, whether your tests are written in Java, Ruby or anything else.





We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.