# Scss

# Grid

Le système de grid inclus avec Bootstrap Flexbox Grid(opens new window) est utilisé par défaut et légèrement opinionated. Il est inclus dans src/sass/base/grid.scss

Documentation de Boostrap(opens new window)

# Object fit

Un mixin Object-fit est disponible dans le dossier src/sass/mixins/_objectfit.css

# Exemple d'utilisation dans votre Scss

@include object-fit(cover, center center);

# Possibilités pour le premier paramètre : object-fit

fill contain cover scale-down

Le mode de fit par défaut est fill.

# Exemples de possibilités pour le second paramètre : object-position

right top left bottom center center center top etc. Les pourcentages et pixels sont aussi possibles.

Le positionnement par défaut est null (non défini).

# Exemple de sortie CSS

font-family: "object-fit: cover; object-position: center center";
-o-object-position: center center;
object-position: center center;
-o-object-fit: cover;
object-fit: cover;

TIP

La propriété font-family nécessite le polyfill inclus(opens new window) dans le Javascript. Vous avez seulement à vous assurer qu'il est inclus.

# Spacing betav1.0.1+

src/sass/utilities/_spacing.css

Ce système d'espacement est conçu spécifiquement pour des sites web. Il permet de statuer une valeur d'espacement de base et les mixins vont créer des classes utilitaires en fractions, permettant de combiner aisément entre éléments et row.

Roadmap : Ce système sera intégré à une future utilisation de CSS Grid et des Gap.

# Mode 1 : En utilisant une valeur pour chaque breakpoint

L'utilitaire d'espacement est basé sur la valeur la plus grande que vous souhaitez utiliser entre vos row.

# Pour éditer les valeurs par défaut

Modifiez la valeur pour chaque breakpoint dans la variable map $spacing-values dans le fichier src/sass/utilities/_spacing.scss.

  • Vous pouvez utiliser des valeurs en rem ou px.
  • Vous pouvez ajouter des breakpoints selon les breakpoints existants si nécessaire.

# Classes générées par ce mode

margin-bottom margin-top padding-bottom padding-top
mb-full mt-full pb-full pt-full
mb-threequarter mt-threequarter pb-threequarter pt-threequarter
mb-twothird mt-twothird pb-twothird pt-twothird
mb-half mt-half pb-half pt-half
mb-third mt-third pb-third pt-third
mb-quarter mt-quarter pb-quarter pt-quarter

# Mode 2 : En utilisant RFS (responsive font size)

Ce mode vous permet de mettre une seule valeur full pour le breakpoint 1200px(défaut). Par la suite, en utilisant les fonctions de RFS, la valeur full pour chaque breakpoint sera automatiquement générée.

# Pour éditer la valeur par défaut(7rem)

Modifiez la variable $rfs-base-spacing dans le fichier src/sass/utilities/_spacing.scss.

# Classes générées par ce mode

margin-bottom margin-top padding-bottom padding-top
rmb-full rmt-full rpb-full rpt-full
rmb-threequarter rmt-threequarter rpb-threequarter rpt-threequarter
rmb-twothird rmt-twothird rpb-twothird rpt-twothird
rmb-half rmt-half rpb-half rpt-half
rmb-third rmt-third rpb-third rpt-third
rmb-quarter rmt-quarter rpb-quarter rpt-quarter

TIP

À l'aide de ces classes, vous pouvez facilement combiner entre éléments et rangées pour toujours avoir la valeur full.

# Voici un exemple avec le Mode 1 et les valeurs suivantes :

L'espacement combiné entre chaque row est toujours identique.

$spacing-values: (
  xs: 3rem,
  sm: 4rem,
  md: 5rem,
  xl: 6rem,
);
Élément aucune marge / Row mb-full
Élément aucune marge / Row mb-full
Élément mb-half / Row mb-half
Élément mb-half / Row mb-half
Élément mb-quarter / Row mb-threequarter
Élément mb-quarter / Row mb-threequarter
Élément mb-quarter / Row mb-threequarter
Élément mb-quarter / Row mb-threequarter
Élément mb-quarter / Row mb-threequarter
Élément mb-third / Row mb-threethird
Élément mb-third / Row mb-threethird
Élément mb-third / Row mb-threethird

WARNING

Important : PurgeCSS va supprimer du CSS final toutes les classes de spacing non-utilisées dans vos templates lors du build.

Cette façon de faire évite d'utiliser des classes comme pt-5 ou mb-3 et permet de combiner les valeurs afin de toujours avoir un espacement cohérent et uniforme entre les éléments.

# Frameworks

Vous souhaitez utiliser Bootstrap plutôt que les utilities fournies ? Voici la marche à suivre :

à venir

Date de modification: 10/28/2020, 5:51:53 PM