Primitives

Primitives are basic JSX elements that support css and breakpoints props.

You can use these components just as you would their normal HTML counterparts. They also forward any external refs that you might need to assign for measurements or layout effects.

Just import the capital letter version of your desired JSX element or use an alias:

Special Elements#

Flex
Grid

Default Breakpoints#

If you don't use a Maker UI layout, the default breakpoints are [768, 960, 1440] (in pixels).

If you are building with the full layout system, all nested primitives will use the global breakpoints that you declare in your options configuration:

// Example Layout component file
import {
  Layout,
  ...
} from 'maker-ui`

const options: MakerOptions = { breakpoints: [450, 600, 960] }

const MyLayout = () => (
  <Layout options={options}>
    ...
  </Layout>
)

// Page or child component

export default HomePage = () => (
  <Div css={{ color: ['red', 'blue', 'green'] }}>
    <h1>Home page</h1>
  </Div>
)

In this example, the heading color would correspond with min-width 450px, 600px, and 960px media queries.

You are free to use any unit for your breakpoints array including vw, em, pt, etc. If you use a number type instead of a full string, your value will be converted into pixels.

Components#

The following examples import from maker-ui but you can also import from@maker-ui/primitives if you don't need the layout sytem.

Div#

Supports all props of the <div> tag.

This is most likely the tool you need for the job. If you use it as the outermost wrapper of your component, you can set all nested, responsive styles. See Nesting Selectors for details.

import { Div } from 'maker-ui'

Flex#

Flex is a <Div> component with a predefined flex display and a few handy shortcuts.

import { Flex } from 'maker-ui'

Prop	Description
align	Type string \| string[] A shortcut for the responsive align-items CSS property.
column	Type boolean When true, this will set flex-direction to column. This value is false by default.
flex	Type string \| string[] A shortcut for the responsive flex CSS property.
inline	Type boolean When true, this will set display to inline-flex.
justify	Type string \| string[] A shortcut for the responsive justify-content CSS property.
wrap	Type boolean When true, this will set flex-wrap to wrap.

Grid#

Grid is a <Div> component with a predefined CSS Grid display and a few handy shortcuts.

import { Grid } from 'maker-ui'

Prop	Description
areas	Type string \| string[] A shortcut for the responsive grid-template-areas property.
center	Type boolean When true, this will vertically and horizontally center all content in each direct descendent container by setting place-items to center.
columns	Type string \| string[] A shortcut for the responsive grid-template-columns property.
gap	Type string \| number \| (string \| number)[] A shortcut for the responsive gap property.
rows	Type string \| string[] A shortcut for the responsive grid-template-row property.

Span#

Supports all props of the <span> tag.

import { Span } from 'maker-ui'

Ul or UList#

Supports all props of the <ul> tag.

import { Ul } from 'maker-ui'
// or
import { UList } from 'maker-ui'

Ol or OList#

Supports all props of the <ol> tag.

import { Ol } from 'maker-ui'
// or
import { OList } from 'maker-ui'

Li or ListItem#

Supports all props of the <li> tag.

import { Li } from 'maker-ui'
// or
import { ListItem } from 'maker-ui'

A or Link#

Supports all props of the <a> tag.

import { A } from 'maker-ui'
// or
import { Link } from 'maker-ui'

Button#

Supports all props of the <button> tag.

import { Button } from 'maker-ui'

P or Paragraph#

Supports all props of the <p> tag.

import { P } from 'maker-ui'
// or
import { Paragraph } from 'maker-ui'

SVG#

Supports all props of the <svg> tag. Maker UI automatically appends an xmlns attribute so you can omit that prop.

When importing, use all capital letters.

import { SVG } from 'maker-ui'

Don't forget to add a viewBox prop.

Img or Image#

Supports all props of the <img> tag.

import { Img } from 'maker-ui'
// or
import { Image } from 'maker-ui'

Heading Tags#

Supports all props of the <h1> through <h6> heading tags.

import { H1, H2, H3, H4, H5, H6 } from 'maker-ui'

JSX Factory#

If you don't want to import primitives or if you would rather use a JSX runtime that automatically parses elements for css and breakpoints, you can use Maker UI's JSX pragma instead.

/** @jsx jsx */
import { jsx } from 'maker-ui`

// This will work the same as importing the <Div> and <H1> primitives

export const MyComponent = () => (
  <div
    breakpoints={[500, 960]}
    css={{ padding: [20, 30, 40] }}
  >
    <h1 css={{ color: ['red', 'blue'] }}></h1>
  </div>
)

Remember to add the comment from the above example to the top of your file so you don't accidentally use the default JSX runtime.

React 17 introduced a brand new JSX transform that allows you to automatically set your preferred JSX factory with Babel and TypeScript. Check back for an update on how to implement this technique for Maker UI.

Contents