@arnat/styled-base NPM

styled-base-components

Modular approach to use bootstrap components for quick prototypes, as an entrypoint of the component library.

Usage

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.

import { styled } from 'styled-components';
import { BootstrapBaseCss, Div, Utilities } from '@arnat/styled-base';

// Same as imported <Div> components, but you may want to use this for
// styling existing components.
const MyComponent = styled.div`
  ${Utilities};
`;

const App = (props) => (
  <div>
    <BootstrapBaseCss />
    {/* This installs bootstrap styling for html elements */}

    <Div bgDark textLight p2>
      Hello World
    </Div>
  <div>
);

Properties

Transition

transitionComponentProps Type: object
delay Type: millisecods
duration Type: milliseconds
timingFunc Type: string
noExit Type: boolean
noEnter Type: boolean
noInitialEnter Type: boolean
hideOnExit Type: boolean

Utilities

Possible values for {size}:

nothing (for xs)
Sm (for sm)
Md (for md)
Lg (for lg)
Xl (for xl)
vertical-align:
- text{size}Baseline
- text{size}Top
- text{size}Bottom
- text{size}TextTop
- text{size}TextBottom
text-align:
- text{size}Justify
- text{size}Left
- text{size}Right
- text{size}Center
white-space:
- text{size}Wrap
- text{size}NoWrap
text-transform:
- text{size}Lowercase
- text{size}Uppercase
- text{size}Capitalize
font-weight:
- text{size}WeightBold
- text{size}WeightBolder
- text{size}WeightNormal
- text{size}WeightLight
- text{size}WeightLighter
font-style:
- text{size}Italic
font-family:
- text{size}Monospace
color:
- text{size}Primary
- text{size}Secondary
- text{size}Success
- text{size}Danger
- text{size}Warning
- text{size}Info
- text{size}Light
- text{size}Dark
- text{size}Darker
- text{size}Reset
background-color:
- bg{size}Primary
- bg{size}Secondary
- bg{size}Success
- bg{size}Danger
- bg{size}Warning
- bg{size}Info
- bg{size}Light
- bg{size}Dark
- bg{size}Darker
- bg{size}White
- bg{size}Transparent
text-decoration:
- textDecoration{size}None
word-break + overflow-wrap:
- text{size}WordBreak
(max-)width/height:
- w{size}100 (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
- shadow{size}Small
- shadow{size}
- shadow{size}Large
position:
- position{size}Static
- position{size}Relative
- position{size}Absolute
- position{size}Fixed
- position{size}Sticky
overflow:
- overflow{size}Auto
- overflow{size}Hidden
float:
- float{size}Right
- float{size}Left
- float{size}None
resize:
- resize{size}None
- resize{size}Both
- resize{size}Vertical
- resize{size}Horizontal
border:
- borderLeft{size}
- borderRight{size}
- borderTop{size}
- borderBottom{size}
- border{size}
- borderLeft{size}0
- borderRight{size}0
- borderTop{size}0
- borderBottom{size}0
- border{size}0
border-color:
- border{size}Primary
- border{size}Secondary
- border{size}Success
- border{size}Danger
- border{size}Warning
- border{size}Info
- border{size}Light
- border{size}Dark
- border{size}Darker
border-radius:
- roundedTop{size}
- roundedBottom{size}
- roundedLeft{size}
- roundedRight{size}
- rounded{size}
- rounded{size}Circle
- rounded{size}Pill
display
- d{size}None
- d{size}Inline
- d{size}InlineBlock
- d{size}Block
- d{size}Table
- d{size}TableCell
- d{size}TableRow
- d{size}Flex
- d{size}InlineFlex
flex-direction:
- flex{size}Row
- flex{size}RowReverse
- flex{size}Column
- flex{size}ColumnReverse
justify-content:
- justifyContent{size}Start
- justifyContent{size}End
- justifyContent{size}Center
- justifyContent{size}SpaceBetween
- justifyContent{size}SpaceAround
- justifyContent{size}SpaceEvenly
align-items:
- alignItems{size}Start
- alignItems{size}End
- alignItems{size}Center
- alignItems{size}Baseline
- alignItems{size}Stretch
align-self:
- alignSelf{size}Start
- alignSelf{size}End
- alignSelf{size}Center
- alignSelf{size}Baseline
- alignSelf{size}Stretch
align-content:
- alignContent{size}Start
- alignContent{size}End
- alignContent{size}Center
- alignContent{size}Baseline
- alignContent{size}Stretch
order:
- order{size}0
- order{size}1
- order{size}2
- order{size}3
- order{size}4
- order{size}5
- order{size}6
- order{size}7
- order{size}8
- order{size}9
- order{size}10
- order{size}11
- order{size}12
flex-grow:
- flexGrow{size}
- flexGrow{size}0
flex-shrink:
- flexShrink{size}
- flexShrink{size}0
flex-wrap:
- flexWrap{size}
- flexNoWrap{size}
- flexNoWrap{size}Reverse
visibility:
- visible{size}
- invisible{size}
Clearfix
- clearfix{size}
Truncate text
- text{size}Truncate
Hide text
- text{size}Hide

Spacing

Possible properties:

m => margin
p => padding

Possible property directions:

l => left
r => right
t => top
b => bottom
x => left and right
y => top and bottom

Possible values for spacing:

0, 1, 2, 3, 4, 5, 6, 7, 8, 9

Results in "value * 0.25rem"

Possible values for margin only:

n0, n1, n2, n3, n4, n5, n6, n7, n8, n9
Auto

n means negative

Spacing props has format:

{property}{direction}{size}{value}

Examples:

m1 (margin: 1*0.25rem)
mb3 (margin-bottom: 3*0.25rem)
mbn3 (margin-bottom: -3*0.25rem)
my3 (margin-top: 3*0.25rem; margin-bottom: 3*0.25rem)
pr2 (padding-right: 2*0.25rem)
pMd5 (@media (min-width: medium-screen-size) { padding: 5*0.25rem;})