https://github.com/wadackel/react-lime-grid

lime-grid.css for React.js
https://github.com/wadackel/react-lime-grid

css-grid flexbox lime-grid react react-component

Last synced: 15 days ago
JSON representation

lime-grid.css for React.js

• Host: GitHub
• URL: https://github.com/wadackel/react-lime-grid
• Owner: wadackel
• License: mit
• Created: 2017-05-30T15:42:54.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-06-18T12:08:04.000Z (over 7 years ago)
• Last Synced: 2024-10-11T20:17:54.712Z (about 1 month ago)
• Topics: css-grid, flexbox, lime-grid, react, react-component
• Language: JavaScript
• Homepage: https://tsuyoshiwada.github.io/react-lime-grid/
• Size: 176 KB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
![React LIME GRID](https://raw.githubusercontent.com/tsuyoshiwada/react-lime-grid/images/repo-banner.png)

[![Build Status](http://img.shields.io/travis/tsuyoshiwada/react-lime-grid.svg?style=flat-square)](https://travis-ci.org/tsuyoshiwada/react-lime-grid)

[![npm version](https://img.shields.io/npm/v/react-lime-grid.svg?style=flat-square)](https://www.npmjs.com/package/react-lime-grid)

> react-lime-grid for React.js

https://tsuyoshiwada.github.io/react-lime-grid/

## Table of Contents

* [Install](#install)

* [Setup](#setup)

    - [Basic](#basic)

    - [webpack](#webpack)

    - [PostCSS](#postcss)

* [Usage](#usage)

* [API](#api)

    - [Container](#container)

    - [Row](#row)

    - [Col](#col)

* [Changelog](#changelog)

* [Contribute](#contribute)

* [License](#license)

## Install

Install [lime-grid.css](https://github.com/tsuyoshiwada/lime-grid.css) and `react-lime-grid`.

```bash

$ npm install lime-grid.css react-lime-grid --save

# or

$ yarn add lime-grid.css react-lime-grid

```

## Setup

To use react-lime-grid, you need to import lime-grid.css.

### Basic

Add `` to ``.

```bash

$ cp node_modules/lime-grid.css/lime-grid.min.css ./path/to/

```

```html

```

### webpack

Use the following 2 loaders.

* [style-loader](https://github.com/webpack-contrib/style-loader)

* [css-loader](https://github.com/webpack-contrib/css-loader)

**webpac.config.js**

```javascript

{

  test: /\.css$/,

  include: /node_modules/,

  // or

  // include: /node_modules\/lime-grid\.css/,

  use: ['style-loader', 'css-loader'],

},

```

**index.js**

```javascript

import 'lime-grid.css';

```

### PostCSS

See [lime-grid.css](https://github.com/tsuyoshiwada/lime-grid.css).

## Usage

```javascript

import React from 'react';

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

const MyComponent = () => (

  

    

      ...

      ...

      ...

    

  

);

```

See more detail for https://tsuyoshiwada.github.io/react-lime-grid/

## API

### Container

| prop        | type                 | default |

|:------------|:---------------------|---------|

| `className` | `string`             | `null`  |

| `children`  | `React$Element` | `null`  |

| `tagName`   | `string`             | `'div'` |

| `fluid`     | `boolean`            | `false` |

### Row

| prop        | type                 | default |

|:------------|:---------------------|---------|

| `className` | `string`             | `null`  |

| `children`  | `React$Element` | `null`  |

| `tagName`   | `string`             | `'div'` |

| `start`     | `GridBreakpoint`     | `null`  |

| `center`    | `GridBreakpoint`     | `null`  |

| `end`       | `GridBreakpoint`     | `null`  |

| `top`       | `GridBreakpoint`     | `null`  |

| `middle`    | `GridBreakpoint`     | `null`  |

| `bottom`    | `GridBreakpoint`     | `null`  |

| `around`    | `GridBreakpoint`     | `null`  |

| `between`   | `GridBreakpoint`     | `null`  |

| `reverse`   | `GridBreakpoint`     | `null`  |

`GridBreakpoint` is type defined as follows

```javascript

type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

type GridBreakpoint = Breakpoint | Breakpoint[];

```

### Col

| prop        | type                          | default |

|:------------|:------------------------------|---------|

| `className` | `string`                      | `null`  |

| `children`  | `React$Elemen`           | `null`  |

| `tagName`   | `string`                      | `'div'` |

| `xs`        | `number`                      | `null`  |

| `sm`        | `number`                      | `null`  |

| `md`        | `number`                      | `null`  |

| `lg`        | `number`                      | `null`  |

| `xl`        | `number`                      | `null`  |

| `xl`        | `number`                      | `null`  |

| `xsOffset`  | `number`                      | `null`  |

| `smOffset`  | `number`                      | `null`  |

| `mdOffset`  | `number`                      | `null`  |

| `lgOffset`  | `number`                      | `null`  |

| `xlOffset`  | `number`                      | `null`  |

| `first`     | `boolean` or `GridBreakpoint` | `false` |

| `last`      | `boolean` or `GridBreakpoint` | `false` |

## Changelog

See [CHANGELOG.md](./CHANGELOG.md)

## Contribute

1. Fork it!

1. Create your feature branch: git checkout -b my-new-feature

1. Commit your changes: git commit -am 'Add some feature'

1. Run `$ npm test`

1. Push to the branch: git push origin my-new-feature

1. Submit a pull request :D

Bugs, feature requests and comments are more than welcome in the [issues](https://github.com/tsuyoshiwada/react-lime-grid/issues).

## License

[MIT © tsuyoshiwada](./LICENSE)