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

  •        2

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

https://jxnblk.com/horror/
https://github.com/jxnblk/horror

Dependencies:

ava : ^0.25.0
html-tags : ^2.0.0
nyc : ^12.0.2
react-test-renderer : ^16.4.0
styled-system : ^2.2.5

Tags
Implementation
License
Platform

   




Related Projects

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.

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

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.

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.


styled-components-theme - Defines themes via flexible color selectors for use with styled-components

  •    Javascript

styled-components-theme generates selectors for colors in your styled-components theme that allows color manipulation, using the color library via calls on the selectors themselves. A selector, in this context, is defined as a function that looks like (props) => props.theme.myColor that the styled-components library accepts as a template variable.

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.

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.

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.

styled-theming - Create themes for your app using styled-components

  •    Javascript

<ThemeProvider> is part of styled-components, but is required for styled-theming. Most of your theming will be done with this function.

styled-css-grid - ๐Ÿฑ A tiny CSS grid layout for React

  •    Javascript

A tiny (~2kb) CSS grid layout for React, built with styled-components ๐Ÿ’…. See the website.

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.

design-system - Priceline.com Design System

  •    Javascript

If you'd like to contribute to the design system, we'd love to have your help. If you work at Priceline.com, please join the #design-system Slack channel and let us know what you'd like to work on. For all contributors, please be sure to read the Contributing doc.

vue-styled-components - Visual primitives for the component age

  •    Javascript

Do not use built-in or reserved HTML elements as component id (title, button, input...).

decss - ๐ŸŽจ Converts CSS modules into components ๐Ÿ‘ฉ‍๐ŸŽจ

  •    Javascript

decss converts CSS modules into React/Preact components. Thanks to simple CSS class naming convention it generates enum and boolean props for the component automatically so you can keep your code clean and tidy. The runtime size is exactly 673 B.

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.

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.

smooth-ui - Modern React UI library ๐Ÿ’…๐Ÿ‘ฉ‍๐ŸŽค๐Ÿญ

  •    Javascript

Modern React UI library. Code less, do more. Smooth UI is a style system / UI library for React. It works with Styled Components ๐Ÿ’… or Emotion ๐Ÿ‘ฉ‍๐ŸŽค.