Skip to main content

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

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
Copy

_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

_8
import { Split } from '@bedrock-layout/primitives';
_8
_8
<Section>
_8
<Split gutter="sm" fraction="3/4">
_8
<TextField hideLabel placeholder="Enter your email" />
_8
<Button label="Subscribe" />
_8
</Split>
_8
</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

_9
import { Columns, Column } from '@bedrock-layout/primitives';
_9
_9
<Columns switchAt={528} gutter="md" columns={4}>
_9
<Logo/>
_9
<Column span={2}>
_9
<Nav/>
_9
</Column>
_9
<Button label="Login" variant="outline" size="small"/>
_9
</Columns>