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:
Basic Elements#
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:
1// Example Layout component file2import {3 Layout,4 ...5} from 'maker-ui`67const options: MakerOptions = { breakpoints: [450, 600, 960] }89const MyLayout = () => (10 <Layout options={options}>11 ...12 </Layout>13)1415// Page or child component1617export default HomePage = () => (18 <Div css={{ color: ['red', 'blue', 'green'] }}>19 <h1>Home page</h1>20 </Div>21)
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#
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.
1import { Div } from 'maker-ui'
Flex#
Flex is a <Div>
component with a predefined flex display and a few handy shortcuts.
1import { Flex } from 'maker-ui'
Prop | Description |
---|---|
align | Type string | string[] |
column | Type boolean |
flex | Type string | string[] |
inline | Type boolean |
justify | Type string | string[] |
wrap | Type boolean |
Grid#
Grid is a <Div>
component with a predefined CSS Grid display and a few handy shortcuts.
1import { Grid } from 'maker-ui'
Prop | Description |
---|---|
areas | Type string | string[] |
center | Type boolean |
columns | Type string | string[] |
gap | Type string | number | (string | number)[] |
rows | Type string | string[] |
Span#
Supports all props of the <span>
tag.
1import { Span } from 'maker-ui'
Ul or UList#
Supports all props of the <ul>
tag.
1import { Ul } from 'maker-ui'2// or3import { UList } from 'maker-ui'
Ol or OList#
Supports all props of the <ol>
tag.
1import { Ol } from 'maker-ui'2// or3import { OList } from 'maker-ui'
Li or ListItem#
Supports all props of the <li>
tag.
1import { Li } from 'maker-ui'2// or3import { ListItem } from 'maker-ui'
A or Link#
Supports all props of the <a>
tag.
1import { A } from 'maker-ui'2// or3import { Link } from 'maker-ui'
Button#
Supports all props of the <button>
tag.
1import { Button } from 'maker-ui'
P or Paragraph#
Supports all props of the <p>
tag.
1import { P } from 'maker-ui'2// or3import { 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.
1import { SVG } from 'maker-ui'
viewBox
prop.Img or Image#
Supports all props of the <img>
tag.
1import { Img } from 'maker-ui'2// or3import { Image } from 'maker-ui'
Heading Tags#
Supports all props of the <h1>
through <h6>
heading tags.
1import { 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.
1/** @jsx jsx */2import { jsx } from 'maker-ui`34// This will work the same as importing the <Div> and <H1> primitives56export const MyComponent = () => (7 <div8 breakpoints={[500, 960]}9 css={{ padding: [20, 30, 40] }}10 >11 <h1 css={{ color: ['red', 'blue'] }}></h1>12 </div>13)
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.