Responsiveness

Responsive style tools for ReactJS

Demo

Install

npm i @entria/responsiveness --save
yarn add @entria/responsiveness

Usage

You can define the sizes with their specifics props (small, medium, large).

import React from 'react';
import { Grid } from '@entria/responsiveness';

const Example = () => (
  <Grid.Row>
    <Grid.Col large={3} medium={6}>1</Grid.Col>
    <Grid.Col large={3} medium={6}>2</Grid.Col>
    <Grid.Col large={3} medium={6}>3</Grid.Col>
    <Grid.Col large={3} medium={6}>4</Grid.Col>
  </Grid.Row>
);

export default Example;

Or with the sizes prop (The parameters is from smaller to greater breakpoints).

import React from 'react';
import { Grid } from '@entria/responsiveness';

const Example = () => (
  <Grid.Row>
    <Grid.Col sizes={[12, 6, 3]}>1</Grid.Col>
    <Grid.Col sizes={[12, 6, 3]}>2</Grid.Col>
    <Grid.Col sizes={[12, 6, 3]}>3</Grid.Col>
    <Grid.Col sizes={[12, 6, 3]}>4</Grid.Col>
  </Grid.Row>
);

export default Example;

Grid.Col props

• cols: number of columns (default: 12)
• large: size of the column on large devices (default: 12)
• medium: size of the column on medium devices (default: 12)
• small: size of the column on small devices (default: 12)
• sizes: An array containing all column sizes. (default: [12, 12, 12])