Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

styled-bootstrap-grid

Package Overview
Dependencies
Maintainers
1
Versions
44
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

styled-bootstrap-grid

bootstrap grid system using styled components

  • 0.2.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
9.6K
increased by8.18%
Maintainers
1
Weekly downloads
 
Created
Source

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-alpha.6 layout 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 { injectLayoutBaseCSS } from 'styled-bootstrap-grid';

injectLayoutBaseCSS();

You also can inject your own css like this :

const customCSS = `
  body {
    // whatever
  }
`;

injectLayoutBaseCSS(customCSS);

Basicaly, injectLayoutBaseCSS takes a string in param, 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 xl="1" lg="2" md="3" sm="12">
            Hello Bootstrap Layout
        </Col>
      </Row>
    </Container>
    <Container fluid>
      <Row>
        <Col sm={12} md={4} mdOffset={4}>
            Hello Bootstrap Fluid Layout
        </Col>
      </Row>
    </Container>
  </Whatever>;

Attention : For full phone / desktop compatibility, both sm & md props must at least be set to Col component.

Advanced

Custom gutter

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

  • 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 wraped (or wraped-in) the styled-component's ThemeProvider.

Example :

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

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

injectLayoutBaseCSS();

const gridTheme = {
  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.phone`
    color: blue;
  `}
  ${media.tablet`
    color: red;
  `}
  ${media.desktop`
    color: purple;
  `}
  ${media.giant`
    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.

namecss generated
phone@media (max-width: 767px) { /* */ }
tablet@media (min-width: 768px) { /* */ }
desktop@media (min-width: 992px) { /* */ }
giant@media (min-width: 1200px) { /* */ }

Props definition

GridThemeProvider

propsdefaulttypedescription
gridThemeundefinedObjectSee description below(*)

(*)


const gridTheme = {
  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

Row element has no props, except the ones inherited from styled-components div.

Col

propsdefaulttypedescription
sm0number or stringGoes from 1 to 12. Equivalent to col-sm-*
smOffset0number or stringGoes from 1 to 11. Equivalent to offset-sm-*
smPush0number or stringGoes from 1 to 11. Equivalent to push-sm-*
md0number or stringGoes from 1 to 12. Equivalent to col-md-*
mdOffset0number or stringGoes from 1 to 11. Equivalent to offset-md-*
mdPush0number or stringGoes from 1 to 11. Equivalent to push-md-*
lg0number or stringGoes from 1 to 12. Equivalent to col-lg-*
lgOffset0number or stringGoes from 1 to 11. Equivalent to offset-lg-*
lgPush0number or stringGoes from 1 to 11. Equivalent to push-lg-*
xl0number or stringGoes from 1 to 12. Equivalent to col-xl-*
xlOffset0number or stringGoes from 1 to 11. Equivalent to offset-xl-*
xlPush0number or stringGoes from 1 to 11. Equivalent to push-xl-*

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

Any idea ? Please leave a suggestion.

Keywords

FAQs

Package last updated on 09 Mar 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc