@hixme-ui/container

Container

npm i --save @hixme-ui/container

View it live

Usage

import Container from '@hixme-ui/container'

<Container padding='30px' shadow>
  <p>Content goes here</p>
</Container>

<Container flex textCenter opacity='.6'>
  <p>Flex content goes here</p>
</Container>

Default Props

Name	Type	Default
padding	string	20px
background	string	none

Text Align

Name	Type	Description
textLeft	bool	text-align: left
textCenter	bool	text-align: center
textRight	bool	text-align: right

Background Color

Name	Type	Description
background	string	Apply CSS background properties
default	bool	Default will apply a white background
primary	bool
success	bool
warning	bool
error	bool
muted	bool
white	bool
black	bool
red	bool
blue	bool
purple	bool
yellow	bool
green	bool
light	bool
lighter	bool
lightest	bool

Borders

Name	Type	Description
border	string	Apply CSS border properties
borderColor	string	Apply CSS border-color properties
borderTop	string	Apply CSS border-top properties
borderBottom	string	Apply CSS border-bottom properties
borderLeft	string	Apply CSS border-left properties
borderRight	string	Apply CSS border-right properties
dashed	bool	Apply 2px, grey dashed border
rounded	bool	Apply 6px, border radius to container

Margin

Name	Type	Description
margin	string	Apply CSS margin properties
marginLeft	string	Apply CSS margin-left properties
marginRight	string	Apply CSS margin-right properties
marginTop	string	Apply CSS margin-top properties
marginBottom	string	Apply CSS margin-bottom properties
marginSides	string	Apply CSS margin-left and right properties

Padding

Name	Type	Description
padding	string	Apply CSS padding properties
paddingLeft	string	Apply CSS padding-left properties
paddingRight	string	Apply CSS padding-right properties
paddingTop	string	Apply CSS padding-top properties
paddingBottom	string	Apply CSS padding-bottom properties
paddingSides	string	Apply CSS padding-left and right properties
noPadding	bool	Remove default padding from container

Width

Name	Type	Description
width	string	Apply CSS width properties
minWidth	string	Apply CSS min-width properties
maxWidth	string	Apply CSS max-width properties

Height

Name	Type	Description
height	string	Apply CSS height properties
minHeight	string	Apply CSS min-height properties
maxHeight	string	Apply CSS max-height properties

Flex Properties

Name	Type	Description
flex	bool	Apply display: flex
inlineFlex	bool	Apply display: inline-flex
flexWrap	bool	Apply flex-wrap: wrap
flexRow	bool	Apply flex-direction: row
flexColumn	bool	Apply flex-direction: column
justifyStart	bool	Apply justify-content: flex-start
justifyEnd	bool	Apply justify-content: flex-end
justifyCenter	bool	Apply justify-content: center
justifySpaceBetween	bool	Apply justify-content: space-between
justifySpaceAround	bool	Apply justify-content: space-around
alignStart	bool	Apply align-items: flex-start
alignEnd	bool	Apply align-items: flex-end
alignCenter	bool	Apply align-items: center
alignSpaceBetween	bool	Apply align-items: space-between
alignSpaceAround	bool	Apply align-items: space-around
direction	string	Apply CSS flex-direction properties
alignItems	string	Apply CSS align-items properties
alignContent	string	Apply CSS align-content properties
justifyContent	string	Apply CSS justify-content properties
alignSelf	string	Apply CSS align-self properties
flexBasis	string	Apply CSS flex-basis properties
flexGrow	string	Apply CSS flex-grow properties
flexShrink	string	Apply CSS flex-shrink properties

Other

Name	Type	Description
withOutline	bool	Add 1px solid red outline
shadow	bool	Add box shadow to container
heavyShadow	bool	Add heavy box shadow to container
animate	bool	Add animation property to container
opacity	number	Add opacity for container.