All Projects → DeMoorJasper → stylish-components

DeMoorJasper / stylish-components

Licence: MIT license
A component styling library with minimalism and performance in mind

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to stylish-components

postcss-styled
PostCSS syntax for parsing styled components
Stars: ✭ 53 (+194.44%)
Mutual labels:  css-in-js, styled
Styled-Responsive-Media-Queries
Responsive Media Queries for Emotion styled or styled-components — Standard size from Chrome DevTools.
Stars: ✭ 33 (+83.33%)
Mutual labels:  css-in-js, styled
Goober
🥜 goober, a less than 1KB 🎉 css-in-js alternative with a familiar API
Stars: ✭ 2,317 (+12772.22%)
Mutual labels:  css-in-js, styled
Xwind
Tailwind CSS as a templating language in JS and CSS-in-JS
Stars: ✭ 249 (+1283.33%)
Mutual labels:  css-in-js
Further
🦄🌈🍄 algebraic style composition for functional UIs
Stars: ✭ 254 (+1311.11%)
Mutual labels:  css-in-js
morfeo
Morfeo is a tool to build design systems based on a theme. It helps you to follow a design language and write consistent UIs, whatever it is the framework of your choice. It's easy to use and, with the browser extension, your theme and your components are automatically documented.
Stars: ✭ 30 (+66.67%)
Mutual labels:  css-in-js
picketer-admin
PWA admin panel for picketer
Stars: ✭ 35 (+94.44%)
Mutual labels:  css-in-js
Arc
React starter kit based on Atomic Design
Stars: ✭ 2,780 (+15344.44%)
Mutual labels:  css-in-js
Avalonia.PropertyGenerator
Avalonia.PropertyGenerator generates the appropriate CLR members for Avalonia property definitions.
Stars: ✭ 20 (+11.11%)
Mutual labels:  styled
stitches-utils
Helpful stitches shorthand utilities combined in one package
Stars: ✭ 35 (+94.44%)
Mutual labels:  css-in-js
ui
The Blockstack design system implemented with react, styled-components, and styled-system.
Stars: ✭ 34 (+88.89%)
Mutual labels:  css-in-js
Cssobj
Runtime CSS manager, Turn CSS into dynamic JS module, Stylesheet CRUD (Create, Read, Update, Delete) in CSSOM, name space (local) class names
Stars: ✭ 253 (+1305.56%)
Mutual labels:  css-in-js
spring-keyframes
✌️1.4kb library to generate css keyframes in css-in-js based on a spring algorithm, with emotion
Stars: ✭ 65 (+261.11%)
Mutual labels:  css-in-js
Css In Js 101
💈 CSS-in-JS 101: All you need to know
Stars: ✭ 252 (+1300%)
Mutual labels:  css-in-js
csx
Utility functions for TypeStyle
Stars: ✭ 92 (+411.11%)
Mutual labels:  css-in-js
Oceanwind
Compiles tailwind shorthand into css at runtime
Stars: ✭ 248 (+1277.78%)
Mutual labels:  css-in-js
react-transition-components
Easily configurable React components for animations / transitions 💃
Stars: ✭ 18 (+0%)
Mutual labels:  css-in-js
postcss-jsx
PostCSS syntax for parsing CSS in JS literals
Stars: ✭ 73 (+305.56%)
Mutual labels:  css-in-js
objectify-css
CLI for converting CSS rules to JavaScript style objects
Stars: ✭ 46 (+155.56%)
Mutual labels:  css-in-js
styled-media-helper
💅 Helps manage media queries with styled components
Stars: ✭ 76 (+322.22%)
Mutual labels:  css-in-js

Stylish components

npm version

Stylish components is a blazing fast, lightweight, component styling library similar to styled-components.

Compared to styled-components

This package is lacking a lot of the features styled-components provides, but provides all the features I personally use. I might add theming and animations if requested or if I need them personally.

File size comparison

Type styled-components tiny-stylish-components
Regular 43kB 3.9kB
gzipped 16.3kB 1.7kB

Getting started

Install:

  yarn add tiny-stylish-components

or

  npm install tiny-stylish-components -S

Creating a component:

import { stylish } from 'tiny-stylish-components';

const Button = stylish.button`
  background: #ffffff;
  color: #a2a2a2;
  border: none;
`;

render() {
  return <Button>I am a button! Click Me!</Button>;
}

Have a look at the full documentation for more advanced use-cases!

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].