styled-bootstrap-mixins
Call bootstrap mixin from javascript to use with styled-components. All mixins are based on bootstrap-sass.
This project is currently under development. Only these mixins are available:
- buttons
- clearfix
- grid
- image
- labels
Installation
npm install styled-bootstrap-mixins styled-components --save
Usage
Mixins
Because bootstrap sass mixins are written in snake-case, it is not a valid syntax in javascript.
You have replace dash -
with underscore _
to call the mixin.
const Container = styleddiv` background-color: papayawhip; ` const Component = <Container>Content</Container>
Constants
Constants are bootstrap's predefined values located in _variables.scss. They are compiled using scss-to-json to convert from scss to json.
To get a minimum medium screen breakpoint
CONSTANTS'$screen-md-min' // 992px
Please note that all returned constants are string.
Testing
Using jest test runner
npm test