Development Strategy

Responsive Design

Adapt your user interface to different devices with flexible responsive syntax.

Overview

/examples/responsive-gallery
<div class="grid-cols:2 grid-cols:3@xs grid-cols:4@sm grid-cols:5@md "></div>

The syntax in Master CSS allows for the conditional application of styles at different viewports, with up to 11 predefined screen sizes available.

This comprehensive coverage caters to the modern web layout scenario.

TokenSizeDevices
4xs360pxiPhone 6, 7, 8, X, 11, 12 / Galaxy S8 / HTC One…
3xs480pxBlackberry Passport / Amazon Kindle Fire HD 7…
2xs600pxLG G Pad 8.3 / Amazon Kindle Fire …
xs768pxMicrosoft Surface / iPad Pro 9.7 / iPad Mini …
sm834pxiPad Air 10.5 / iPad Pro 11 …
md1024pxiPad Pro 12.9 / Microsoft Surface Pro 3 …
lg1280pxGoogle Chromebook Pixel / Samsung Chromebook …
xl1440pxMacbook Air 2020 M1 / MacBook Pro 15 …
2xl1600pxDell Inspiron 14 series …
3xl1920pxDell UltraSharp U2412M / Dell S2340M / Apple iMac 21.5-inch …
4xl2560pxDell UltraSharp U2711 / Apple iMac 27-inch …

To customize responsive breakpoints, see the screens documentation.

Development strategies

When it comes to designing and developing responsive web pages, Mobile-first and Desktop-first are two common development strategies. The decision between these two strategies depends on your project requirements, target audience, and operational decisions.

Also, we propose another flexible strategy - Syntax-first.

Mobile-first

The Mobile-first development strategy is a design and development approach that initially focuses on designing and optimizing for smaller screen sizes, such as mobile phones and tablets, and then gradually expanding to larger screen sizes, including desktop computers.

For example, your company is launching a game primarily targeting mobile users with potential future releases for desktop users based on market response; adopting a mobile-first strategy would be ideal at this stage.

In mobile-first, styles not bound by viewports are considered to define the mobile UI.

<p class="font:24">

Gradually adjust the UI for larger viewports.

Increase the font size to 32/16rem when the viewport width is larger than 1024px.

<p class="font:24 font:32@md ">
<!-- equals to -->
<p class="font:24 font:32@>=md ">

Generated CSS:

.font\:24 {
font-size: 1.5rem
}
@media (min-width:1024px) {
.font\:32\@md {
font-size: 2rem
}
}

This relies on CSS precedence behavior to override mobile styles with new styles on larger viewports.

Desktop-first

On the other hand, the Desktop-first development strategy initially prioritizes designing and optimizing for larger screen sizes, such as desktop computers, and then gradually scaling down to smaller screen sizes, like mobile phones and tablets.

For example, your company is launching a web drawing software primarily targeting designers with potential future releases for mobile users based on market response; adopting a desktop-first strategy would be ideal at this stage.

In desktop-first, styles not bound by viewports are considered to define the desktop UI.

<p class="font:32">

Gradually adjust the UI for smaller viewports.

Decrease the font size to 24/16rem when the viewport width is less than 1024px.

<p class="font:32 font:24@<md ">

Generated CSS:

.font\:32 {
font-size: 2rem
}
@media (max-width:1023.98px) {
.font\:24\@\<md {
font-size: 1.5rem
}
}

This relies on CSS precedence behavior to override mobile styles with new styles on larger viewports.

Syntax-first

Thanks to the syntactic flexibility of Master CSS, free yourself from the constraints of mobile-first or desktop-first, which not only gives you a better development experience but also makes you have less markup and less CSS output.

For example, set the background to white only on mobile.

With mobile-first, it's necessary to revert to the original background on larger viewports.

<div class="bg:white bg:transparent@md ">

Add @<md directly to restrict to small viewports.

<div class="bg:white@<md ">

For example, set the background to white only on desktop.

With desktop-first, it's necessary to revert to the original background on smaller viewports.

<div class="bg:white bg:transparent@<md ">

Add @md directly to restrict to large viewports.

<div class="bg:white@md ">

You don't need to waste energy sticking to a specific development strategy; use the most direct way to solve the current responsive layout.


Using operators

Viewport width is at least N

To apply styles above a certain viewport width, you can either use the @N or @>=N operators.

<div class="hidden@>=sm">

Generated CSS:

@media (min-width:834px) {
.hidden\@\>\=sm {
display: none
}
}

Alternative and recommended:

<div class="hidden@sm">

Generated CSS:

@media (min-width:834px) {
.hidden\@sm {
display: none
}
}

Viewport width exceeds N

To apply styles when a certain viewport width is exceeded, you can use the > operator.

<div class="hidden@>sm">

Generated CSS:

@media (min-width:834.02px) {
.hidden\@\>sm {
display: none
}
}

Viewport width is at most N

To apply styles when less than or equal to a certain viewport width, use the <= operator.

<div class="hidden@<=sm">

Generated CSS:

@media (max-width:834px) {
.hidden\@\<\=sm {
display: none
}
}

Viewport width is less than N

To apply styles when less than a certain viewport width, use the < operator.

<div class="hidden@<sm">

Generated CSS:

@media (max-width:833.98px) {
.hidden\@\<sm {
display: none
}
}

Within the viewport width range

To apply styles more flexibly, you can use the & logical operator along with the comparison operators >, <, =, >=, <=>.

<div class="hidden@sm&<md">

Generated CSS:

@media (min-width:834px) and (max-width:1023.98px) {
.hidden\@sm\&\<md {
display: none
}
}

Occasionally, addressing glitches or layouts within a certain range of viewports can be helpful.

Fundamentals
Dynamic Application

Implement styles with more flexibility, using dynamic variables.

Development Strategy
Monorepo

A guide to setting up Master CSS in a modern repository.

© Aoyue Design LLC.