styled-bootstrap-grid
Advanced tools
styled-components has launched their v4 module, which has some major changes. For a v3.x compatibility chech the version 1.0.5 on npm or github.
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.
npm i -S styled-bootstrap-grid
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 :
@-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;
}
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>;
The package exposes a GridThemeProvider that allows few custom theming properties. With this provider you can :
Container padding left and right default valueRow padding left and right default valueCol padding left and right default valueThe 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')
);
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.
| name | alias | 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 | default | type | description |
|---|---|---|---|
| gridTheme | undefined | Object | See 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
},
}
| props | default | type | description |
|---|---|---|---|
| fluid | false | boolean | Equivalent to container and container-fluid |
Plus the ones inherited from styled-components div.
| 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.
| 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) |
| 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} |
| 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} |
| 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} |
| 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} |
Plus the ones inherited from styled-components div.
To run the example
styled-bootstrap-grid's dependencies with npm inpm run build:watchexample's directory with cd <styled-bootstrap-grid folder path>/exampleexample's dependencies with yarnyarn startAny other idea ? Please leave a suggestion.
FAQs
bootstrap grid system using styled components
The npm package styled-bootstrap-grid receives a total of 9,464 weekly downloads. As such, styled-bootstrap-grid popularity was classified as popular.
We found that styled-bootstrap-grid demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.