Fundamentals

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 viewport widths available.

This comprehensive coverage caters to the modern web layout scenario.

TokenSizeDevices
4xs
360px
iPhone 6, 7, 8, X, 11, 12 / Galaxy S8 / HTC One…
3xs
480px
Blackberry Passport / Amazon Kindle Fire HD 7…
2xs
600px
LG G Pad 8.3 / Amazon Kindle Fire …
xs
768px
Microsoft Surface / iPad Pro 9.7 / iPad Mini …
sm
834px
iPad Air 10.5 / iPad Pro 11 …
md
1024px
iPad Pro 12.9 / Microsoft Surface Pro 3 …
lg
1280px
Google Chromebook Pixel / Samsung Chromebook …
xl
1440px
Macbook Air 2020 M1 / MacBook Pro 15 …
2xl
1600px
Dell Inspiron 14 series …
3xl
1920px
Dell UltraSharp U2412M / Dell S2340M / Apple iMac 21.5-inch …
4xl
2560px
Dell UltraSharp U2711 / Apple iMac 27-inch …

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.

However, thanks to the flexible syntax of Master CSS, 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.


Basic syntax

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="hide@>=sm">

Generated CSS:

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

Alternative and recommended:

<div class="hide@sm">

Generated CSS:

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

Viewport width exceeds N

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

<div class="hide@>sm">

Generated CSS:

@media (min-width:834.02px) {
.hide\@\>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="hide@<=sm">

Generated CSS:

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

Viewport width is less than N

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

<div class="hide@<sm">

Generated CSS:

@media (max-width:833.98px) {
.hide\@\<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="hide@sm&<md">

Generated CSS:

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

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

Fundamentals
Markup-driven CSS

Master CSS styles are driven by template markups and generate CSS rules on demand.

Fundamentals
Presetting global styles

Normalize browser and preset global styles for more concise-style programming.

© Aoyue Design LLC.