This library is still in development and is available only for internal usage at VTEX.
Skip to main content

Developing

Version: 0.133.0

Styling

The admin-ui StyleObject lets you style elements while consuming values from the theme.

Loading...

Design tokens​

Design tokens can be consumed from specific properties within the StyleObject. They are the recommended values for those props if you desire to reach consistency between apps. These are defined within our default theme, and you can check all the available design tokens on the link.

Loading...

Aliases​

It works as a shorthand to apply a value to one or more CSS properties, and you can use it within the StyleObject. In addition to the following aliases, you can also use the Responsive Aliases explained further on this page.

AliasDescription
bgA shorthand for background CSS property
fgA shorthand for color CSS property
colorThemeA shorthand for applying color and background properties from the same palette while mantaining design consistency
marginXA shorthand for margin-left and margin-right CSS properties
marginYA shorthand for margin-top and margin-bottom CSS properties
paddingXA shorthand for padding-left and padding-right CSS properties
paddingYA shorthand for padding-top and padding-bottom CSS properties
sizeA shorthand for width and height CSS properties
minSizeA shorthand for min-width and min-height CSS properties
maxSizeA shorthand for max-width and max-height CSS properties
absoluteSizeA shorthand for min-width, min-height, max-Width, and max-Height CSS properties

Example​

Loading...

Nesting​

Sometimes it’s useful to nest selectors to target elements inside the current class or React component. An example with an element selector is shown below.

Loading...

className​

Scoped classNames can also be created and reused multiple times.

Loading...

Pseudo-classes​

You can use all CSS Pseudo-classes such as :hover, :active, :focus and more. For example:

Loading...

Pseudo-elements​

You can use all CSS Pseudo-elements such as :before and :after. For example:

Loading...

Animations​

Keyframes​

CSS animations are supported. You can use the keyframes function to configure the sequence timing.

Loading...

Responsive design​

Responsive aliases​

Admin UI has five responsive aliases that guide you while authoring responsive layouts.

aliasmin-width emmin-width pxmax-width emmax-width px
@tablet48em768px--
@tabletOnly48em768px64em1024px
@desktop64em1024px--
@desktopOnly64em1024px75em1200px
@widescreen75em1200px--

In the example - the text content changes, representing the current screen size. You can resize your browser window to see the result.

Loading...
πŸ’‘ What happens under the hood?

The responsive alias string will be replaced by a media query.
It replaces the pattern @[alias] by @media (min-width: theme.breakpoints[alias]).
For exemple, @tablet will be replaced by @media (min-width: 48em).


The same idea applies to the only aliases! The diference is that it set the next breakpoint's min-width as its max-width, creating a interval.
For exemple, @tabletOnly will be replaced by @media (min-width: 48em) and (max-width: 64em).

Mental model​

Our styles have a mobile-first mindset. It means that every style that you write targets mobile by default. Each responsive alias targets all others above it so that you can work in optimizing your layout for larger screens. In other words, always work optimizing space.

The Box in the example has the $s padding for all screens:

<Box
csx={{
padding: '$s',
}}
/>

If we add the @tablet rule, the padding will be $m for tablets and above - which means that it will remain $s for screens smaller than @tablet. The logic is still the same for other breakpoints.

<Box
csx={{
padding: '$s',
'@tablet': {
padding: '$m',
},
}}
/>

Custom media queries​

The responsive aliases can cover most of the use cases, but custom media queries are allowed if you want to target specific devices on your design. For example:

// declaration
const iPhoneXRLandscape = `
@media only screen
and (device-width : 414px)
and (device-height : 896px)
and (-webkit-device-pixel-ratio : 2)
and (orientation : landscape)
`

// usage
const layout = style({
// ... component styles,
[iPhoneXRLandscape]: {
// ... device specyfic styles
},
})

Responsive Prop​

Properties of components with the type ResponsiveProp<T> indicate that you can use them to behave similarly to responsive aliases by passing different values ​​depending on the screen size You can check the mental model section to see how the responsiveness works in these cases.

interface ResponsiveProp<T> = T | {
mobile: T
tablet?: T
desktop?: T
widescreen?: T
}

Example​

Loading...

Additional resources​