SmartSite Framework v0.2.1

Un framework CSS sobre & modulaire

Conçu pour les sites vitrine performance-first. Pas de dépendances JavaScript lourdes. Une seule feuille CSS, des variables de design customisables, et une approche mobile-first sans compromis.

Découvrir les composants ↓ Voir les utilitaires

Typographie

Une hiérarchie claire,
dès le départ

Échelle typographique fluide avec clamp(), tracking ajusté, et une graisse unique black (900) disponible.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

s2-tagline

.s2-lead — Un sous-titre ou introduction de section, légèrement plus gros et en gris muet.

.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

Utilitaires texte — coloration, alignement, 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

Grilles adaptatives,
sans media queries

Des grilles fixes (2, 3, 4 colonnes) ou auto-fit responsives, avec espacement unifié par variables --s2-space-*.

.s2-grid-4 — 4 colonnes

Colonne

.s2-grid-auto — auto-fit, de 260px à 1fr

📐

Container

.s2-container avec max-width: 1320px, variantes .s2-container-sm/md/lg.

📏

Espacement

8 échelons de --s2-space-1 (4px) à --s2-space-8 (96px).

🔄

Responsive

Grilles fixes passent à 1 colonne en mobile. Aucun JS nécessaire.

🎯

Span

.s2-col-span-2 / .s2-col-span-3 pour étendre une cellule.

Utilitaires de grille

.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

Des blocs prêts à l'emploi

Cards, features, alertes, badges, callouts — chaque composant suit le principe structure / thème.

Cards .s2-card

Badge

Card simple

Hover avec translateY(-4px) et ombre rehaussée. Surchargeable par thème.

Contenu libre

Les cards acceptent images, listes, formulaires — tout ce que vous mettez dans .s2-card-body.

Sans JS

Le hover est 100% CSS. Les animations sont fluides grâce aux custom properties.

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

🎨

Mode colonne

.s2-feature empile icône + texte verticalement. Hauteur 100% grâce à flex column.

⚡

Mode ligne

.s2-feature--row met l'icône à gauche. Pratique pour les listes de services.

Boutons .s2-btn

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

Variantes : --primary --outline --ghost · Tailles : --sm --lg

Badges .s2-badge

Primary Success Danger Neutral

Alertes .s2-alert

✅ Opération réussie

⚠️ Erreur détectée

📌 Attention requise

ℹ️ Information

💡 .s2-callout

Bloc de mise en avant avec bordure latérale. Parfait pour les citations, conseils ou mises en garde.

.s2-box-highlight

Fond primary-light + padding généreux. Idéal pour les CTAs ou statistiques.

Utilitaires

Des classes pour tout faire,
sans écrire une ligne de CSS

Plus de 80 classes utilitaires couvrant espacement, couleurs, display, flexbox, bordures, ombres, et animations.

📦 Espacement

Marges et padding sur 8 échelons.

.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

Contrôle total du layout sans CSS additionnel.

.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

🎨 Fonds & Dégradés

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

🔲 Bordures & Ombres

.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 & Révélation au scroll

.s2-animate-fade-in .s2-animate-fade-in-up .s2-reveal .s2-delay-1…5 — Les délais permettent d'animer les cartes en séquence.

①

②

③

Formulaires

Des champs soignés,
prêts pour la prod

Inputs, textarea, select — avec focus states, placeholders, et grille multi-colonnes .s2-form-row-2. Compatible SmartForms pour l'envoi sans backend.

Label standard

Prénom

Nom

Sélection

Message

Classes de formulaire

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

Variantes de section

.s2-section--dark

Les sections acceptent les modificateurs --light, --white, --dark, --primary et les tailles --sm / --lg.

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

Bloc Contact

Prêt à convaincre

Le bloc contact utilise .s2-contact-wrapper avec une grille à 2 colonnes configurable via --s2-contact-cols.

Restons en contact

Un bloc contact complet, responsive, avec informations et formulaire intégrés.

📧 bonjour@example.com

📞 +41 00 000 00 00

📍 Lausanne, Suisse

Nom