JOIN NOW

Docs: Atomic css

This guide explains how to use the utility classes in the COC Ghost theme to style and layout your pages quickly and consistently.

Overview

The theme includes a set of utility classes (similar to Tailwind CSS) that let you style elements directly in your HTML without writing custom CSS. These pre-built classes help maintain consistent spacing, colors, and layouts across your entire website.

Benefits

  • Fast development - Style elements without switching between files
  • Consistent spacing - Predefined values ensure visual consistency
  • Responsive by default - Many classes automatically adjust for mobile
  • Reusable - Same classes work across all pages and components

LAYOUT CLASSES

Flexbox Layouts

Create flexible layouts with these classes:

Basic flex container:

  • flex - Makes a flex container
  • flex-col - Stacks items vertically
  • flex-row - Arranges items horizontally
  • flex-col-mobile - Horizontal on desktop, vertical on mobile

Content alignment:

  • justify-start - Align to start
  • justify-end - Align to end
  • justify-center - Center items
  • justify-between - Space between items
  • justify-around - Space around items
  • justify-evenly - Space evenly

Item alignment:

  • items-start - Align items to top
  • items-end - Align items to bottom
  • items-center - Center items vertically

Position

Control element positioning:

  • relative - Position relative
  • absolute - Position absolute
  • top-0 - Position at top
  • left-0 - Position at left
  • inset-0 - Fill entire container

SPACING

Gap (Space Between Items)

Add consistent spacing between elements:

  • gap-8 - 8px gap
  • gap-12 - 12px gap
  • gap-20 - 20px gap
  • gap-24 - 24px gap
  • gap-32 - 32px gap
  • gap-48 - 48px gap
  • gap-80 - 80px gap (24px on mobile)

Margin

Add space outside elements:

Top margin:

  • mt-12, mt-20, mt-40, mt-64

Bottom margin:

  • mb-12, mb-20, mb-40, mb-64

Note: Larger values automatically reduce on mobile

Padding

Add space inside elements:

Vertical padding (top + bottom):

  • py-12 - 12px vertical
  • py-16 - 16px vertical
  • py-64 - 64px vertical (40px on mobile)
  • py-80 - 80px vertical
  • py-150 - 150px vertical (80px on mobile)

Horizontal padding (left + right):

  • px-16 - 16px horizontal
  • px-24 - 24px horizontal
  • px-32 - 32px horizontal
  • px-240 - 240px horizontal (24px on mobile)

SIZING

Width

Control element width:

  • w-full - 100% width
  • w-50 - 50% width
  • w-70 - 70% width
  • w-120 - 120px width
  • w-260 - 260px width
  • w-full-mobile - 100% width on mobile only

Height

Control element height:

  • h-full - 100% height
  • h-120 - 120px height
  • h-spacer - 300px height (412px on mobile)

Max Width

  • max-w-1080 - Maximum 1080px width

Aspect Ratio

Maintain consistent proportions:

  • aspect-square - Square (1:1)
  • aspect-video - Video (16:9)
  • aspect-3-2 - Photo (3:2)
  • aspect-4-3 - Standard (4:3)

TYPOGRAPHY

Text Size

  • text-base - 16px
  • text-lg - 18px
  • text-xl - 20px
  • text-2xl - 24px
  • text-3xl - 32px (24px on mobile)
  • text-4xl - 40px
  • text-5xl - 56px (40px on mobile)

Font Weight

  • font-regular - Normal weight
  • font-semibold - Bold weight

Font Style

  • italic - Italic text

Text Alignment

  • text-left - Left aligned
  • text-center - Center aligned
  • text-right - Right aligned
  • text-justify - Justified
  • text-center-mobile - Center on mobile only

Text Color

  • text-white - White text
  • text-black - Black text
  • text-gold - Gold accent text
  • text-fg-muted - Muted text (70% opacity)

White Space

  • no-wrap - Keep text on one line
  • br-desktop - Line break on desktop only

VISUAL EFFECTS

Border Radius

  • rounded - 4px rounded corners

Overflow

  • overflow-hidden - Hide content that overflows

Image Fitting

  • object-cover - Fill container (may crop)
  • object-contain - Fit within container
  • object-fill - Stretch to fill
  • object-top - Align image to top

Filters

  • grayscale - Black and white filter

Background Overlay

  • bg-overlay - 40% black overlay

Z-INDEX (STACKING ORDER)

Control which elements appear on top:

  • z-1 - First layer
  • z-2 - Second layer
  • z-3 - Third layer
  • z-4 - Top layer

CONTAINER

  • container-1080 - Centered container with max width

BORDERS

  • bottom-border-neutral - Bottom border line

RESPONSIVE BEHAVIOR

Many classes automatically adjust for mobile devices (screens 1080px and smaller):

Desktop vs Mobile Values:

  • py-150: 150px → 80px
  • py-64: 64px → 40px
  • px-240: 240px → 24px
  • gap-80: 80px → 24px
  • mt-64/mb-64: 64px → 40px
  • text-3xl: 32px → 24px
  • text-5xl: 56px → 40px
  • flex-col-mobile: row → column
  • h-spacer: 300px → 412px

Mobile-Only Classes:

  • w-full-mobile - Full width on mobile only
  • text-center-mobile - Center text on mobile only
  • pb-0-mobile - Remove bottom padding on mobile

BEST PRACTICES

  1. Combine classes - Stack multiple utilities to achieve complex layouts
  2. Use semantic HTML - Classes don't replace proper HTML elements
  3. Create components for repetition - If a pattern repeats, save it as a reusable piece
  4. Test responsive behavior - Always check how your page looks on mobile
  5. Maintain consistency - Use the predefined spacing values

WHEN TO USE CUSTOM CSS

Use utility classes for:

  • Layout and spacing
  • Typography sizing and alignment
  • Basic styling

Write custom CSS for:

  • Complex animations
  • Unique component styles
  • Hover/focus effects
  • Complex selectors

KEY FILES

  • atomic.css - Contains all utility classes
  • screen.css - Main stylesheet that includes atomic.css

Remember: These classes help you build pages faster while maintaining consistency. Start with these utilities and only write custom CSS when you need something specific that isn't covered.