npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

styled-bootstrap-grid2

v3.0.5

Published

bootstrap grid system using styled components

Downloads

2

Readme

styled-bootstrap-grid

npm downloads npm version definition types

Warning

styled-components has launched their v4 module, which has some major changes. For a v3.x compatibility check the version 1.0.5 on npm or github.

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.1.3 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

npm i -S react styled-components

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';

const customCSS = `
  body {
    color: red;
  }
`;

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

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

the default bootstrap layout CSS is :

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
    xl: 1200,
    lg: 992,
    md: 768,
    sm: 576,
    xs: 575,
    // or you can use aliases
    // giant: 1200,
    // desktop: 992,
    // tablet: 768,
    // phone: 576,
    // smaller: 575,
  },
  row: {
    padding: 10, // default 15
  },
  col: {
    padding: 5, // default 15
  },
  container: {
    padding: 0, // default 15
    maxWidth: { // defaults below
      xl: 1140,
      lg: 960,
      md: 720,
      sm: 540,
      xs: 540,
      // or you can use aliases
      // giant: 1140,
      // desktop: 960,
      // tablet: 720,
      // phone: 540,
      // smaller: 540,
    },
  },
};
const styledTheme = {
  mainColor: 'purple',
}

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

MediaTypes

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.smaller`
    color: green;
  `}
  ${media.xs`
    color: green;
  `}
  ${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.

| name | aliases | css generated | | - | - | - | | xs | smaller | all sizes: @media (max-width: 575px) { /* */ } | | sm | phone | @media (min-width: 576px) { /* */ } | | md | tablet | @media (min-width: 768px) { /* */ } | | lg | desktop | @media (min-width: 992px) { /* */ } | | xl | giant | @media (min-width: 1200px) { /* */ } |

Props definition

GridThemeProvider

| props | default | type | description | | - | - | - | - | | gridTheme | undefined | Object | See description below(*) |

(*)


const gridTheme = {
  breakpoints: { // defaults below
    giant: 1200,
    xl: 1200,
    lg: 992,
    md: 768,
    sm: 576,
    xs: 575,
    // or you can use aliases
    // giant: 1200,
    // desktop: 992,
    // tablet: 768,
    // phone: 576,
    // smaller: 575,
  },
  row: {
    padding: 10, // default 15
  },
  col: {
    padding: 5, // default 15
  },
  container: {
    padding: 0, // default 15
    maxWidth: { // defaults below
      xl: 1140,
      lg: 960,
      md: 720,
      sm: 540,
      xs: 540,
      // or you can use aliases
      // giant: 1140,
      // desktop: 960,
      // tablet: 720,
      // phone: 540,
      // smaller: 540,
    },
  },
}

Container

| props | default | type | description | | - | - | - | - | | fluid | false | boolean | Equivalent to container and container-fluid |

Plus the ones inherited from styled-components div.

Row

| props | default | type | description | | - | - | - | - | | alignItems | undefined | string | start or end or center or baseline or stretch. Equivalent to align-items-{value} | | smAlignItems | undefined | string | start or end or center or baseline or stretch. Equivalent to align-items-sm-{value} | | mdAlignItems | undefined | string | start or end or center or baseline or stretch. Equivalent to align-items-md-{value} | | lgAlignItems | undefined | string | start or end or center or baseline or stretch. Equivalent to align-items-lg-{value} | | xlAlignItems | undefined | string | start or end or center or baseline or stretch. Equivalent to align-items-xl-{value} | | justifyContent | undefined | string | start or end or center or between or around. Equivalent to justify-content-{value} | | smJustifyContent | undefined | string | start or end or center or between or around. Equivalent to justify-content-sm-{value} | | mdJustifyContent | undefined | string | start or end or center or between or around. Equivalent to justify-content-md-{value} | | lgJustifyContent | undefined | string | start or end or center or between or around. Equivalent to justify-content-lg-{value} | | xlJustifyContent | undefined | string | start or end or center or between or around. Equivalent to justify-content-xl-{value} |

Plus the ones inherited from styled-components div.

Col

| props | default | type | description | | - | - | - | - | | col | undefined | number or string or boolean | Goes from 1 to 12. Equivalent to col-* (or col in case of true) | | offset | undefined | number or string | Goes from 0 to 11. Equivalent to offset-* | | auto | undefined | boolean | Equivalent to col-auto | | alignSelf | undefined | string | auto or start or end or center or baseline or stretch. Equivalent to align-self-{value} | | order | undefined | number or string | first or last or 0 to 12. Equivalent to order-{value} | | noGutter | undefined | boolean | Equivalent to no-gutter | | sm | undefined | number or string | Goes from 1 to 12. Equivalent to col-sm-* (or col-sm in case of true) | | hiddenXsUp | undefined | boolean | Hides content from xs breakpoint to infinity | | hiddenXsDown | undefined | boolean | Hides content from xs breakpoint to 0 | | smOffset | undefined | number or string | Goes from 0 to 11. Equivalent to offset-sm-* | | smAuto | undefined | boolean | Equivalent to col-sm-auto | | smAlignSelf | undefined | string | auto or start or end or center or baseline or stretch. Equivalent to align-self-sm-{value} | | smOrder | undefined | number or string | first or last or 0 to 12. Equivalent to order-sm-{value} | | hiddenSmUp | undefined | boolean | Hides content from sm breakpoint to infinity | | hiddenSmDown | undefined | boolean | Hides content from sm breakpoint to 0 | | md | undefined | number or string | Goes from 1 to 12. Equivalent to col-md-* (or col-md in case of true) | | mdOffset | undefined | number or string | Goes from 0 to 11. Equivalent to offset-md-* | | mdAuto | undefined | boolean | Equivalent to col-md-auto | | mdAlignSelf | undefined | string | auto or start or end or center or baseline or stretch. Equivalent to align-self-md-{value} | | mdOrder | undefined | number or string | first or last or 0 to 12. Equivalent to order-md-{value} | | hiddenMdUp | undefined | boolean | Hides content from md breakpoint to infinity | | hiddenMdDown | undefined | boolean | Hides content from md breakpoint to 0 | | lg | undefined | number or string | Goes from 1 to 12. Equivalent to col-lg-* (or col-lg in case of true) | | lgOffset | undefined | number or string | Goes from 0 to 11. Equivalent to offset-lg-* | | lgAuto | undefined | boolean | Equivalent to col-lg-auto | | lgAlignSelf | undefined | string | auto or start or end or center or baseline or stretch. Equivalent to align-self-lg-{value} | | lgOrder | undefined | number or string | first or last or 0 to 12. Equivalent to order-lg-{value} | | hiddenLgUp | undefined | boolean | Hides content from lg breakpoint to infinity | | hiddenLgDown | undefined | boolean | Hides content from lg breakpoint to 0 | | xl | undefined | number or string | Goes from 1 to 12. Equivalent to col-xl-* (or col-xl in case of true) | | xlOffset | undefined | number or string | Goes from 0 to 11. Equivalent to offset-xl-* | | xlAuto | undefined | boolean | Equivalent to col-xl-auto | | xlAlignSelf | undefined | string | auto or start or end or center or baseline or stretch. Equivalent to align-self-xl-{value} | | xlOrder | undefined | number or string | first or last or 0 to 12. Equivalent to order-xl-{value} | | hiddenXlUp | undefined | boolean | Hides content from xl breakpoint to infinity | | hiddenXlDown | undefined | boolean | Hides content from xl breakpoint to 0 |

Plus the ones inherited from styled-components div.

Run example

To run the example

  1. Open a terminal and go to example's directory with cd <styled-bootstrap-grid folder path>/example
  2. Install example's dependencies with yarn
  3. Run yarn start

Dependencies

todo

  • complete web documentation

Any other idea ? Please leave a suggestion.