https://github.com/imedadel/cattous

CSS in JSX for lazy developers, built using styled-components and styled-system
https://github.com/imedadel/cattous

css css-in-js jsx rebass styled-components styled-system

Last synced: 1 day ago
JSON representation

CSS in JSX for lazy developers, built using styled-components and styled-system

• Host: GitHub
• URL: https://github.com/imedadel/cattous
• Owner: imedadel
• Created: 2019-04-30T22:56:51.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-09T21:45:20.000Z (about 2 years ago)
• Last Synced: 2024-12-19T14:50:27.151Z (8 days ago)
• Topics: css, css-in-js, jsx, rebass, styled-components, styled-system
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/cattous
• Size: 2.34 MB
• Stars: 41
• Watchers: 5
• Forks: 1
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md

Awesome Lists containing this project

README

        


Cattous 🐱

Easily define your design system and write your CSS using JSX.




[![Travis][build-badge]][build] [![npm package][npm-badge]][npm] [![Coveralls][coveralls-badge]][coveralls]



## How?

1. Import `ThemeProvider` from `styled-components`.

2. Import `Div`. (Optionally, you can also import `Normalize`, and `NormalizeOpenType`)

3. Define your theme or import an existing one, like `cattous-tachyons`.

And :tada:!

```JS

import { ThemeProvider } from "styled-components"

import Div, { Normalize, NormalizeOpenType } from "cattous"

import cattousTachyons from "cattous-tachyons"

const Layout = () => (

  

    


      
Cattous.

      
A CSS in JSX library for lazy developers

    

  

)

```


If you would like to add extra styles to `Div`, you can easily use styled-components for that. `as` is used to change the resulting HTML element.

```JS

const StyledDiv = styled(Div)`

  // insert your CSS here

`

```

Cattous also comes with `Normalize`, `NormalizeOpenType` (by [Kenneth Ormandy](https://github.com/kennethormandy/normalize-opentype.css)), and `Pesticide` for debugging CSS (by [Pesticide](http://pesticide.io/)).

## Why?

I recently became fond of styled-components and I couldn't go back to using a CSS file in my projects. However, and especially for small projects, styled-components slows me down because I have to declare a new variable for every HTML element that I want to style.

Rebass and styled-system offered what I wanted, but they were still missing a bunch of CSS properties.

Thus, I made Cattous 🐱 to help me get done with styling my side projects as fast as possible. It uses styled-system API and adds all missing CSS properties along with some styling (`cattous-tachyons`).

## What's still missing?

The project is still under development, although it can be used without any problems.

I am still **improving the source code**, **adding more options for theming**, and **importing known CSS libraries** such as Tachyons (✔), Bootstrap, and TailwindCSS.

## Questions? Suggestions?

You can find me on Twitter [@Imed_Adel](https://twitter.com/Imed_Adel) or on [Linkedin](https://www.linkedin.com/in/imedadel/).

[build-badge]: https://img.shields.io/travis/ImedAdel/cattous/master.png?style=flat-square

[build]: https://travis-ci.org/ImedAdel/cattous

[npm-badge]: https://img.shields.io/npm/v/cattous.png?style=flat-square

[npm]: https://www.npmjs.org/package/cattous

[coveralls-badge]: https://img.shields.io/coveralls/ImedAdel/cattous/master.png?style=flat-square

[coveralls]: https://coveralls.io/github/ImedAdel/cattous