README

Skeleton Responsive UI

React version of responsive css boilerplate: http://getskeleton.com/

Using

(IMPORTANT) Global Styles

Before the start, you have to import GlobalStyles and use it in a parent component, like app.js, it doesn't have a props, just css code:

import React from "react";
import {
  GlobalStyles,
  Container,
} from "skeleton-responsive-ui";

function App() {
  return (
    <>
      <GlobalStyles />
      <Container>
      ...other things
      </Container>
    </>
  );
}

export default App;

Global Styles component has couple of css impromevent for html tags.

LAYOUT

Container && Row

Everything have to be inside Container and Row. Of course a row defines a horizontal stack. They have only utils props. I will explain it later.

import React from "react";
import {
  GlobalStyles,
  Container,
  Row,
  Column,
} from "skeleton-responsive-ui";

function App() {
  return (
    <>
      <GlobalStyles />
      <Container>
        <Row>
          <Column column="twelve">
        <H1>Hello World</H1>
          </Column>
        </Row>
      </Container>
    </>
  );
}

export default App;

Column

You have to set a column size using of these strings: one, two, three, four, five, six, seven, eight, nine, ten, eleven, twelve or you can use one of them one-third, one-half, two-thirds. These values are same for offset.

Property	Description	Default value	type
`column`	Column size	Required	string
`offset`	Offset size of a column	null	string

Column Example

import React from "react";
import {
  Container,
  Row,
  Column,
  GlobalStyles,
} from "skeleton-responsive-ui";

function App() {
  return (
    <>
      <GlobalStyles />
      <Container>
        <Row>
          <Column column="five">5/12/Column>
          <Column column="seven">7/12</Column>
        </Row>
      </Container>
    </>
  );
}

export default App;

Offset Example

import React from "react";
import {
  Container,
  Row,
  Column,
  GlobalStyles,
} from "skeleton-responsive-ui";

function App() {
  return (
    <>
      <GlobalStyles />
      <Container>
        <Row>
          <Column column="five">5/12/Column>
          <Column column="five" offset="two">7/12</Column>
        </Row>
      </Container>
    </>
  );
}

export default App;

Button

Simple button. Just have one props: primary. If you set primary, button will be blue.

Property	Description	Default value	type
`primary`	Button will be blue	null	bool

Other Components

There are Hr, Input and H1,H2, H3, H4, H5, H6 components inside package. You don't have to use them. It is up to you. They are simple and don't have special props.

Utils

Package has four utils props as global. You can set them all other components (Container, Row, Column, Button, Input etc.).

Property	Description	Default value	type
`fullWidth`	Width will be 100%	null	bool
`maxFullWidth`	Max Width will be 100%	null	bool
`pullRight`	float will be right	null	bool
`pullLeft`	float will be left	null	bool

Usage no npm install needed!