Bedrock

We use Bedrock as our library of choice when it comes to layouting:

A collection of utility components that are designed to be used as building blocks for your web application's layout.

BEDROCK LAYOUT PRIMITIVES

The Lodash of Web Layouts

Components vs. Layout

Components are distinct units of interface, that shouldn't make any assumptions about where they're used. They should just use all the place given to them.

This makes it necessary to add dedicated layout functionality to your Design System, to help users actually create pages and interfaces out of your offered components!

We offer the Section for this when constructing websites, because it has some really nice convenience features for that! When more flexibility is needed we like to add Bedrock into the mix, which is easily connected to your Design Token set (for example your existing spacings) for a cohesive overall experience.

Integrating with kickstartDS

The kickstartDS spacing Token are mapped to the internal Bedrock scale in the BedrockProvider.jsx file.

BedrockProvider.jsx

_18

import { ThemeProvider } from 'styled-components';

_18

_18

const theme = {

_18

spacing: {

_18

none: '0px',

_18

xxs: 'var(--ks-spacing-xxs)',

_18

xs: 'var(--ks-spacing-xs)',

_18

sm: 'var(--ks-spacing-s)',

_18

md: 'var(--ks-spacing-m)',

_18

lg: 'var(--ks-spacing-l)',

_18

xl: 'var(--ks-spacing-xl)',

_18

xxl: 'var(--ks-spacing-xxl)',

_18

},

_18

};

_18

_18

export const BedrockProvider = (props) => (

_18

<ThemeProvider theme={theme} {...props} />

_18

);

Tips & Tricks

With the switchAt property, precisely responsive layouts can be created.
The witdh at which a layout will switch from a row to a column display can be set.
Its supported in the Columns, Inline and Split Components.

Examples

A couple common use cases:

Split

Elements can be placed next to each other with varying widths.

Content

Content

Toggle Code

_10

import { Split } from '@bedrock-layout/primitives';

_10

_10

<Section>

_10

<Split gutter="sm" fraction="3/4">

_10

<TextField hideLabel placeholder="Enter your email" />

_10

<Button label="Subscribe" />

_10

</Split>

_10

</Section>

Stack

A simple way to stack elements on top of each other.

Content

Content

Generators

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Components

Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.

Toggle Code

_22

import { Stack } from '@bedrock-layout/primitives';

_22

_22

<Section width="narrow">

_22

<Stack gutter="sm">

_22

<TeaserRow

_22

topic="Generators"

_22

image="https://www.kickstartds.com/img/recipes/generator.svg"

_22

text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."

_22

link={{

_22

label: 'Explore generators',

_22

}}

_22

/>

_22

<TeaserRow

_22

topic="Components"

_22

image="https://www.kickstartds.com/img/recipes/toolbox.svg"

_22

text="Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."

_22

link={{

_22

label: 'See our components',

_22

}}

_22

/>

_22

</Stack>

_22

</Section>

Columns

For a precise column layout. Elements can be streteched over multiple columns.

Content

Content

Content

Toggle Code

_10

import { Columns, Column } from '@bedrock-layout/primitives';

_10

_10

<Columns switchAt={528} gutter="md" columns={4}>

_10

<Logo/>

_10

<Column span={2}>

_10

<Nav/>

_10

</Column>

_10

<Button label="Login" variant="outline" size="small"/>

_10

</Columns>