styled-base-components

    4.0.0 • Public • Published

    styled-base-components

    npm Travis branch Codecov branch storybook lerna

    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.

    Installation

    npm install --save styled-base-components
    npm install --save styled-components@^4.1.3 react@^16.7.0 # Peer dependencies 

    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 'styled-base-components';
     
    // 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;})

    License

    MIT © Lukas Aichbauer

    Install

    npm i styled-base-components

    DownloadsWeekly Downloads

    731

    Version

    4.0.0

    License

    MIT

    Unpacked Size

    71.7 kB

    Total Files

    7

    Last publish

    Collaborators

    • aichbauer