styled-base-components

The bootstrap base components created with styled-components

Usage no npm install needed!

<script type="module">
  import styledBaseComponents from 'https://cdn.skypack.dev/styled-base-components';
</script>

README

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