The bootstrap base components created with styled-components
npm install styled-base-components
> The bootstrap base components made with styled-components.
This is a modular approach to use bootstrap components for quick prototypes, as an entrypoint of your own component library, or if you need just one bootstrap component for your application.
``sh`
npm install --save styled-base-components
npm install --save styled-components@^4.1.3 react@^16.7.0 # Peer dependencies
This package contains basic global style for bootstrap layouts and
styled components for using utility classes from bootstrap.
This package also contains Transition components that can be used for
creating transitions.
`jsx
import { styled } from 'styled-components';
import { BootstrapBaseCss, Div, Utilities } from 'styled-base-components';
// Same as imported
;const App = (props) => (
{/ This installs bootstrap styling for html elements /}
Hello World
);
`Properties
$3
* transitionComponentProps Type: object
* delay Type: millisecods
* duration Type: milliseconds
* timingFunc Type: string
* noExit Type: boolean
* noEnter Type: boolean
* noInitialEnter Type: boolean
* hideOnExit Type: boolean
$3
Possible values for
:* nothing (for
xs)
* Sm (for sm)
* Md (for md)
* Lg (for lg)
* Xl (for xl)* vertical-align:
*
text{size}Baseline
*
*
*
*
* text-align:
*
*
*
*
* white-space:
*
*
* text-transform:
*
*
*
* font-weight:
*
*
*
*
*
* font-style:
*
* font-family:
*
* color:
*
*
*
*
*
*
*
*
*
*
* background-color:
*
*
*
*
*
*
*
*
*
*
*
* text-decoration:
*
* word-break + overflow-wrap:
*
* (max-)width/height:
* (width: 100%)
* w{size}75 (width: 75%)
* w{size}50 (width: 50%)
* w{size}25 (width: 25%)
* h{size}100 (height: 100%)
* h{size}75 (height: 75%)
* h{size}50 (height: 50%)
* h{size}25 (height: 25%)
* mw{size}100 (max-width: 100%)
* mw{size}75 (max-width: 100%)
* mw{size}50 (max-width: 100%)
* mw{size}25 (max-width: 100%)
* mh{size}100 (max-height: 25%)
* mh{size}75 (max-height: 25%)
* mh{size}50 (max-height: 25%)
* mh{size}25 (max-height: 25%)
* box-shadow:
* shadow{size}None
*
*
*
* position:
*
*
*
*
*
* overflow:
*
*
* float:
*
*
*
* resize:
*
*
*
*
* border:
*
*
*
*
*
*
*
*
*
*
* border-color:
*
*
*
*
*
*
*
*
*
* border-radius:
*
*
*
*
*
*
*
* display
*
*
*
*
*
*
*
*
*
* flex-direction:
*
*
*
*
* justify-content:
*
*
*
*
*
*
* align-items:
*
*
*
*
*
* align-self:
*
*
*
*
*
* align-content:
*
*
*
*
*
* order:
*
*
*
*
*
*
*
*
*
*
*
*
*
* flex-grow:
*
*
* flex-shrink:
*
*
* flex-wrap:
*
*
*
* visibility:
*
*
* Clearfix
*
* Truncate text
*
* Hide text
* #### Spacing
Possible properties:
*
=> margin
* p => paddingPossible property directions:
*
l => left
* r => right
* t => top
* b => bottom
* x => left and right
* y => top and bottomPossible values for spacing:
*
0, 1, 2, 3, 4, 5, 6, 7, 8, 9> Results in "
rem"Possible values for margin only:
*
n0, n1, n2, n3, n4, n5, n6, n7, n8, n9
* >
means negativeSpacing props has format:
`text
{property}{direction}{size}{value}
`Examples:
text
m1 (margin: 1*0.25rem)
mb3 (margin-bottom: 3*0.25rem)
mbn3 (margin-bottom: -3*0.25rem)
my3 (margin-top: 30.25rem; margin-bottom: 30.25rem)
pr2 (padding-right: 2*0.25rem)
pMd5 (@media (min-width: medium-screen-size) { padding: 5*0.25rem;})
``License
MIT © Lukas Aichbauer