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

styled-bootstrap-grid

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

styled-bootstrap-grid

bootstrap grid system using styled components

0.1.2
Source
npm

Version published: 7 years ago

Weekly downloads: 9.6K; increased by8.18%

Maintainers: 1

Weekly downloads

Created: 8 years ago

Source

styled-bootstrap-grid

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 xl={1} xlOffset={4}>
            Hello Bootstrap Fluid Layout
        </Col>
      </Row>
    </Container>
  </Whatever>;

Advanced

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.

name	css generated
phone	`@media (min-width: 576px) { /* */ }`
tablet	`@media (min-width: 768px) { /* */ }`
desktop	`@media (min-width: 992px) { /* */ }`
giant	`@media (min-width: 1200px) { /* */ }`

Props definition

Container

props	default	type	description
fluid	false	boolean	Equivalent 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

props	type	description
sm	number or string	Goes from 1 to 12. Equivalent to `col-sm-*`
smOffset	number or string	Goes from 1 to 11. Equivalent to `offset-sm-*`
smPush	number or string	Goes from 1 to 11. Equivalent to `push-sm-*`
md	number or string	Goes from 1 to 12. Equivalent to `col-md-*`
mdOffset	number or string	Goes from 1 to 11. Equivalent to `offset-md-*`
mdPush	number or string	Goes from 1 to 11. Equivalent to `push-md-*`
lg	number or string	Goes from 1 to 12. Equivalent to `col-lg-*`
lgOffset	number or string	Goes from 1 to 11. Equivalent to `offset-lg-*`
lgPush	number or string	Goes from 1 to 11. Equivalent to `push-lg-*`
xl	number or string	Goes from 1 to 12. Equivalent to `col-xl-*`
xlOffset	number or string	Goes from 1 to 11. Equivalent to `offset-xl-*`
xlPush	number or string	Goes from 1 to 11. Equivalent to `push-xl-*`

Plus the ones inherited from styled-components div.

Dependencies

todo

Any idea ? Please leave a suggestion.

Keywords

FAQs

What is styled-bootstrap-grid?

Is styled-bootstrap-grid popular?

Is styled-bootstrap-grid well maintained?

Package last updated on 01 Dec 2017

Did you know?

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