Container

Containers are the most basic element for using our default grid system. Container max-width changes at each breakpoint defined in the theme to the max-width defined in each breakpoint. You can edit grid variables by using theme.

You should avoid using padding, margin, width & max-width to container.

Avail Props
Default Value
align
-
justify
-
flexDir
-
flexGrow
-
flexWrap
-
rounded
-
bg
-
hoverBg
-
bgImg
-
bgPos
-
bgSize
-
maxH
-
minH
-
minW
-
border
-
borderColor
-
hoverBorderColor
-
textSize
-
textWeight
-
textDecor
-
textTransform
-
textAlign
-
textColor
-
hoverTextColor
-
fontFamily
-
shadow
-
hoverShadow
-
position
-
top
-
left
-
right
-
bottom
-
transform
-
transition
-
overflow
-
cursor
-
Show More
// Container
import { Div, Container } from "atomize";
ReactDOM.render(
<Container>
{/* your Content goes here */}
</Container>
, mountNode
);

Row & Col

Our Grid system uses <Row /> and <Col /> to layout and align content. It’s built with flexbox and is fully responsive. You can edit grid variables by using theme.

This is 5 of 12
This is 7 of 12

Variable width content

3 of 12
Variable width content
4 of 12

Changing Grid Variables

5 of 8
Row Props
Default Value
align
-
justify
-
flexDir
-
flexGrow
-
flexWrap
wrap
rounded
-
bg
-
hoverBg
-
bgImg
-
bgPos
-
bgSize
-
maxH
-
minH
-
maxW
-
minW
-
border
-
borderColor
-
hoverBorderColor
-
textSize
-
textWeight
-
textDecor
-
textTransform
-
textAlign
-
textColor
-
hoverTextColor
-
fontFamily
-
shadow
-
hoverShadow
-
position
-
top
-
left
-
right
-
bottom
-
transform
-
transition
-
overflow
-
cursor
-
Show More
Column Props
Default Value
align
-
justify
-
flexDir
-
flexWrap
-
order
-
rounded
-
bg
-
hoverBg
-
bgImg
-
bgPos
-
bgSize
-
maxH
-
minH
-
border
-
borderColor
-
hoverBorderColor
-
textSize
-
textWeight
-
textDecor
-
textTransform
-
textAlign
-
textColor
-
hoverTextColor
-
fontFamily
-
shadow
-
hoverShadow
-
position
-
top
-
left
-
right
-
bottom
-
transform
-
transition
-
overflow
-
cursor
-
Show More
// Basic Column Structure
import { Row, Col, Div } from "atomize";
ReactDOM.render(
<Row>
<Col size="5">
<Div p="1rem" bg="warning500">
This is 5 of 12
</Div>
</Col>
<Col size="7">
<Div p="1rem" bg="warning500">
This is 7 of 12
</Div>
</Col>
</Row>
, mountNode
);