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;})