emotion - style as a function of state

  •        63

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.

https://github.com/tkh44/emotion#readme
https://github.com/emotion-js/emotion

Tags
Implementation
License
Platform

   




Related Projects

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].

rebass - :atom_symbol: React UI component library & design system, built with styled-components and styled-system

  •    Javascript

React UI component library & design system, built with styled-system, with support for styled-components & emotion. Rebass is a library of highly-composable, primitive UI components for React, built with styled-components to keep styles isolated and reduce the need to write custom CSS in your application. Based upon a configurable design system, Rebass‘s props API makes building consistent, responsive web apps simpler and faster.

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.

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.

grid-styled - Responsive React grid system built with styled-system

  •    Javascript

The Box component handles width, margin and padding. All grid-styled components use styled-system for style props, which pick up values from a theme and allow for responsive styles to be passed as array values.


polished - A lightweight toolset for writing styles in JavaScript ✨

  •    Javascript

When ✨ polished modules are imported properly, tree shaking in webpack and Rollup can be leveraged to reduce your bundle size. ✨ polished has first-class Flow support with zero configuration to assist you in finding type errors while using our modules.

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-css-modules - Seamless mapping of class names to CSS modules inside of React components.

  •    Javascript

If you are considering to use react-css-modules, evaluate if babel-plugin-react-css-modules covers your use case. babel-plugin-react-css-modules is a lightweight alternative of react-css-modules. babel-plugin-react-css-modules is not a drop-in replacement and does not cover all the use cases of react-css-modules. However, it has a lot smaller performance overhead (0-10% vs +50%; see Performance) and a lot smaller size footprint (less than 2kb vs +17kb).

react-with-styles - Use CSS-in-JavaScript with themes for React without being tightly coupled to one implementation

  •    Javascript

Use CSS-in-JavaScript for your React components without being tightly coupled to one implementation (e.g. Aphrodite, Radium, or React Native). Easily access shared theme information (e.g. colors, fonts) when defining your styles.Create a module that exports an object with shared theme information like colors.

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.

babel-plugin-react-css-modules - Transforms styleName to className using compile time CSS module resolution

  •    Javascript

Transforms styleName to className using compile time CSS module resolution. In contrast to react-css-modules, babel-plugin-react-css-modules has a lot smaller performance overhead (0-10% vs +50%; see Performance) and a lot smaller size footprint (less than 2kb vs 17kb react-css-modules + lodash dependency).

emotion-recognition-neural-networks - Emotion recognition using DNN with tensorflow

  •    Python

This repository is the out project about mood recognition using convolutional neural network for the course Seminar Neural Networks at TU Delft. We use the FER-2013 Faces Database, a set of 28,709 pictures of people displaying 7 emotional expressions (angry, disgusted, fearful, happy, sad, surprised and neutral).

office-ui-fabric-core - The front-end CSS framework for building experiences for Office and Office 365

  •    CSS

Fabric is a responsive, mobile-first collection of styles and tools designed to make it quick and simple for you to create web experiences using the Office Design Language.This repository contains the core styles used across all aspects of Fabric including icons, type, fonts, colors, the grid, etc. If you have any issues or pull requests related to the JS components, please do so in the Office UI Fabric JS repository. For more information about the React components, check out the Office UI Fabric React repository.

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.

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

  •    Javascript

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.

glam - crazy good css in your js

  •    Javascript

I made it for me. You might like it. It's the core experience of glamor, trimmed down and optimised for react. glam should 'just work' with react v16, streaming and all.

style-dictionary - A build system for creating cross-platform styles.

  •    Javascript

Style once, use everywhere. A Style Dictionary is a system that allows you to define styles once, in a way for any platform or language to consume. A single place to create and edit your styles, and a single command exports these rules to all the places you need them - iOS, Android, CSS, JS, HTML, sketch files, style documentation, etc. It is available as a CLI through npm, but can also be used like any normal node module if you want to extend its functionality.

isomorphic-style-loader - CSS style loader for Webpack that is optimized for isomorphic (universal) web apps

  •    Javascript

CSS style loader for Webpack that works similarly to style-loader, but is optimized for critical path CSS rendering and also works great in the context of isomorphic apps. It provides two helper methods on to the styles object - ._insertCss() (injects CSS into the DOM) and ._getCss() (returns a CSS string).Note: Configuration is the same for both client-side and server-side bundles. For more information visit https://webpack.js.org/configuration/module/.

jsxstyle - Inline style system for React and Preact

  •    Javascript

This repository is the monorepo for runtime versions jsxstyle as well as a few tools designed to be used with jsxstyle. jsxstyle is an inline style system for React and Preact. It provides a best-in-class developer experience without sacrificing performance, and has little regard for existing CSS orthodoxy.





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.