# react-purecss

> Yahoo's purecss library integration with react.

Latest version **0.0.3** (published 2015-06-01) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install react-purecss
pnpm add react-purecss
yarn add react-purecss
bun add react-purecss
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2015-06-01 |
| First published | 2015-06-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Rezzza |
| Maintainers | spy-seth |
| Keywords | react, react-component, pure, purecss, yahoo, isomorphic, css |

## Links

- npm: https://www.npmjs.com/package/react-purecss
- Repository: https://github.com/rezzza/react-purecss
- Homepage: https://github.com/rezzza/react-purecss#readme
- Issues: https://github.com/rezzza/react-purecss/issues
- npm.io page: https://npm.io/package/react-purecss

## Dependencies (1)

- [classnames](https://npm.io/package/classnames.md) ~2.1.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.3 (latest) — 2015-06-01
- 0.0.2 — 2015-06-01
- 0.0.1 — 2015-06-01

## README

# react-purecss

[![Travis](https://img.shields.io/travis/rezzza/react-purecss.svg)](https://travis-ci.org/rezzza/react-purecss) [![npm](https://img.shields.io/npm/v/react-purecss.svg)](https://www.npmjs.com/package/react-purecss)

Yahoo's purecss library integration with react.


## Installation

```
npm install --save react-pure purecss
```

Purecss styles are not included in this library. You need to include them manually in your page. See [the official doc for help](http://purecss.io/start/).

 

## Usage

Here a simple grid example. 

```javascript
var Grid = require('react-purecss').Grid;
var Row = require('react-purecss').Row;
var Col = require('react-purecss').Col;


var React = require('react');

var Foo = React.createClass({
    render: function () {
        return (
            <Grid>
                <Row>
                    <Col defaultSize="1-2" largeSize="1-4">Some content</Col>
                    <Col defaultSize="1-2" largeSize="3-4">Some content</Col>
                </Row>
                <Row>
                    <Col defaultSize="2-24" smallSize="4-25">Some content</Col>
                    <Col defaultSize="22-24" smallSize="21-25">Some content</Col>
                </Row>
            </Grid>
        );
    }
});

module.exports = Foo;
```

## Documentation

As documentation, you can have a look to [the test files](https://github.com/rezzza/react-purecss/tree/master/test).

### Pure Grids

[Official documentation](http://purecss.io/grids/).

#### Grid

```html
<Grid clasNamme="my-grid">...</Grid>
```

Will output:

```html
<div class="pure-g my-grid">...</div>
```

#### Row

A `Row` is a Pure grid unit with full with:

```html
<div class="pure-u-1">...</div>
```

It's design to add meaning to your grid. It's optional.


#### Col

```html
<Col clasNamme="my-col" defaultSize="2-5" mediumSize="1-5">...</Col>
```

Will output:

```html
<div class="pure-u-2-5 pure-u-md-1-5 my-col">...</div>
```

The `defaultSize` attribute define the grid unit size on mobile `pure-u-*`.

On responsive grid, you can use:

- `smallSize`: `pure-u-sm-*`
- `mediumSize`: `pure-u-md-*`
- `largeSize`: `pure-u-lg-*`
- `extraLargeSize`: `pure-u-xl-*`

---
_Source: https://npm.io/package/react-purecss · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._