Defaults

There are some default values configured into layland for spacing and breakpoint:

// default vertical space
$vSpace: CSSLength = 24;
// default horizontal space
$hSpace: CSSLength = 24;
// default breakpoint
$bp: number = 1024;

Usage by components

The following components use the defaults if an explicit prop value is not passed in:

• Column: $vSpace
• Row: $hSpace
• Responsive: $vSpace / $hSpace / $bp
• Grid: $vSpace / $hSpace

Configuring

You can set the defaults using the ThemeProvider (part of styled-components).

Here is an example with different defaults

Live Editor

<ThemeProvider theme={{$vSpace: 10, $hSpace: 20, $bp: 1080}}> <Column style={{border:'5px solid blue'}}> <div style={{background: "lightskyblue"}}>Space 10</div> <div style={{background: "lightpink"}}>Space 10</div> </Column> <Row style={{border:'5px solid red'}}> <div style={{background: "lightskyblue"}}>Space 20</div> <div style={{background: "lightpink"}}>Space 20</div> </Row> <Responsive style={{border:'5px solid purple'}}> <div style={{background: "lightskyblue"}}>Space 10 or 20 based on bp = 1080</div> <div style={{background: "lightpink"}}>Space 10 or 20 based on bp = 1080</div> </Responsive> </ThemeProvider>

<ThemeProvider theme={{$vSpace: 10, $hSpace: 20, $bp: 1080}}>
  <Column style={{border:'5px solid blue'}}>
    <div style={{background: "lightskyblue"}}>Space 10</div>
    <div style={{background: "lightpink"}}>Space 10</div>
  </Column>
  <Row style={{border:'5px solid red'}}>
    <div style={{background: "lightskyblue"}}>Space 20</div>
    <div style={{background: "lightpink"}}>Space 20</div>
  </Row>
  <Responsive style={{border:'5px solid purple'}}>
    <div style={{background: "lightskyblue"}}>Space 10 or 20 based on bp = 1080</div>
    <div style={{background: "lightpink"}}>Space 10 or 20 based on bp = 1080</div>
  </Responsive>
</ThemeProvider>

Result

Loading...