https://github.com/hamdysalah1/thegrid

React grid layout using styled-component and flexbox
https://github.com/hamdysalah1/thegrid

flexbox grid-layout reactjs styled-components

Last synced: about 1 month ago
JSON representation

React grid layout using styled-component and flexbox

• Host: GitHub
• URL: https://github.com/hamdysalah1/thegrid
• Owner: hamdysalah1
• Created: 2020-03-30T08:03:44.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2021-05-11T23:56:11.000Z (over 3 years ago)
• Last Synced: 2024-04-25T20:47:34.702Z (8 months ago)
• Topics: flexbox, grid-layout, reactjs, styled-components
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/thegridsys
• Size: 21.5 KB
• Stars: 2
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
## Installing

1. Use the command 

``npm i thegridsys`` or ``yarn add thegridsys``

2. import the components

```import { Col, Row, Container } from "thegridsys";```

## Break Points

**Mobile Min width:** 320px

**Table Min width:** 768px

**Desktop Min width:** 1025px  - // Laptops

**Larg Desktop Min width:** 1366px

*Subtract 1px to get Max width*

## Media Queries

`breakPoints` object

```

mobileOnly: `@media (min-width: ${xsMin}px) and (max-width: ${xsMax}px)`,

tabletOnly: `@media (min-width: ${smMin}px) and (max-width: ${smMax}px)`,

tablet: `@media all and  (min-width: ${smMin}px)`,

desktop: `@media all and  (min-width: ${mdMin}px)`,

largeDesktop: `@media all and  (min-width: ${lgMin}px)`,

mobileMax: `@media all and (max-width: ${xsMax}px)`,

tabletMax: `@media all and  (max-width: ${smMax}px)`,

```

## Col

Col component props *MUST WRAP WITH ROW COMPONENT*

```

    

        {children}

    

```

## Row

```

    {children}

```

## Container

width on desktop = 720px

width on tablet = 720px

width on mobiles = 100%

```

    {children}

```