https://github.com/richardzcode/fluid-react

Grid system for React, and more
https://github.com/richardzcode/fluid-react

fluid grid javascript mediaquery pseudo-elements react

Last synced: about 1 month ago
JSON representation

Grid system for React, and more

• Host: GitHub
• URL: https://github.com/richardzcode/fluid-react
• Owner: richardzcode
• License: mit
• Created: 2017-12-03T07:31:14.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-02-15T17:51:17.000Z (almost 7 years ago)
• Last Synced: 2024-11-11T11:53:27.203Z (about 2 months ago)
• Topics: fluid, grid, javascript, mediaquery, pseudo-elements, react
• Language: JavaScript
• Homepage: https://richardzcode.github.io/fluid-react/index.html
• Size: 920 KB
• Stars: 17
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# fluid-react

React inline-style solution for frontend development. CSS free.

Why Javascript styling instead of CSS? Check out this [video](https://youtu.be/ERB1TJBn32c)

* [Install](#install)

* [Example](#example)

* [Documentation](#documentation)

* [CSS](#css)

  - [MediaQuery](#mediaquery)

  - [Match](#match)

  - [Pseudo Element](#pseudo-element)

* [Grid](#grid)



## Install

No CSS file needed.

```

npm install --save fluid-react

```

## Example

Of course I am biased, to me this is the simplest to use library in this category.

**Mobile vs Desktop**

```

> npm install --save fluid-react

```

then

```

import React, { Component } from 'react';

import { Container, Row, Col } from 'fluid-react';

export default class App extends Component {

    render() {

        return (

            

                

                    Sidebar

                    Main Section

                

            

        )

    }

}

```

## Documentation

Documentation is on [Live Demo](https://richardzcode.github.io/fluid-react/index.html)

To run documentation/demo in local:

```

git clone https://github.com/richardzcode/fluid-react.git

cd fluid-react/example

npm install

npm start

```

## CSS

### MediaQuery

```

    const style = {

        margin: 'auto 1rem',

        padding: '2rem',

        color: '#fff',

        backgroundColor: '#0275d8',

        borderColor: '#0275d8',

        '@media (min-width: 576px) and (max-width: 767px)': {

            backgroundColor: '#5cb85c',

            borderColor: '#5cb85c'

        },

        '@media (min-width: 768px) and (max-width: 991px)': {

            backgroundColor: '#5bc0de',

            borderColor: '#5bc0de'

        },

        '@media (min-width: 992px) and (max-width: 1199px)': {

            backgroundColor: '#f0ad4e',

            borderColor: '#f0ad4e'

        },

        '@media (min-width: 1200px)': {

            backgroundColor: '#d9534f',

            borderColor: '#d9534f'

        }

    }

```

### Match

```

    export const MatchBlocks = (props) => (

        


            xs, sm

            md,lg

            xl

        

    )

```


### Pseudo Element

```

    const brandStyle = {

        fontSize: '24px',

        verticalAlign: 'top',

        padding: '4px',

        '::before': {

            content: '',

            display: 'inline-block',

            width: '64px',

            height: '32px',

            backgroundImage: 'url(https://reactjs.org/logo-og.png)',

            backgroundSize: '64px 32px'

        }

    }

```

## Grid

Base on [Bootstrap 12 column grid system](https://v4-alpha.getbootstrap.com/layout/grid/). A mobile-first grid system for React.

```

    

        

            1

            2

            3

            4

            5

            6

            7

            8

            9

            10

            11

            12

        

    

```