https://github.com/abstractpoint/styled-blocks

Styled Component Primitives for rapid prototyping in React!
https://github.com/abstractpoint/styled-blocks

css-in-js react styled-components

Last synced: 1 day ago
JSON representation

Styled Component Primitives for rapid prototyping in React!

• Host: GitHub
• URL: https://github.com/abstractpoint/styled-blocks
• Owner: abstractpoint
• Created: 2019-09-29T19:27:57.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T11:42:58.000Z (almost 2 years ago)
• Last Synced: 2024-10-31T17:46:58.413Z (19 days ago)
• Topics: css-in-js, react, styled-components
• Language: JavaScript
• Size: 347 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 16
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

        
# STYLED <♒️ _> BLOCKS

*Styled Component Primitives for rapid prototyping in React!*

---

Styled Blocks is a bunch of primitives you can simply import, 

add some style props to, easily use your theme, ship! 🚢

No need to learn *yet another API*, you already know it. 🕶 

`npm i styled-blocks` OR `yarn add styled-blocks`

```

import { 

    Col, 

    Grid,

    Block,

    Inline,

    InlineBlock, 

    InlineCol, 

    InlineRow, 

    Row 

} from 'styled-blocks';

    

```

```

// theme.js

export default {

    breakpoints: ['30rem', '60rem'],

    ...

    c: {

        primary: {

            500: '#eebbdd',

            600: '#11ee33',

            700: '#33ff00',

        }

    },

    shadow: [

        '5px 10px #888888',

        '7px 15px #999999',

    ]

}

```

## Breakpoints / Media Queries 🥞

In your theme, define breakpoints as a property and array

as value. 

```

{

    breakpoints: ['30rem', '60rem'],

    ...

}

```

then in your components you can supply an array to any

styled prop, for example: 

` theme.c.primary['500']}; // theme also works here as expected

    }

`;

...

```

## Inspired by 💖

This project was inspired by excellent other efforts:

* [Subatomic](https://github.com/gragland/subatomic)

* [jsxstyle](https://github.com/jsxstyle/jsxstyle)

* [Tachyons](https://tachyons.io/)

* [Tailwind](https://tailwindcss.com)