https://github.com/demoorjasper/stylish-components

A component styling library with minimalism and performance in mind
https://github.com/demoorjasper/stylish-components

components css-in-js performance styled web

Last synced: about 1 month ago
JSON representation

A component styling library with minimalism and performance in mind

• Host: GitHub
• URL: https://github.com/demoorjasper/stylish-components
• Owner: DeMoorJasper
• License: mit
• Created: 2018-05-02T14:55:42.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2019-03-03T09:34:09.000Z (over 5 years ago)
• Last Synced: 2024-10-07T21:50:06.214Z (about 1 month ago)
• Topics: components, css-in-js, performance, styled, web
• Language: JavaScript
• Homepage:
• Size: 122 KB
• Stars: 18
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ![Stylish components](stylish.png)

[![npm version](https://badge.fury.io/js/tiny-stylish-components.svg)](https://npmjs.org/package/tiny-stylish-components)

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:

```bash

  yarn add tiny-stylish-components

```

or

```bash

  npm install tiny-stylish-components -S

```

Creating a component:

```Javascript

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

const Button = stylish.button`

  background: #ffffff;

  color: #a2a2a2;

  border: none;

`;

render() {

  return I am a button! Click Me!;

}

```

Have a look at the full [documentation](documentation.md) for more advanced use-cases!