Noodles, Poodles and More!

    @entria/responsiveness

    1.0.3 • Public • Published

    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])

    Install

    npm i @entria/responsiveness

    DownloadsWeekly Downloads

    3

    Version

    1.0.3

    License

    ISC

    Last publish

    Collaborators

    • streeterxs
    • sibelius
    • rturk