Responsive styles

Blockstack UI supports responsive styles out of the box because it is built with styled-system. Instead of manually adding @media queries and adding nested styles throughout your code, any component allows you provide array values to add mobile-first responsive styles.

We use the @media(min-width) media queries to ensure values are mobile-first.

<
>
<
Box
height
=
"
40px
"
bg
=
"
ink.400
"
width
=
{
[
'100%'
,
// base
'50%'
,
// 480px upwards
'25%'
,
// 768px upwards
'15%'
,
// 992px upwards
]
}
/>
// responsive font size
<
Box
fontSize
=
{
[
0
,
2
,
4
,
6
]
}
>
Font Size
</
Box
>
// responsive margin
<
Box
mt
=
{
[
2
,
4
,
6
,
8
]
}
width
=
"
full
"
height
=
"
24px
"
bg
=
"
salmon
"
/>
// responsive padding
<
Box
bg
=
"
whitesmoke
"
p
=
{
[
2
,
4
,
6
,
8
]
}
>
Padding
</
Box
>
</
>

This works for every style props in the theme specification, which means you can change the style of most properties at a given breakpoint.

What it does

This shortcut is an alternative to writing media queries out by hand. Given the following:

<
Box
width
=
{
[
1
,
1
/
2
,
1
/
4
]
}
/>

It'll generate a CSS that looks like this

.Box
{
width
:
100%
;
}
@media
screen and
(
min-width
:
40em
)
{
.Box
{
width
:
50%
;
}
}
@media
screen and
(
min-width
:
52em
)
{
.Box
{
width
:
25%
;
}
}

The equivalent of this style if you passed it as an object.

// First, create an alias for breakpoints
const
breakpoints
=
[
'30em'
,
'48em'
,
'62em'
,
'80em'
]
;
// aliases
breakpoints
.
sm
=
breakpoints
[
0
]
;
breakpoints
.
md
=
breakpoints
[
1
]
;
breakpoints
.
lg
=
breakpoints
[
2
]
;
breakpoints
.
xl
=
breakpoints
[
3
]
;

then

<
Box
width
=
{
{
base
:
1
,
sm
:
1
/
2
,
md
:
1
/
4
}
}
/>

Demo

Here's a simple example of a marketing page component that uses a stacked layout on small screens, and a side-by-side layout on larger screens (resize your browser to see it in action):

Preview
This will change color depending on screen size!
Editable example
On this page