cattous

Cattous 🐱

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

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:!

import { ThemeProvider } from "styled-components"
import Div, { Normalize, NormalizeOpenType } from "cattous"
import cattousTachyons from "cattous-tachyons"

const Layout = () => (
  <ThemeProvider theme={cattousTachyons}>
    <Div>
      <Div fontSize={[0,1,2]} color="black" fontWeight="900" as="h1">Cattous.</Div>
      <Div hover="dim" fontSize="24px" as="p">A CSS in JSX library for lazy developers</Div>
    </Div>
  </ThemeProvider>
)

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.

const StyledDiv = styled(Div)`
  // insert your CSS here
`

Cattous also comes with Normalize, NormalizeOpenType (by Kenneth Ormandy), and Pesticide for debugging CSS (by Pesticide).

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 or on Linkedin.