configure()

Specification

Applies global layout configuration.

Layout is meant to be configured once, on the root level of your application.

Options

defaultUnit

Value type

String

Default value

px

Description

Default measurement unit used as a suffix for numeric prop values.

Example

src/App.jsx
import Layout from 'atomic-layout'
Layout.configure({
defaultUnit: 'rem',
})
src/components/SomeComponent.jsx
<Composition gutter={2} /> // reads as "2rem" of "grid-gap"

defaultBehavior

Value type

up | down | only

Default value

up

Description

Breakpoint behavior used for responsive props without explicit behavior.

Example

src/App.jsx
import Layout from 'atomic-layout'
Layout.configure({
defaultBehavior: 'down',
})
src/components/SomeComponent.jsx
<Composition
template={...}
templateMd={...} />

Template prop value is applied for md breakpoint and down, as contrary to the default, mobile-first behavior, which applies the value from the given breakpoint and up.

breakpoints

Value type

TBreakpoints

Default value

Bootstrap 4 breakpoints

Description

A map of custom breakpoints.

Type definition

type TBreakpoint = {
minHeight?: number,
maxHeight?: number,
minWidth?: number,
maxWidth?: number,
minResolution?: string,
maxResolution?: string,
aspectRatio?: string,
minAspectRatio?: string,
maxAspectRatio?: string,
scan?: 'interlace' | 'progressive',
orientation?: 'portrait' | 'landscape',
displayMode?: 'fullscreen' | 'standalone' | 'minimal-ui' | 'browser',
}
type TBreakpoints = {
[breakpointName: string]: TBreakpoint,
}

Example

src/App.jsx
import Layout from 'atomic-layout'
Layout.configure({
breakpoints: {
mobile: {
maxWidth: 500,
},
tablet: {
minWidth: 501,
maxWidth: 764,
},
retina: {
minResolution: '300dpi',
},
},
})
src/components/SomeComponent.jsx
<Composition
areasMobile={...}
areasTablet={...}
paddingRetina={10} />

Make sure to explicitly provide a default breakpoint name when using custom breakpoints, so Atomic layout knows when to apply props that have no breakpoint suffix.

defaultBreakpointName

Value type

String

Default value

"xs"

Description

The name of a default breakpoint used for the props without an explicit breakpoint suffix.

Example

src/App.jsx
import Layout from 'atomic-layout'
Layout.configure({
defaultBreakpointName: 'mobile',
breakpoints: {
mobile: {
maxWidth: 576,
},
desktop: {
minWidth: 768,
},
},
})
src/components/SomeComponent.jsx
<Composition
padding={...}
paddingDesktop={...} />

Breakpoint-less padding prop is now applied on the mobile breakpoint by default.