Layout

Provider
1import { Layout } from 'maker-ui'

The Layout component is Maker UI's context provider for storing your layout configurations.

It's a required wrapper if you want to use the other Layout components.

Props#

PropDescription
options
Required
Type
MakerUIOptions
The Maker UI options configuration is the brain of your layout. Your settings will tell the layout how to behave. Check Maker UI Options for details.
skiplinks
Type
{ id: string, label: string }[]
By default, the Layout Provider inserts a skiplinks menu that lets users skip to your site's main content and side navigation if applicable. You can use this prop to customize your own skiplinks.

Just create an array of objects that define the ID selector (without a # symbol) and a label that appears when a user tabs through your menu options.
styles
Type
object
Add global responsive styles that obey the breakpoints you specified in the options prop. See Add Custom Styles for an example.
theme
Type
object
This prop lets you define an Emotion Theme.

Maker UI doesn't use Emotion for theming and instead generates global CSS variables. However, if you need a theme in your project so you can read values from inside css prop attributes, you can inject a theme object here. See Emotion Theming for details.

Usage#

Wrap your entire app or page in the Layout component:

1import {
2 // As an alias
3 Layout as MakerLayout,
4 Header,
5 Content,
6 Main,
7 Footer
8} from 'maker-ui'
9
10import { myStyles } from './styles'
11import { myOptions } from './config'
12
13export const Layout = ({ children }) => (
14 <MakerLayout options={myOptions} styles={myStyles}>
15 <Header />
16 <Conent>
17 <Main>{children}</Main>
18 </Content>
19 <Footer />
20 </MakerLayout>
21)
Contents