SmartSite! Framework v0.2.1

A clean & modular CSS framework

A clean, modular CSS framework built for performance-first showcase sites. No heavy JavaScript dependencies. One single stylesheet with customizable design variables and a mobile-first approach, no compromise.

Explore components ↓ View utilities

https://my-site.smartsite.dev

MySite

Typography

Clear hierarchy,
from the start

Fluid type scale with clamp(), fine-tuned tracking, and a unique black (900) weight available.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

s2-tagline

.s2-lead — A subtitle or section intro, slightly larger and in muted grey.

.s2-text-xs / .s2-text-sm / .s2-text-base / .s2-text-lg

xs sm base lg

light · normal · medium · bold · black

primary · secondary · accent · muted

Text utilities — coloring, alignment, transformation

.s2-text-primary .s2-text-secondary .s2-text-accent .s2-text-muted .s2-text-dark .s2-text-white .s2-text-center .s2-tracking-wide .s2-uppercase .s2-truncate

Layout

Adaptive grids,
no media queries

Fixed grids (2, 3, 4 columns) or auto-fit responsive grids, with unified spacing via --s2-space-* variables.

.s2-grid-4 — 4 columns

Column

.s2-grid-auto — auto-fit, from 260px to 1fr

📐

Container

.s2-container caps width at 1320px with .s2-container-sm, .s2-container-md, and .s2-container-lg variants for tighter or wider layouts.

📏

Spacing

8 spacing levels from --s2-space-1 (4px) to --s2-space-8 (96px) keep vertical rhythm consistent across every section.

🔄

Responsive

Fixed grids collapse to a single column on mobile with zero JavaScript, relying purely on CSS media queries.

🎯

Span

Use .s2-col-span-2 or .s2-col-span-3 to let a single cell stretch across multiple grid columns.

Grid utilities

.s2-grid-2 .s2-grid-3 .s2-grid-4 .s2-grid-auto .s2-grid-auto-sm .s2-grid-auto-lg .s2-grid--gap-sm .s2-grid--gap-lg

Composants

Ready-to-use blocks

Cards, features, alerts, badges, callouts — each component follows the structure / theme principle.

Cards .s2-card

Badge

Simple card

Hover with translateY(-4px) and enhanced shadow for a subtle depth effect. Fully overridable by theme.

Free content

Cards accept images, lists, forms, or any content you place inside .s2-card-body for maximum flexibility.

No JS

Hover effects are pure CSS, and animations stay smooth thanks to GPU-accelerated custom properties.

Feature boxes .s2-feature / .s2-feature--row

🎨

Column mode

.s2-feature stacks icon and text vertically in a flex column with full-height alignment.

⚡

Row mode

.s2-feature--row places the icon on the left side, making it ideal for services and feature lists.

Boutons .s2-btn

.s2-btn--primary .s2-btn--outline .s2-btn--ghost Small Large

Variants: --primary --outline --ghost · Sizes: --sm --lg

Badges .s2-badge

Primary Success Danger Neutral

Alertes .s2-alert

✅ Operation successful

⚠️ Error detected

📌 Attention required

ℹ️ Information

💡 .s2-callout

Highlight block with a side border. Perfect for quotes, tips, or warnings.

.s2-box-highlight

Primary-light background + generous padding. Ideal for CTAs or stats.

Utilities

Classes to do everything,
without writing a line of CSS

Over 80 utility classes covering spacing, colors, display, flexbox, borders, shadows, and animations.

📦 Spacing

Margins and padding across 8 levels.

.s2-mt-1…6 .s2-mb-1…6 .s2-pt-3…5 .s2-pb-3…5 .s2-px-3…5 .s2-py-3…6 .s2-mx-auto .s2-gap-1…5

🎯 Display & Flex

Full layout control without additional CSS.

.s2-d-flex .s2-d-grid .s2-d-block .s2-d-none .s2-flex-row .s2-flex-col .s2-items-center .s2-justify-between .s2-flex-1 .s2-hide-xs/sm/md

🎨 Backgrounds & Gradients

.s2-bg-white .s2-bg-light .s2-bg-primary .s2-bg-primary-light .s2-bg-dark .s2-bg-gradient

🔲 Borders & Shadows

.s2-border .s2-border-0 .s2-rounded-sm .s2-rounded .s2-rounded-lg .s2-rounded-xl .s2-rounded-pill .s2-rounded-full .s2-shadow-sm .s2-shadow .s2-shadow-lg .s2-shadow-0

Animations & Scroll reveal

.s2-animate-fade-in .s2-animate-fade-in-up .s2-reveal .s2-delay-1…5 — Staggered delays let you animate cards in sequence as they scroll into view.

①

②

③

Forms

Clean fields,
production-ready

Inputs, textarea, select — with focus states, placeholders, and multi-column grid .s2-form-row-2. Compatible with SmartForms for submission without a backend.

Standard label

First name

Last name

Select

Message

Form classes

.s2-form-group .s2-label .s2-input .s2-textarea .s2-select .s2-form-row-2 .s2-feedback

Section variants

.s2-section--dark

Sections accept the --light, --white, --dark, --primary modifiers and --sm / --lg size variants.

.s2-section--light .s2-section--white .s2-section--dark .s2-section--primary

Contact block

Ready to impress

The contact block uses .s2-contact-wrapper with a 2-column grid configurable via --s2-contact-cols.

Let's stay in touch

A complete, responsive contact block with info and form integrated.

📧 hello@example.com

📞 +41 00 000 00 00

📍 Lausanne, Switzerland

Name