Skip to main content
View as Markdown

Design responsive

Le système responsive de Sovrium repose sur des points de rupture définis dans theme.breakpoints. Chaque point de rupture devient une media query min-width, et les propriétés des composants peuvent être surchargées par point de rupture pour des mises en page mobile-first.

theme.breakpoints

Une table associant des noms de points de rupture à des valeurs de pixels. Les noms sont alphanumériques en minuscules ; les valeurs sont des chaînes de pixels.

Propriété Description
clé Nom du point de rupture (alphanumérique en minuscules, par ex. sm, md, lg, xl, 2xl).
valeur Seuil de largeur minimale sous forme de chaîne de pixels (par ex. '640px', '768px'). 
theme:
  breakpoints:
    sm: '640px'
    md: '768px'
    lg: '1024px'
    xl: '1280px'
    '2xl': '1536px'

Ceux-ci correspondent aux paliers responsifs standards :

Point de rupture Largeur min Cible typique
sm 640px Grand mobile
md 768px Tablette
lg 1024px Ordinateur portable
xl 1280px Ordinateur de bureau
2xl 1536px Grand écran de bureau

Surcharges par point de rupture

Les points de rupture alimentent les variantes utilitaires mobile-first de Tailwind. Un utilitaire de base s'applique à toutes les tailles ; une variante préfixée (md:, lg:, …) s'applique à partir de ce point de rupture vers le haut. C'est ainsi qu'un même composant s'adapte aux différentes tailles d'écran.

pages:
  - name: home
    path: /
    components:
      - type: container
        element: section
        props:
          # 1 column on mobile, 2 from md, 3 from lg
          className: 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4'
        children:
          - { type: card, props: { className: 'p-4 md:p-6' } }
          - { type: card, props: { className: 'p-4 md:p-6' } }
          - { type: card, props: { className: 'p-4 md:p-6' } }

Dans l'exemple ci-dessus :

  • grid-cols-1 s'applique sur tous les écrans.
  • md:grid-cols-2 le remplace à partir de 768px vers le haut.
  • lg:grid-cols-3 le remplace à nouveau à partir de 1024px vers le haut.
  • p-4 est le padding de base ; md:p-6 l'augmente à partir du point de rupture md.

Points de rupture personnalisés

Définissez vos propres noms en complément ou à la place des paliers standards. Un point de rupture personnalisé génère un préfixe utilitaire correspondant.

theme:
  breakpoints:
    phone: '480px'
    tablet: '834px'
    wide: '1440px'
props:
  className: 'flex-col tablet:flex-row wide:gap-12'

Étapes suivantes