Block

The Block component is a helper component that lets you write these common less-reusable elements more succinctly inline.

One of the most common needs when building web apps is creating layout elements that have certain layout and typography styles.

For more traditional apps that use global stylesheets, many of the popular CSS frameworks have helper classes to quickly create styled elements (see Bootstrap, Tachyons).

The move to CSS-in-JS sort of eliminates these classes in favor of encapsulating styles within components. This is a generally a good thing because it promotes reusability, however the reality is that there are dozens or hundreds of different layout/spacing/typography combinations in any app, and there's not always a clear semantic meaning or potential for reuse. In practice you end up just defining and naming a bunch of things at the top of the file:

Block basic Usage

primary100
primary200
primary300
primary400
primary500
primary600
primary700
negative100
negative200
negative300
negative400
negative500
negative600
negative700
warning100
warning200
warning300
warning400
warning500
warning600
warning700
positive100
positive200
positive300
positive400
positive500
positive600
positive700

Block with font customization

font100
font200
font250
font300
font350
font400
font450
font500
font600
font700
font800
font900
font1000

Block as a flexbox

Positioned with flexbox
Positioned with flexbox
Positioned with flexbox
Positioned with flexbox

Block with grid usage

1
2
3
4
5
6

Responsive Layouts

Block component props accept either a single value or array of values. When an array is provided, it will create media queries for each item based on the theme breakpoint values.

By default, the breakpoint values are

breakpoints: { small: 320, medium: 600, large: 1280, }

Given a marginTop value of ['10px', '20px', '30px', '40px'] Block will create the css rules below:

@media screen and (min-width: 1280px) { margin-top: 40px; } @media screen and (min-width: 600px) { margin-top: 30px; } @media screen and (min-width: 320px) { margin-top: 20px; } margin-top: 10px;

Responsive Properties

Overrides

These styles are provided by styletron

Block API

children import

react.Node

as import = "div"

Modifies the base element used to render the block.

react.ElementType

overrides object = {}

Block { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>*

color <T> | Array<<T>><string>

Accepts all themeable color properties (primary200, etc.).

<T> | Array<<T>>string

font union

Accepts all themeable font properties (font200, etc.).

One of
string,
Arraystring

alignContent <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/align-content

<T> | Array<<T>>One of
"center",
"start",
"end",
"flex-start",
"flex-end",
"normal",
"baseline",
"first baseline",
"last baseline",
"space-between",
"space-around",
"space-evenly",
"stretch",
"safe center",
"unsafe center",
"inherit",
"initial",
"unset"

alignItems <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

<T> | Array<<T>>One of
"normal",
"stretch",
"center",
"start",
"end",
"flex-start",
"flex-end",
"self-start",
"self-end",
"baseline",
"first baseline",
"last baseline",
"safe center",
"unsafe center",
"inherit",
"initial",
"unset"

alignSelf <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/align-self

<T> | Array<<T>>One of
"auto",
"normal",
"center",
"start",
"end",
"self-start",
"self-end",
"flex-start",
"flex-end",
"baseline",
"first baseline",
"last baseline",
"stretch",
"safe center",
"unsafe center",
"inherit",
"initial",
"unset"

flexDirection <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

<T> | Array<<T>>One of
"row",
"row-reverse",
"column",
"column-reverse",
"inherit",
"initial",
"unset"

display <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/display

<T> | Array<<T>>One of
"block",
"inline",
"run-in",
"flow",
"flow-root",
"table",
"flex",
"grid",
"ruby",
"block flow",
"inline table",
"flex run-in",
"list-item",
"list-item block",
"list-item inline",
"list-item flow",
"list-item flow-root",
"list-item block flow",
"list-item block flow-root",
"flow list-item block",
"table-row-group",
"table-header-group",
"table-footer-group",
"table-row",
"table-cell",
"table-column-group",
"table-column",
"table-caption",
"ruby-base",
"ruby-text",
"ruby-base-container",
"ruby-text-container",
"contents",
"none",
"inline-block",
"inline-table",
"inline-flex",
"inline-grid",
"inherit",
"initial",
"unset"

flex <T> | Array<<T>><string>

<T> | Array<<T>>string

grid <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid

<T> | Array<<T>>string

gridArea <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area

<T> | Array<<T>>string

gridAutoColumns <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns

<T> | Array<<T>>string

gridAutoFlow <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow

<T> | Array<<T>>One of
"row",
"column",
"dense",
"row dense",
"column dense",
"inherit",
"initial",
"unset"

gridAutoRows <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows

<T> | Array<<T>>string

gridColumn <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column

<T> | Array<<T>>string

gridColumnEnd <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end

<T> | Array<<T>>string

gridColumnGap <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-gap

<T> | Array<<T>>string

gridColumnStart <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start

<T> | Array<<T>>string

gridGap <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-gap

<T> | Array<<T>>string

gridRow <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row

<T> | Array<<T>>string

gridRowStart <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start

<T> | Array<<T>>string

gridRowEnd <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end

<T> | Array<<T>>string

gridTemplate <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template

<T> | Array<<T>>string

gridTemplateAreas <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas

<T> | Array<<T>>string

gridTemplateColumns <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns

<T> | Array<<T>>string

gridTemplateRows <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows

<T> | Array<<T>>string

justifyContent <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

<T> | Array<<T>>One of
"center",
"start",
"end",
"flex-start",
"flex-end",
"left",
"right",
"space-between",
"space-around",
"space-evenly",
"stretch",
"safe center",
"unsafe center",
"inherit",
"initial",
"unset"

justifyItems <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items

<T> | Array<<T>>One of
"auto",
"normal",
"stretch",
"center",
"start",
"end",
"flex-start",
"flex-end",
"self-start",
"self-end",
"left",
"right",
"baseline",
"first baseline",
"last baseline",
"safe center",
"unsafe center",
"legacy right",
"legacy left",
"legacy center",
"inherit",
"initial",
"unset"

justifySelf <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self

<T> | Array<<T>>One of
"auto",
"normal",
"stretch",
"center",
"start",
"end",
"flex-start",
"flex-end",
"self-start",
"self-end",
"left",
"right",
"baseline",
"first baseline",
"last baseline",
"safe center",
"unsafe center",
"inherit",
"initial",
"unset"

position <T> | Array<<T>><union>

<T> | Array<<T>>One of
"static",
"absolute",
"relative",
"fixed",
"sticky"

width <T> | Array<<T>><string>

<T> | Array<<T>>string

minWidth <T> | Array<<T>><string>

<T> | Array<<T>>string

maxWidth <T> | Array<<T>><string>

<T> | Array<<T>>string

height <T> | Array<<T>><string>

<T> | Array<<T>>string

minHeight <T> | Array<<T>><string>

<T> | Array<<T>>string

maxHeight <T> | Array<<T>><string>

<T> | Array<<T>>string

overflow <T> | Array<<T>><union>

<T> | Array<<T>>One of
"visible",
"hidden",
"scroll",
"scrollX",
"scrollY",
"auto",
"inherit",
"initial",
"unset"

margin <T> | Array<<T>><string>

<T> | Array<<T>>string

marginTop <T> | Array<<T>><string>

<T> | Array<<T>>string

marginRight <T> | Array<<T>><string>

<T> | Array<<T>>string

marginBottom <T> | Array<<T>><string>

<T> | Array<<T>>string

marginLeft <T> | Array<<T>><string>

<T> | Array<<T>>string

padding <T> | Array<<T>><string>

<T> | Array<<T>>string

paddingTop <T> | Array<<T>><string>

<T> | Array<<T>>string

paddingRight <T> | Array<<T>><string>

<T> | Array<<T>>string

paddingBottom <T> | Array<<T>><string>

<T> | Array<<T>>string

paddingLeft <T> | Array<<T>><string>

<T> | Array<<T>>string

placeContent <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/place-content

<T> | Array<<T>>string

placeItems <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/place-items

<T> | Array<<T>>string

placeSelf <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/place-self

<T> | Array<<T>>string

flexWrap <T> | Array<<T>><boolean>

<T> | Array<<T>>boolean

left <T> | Array<<T>><string>

<T> | Array<<T>>string

top <T> | Array<<T>><string>

<T> | Array<<T>>string

right <T> | Array<<T>><string>

<T> | Array<<T>>string

bottom <T> | Array<<T>><string>

<T> | Array<<T>>string