Box

Box renders a responsive box-model layout component.
Import component
import { Box } from 'rimble-ui';

Examples

This is a Box
Margin and padding
The space function adds margin and padding props. The margin and padding props use a shorthand syntax, similar to 
Basscss
Tachyons
, and 
Bootstrap
.
Margin props
  • m margin
  • mt margin-top
  • mr margin-right
  • mb margin-bottom
  • ml margin-left
  • mx margin-left and margin-right
  • my margin-top and margin-bottom
Padding props
  • p padding
  • pt padding-top
  • pr padding-right
  • pb padding-bottom
  • pl padding-left
  • px padding-left and padding-right
  • py padding-top and padding-bottom
Space Theming
To set a consistent white-space scale, add a space array to your theme. Use numbers to set pixel values, or use strings for other CSS units such as rem.
// theme.js
export default {
space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
};
All spacing props accept numbers, strings, or arrays as values, where:
  • Numbers between 0 and the last index of the space array are values from the space array defined in theme
  • Numbers greater than the length of the spacearray are converted to pixels
  • String values can be used for any valid CSS value (e.g. 'auto' or '2em')
  • Margin props accept negative values to set negative margin
  • Arrays can be used for 
    responsive styles
Width
The width function adds a single width prop for setting responsive width styles.
The width prop accepts number, string, or array values, where:
  • Numbers between 0 and 1 are converted to percentage based widths (e.g. 1/2 becomes '50%')
  • Numbers greater than 1 are converted to pixels
  • Strings can be used for other CSS values (e.g. '50vw' or '30em')
  • Arrays can be used for 
    responsive styles
Responsive Styles
All styled-system functions accept arrays as values to set styles responsively using a mobile-first approach.
<Box
width={[
1, // 100% below the smallest breakpoint
1 / 2, // 50% from the next breakpoint and up
1 / 4, // 25% from the next breakpoint and up
]}
/>

Props

Prop NameTypeIs RequiredDefault ValueDescription
themeobjectoptionalnone
Styled System Props
Box uses COMMON, LAYOUT, POSITION, FLEXBOX, BORDERS groups of Styed System props.
(ノ◕ヮ◕)ノ*:・゚✧

Are we missing anything?

If you have any extra insight you'd like to add, please raise an issue in Github.
Contribute

Box

On this Page