https://github.com/ricardocanelas/styled-responsive

Simple responsive grid system layout for React.
https://github.com/ricardocanelas/styled-responsive

Last synced: 17 days ago
JSON representation

Simple responsive grid system layout for React.

• Host: GitHub
• URL: https://github.com/ricardocanelas/styled-responsive
• Owner: ricardocanelas
• License: mit
• Created: 2019-02-06T21:35:12.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2019-02-13T12:26:01.000Z (almost 6 years ago)
• Last Synced: 2024-11-07T00:47:29.803Z (2 months ago)
• Language: JavaScript
• Homepage: https://88vyq66yk0.codesandbox.io/
• Size: 56.6 KB
• Stars: 1
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 💅 Styled-Responsive

Simple responsive grid system layout for React. Also you can inject the breakpoints in any component.

Live example: [https://codesandbox.io/s/n56nvvkm90](https://codesandbox.io/s/n56nvvkm90)

**Warning**

This component was created just for fun. You can find better components in: [awesome-styled-components](https://github.com/styled-components/awesome-styled-components#grid-systems) repository.

Not require `styled-component` BUT all example below are using that library.

## 👉🏻 Install Package

```

yarn add @ricardocanelas/styled-responsive

```

## 👉🏻 How to Use

1 - Add breakpoints

```

import { ThemeProvider } from 'styled-components'

const theme = {

  breakpoints: {

    xs: 0,

    sm: '48em',

    md: '64em',

    lg: '75em',

  },

}

class App extends Component {

  render() {

    return(

      

        

          

        

      

    )

  }

)

```

2 - Creating the Grid Component

*using the `media` method*

```

import styled from 'styled-components'

import { media } from '@ricardocanelas/styled-responsive'

export const Grid = styled.div`

  position: relative;

  margin-left: auto;

  margin-right: auto;

  box-sizing: border-box;

  width: 100%;

  ${media('xs')`max-width: 100%; padding: 8px;`}

  ${media('sm')`max-width: 49em;`}

  ${media('md')`max-width: 65em;`}

  ${media('lg')`max-width: 76em;`}

`

```

3 - Customizing any component

*using the `responsive` method*

```

import styled from 'styled-components'

import { responsive } from '@ricardocanelas/styled-responsive'

export const Box = styled.div`

  display: block;

  box-sizing: border-box;

  ${responsive('width')}

  ${responsive('background', 'bg')}

`

```

## 👉🏻 API

### **media(breakpoint)(css)**

Example:

```

${media('xs')`max-width: 100%; padding: 8px;`}

````

Will be:

```

@media (min-width: 0) {

  max-width: 100%;

  padding: 8px;

}

```

### **responsive(property, sufix)**

Example:

```

${responsive('width')}

````

Will be:

```

@media (min-width: 0) {

  width: ${props => props.xs};

}

@media (min-width: 48em) {

  width: ${props => props.sm};

}

@media (min-width: 64em) {

  width: ${props => props.md};

}

@media (min-width: 75em) {

  width: ${props => props.lg};

}

```

Using

```

```

---

Another Example:

```

${responsive('background', 'fundo')}

````

Will be:

```

@media (min-width: 0) {

  background: ${props => props['xs-fundo']};

}

@media (min-width: 48em) {

  background: ${props => props['sm-fundo']};

}

@media (min-width: 64em) {

  background: ${props => props['md-fundo']};

}

@media (min-width: 75em) {

  background: ${props => props['lg-fundo']};

}

```

Using

```

```

## 👉🏻 Code Examples

```

import React, { Component } from 'react';

import styled, { ThemeProvider } from 'styled-components';

import { responsive, media } from '@ricardocanelas/styled-responsive';

const theme = {

  breakpoints: {

    xs: 0,

    sm: '48em',

    md: '64em',

    lg: '75em',

  },

}

const Grid = styled.div`

  position: relative;

  margin-left: auto;

  margin-right: auto;

  box-sizing: border-box;

  width: 100%;

  ${media('xs')`max-width: 100%;`}

  ${media('sm')`max-width: 49em;`}

  ${media('md')`max-width: 65em;`}

  ${media('lg')`max-width: 76em;`}

`

const GridItem = styled.div`

  box-sizing: border-box;

  ${responsive('width')}

  ${responsive('background-color', 'bg')}

  ${media('lg')`

    padding: 10px;

    box-sizing: border-box;

  `}

`

const Flex = styled.div`

  display: flex;

  flex-wrap: wrap;

  box-sizing: border-box;

`

class App extends Component {

  render() {

    return (

      

        <>

          

            

              

                First Item

              

              

                Second item

              

            

          

        >

      

    );

  }

}

export default App;

```

## License

MIT © [Ricardo Canelas](https://github.com/ricardocanelas)