Displaying 1 to 20 from 143 results

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.

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.

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.

react-animations - A collection of animations for inline style libraries

  •    Javascript

A collection of animations that can be used with any inline style library that supports using objects to define keyframe animations, such as Radium or Aphrodite. React-animations implements all animations from animate.css.Check out the interactive demo.




styled-jsx - Full CSS support for JSX without compromises

  •    Javascript

Full, scoped and component-friendly CSS support for JSX (rendered on the server or the client).Code and docs are for v2 which we highly recommend you to try. Looking for styled-jsx v1? Switch to the v1 branch.

typography.js - A powerful toolkit for building websites with beautiful design

  •    Javascript

A powerful toolkit for building websites with beautiful typography. A powerful toolkit for building websites with beautiful design.

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.

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.


react-native-web - React Native for Web

  •    Javascript

"React Native for Web" brings the platform-agnostic Components and APIs of React Native to the Web. High-quality user interfaces: React Native for Web makes it easy to create fast, adaptive web UIs in JavaScript. It provides native-like interactions, support for multiple input modes (touch, mouse, keyboard), optimized vendor-prefixed styles, built-in support for RTL layout, built-in accessibility, and integrates with React Dev Tools.

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.

reflexbox - React flexbox layout and grid system

  •    Javascript

Primitive for controlling width, margin, padding and more. Both <Flex /> and <Box /> share the same props.

awesome-styled-components - A curated list of awesome styled-components resources ๐Ÿ’…

  •    

Please read the contribution guidelines before contributing. Contributions welcome and suggestions! Read the contribution guidelines first.

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-components - Visual primitives for the component age

  •    Javascript

If you are looking for styled-components v4.0 (under active development), check out the roadmap and dev branch. styled-components is compatible with both React (for web) and React Native – meaning it's the perfect choice even for truly universal apps! See the documentation about React Native for more information.

arc - React starter kit based on Atomic Design

  •    Javascript

ARc (Atomic React) is a React starter kit based on the Atomic Design methodology. It's progressive, which means that you can start with the basic boilerplate and try the other features when you are comfortable. If you find this useful, please don't forget to star โญ๏ธ the repo, as this will help to promote the project. Follow me on Twitter and GitHub to keep updated about this project and others.

bankai - :station: - friendly web compiler

  •    Javascript

The easiest way to compile JavaScript, HTML and CSS. We want people to have fun building things for the web. There should be no hurdles between a great idea, and your first prototype. And once you're ready, it should be easy to package it up and share it online. That's Bankai: a tool that helps you build for the web. No configuration, and no hassle - that's our promise.

typestyle - Making CSS Typesafe ๐ŸŒน

  •    TypeScript

Making CSS type safe. Writing CSS with TypeStyle will be just as fluent as writing JavaScript with TypeScript.

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.