Responsive Design

Atomic CSS provides 14 breakpoint prefixes. Add a prefix before any class to apply styles only at specific screen sizes, using a max-width-based desktop-first approach.

Syntax

Connect the breakpoint prefix and existing class with a hyphen.

{prefix}-{class}

For example, sm-dn generates the following CSS:

/* sm-dn */
@media (max-width: 768px) {
  .sm-dn {
    display: none;
  }
}

Class	Generated CSS
`sm-dn`	@media (max-width: 768px) { display: none }
`md-fdc`	@media (max-width: 1024px) { flex-direction: column }
`lg-gtcr2-1fr`	@media (max-width: 1280px) { grid-template-columns: repeat(2, 1fr) }
`sm-p16px`	@media (max-width: 768px) { padding: 16px }
`us-fs12px`	@media (max-width: 420px) { font-size: 12px }

Breakpoint List

14 breakpoints are provided. All are max-width-based, so styles apply at or below the specified width.

Prefix	Max-width	Name	Note
`us-`	420px	Ultra Small
`es-`	640px	Extra Small
`sm-`	768px	Small (Mobile)	★ 가장 많이 사용
`md-`	1024px	Medium (Tablet)	★ 가장 많이 사용
`rg-`	1080px	Regular
`lg-`	1280px	Large	★ 자주 사용
`el-`	1440px	Extra Large
`ul-`	1600px	Ultra Large
`sl-`	1700px	Super Large
`hl-`	1800px	Hyper Large
`fh-`	1920px	Full HD
`kk-`	2048px	2K
`uh-`	2160px	UHD
`qh-`	2560px	QHD

Common Patterns

Show / Hide

The most commonly used pattern for showing different content on desktop vs. mobile.

<!-- Desktop only (hidden at 768px and below) -->
<div class="db sm-dn">Desktop-only content</div>

<!-- Mobile only (visible at 768px and below only) -->
<div class="dn sm-db">Mobile-only content</div>

<!-- Tablet shown only below this breakpoint -->
<div class="dn md-db">Tablet/mobile only</div>

Class	Behavior
`db sm-dn`	Default visible -> hidden below 768px (desktop only)
`dn sm-db`	Default hidden -> visible below 768px only (mobile only)
`df md-dn`	Default flex -> hidden below 1024px
`dn md-df`	Default hidden -> flex below 1024px only

layout transition

Patterns for switching from horizontal to vertical layout, or reducing grid column count.

<!-- Flex direction switch: horizontal to vertical -->
<div class="df md-fdc gap2rem">
  <div>Left area</div>
  <div>Right area — moves below on tablet and smaller</div>
</div>

<!-- Reduce grid columns: 3 cols to 2 cols to 1 col -->
<div class="dg gtcr3-1fr md-gtcr2-1fr sm-gtc1fr gap2rem">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
</div>

Responsive Font Size

Reduce font size as the screen gets smaller to maintain readability.

<!-- Title: Desktop 24px → Tablet 20px → Mobile 16px -->
<h1 class="fs2-4rem md-fs2rem sm-fs1-6rem fw800">Responsive Title</h1>

<!-- Body: desktop 16px, mobile 14px -->
<p class="fs16px sm-fs14px lh1-7">Body text</p>

responsive spacing

Apply generous spacing on wide screens and narrow spacing on small screens.

<!-- Padding: Desktop 40px → Tablet 20px → Mobile 16px -->
<div class="p4rem md-p2rem sm-p16px">
  Generous margin on wide screens, minimal margin on mobile
</div>

<!-- Gap: Desktop 32px → Tablet 20px → Mobile 12px -->
<div class="df fdc gap3-2rem md-gap2rem sm-gap12px">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

responsive grid

Patterns for adjusting grid column count per breakpoint.

<!-- 4 cols to 3 cols to 2 cols to 1 col -->
<div class="dg gtcr4-1fr lg-gtcr3-1fr md-gtcr2-1fr sm-gtc1fr gap2rem">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
  <div>Card 4</div>
</div>

How It Works

Atomic CSS responsive uses max-width media queries. This is a desktop-first approach.

Large screen = default (no prefix)

Classes without prefixes apply at all screen sizes. This is the desktop default style.

Small screen = override with prefix

Prefixed classes override defaults only at or below the specified width. sm-dn switches to dn below 768px.

Write order: desktop first, mobile override

Write desktop styles first, then add prefixes only for changes needed on smaller screens.

<!-- Write desktop styles first, then add changes for smaller screens -->
<div class="dg gtcr3-1fr gap2rem  md-gtcr2-1fr  sm-gtc1fr sm-gap16px">
  <!--  ↑ Desktop: 3 cols     ↑ Tablet: 2 cols    ↑ Mobile: 1 col + narrow gap -->
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
</div>

Practical Examples

responsive header

Logo + navigation on desktop switches to logo + hamburger button on mobile.

<!-- Responsive Header -->
<header class="df jcsb aic px2rem py16px">
  <!-- Logo: always visible -->
  <div class="fs2rem fw800 cFAFAFA">Logo</div>

  <!-- Desktop Navigation: Hidden on mobile -->
  <nav class="df gap2rem sm-dn">
    <a class="cA1A1AA hover-cFAFAFA tdn">Home</a>
    <a class="cA1A1AA hover-cFAFAFA tdn">About</a>
    <a class="cA1A1AA hover-cFAFAFA tdn">Contact</a>
  </nav>

  <!-- Hamburger button: mobile only -->
  <button class="dn sm-db bg0000 bn cFAFAFA fs2rem cp">☰</button>
</header>

responsive card grid

Card layout that progressively reduces from 4 columns to 2 columns to 1 column.

<!-- 4 cols to 2 cols to 1 col card grid -->
<div class="dg gtcr4-1fr md-gtcr2-1fr sm-gtc1fr gap2rem md-gap16px">
  <div class="bg18181B p2rem sm-p16px br8px">
    <h3 class="fs16px fw700 cFAFAFA mb8px">Card Title</h3>
    <p class="fs14px c71717A lh1-7">Card content goes here.</p>
  </div>
  <div class="bg18181B p2rem sm-p16px br8px">
    <h3 class="fs16px fw700 cFAFAFA mb8px">Card Title</h3>
    <p class="fs14px c71717A lh1-7">Card content goes here.</p>
  </div>
  <div class="bg18181B p2rem sm-p16px br8px">
    <h3 class="fs16px fw700 cFAFAFA mb8px">Card Title</h3>
    <p class="fs14px c71717A lh1-7">Card content goes here.</p>
  </div>
  <div class="bg18181B p2rem sm-p16px br8px">
    <h3 class="fs16px fw700 cFAFAFA mb8px">Card Title</h3>
    <p class="fs14px c71717A lh1-7">Card content goes here.</p>
  </div>
</div>

sidebar layout

Sidebar + main area on desktop switches to vertical stack on tablet and below.

<!-- Sidebar + main: vertical stack -->
<div class="dg gtc25rem-1fr md-gtc1fr gap2rem">
  <aside class="bg18181B p2rem br8px md-order2">
    <h3 class="fs16px fw700 cFAFAFA mb16px">Sidebar</h3>
    <nav class="df fdc gap8px">
      <a class="c71717A hover-cFAFAFA tdn">Menu 1</a>
      <a class="c71717A hover-cFAFAFA tdn">Menu 2</a>
      <a class="c71717A hover-cFAFAFA tdn">Menu 3</a>
    </nav>
  </aside>
  <main class="bg27272A p2rem br8px md-order1">
    <h2 class="fs2rem fw700 cFAFAFA mb16px">Main Content</h2>
    <p class="fs14px c71717A lh1-7">Main content goes here.</p>
  </main>
</div>

Per-device Font Scaling

Apply progressive size scaling to text elements like headings, body, and captions.

<!-- Hero title -->
<h1 class="fs4-8rem lg-fs4rem md-fs3-2rem sm-fs2-4rem fw800 lh1-2">
  Large title goes here
</h1>

<!-- Section Title -->
<h2 class="fs3-2rem md-fs2-4rem sm-fs2rem fw700 lh1-3">
  Section Title
</h2>

<!-- Subtitle -->
<h3 class="fs2rem md-fs1-8rem sm-fs1-6rem fw600 lh1-4">
  Subtitle
</h3>

<!-- Body text -->
<p class="fs16px sm-fs14px lh1-7">
  Small changes to body text are sufficient.
</p>

Breakpoint Nesting

Multiple breakpoints can be applied to a single element simultaneously. With max-width, smaller breakpoint values override in order as the screen shrinks.

<!-- Apply multiple breakpoints simultaneously -->
<div class="p4rem lg-p3-2rem md-p2-4rem sm-p16px">
  Padding decreases progressively based on screen size.
</div>

Padding applied per screen size in the above example:

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">screen width	Applied Value	Reason
1440px 이상	`p4rem`	어떤 브레이크포인트에도 해당하지 않아 기본값 적용
1280px ~ 1439px	`lg-p3-2rem`	lg-(1280px) 조건에 해당
1024px ~ 1279px	`md-p2-4rem`	lg-와 md- 모두 해당하지만 md-가 나중에 선언되어 우선
768px ~ 1023px	`sm-p16px`	lg-, md-, sm- 모두 해당하지만 sm-이 최종 적용
768px 미만	`sm-p16px`	sm- 조건을 만족하므로 sm-p16px 유지

Cascade rules

As the screen gets smaller, more max-width conditions match, so the smallest breakpoint value ultimately applies. At 768px, lg-, md-, and sm- all match, but sm- comes last and wins.

Tips & Notes

Write desktop styles first

max-width means base classes become the desktop style. Add prefixes only for parts that change on smaller screens.

sm- and md- cover 90% of cases

Just sm- (768px) and md- (1024px) handle most responsive requirements. Add other prefixes only when needed.

Test on real devices

Browser dev tools responsive mode is useful, but touch interactions and actual viewport sizes can only be accurately verified on physical devices.

Do not overuse breakpoints

If a single element needs 4+ breakpoints, reconsider the layout structure. Auto-responsive grids like gtcrfit-minmax can create flexible layouts without breakpoints.

display grid-template-columns flex-direction font-size padding