0.0.4 • Published 5 years ago

styled-bootstrap-grid-sc4 v0.0.4

Weekly downloads
5
License
MIT
Repository
github
Last release
5 years ago

styled-bootstrap-grid

npm version

Credits

This module is based on the styled-components module.

This module is highly inspired by the awesome work done on the react-bootstrap module.

This module is also based on the Twitter Bootstrap v4.0.0 bootstrap-grid.css. The css provided to styled bootstrap grid is not mine.

For more information about how does this grid system works (I mean with classes like containers, row, col, offset, push) , please refer to the official Twitter Bootstrap layout documentation.

Install

npm i -S styled-bootstrap-grid

Prerequisites

Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>. from Bootstrap documentation

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

You also must inject the bootstrap base CSS in your application root file, like this.

// app.js

import { BaseCSS } from 'styled-bootstrap-grid';

export default (props) =>
  <Whatever>
    <BaseCSS />
  </Whatever>;

You also can inject your own css like this :

import { BaseCSS } from 'styled-bootstrap-grid';

export default (props) =>
  <Whatever>
    <BaseCSS css={customCSS} />
  </Whatever>;

Basicaly, BaseCSS takes a string prop, and append the default bootstrap layout base CSS with this string with it.

the defaut bootstrap layout CSS is :

@-ms-viewport {
  width: device-width;
}

html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -ms-overflow-style: scrollbar;
}

*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

Basics

import React from 'react';
import { Container, Row, Col } from 'styled-bootstrap-grid';

export default (props) =>
  <Whatever>
    <Container>
      <Row>
        <Col col xl="1" lg="2" md="3" sm="6">
            Hello Bootstrap Layout
        </Col>
      </Row>
    </Container>
    <Container fluid>
      <Row>
        <Col col={6} sm={5} md={4} mdOffset={4}>
            Hello Bootstrap Fluid Layout
        </Col>
      </Row>
    </Container>
  </Whatever>;

Advanced

Custom gutter

The package exposes a GridThemeProvider that allows few custom theming properties. With this provider you can :

  • Define custom breakpoints
  • Change the Container padding left and right default value
  • Change the Row padding left and right default value
  • Change the Col padding left and right default value

The GridThemeProvider can be wrapped (or wrapped-in) the styled-component's ThemeProvider.

Example :

import React from 'react';
import ReactDOM from 'react-dom';
import { GridThemeProvider } from 'styled-bootstrap-grid';
import { ThemeProvider } from 'styled-components';

import App from './whatever/app/folder';

const gridTheme = {
  breakpoints: { // defaults below
    giant: 1200,
    xl: 1200,
    desktop: 992,
    lg: 992,
    tablet: 768,
    md: 768,
    phone: 576,
    sm: 576,
    smaller: 575,
    xs: 575,
  },
  row: {
    padding: 10, // default 15
  },
  col: {
    padding: 5, // default 15
  },
  container: {
    padding: 0, // default 15
  },
};
const styledTheme = {
  mainColor: 'purple',
}

ReactDOM.render(
  <ThemeProvider
    theme={styledTheme}
  >
    <GridThemeProvider
      gridTheme={gridTheme}
    >
      <App />
    </GridThemeProvider>
  </ThemeProvider>,
  document.getElementById('root')
);

Media

This packages also exposes the media element. It can be used in your styled-components like this :

import styled from 'styled-components';
import { media } from 'styled-bootstrap-grid';

const CustomDiv = styled.div`
  color: black;
  ${media.col`
    color: orange;
  `}
  ${media.phone`
    color: blue;
  `}
  ${media.sm`
    color: blue;
  `}
  ${media.tablet`
    color: red;
  `}
  ${media.md`
    color: red;
  `}
  ${media.desktop`
    color: purple;
  `}
  ${media.lg`
    color: purple;
  `}
  ${media.giant`
    color: yellow;
  `}
  ${media.xl`
    color: yellow;
  `}
`;

export default CustomDiv;

Using this media object will help you to build media-queries that will fit the same way as Bootstrap do.

namealiascss generated
xssmallerall sizes: @media (max-width: 575px) { /* */ }
smphone@media (min-width: 576px) { /* */ }
mdtablet@media (min-width: 768px) { /* */ }
lgdesktop@media (min-width: 992px) { /* */ }
xlgiant@media (min-width: 1200px) { /* */ }

Props definition

GridThemeProvider

propsdefaulttypedescription
gridThemeundefinedObjectSee description below(*)

(*)

const gridTheme = {
  breakpoints: { // defaults below
    giant: 1200,
    xl: 1200,
    desktop: 992,
    lg: 992,
    tablet: 768,
    md: 768,
    phone: 576,
    sm: 576,
    smaller: 575,
    xs: 575,
  },
  row: {
    padding: 10, // default 15
  },
  col: {
    padding: 5, // default 15
  },
  container: {
    padding: 0, // default 15
  },
}

Container

propsdefaulttypedescription
fluidfalsebooleanEquivalent to container and container-fluid

Plus the ones inherited from styled-components div.

Row

propsdefaulttypedescription
alignItemsundefinedstringstart or end or center or baseline or stretch. Equivalent to align-items-{value}
smAlignItemsundefinedstringstart or end or center or baseline or stretch. Equivalent to align-items-sm-{value}
mdAlignItemsundefinedstringstart or end or center or baseline or stretch. Equivalent to align-items-md-{value}
lgAlignItemsundefinedstringstart or end or center or baseline or stretch. Equivalent to align-items-lg-{value}
xlAlignItemsundefinedstringstart or end or center or baseline or stretch. Equivalent to align-items-xl-{value}
justifyContentundefinedstringstart or end or center or between or around. Equivalent to justify-content-{value}
smJustifyContentundefinedstringstart or end or center or between or around. Equivalent to justify-content-sm-{value}
mdJustifyContentundefinedstringstart or end or center or between or around. Equivalent to justify-content-md-{value}
lgJustifyContentundefinedstringstart or end or center or between or around. Equivalent to justify-content-lg-{value}
xlJustifyContentundefinedstringstart or end or center or between or around. Equivalent to justify-content-xl-{value}

Plus the ones inherited from styled-components div.

Col

propsdefaulttypedescription
colundefinednumber or string or booleanGoes from 1 to 12. Equivalent to col-* (or col in case of true)
offsetundefinednumber or stringGoes from 0 to 11. Equivalent to offset-*
autoundefinedbooleanEquivalent to col-auto
alignSelfundefinedstringauto or start or end or center or baseline or stretch. Equivalent to align-self-{value}
orderundefinednumber or stringfirst or last or 0 to 12. Equivalent to order-{value}
noGutterundefinedbooleanEquivalent to no-gutter
smundefinednumber or stringGoes from 1 to 12. Equivalent to col-sm-* (or col-sm in case of true)
smOffsetundefinednumber or stringGoes from 0 to 11. Equivalent to offset-sm-*
smAutoundefinedbooleanEquivalent to col-sm-auto
smAlignSelfundefinedstringauto or start or end or center or baseline or stretch. Equivalent to align-self-sm-{value}
smOrderundefinednumber or stringfirst or last or 0 to 12. Equivalent to order-sm-{value}
mdundefinednumber or stringGoes from 1 to 12. Equivalent to col-md-* (or col-md in case of true)
mdOffsetundefinednumber or stringGoes from 0 to 11. Equivalent to offset-md-*
mdAutoundefinedbooleanEquivalent to col-md-auto
mdAlignSelfundefinedstringauto or start or end or center or baseline or stretch. Equivalent to align-self-md-{value}
mdOrderundefinednumber or stringfirst or last or 0 to 12. Equivalent to order-md-{value}
lgundefinednumber or stringGoes from 1 to 12. Equivalent to col-lg-* (or col-lg in case of true)
lgOffsetundefinednumber or stringGoes from 0 to 11. Equivalent to offset-lg-*
lgAutoundefinedbooleanEquivalent to col-lg-auto
lgAlignSelfundefinedstringauto or start or end or center or baseline or stretch. Equivalent to align-self-lg-{value}
lgOrderundefinednumber or stringfirst or last or 0 to 12. Equivalent to order-lg-{value}
xlundefinednumber or stringGoes from 1 to 12. Equivalent to col-xl-* (or col-xl in case of true)
xlOffsetundefinednumber or stringGoes from 0 to 11. Equivalent to offset-xl-*
xlAutoundefinedbooleanEquivalent to col-xl-auto
xlAlignSelfundefinedstringauto or start or end or center or baseline or stretch. Equivalent to align-self-xl-{value}
xlOrderundefinednumber or stringfirst or last or 0 to 12. Equivalent to order-xl-{value}

Plus the ones inherited from styled-components div.

Run example

To run the example

  1. Open a terminal and install styled-bootstrap-grid's dependencies with npm i
  2. Run npm run build:watch
  3. Open a terminal and go to example's directory with cd <styled-bootstrap-grid folder path>/example
  4. Install example's dependencies with yarn
  5. Run yarn start

Dependencies

todo

  • complete web documentation

Any othre idea ? Please leave a suggestion.