Quick Start

Set up Atomic CSS and build your first page in 3 minutes.

CSS import order matters

atomic.min.css must be imported last. Since Atomic CSS overrides styles on a per-class basis, it must come after other CSS (reset, framework, custom CSS) to take proper priority.

Step 1. Project Setup

Create .atomic.json in the project root.

.atomic.json

{
    "selectedLanguages": ["html"],
    "cssDirectoryPath": "/assets/css/",
    "extensions": [".html"]
}

cssDirectoryPath is the path where the generated CSS file will be saved. Adjust to match your project structure.

Step 2. HTML Basic Setup

Create an HTML file and set font-size: 10px. Atomic CSS uses 1rem = 10px as the base.

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Project</title>
  <style>html { font-size: 10px; }</style>

  <!-- Place other CSS here if any -->
  <!-- <link rel="stylesheet" href="reset.css"> -->

  <!-- atomic.min.css must be loaded last -->
  <link rel="stylesheet" href="./assets/css/atomic.min.css">
</head>
<body>

</body>
</html>

Important: atomic.min.css must be placed after other CSS. If you have a reset CSS or other stylesheets, place it below them.

Step 3. Center Alignment

Place text at the center of the screen.

<div class="df jcc aic h100vh">
  <h1 class="fs4-8rem fw900 c333333">Hello Atomic CSS</h1>
</div>

Class	CSS
`df`	display: flex
`jcc`	justify-content: center
`aic`	align-items: center
`h100vh`	height: 100vh
`fs4-8rem`	font-size: 4.8rem (48px)
`fw900`	font-weight: 900
`c333333`	color: #333333

Step 4. Create a Card

A simple card component.

<div class="maxw40rem bg18181B br12px p2rem">
  <h2 class="fs2rem fw700 cFAFAFA mb8px">Card Title</h2>
  <p class="fs14px c71717A lh1-7">Card description text.</p>
</div>

Step 5. responsive grid

Arrange cards in a responsive grid. Column count adjusts automatically based on screen size.

<!-- Arrange cards in auto-responsive grid -->
<div class="dg gtcrfit-minmax30rem-1fr gap2rem p2rem">
  <div class="bg18181B br12px p2rem">Card 1</div>
  <div class="bg18181B br12px p2rem">Card 2</div>
  <div class="bg18181B br12px p2rem">Card 3</div>
</div>

Class	CSS
`dg`	display: grid
`gtcrfit-minmax30rem-1fr`	grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr))
`gap2rem`	gap: 2rem (20px)

Step 6. Hover Effects

Define hover styles with the hover- prefix.

<!-- Change background color on hover + smooth transition -->
<button class="bg6366F1 cFFFFFF py12px px2rem br8px bn cp hover-bg818CF8 tall200msease">
  Button
</button>

<!-- Change text color on hover -->
<a class="c71717A tdn hover-cFFFFFF tall200msease" href="#">Link</a>

Step 7. Responsive Visibility

Use media query prefixes to show or hide elements at specific screen sizes.

<!-- Desktop only, hidden at 768px and below -->
<nav class="df gap2rem sm-dn">
  <a href="#">Menu1</a>
  <a href="#">Menu2</a>
</nav>

<!-- Mobile only -->
<button class="dn sm-db">Open menu</button>

Class	Meaning
`sm-dn`	display: none below 768px
`dn`	Always display: none
`sm-db`	display: block below 768px

Next Steps

Quick start complete. See the documents below to learn more.

Naming Rules Unit System Responsive Design Display Flexbox Grid