kyaulabs/prism/scss-mobile-first

Mobile-First Design Rules

All styling is developed mobile-first. This means:

• Base styles target the smallest viewport (320px mobile)
• Scale up with `min-width` media queries — never max-width for layout
• Use min-width breakpoints: 768px (tablet), 1024px (desktop)

// Correct — mobile-first
.container {
    padding: 1rem;
 
    @media (min-width: 768px) {
        padding: 2rem;
    }
}
 
// Wrong — desktop-first
.container {
    padding: 2rem;
 
    @media (max-width: 767px) {
        padding: 1rem;
    }
}

Units

• Use rem, %, vw, vh, clamp() for layout and spacing
• Avoid fixed px values for widths and margins
• Use clamp() for fluid typography and spacing:

font-size: clamp(1rem, 2.5vw, 1.5rem);
padding: clamp(1rem, 4vw, 2rem);

• Avoid fixed px widths on layout containers — use max-width + responsive padding
• Touch targets ≥ 44×44px — see the accessibility skill for the WCAG minimum and adjacent-target gap rule

Stylelint

Config: .stylelintrc.json Run through the launcher:

node_modules/.bin/stylelint "cdn/sass/**/*.scss" --allow-empty-input

Stylelint runs automatically in the pre-commit hook on staged .scss files. Fix violations before committing — the hook blocks on failure.

SCSS Source Location

Edit files in cdn/sass/. Never edit cdn/css/*.min.css — those are generated.

Compile with the project-local tool:

node_modules/.bin/sass --style=compressed cdn/sass/source.scss cdn/css/output.min.css