Displaying 1 to 17 from 17 results

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.

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.

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.




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.

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

lwjgl3-www - The LWJGL 3 website.

  •    Javascript

The website for LWJGL 3 is build with React. It is a single-page application with client-side routing. It installs a Service Worker in order to work offline.There is no server-side rendering because of hosting constraints.


design-system-utils - Design system framework for modern front-end projects

  •    Javascript

Maintaining styling consistency in a web app is always tough. This micro framework aims to standardise your design-system and provide helpful utilities to access it's information. Create your design system file, this contains all your global variables that your app will use, think font-sizes, color palette etc.

CSS-in-JS-generator - A tool to generate trendy CSS-in-JS files from regular CSS.

  •    TypeScript

CSS-in-JS-generator is a tool to generate trendy CSS-in-JS files from regular CSS. Here is a demo to convert Bootstrap to CSS-in-JS usable by emotion.

facepaint - Responsive style values for css-in-js.

  •    Javascript

facepaint returns a function that can be exported and used throughout your app to dynamically style based on your provided selectors. Note that the first value is considered a default value and is not a child of a media query at-rule.

horror - :scream: React HTML elements with CSS-in-JS

  •    Javascript

Horror can be used to create component primitive abstractions, similar to using styled-components or react-emotion, but with a more React-like syntax.

subatomic - Inline style props for emotion and styled-components

  •    Javascript

Subatomic allows you to style your React components inline so that you can spend more time writing styles and less time thinking of new component names. It integrates with emotion and styled-components so that you have the best of both worlds: The power of your favorite css-in-js library plus an inline style system to help you move fast and try out new ideas. Supercharge any component by making subatomic('element') the root element.

leafygreen-ui - LeafyGreen UI Kit

  •    Javascript

A set of CSS styles and React components built with design in mind. Node >= 6.11.5 required.

stack-styled - Stacking layouts for React

  •    Javascript

React component to make stack layouts easy: adds whitespace horizontal and vertical whitespace between each child element but not around the container. Based on styled-system and CSS Grid. We recommend to use this component with Grid Styled. See documentation & examples.

lab-cli - Command line utilities and exporting module for Compositor Lab

  •    Javascript

Lab projects can be published in a way that allows them to be installed and imported into other Lab projects from the app. The Node API is used by the Lab app to export lab components to React and other formats.