https://github.com/lcfd/grigliata

A styled-components grid system.
https://github.com/lcfd/grigliata

design-system hacktoberfest hacktoberfest2021 styled-components typescript

Last synced: about 4 hours ago
JSON representation

A styled-components grid system.

• Host: GitHub
• URL: https://github.com/lcfd/grigliata
• Owner: lcfd
• Created: 2019-07-20T11:29:13.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-03-15T11:47:25.000Z (over 1 year ago)
• Last Synced: 2023-08-24T02:36:20.557Z (about 1 year ago)
• Topics: design-system, hacktoberfest, hacktoberfest2021, styled-components, typescript
• Language: TypeScript
• Homepage: https://lcfd.github.io/grigliata/
• Size: 2.35 MB
• Stars: 7
• Watchers: 0
• Forks: 1
• Open Issues: 5
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Grigliata

A styled-components grid system.

![logo](./assets/logo-colored.svg)

## Why you should use it?

* It's not rocket science

* It works

* It will force you to manage the responsiveness of your website/application. So no more random padding on your website when used on a tablet.

## Documentation

You can find instructions and examples on the [documentation](https://lcfd.github.io/grigliata/) website.

Or, if you want to see an example right away, look below ⬇️

### A full example

```jsx

export const App = () => {

  const ROW_PADDING = {

    mobile: 0.5,

    tabletPortrait: 0.5,

    tabletLandscape: 0.5,

    desktop: 0.5

  };

  return (

    


      

          

            

            
Content

          

          

      

    

  )

}

```


## Development

To test the package we suggest using the [yalc](https://www.npmjs.com/package/yalc)](https://www.npmjs.com/package/yalc) package.

Here's a useful command to build and update your local build:

```bash

yarn build && yalc push

```

## Used by

* 2018 [PyCon Italia](https://pycon.it)