Sam : Scss Animated Microframework

Documentation

Scss Animated Microframework Sam est un microframework SCSS qui regroupe certaines propriétés CSS importantes par classe. Sam est orienté animation à travers les keyframes, les propriétés CSS de transformation et d'animation.
SAM

Sam est un microframework SCSS générant une librairie CSS.

Ce microframework est orienté Animation au travers de règles @keyframes & de propriétés CSS d'animation & de transformation.

Il est fourni sans aucune ligne de code JavaScript...

Ne nécessite aucune dépendance côté production & une seule côté développement : Normalize.css.

Et un seul appel depuis le layout est nécessaire pour faire fonctionner la totalité des fonctionnalités...

Sam peut faire une grille avec flexbox layout ou grid layout!

Cet outil peut être utilisé sans aucune connaissance SCSS, Sass ou Ruby, en utilisant uniquement la bibliothèque CSS.

Il est construit autour de 6 caractéristiques principales: l'affichage, les couleurs, les bordures, les ombres, les animations & les helpers.

Et fournit 3 éléments de base en plus, la barre de navigation, les boutons & les formulaires.

I - Installation

  1. Ouvrez un terminal, placez-vous dans votre dossier web, puis tapez :
    npm i sam.scss
  2. Appelez depuis votre layout :
    • sam.css pour la version dev
      <link rel="stylesheet" href="node_modules/sam.scss/dist/sam.css">
    • sam.min.css pour la version prod
      <link rel="stylesheet" href="node_modules/sam.scss/dist/sam.min.css">
      (attention toutefois, il s'agit d'un pre-release pour le moment)

III - Button

Les classes btn sont au nombre de 2 :

  • .btn
  • .btn-group

La classe btn s'implémente sur l'élément qui doit être un bouton.

Alors que la classe btn-group s'implémente sur l'élément parent des boutons.

Le code source est disponible ci-dessous :

Classes

La classe btn se complémente sur un élément à l'aide :

  • d'une classe color,
  • et/ou d'une classe border,
  • et/ou d'une classe shadow,
  • et/ou d'une classe animate,
  • et/ou d'une ou de plusieurs classes helper.

Cela permet d'obtenir un éventail de boutons sans limite...

IV - Form

Les formulaires sont gérés sans classe, uniquement par des règles sur les balises.

Ils sont responsives & changent le positionnement des labels selon le type d'écran
(le point de rupture est 1024px par défaut).

Exemple de Formulaire
  • Quitter

Le code source est disponible ci-dessous :

Form

V - Display

Les classes display sont réparties en 4 groupes :

  • Container
    pour afficher un élément d'une manière spécifique
  • Fixed
    pour fixer un élément
  • Flex
    pour afficher un élément de manière flexible
  • Grid
    pour afficher des éléments dans une grille

Les codes sources sont disponibles ci-dessous...

1 / Container

5 classes Container sont disponibles :

  • .none
    pour cacher globalement un élément
  • .hide
    pour cacher visuellement un élément
  • .container
    pour afficher un conteneur de 80% centré
  • .block
    pour afficher un élément en tant que bloc
  • .in-block
    pour afficher un élément en tant bloc en ligne

2 / Fixed

12 classes Fixed sont disponibles :

  • .fixed-top / .fixed-right / .fixed-bottom / .fixed-left
    pour fixer un élément dans l'une des 4 principales directions
  • .fixed-ct / .fixed-cr / .fixed-cb / .fixed-cl
    pour fixer un élément au centre de l'une des 4 directions
  • .fixed-tr / .fixed-br / .fixed-bl / .fixed-tl
    pour fixer un élément dans l'un des 4 angles

3 / Flex

3 types de classes Flex sont disponibles :

  • .col
    pour créer une liste en colonne avec flexbox
  • .row
    pour créer une liste en rangée avec flexbox
  • .flex
    pour créer une grille avec flexbox
3.1 / La classe Col

La classe col se composent de 2 parties :

col-options

Ces options sont au nombre de 3, sont facultatives & peuvent être concaténées ensemble dans une certaine mesure :

  • reverse
    pour inverser l'ordre des éléments flexibles
  • nowrap
    pour contraindre les éléments flexibles sur une seule colonne
  • inverse
    pour inverser l'ordre des colonnes

On peut donc écrire la classe col de différentes manières :

  • .col
    sans option
  • .col-option1
    avec l'une des 3 options
  • .col-option1-option2
    avec 2 des 3 options (nowrap & inverse ne sont pas associables)
3.2 / La classe Row

La classe row se composent de 2 parties :

row-options

Ces options sont au nombre de 3, sont facultatives & peuvent être concaténées ensemble dans une certaine mesure (elles sont les mêmes que pour la classe col) :

  • reverse
    pour inverser l'ordre des éléments flexibles
  • nowrap
    pour contraindre les éléments flexibles sur une seule ligne
  • inverse
    pour inverser l'ordre des lignes

On peut donc écrire la classe row de différentes manières (tel que la classe col) :

  • .row
    sans option
  • .row-option1
    avec l'une des 3 options
  • .row-option1-option2
    avec 2 des 3 options (nowrap & inverse ne sont pas associables)
3.3 / Les classes Flex

Les classes flex s'adaptent aux différentes tailles d'écrans ainsi qu'aux nombres de colonnes que l'on désire.

Les classes flex se composent de 2 parties :

flex-grilles

Mais seul flex est obligatoire ; dans ce cas uniquement, son comportement ne sera pas lié aux tailles d'écrans ni au nombre de colonnes.

Dans tous les autres cas, ces grilles, qui définissent le nombre de colonnes sur tel type d'écran, s'écrivent en concaténant :

  1. le nombre de colonnes désirées, de 2 à 12
  2. avec le type d'écran, c'est-à-dire tn, sm, md, lg, wd.

Exemples :

  • .flex-2tn
    2 colonnes pour une résolution comprise entre 480px & 576px
  • .flex-5sm
    5 colonnes pour une résolution comprise entre 576px & 768px
  • .flex-7md
    7 colonnes pour une résolution comprise entre 768px & 1024px
  • .flex-10wd
    10 colonnes pour une résolution supérieure à 1366px

Il est aussi possible de concaténer plusieurs grilles afin de définir tous les comportements attendus (sur chaque type d'écran) :

  • .flex-5sm-10lg
    5 colonnes pour une résolution comprise entre 576px & 1024px,
    puis au-delà de 1024px, 10 colonnes
  • .flex-4tn-8md-12wd
    4 colonnes pour une résolution comprise entre 480px & 768px,
    puis 8 colonnes pour une résolution entre 768px & 1366px,
    enfin 12 colonnes au-delà de 1366px
  • .flex-3sm-6md-9lg-12wd
    3 colonnes pour une résolution comprise entre 576px & 768px,
    puis 6 colonnes pour une résolution entre 768px & 1024px,
    ensuite 9 colonnes entre 1024px & 1366px,
    enfin 12 colonnes au-delà de 1366px
  • .flex-2tn-4sm-6md-8lg-10wd
    2 colonnes pour une résolution comprise entre 480px & 576px,
    puis 4 colonnes pour une résolution entre 576px & 768px,
    ensuite 6 colonnes entre 768px & 1024px,
    après 8 colonnes entre 1024px & 1366px,
    et enfin 10 colonnes au-delà de 1366px

De plus, un type d'option spécifique au flex layout est disponible :

flexible

se définit sur un élément enfant pour modifier ses dimensions

9 classes flexible sont disponibles :

  • <div class="flexible-auto">Flex = 1 1 auto</div>
  • <div class="flexible-grow">Flex = 1 0 auto</div>
  • <div class="flexible-shrink">Flex = 0 1 auto</div>
  • <div class="flexible-none">Flex = 0 0 auto</div>
  • <div class="flexible-double">Flex = 2 0 auto</div>
  • <div class="flexible-half">Flex = 0 2 auto</div>
  • <div class="flexible-third">Flex = 0 3 auto</div>
  • <div class="flexible-quarter">Flex = 0 4 auto</div>
  • <div class="flexible-all">Flex = 1 1 100%</div>

4 / Grid

Les classes du groupe Grid s'adaptent aux différentes tailles d'écrans ainsi qu'aux nombres de colonnes que l'on désire.

Les classes du groupe Grid sont de 2 types :

  • .grid
    pour avoir une grille contenue dans 80% de la largeur & centrée
  • .fluid
    pour avoir une grille prenant toute la largeur disponible

Les classes grid & fluid se composent de 2 parties :

grid-grilles

Mais seul grid est obligatoire ; dans ce cas uniquement, son comportement ne sera pas lié aux tailles d'écrans ni au nombre de colonnes.

Dans tous les autres cas, ces grilles, qui définissent le nombre de colonnes sur tel type d'écran, s'écrivent en concaténant :

  1. le nombre de colonnes désirées, de 2 à 12
  2. avec le type d'écran, c'est-à-dire tn, sm, md, lg, wd.

Exemples :

  • .grid-2tn
    2 colonnes pour une résolution comprise entre 480px & 576px sur 80% de la largeur
  • .fluid-5sm
    5 colonnes pour une résolution comprise entre 576px & 768px en pleine largeur
  • .grid-7md
    7 colonnes pour une résolution comprise entre 768px & 1024px sur 80% de la largeur
  • .fluid-10wd
    10 colonnes pour une résolution supérieure à 1366px en pleine largeur

Il est aussi possible de concaténer plusieurs grilles afin de définir tous les comportements attendus (sur chaque type d'écran) :

  • .grid-5sm-10lg
    5 colonnes pour une résolution comprise entre 576px & 1024px,
    puis au-delà de 1024px, 10 colonnes,
    le tout dans 80% de la largeur
  • .fluid-4tn-8md-12wd
    4 colonnes pour une résolution comprise entre 480px & 768px,
    puis 8 colonnes pour une résolution entre 768px & 1366px,
    enfin 12 colonnes au-delà de 1366px
    le tout dans la totalité de la largeur
  • .grid-3sm-6md-9lg-12wd
    3 colonnes pour une résolution comprise entre 576px & 768px,
    puis 6 colonnes pour une résolution entre 768px & 1024px,
    ensuite 9 colonnes entre 1024px & 1366px,
    enfin 12 colonnes au-delà de 1366px
    le tout dans 80% de la largeur
  • .fluid-2tn-4sm-6md-8lg-10wd
    2 colonnes pour une résolution comprise entre 480px & 576px,
    puis 4 colonnes pour une résolution entre 576px & 768px,
    ensuite 6 colonnes entre 768px & 1024px,
    après 8 colonnes entre 1024px & 1366px,
    et enfin 10 colonnes au-delà de 1366px
    le tout dans la totalité de la largeur

De plus, un type d'option spécifique au grid layout est disponible :

.gap

se définit sur l'élément parent pour insérer des gouttières entre les colonnes

4.1 / Grid Gap

5 classes de gouttières sont disponibles :

  • <div class="gap-tn">Grid-gap = .5rem</div>
  • <div class="gap-sm">Grid-gap = 1rem</div>
  • <div class="gap-md">Grid-gap = 2rem</div>
  • <div class="gap-lg">Grid-gap = 5rem</div>
  • <div class="gap-wd">Grid-gap = 10rem</div>

5 / Grid & Flex Options

De plus, 3 types d'options communes à Grid & Flex sont disponibles :

  • .items
    se définit sur l'élément parent pour modifier les alignements des éléments enfants
  • .content
    se définit sur l'élément parent pour modifier les alignements du contenu
  • .self
    se définit sur les éléments enfants pour modifier leurs alignements indépendamment
5.1 / Grid Items

7 valeurs d'alignements sont disponibles :

  • stretch
    les éléments sont étirés
  • base
    les éléments sont alignés sur leur base
  • center
    les éléments sont centrés
  • start
    les éléments sont alignés au début du conteneur
  • end
    les éléments sont alignés à la fin du conteneur
  • right
    les éléments sont alignés à droite
  • left
    les éléments sont alignés à gauche

Ces valeurs d'alignements sont disponibles pour chacune de 2 directions, ce qui donne 49 classes, exemples :

  • .items-stretch-base
    les éléments sont étirés dans l'axe principal & alignés sur leur base dans l'axe secondaire
  • .items-center-start
    les éléments sont centrés dans l'axe principal & alignés au début du conteneur dans l'axe secondaire
  • .items-right-end
    les éléments sont alignés à droite dans l'axe principal & alignés à la fin du conteneur dans l'axe secondaire

Lorsque les 2 valeurs sont identiques, une seule est indiquée, exemple :

.items-center
5.2 / Grid Content

10 valeurs d'alignements sont disponibles :

  • stretch
    le contenu est étiré
  • base
    le contenu est aligné sur sa base
  • center
    le contenu est centré
  • start
    le contenu est aligné au début du conteneur
  • end
    le contenu est aligné à la fin du conteneur
  • right
    le contenu est aligné à droite
  • left
    le contenu est aligné à gauche
  • around
    le contenu est aligné d'un bord à l'autre du conteneur en laissant des espaces réguliers entre chaque élément, avec la moitié d'un espace régulier au niveau des bords
  • between
    le contenu est aligné d'un bord à l'autre du conteneur en laissant des espaces réguliers entre chaque élément, sans espace au niveau des bords
  • evenly
    le contenu est aligné d'un bord à l'autre du conteneur en laissant des espaces réguliers entre chaque élément, avec le même espace régulier au niveau des bords

Ces valeurs d'alignements sont disponibles pour chacune de 2 directions, ce qui donne 100 classes, exemples :

  • .content-stretch-base
    les éléments sont étirés dans l'axe principal & alignés sur leur base dans l'axe secondaire
  • .content-center-start
    les éléments sont centrés dans l'axe principal & alignés au début du conteneur dans l'axe secondaire
  • .content-right-end
    les éléments sont alignés à droite dans l'axe principal & alignés à la fin du conteneur dans l'axe secondaire

Lorsque les 2 valeurs sont identiques, une seule est indiquée, par exemple :

.content-evenly
5.3 / Grid Self

7 valeurs d'alignements sont disponibles :

  • stretch
    les éléments sont étirés
  • base
    les éléments sont alignés sur leur base
  • center
    les éléments sont centrés
  • start
    les éléments sont alignés au début du conteneur
  • end
    les éléments sont alignés à la fin du conteneur
  • right
    les éléments sont alignés à droite
  • left
    les éléments sont alignés à gauche

Ces valeurs d'alignements sont disponibles pour chacune de 2 directions, ce qui donne 49 classes, exemples :

  • .self-stretch-base
    l'élément est étiré dans l'axe principal & aligné sur sa base dans l'axe secondaire
  • .self-center-start
    l'éléments est centré dans l'axe principal & aligné au début du conteneur dans l'axe secondaire
  • .self-right-end
    l'élément est aligné à droite dans l'axe principal & aligné à la fin du conteneur dans l'axe secondaire

Lorsque les 2 valeurs sont identiques, une seule est indiquée, par exemple :

.self-center

VI - Border

Les classes border se composent de 3 parties :

style-radius-width

Ces 3 parties gèrent 3 propriétés CSS :

Mais seul le style est obligatoire ; par défaut, la valeur de radius est square & celle de width est md.

On peut donc écrire une classe border de 4 manières :

  • .style
    le radius vaudra alors la valeur square & la width la valeur md (8 classes)
  • .style-width
    le radius vaudra alors square (16 classes)
  • .style-radius
    la width vaudra alors md (32 classes)
  • .style-radius-width
    chaque valeur est précisée (64 classes)

Ce qui donne 120 combinaisons/classes de bordures !

Exemples :

  • .dashed
  • .solid-round
  • .ridge-lg
  • .inset-slight-sm

Les codes sources sont disponibles ci-dessous...

De plus, les classes border peuvent être affectées aux parents des balises th & td...

1 / Border Style

8 styles de bordures sont disponibles :

  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset

2 / Border Radius

5 radius de bordures sont disponibles :

  • (square)
  • slight
  • rounded
  • rounder
  • round

square est la valeur des classes Border ne spécifiant pas le radius, elle est donc la valeur par défaut & n'est disponible qu'en omettant le radius.

3 / Border Width

3 width de bordures sont disponibles :

  • sm
  • (md)
  • lg

md est la valeur des classes Border ne spécifiant pas le width, elle est donc la valeur par défaut & n'est disponible qu'en omettant le width.

VII - Shadow

Les classes shadow se composent de 3 parties :

type-direction-width

Ces 3 parties gèrent 2 propriétés CSS :

Mais seul le type est obligatoire, la valeur de direction par défaut est multiple & celle de width est md.

On peut donc écrire une classe de Shadow de 4 manières :

  • .type
    la direction est alors multiple & la width vaudra la valeur md (5 classes)
  • .type-width
    la direction est alors multiple (10 classes)
  • .type-direction
    la width vaudra alors md (32 classes)
  • .type-direction-width
    chaque valeur est précisée (64 classes)

Ce qui donne 111 combinaisons/classes d'ombres !

Exemples :

  • .shadow-br
  • .text-shadow-br
  • .inset-blur-lg
  • .spread-sm

Les codes sources sont disponibles ci-dessous...

De plus, les classes shadow peuvent être affectées aux parents des balises th & td...

1 / Shadow Type

Sam propose 8 types d'ombres.

6 types d'ombres de boites sont disponibles :

  • shadow
  • blur
  • spread
  • inset-shadow
  • inset-blur
  • inset-spread

2 types d'ombres de texte sont disponibles :

  • text-shadow
  • text-blur

2 / Shadow Direction

4 directions d'ombres sont disponibles :

  • tr
  • br
  • bl
  • tl

Une 5e direction est disponible, lorsque l'ombre est portée dans toutes les directions.

Mais cela ne fonctionne que pour les classes blur & spread : pour cela, il suffit d'omettre la direction.

3 / Shadow Width

3 widths d'ombres sont disponibles :

  • sm
  • (md)
  • lg

md est la valeur des classes Shadow ne spécifiant pas le width, elle est donc la valeur par défaut & n'est disponible qu'en omettant le width.

VIII - Color

Les classes color se composent de 2 parties :

color-type

Ces 2 parties gèrent 3 propriétés CSS :

Mais seul color est obligatoire ; par défaut, la valeur de type est nulle.

On peut donc écrire une classe color de 2 manières :

  • .color
    le type est celui par default dont la valeur est nulle
  • .color-type
    chaque valeur est précisée

Exemples :

  • .info
  • .valid-btn
  • .delete-outline
  • .new-border

Les codes sources sont disponibles ci-dessous...

1 / Color

Color correspond à l'une des 10 couleurs basiques, ou à l'une des 2 couleurs personnalisées, ou encore, à l'une des 9 couleurs de marques.

1.1 / Les basiques
  • .default
  • .info
  • .classic
  • .cancel
  • .valid
  • .warning
  • .delete
  • .special
  • .base
  • .new
1.2 / Les personnalisées
  • .primary
  • .secondary
1.3 / Les marques
  • .freecodecamp
  • .github
  • .linkedin
  • .medium
  • .npm
  • .packagist
  • .stackoverflow

2 / Color Type

Type correspond à l'une des 10 variations de couleurs ; ces variations se découpent en 3 groupes :

  • "mono-color" (2 types)
  • "mono-state" (3 types)
  • "poly-state" (5 types)
2.1 / Type "mono-color"

Les types "mono-color" sont des types n'attribuant qu'une couleur sur une seule partie de l'élément.

2.1.1 / Color Border

Color Border est un type avec uniquement une couleur de bordure.

  • .default-border
  • .info-border
  • .classic-border
  • .cancel-border
  • .valid-border
  • .warning-border
  • .delete-border
  • .special-border
  • .base-border
  • .new-border
2.1.2 / Color Text

Color Text est un type avec uniquement une couleur de texte.

Attention toutefois, le comportement par défaut de la propriété CSS color peut aussi se propager à la bordure, si celle-ci est présente sans attribution de couleur.

  • .default-text
  • .info-text
  • .classic-text
  • .cancel-text
  • .valid-text
  • .warning-text
  • .delete-text
  • .special-text
  • .base-text
  • .new-text
2.2 / Type "mono-state"

Les types "mono-state" sont des types ne réagissant pas au changement d'état & sont donc particulièrement adaptés pour des fonds, des barres de navigation, ou tout autre élément ne permettant pas une action directement sur lui-même.

2.2.1 / Color

Color est le type par default, usant des couleurs normales pour le fond (sans variations).

  • .default
  • .info
  • .classic
  • .cancel
  • .valid
  • .warning
  • .delete
  • .special
  • .base
  • .new
2.2.2 / Color Glass

Color Glass est un type avec une forte transparence.

  • .default-glass
  • .info-glass
  • .classic-glass
  • .cancel-glass
  • .valid-glass
  • .warning-glass
  • .delete-glass
  • .special-glass
  • .base-glass
  • .new-glass
2.2.3 / Color Sea

Color Sea est un type avec une faible transparence.

  • .default-sea
  • .info-sea
  • .classic-sea
  • .cancel-sea
  • .valid-sea
  • .warning-sea
  • .delete-sea
  • .special-sea
  • .base-sea
  • .new-sea
2.3 / Type "poly-state"

Les types "poly-state" sont des types réagissant au changement d'état & sont donc particulièrement adaptés pour des boutons, des liens, ou tout autre élément permettant une action directement sur lui-même.

2.3.1 / Color Outline

Color Outline est un type avec un fond particulièrement lumineux par default & une couleur normale lors de changement d'état.

  • .default-outline
  • .info-outline
  • .classic-outline
  • .cancel-outline
  • .valid-outline
  • .warning-outline
  • .delete-outline
  • .special-outline
  • .base-outline
  • .new-outline
2.3.2 / Color Light

Color Light est un type avec un fond clair par default & un fond foncé lors de changement d'état.

  • .default-light
  • .info-light
  • .classic-light
  • .cancel-light
  • .valid-light
  • .warning-light
  • .delete-light
  • .special-light
  • .base-light
  • .new-light
2.3.3 / Color Trans

Color Trans est un type avec une faible transparence par default & une forte transparence lors de changement d'état.

  • .default-trans
  • .info-trans
  • .classic-trans
  • .cancel-trans
  • .valid-trans
  • .warning-trans
  • .delete-trans
  • .special-trans
  • .base-trans
  • .new-trans
2.3.4 / Color Btn

Color Btn est un type avec un fond de couleur normale par default & un fond particulièrement lumineux lors de changement d'état.

  • .default-btn
  • .info-btn
  • .classic-btn
  • .cancel-btn
  • .valid-btn
  • .warning-btn
  • .delete-btn
  • .special-btn
  • .base-btn
  • .new-btn
2.3.5 / Color Dark

Color Dark est un type avec un fond foncé par default & un fond clair lors de changement d'état.

  • .default-dark
  • .info-dark
  • .classic-dark
  • .cancel-dark
  • .valid-dark
  • .warning-dark
  • .delete-dark
  • .special-dark
  • .base-dark
  • .new-dark

IX - Animate

Les classes Animate se composent de 3 parties au minimum :

type-name-duration

Les codes sources sont disponibles ci-dessous...

1 / Animate Type

Il y a 4 types d'animations :

  • .anime
  • .child
  • .active
  • .hover
1.1 / Animate Anime

Les classes anime sont des animations qui s'activent sur l'élément ciblé, dès que le chargement de la page est effectuée.

1.2 / Animate Child

Les classes child sont des animations qui s'activent sur le ou les enfants de l'élément ciblé, dès que le chargement de la page est effectuée.

1.3 / Animate Active

Les classes active sont des animations qui s'activent sur l'élément ciblé dès que l'utilisateur rend l'élément actif, tel que les exemples d'animations dans la section suivantes, c'est-à-dire au clic sans relâchement, ou lors de l'activation d'un élément sélectionné.

1.4 / Animate Hover

Les classes hover sont des animations qui s'activent sur l'élément ciblé dès que l'utilisateur survole l'élément.

2 / Animate Name

Le name de l'animation correspond à la propriété :

animation-name

Cliquez sur l'animation de votre choix sans relâcher pour voir son effet

2.1 / Animate Quarter
  • quarter
  • quarterX
  • quarterY
2.2 / Animate Half
  • half
  • halfX
  • halfY
2.3 / Animate Full
  • full
  • fullX
  • fullY
2.4 / Animate Quarter 3d
  • quarter3d
  • quarterX3d
  • quarterY3d
  • quarterZ3d
2.5 / Animate Half 3d
  • half3d
  • halfX3d
  • halfY3d
  • halfZ3d
2.6 / Animate Flip
  • flipX
  • flipY
2.7 / Animate Grow
  • grow
  • growX
  • growY
2.8 / Animate Shrink
  • shrinkX
  • shrinkY
  • shrinkS
  • shrinkM
  • shrinkL
2.9 / Animate Bounce
  • bounceS
  • bounceM
  • bounceL
2.10 / Animate Fall
  • fallXS
  • fallXM
  • fallXL
  • fallYS
  • fallYM
  • fallYL
2.11 / Animate Flipper
  • flipperXS
  • flipperXM
  • flipperXL
  • flipperYS
  • flipperYM
  • flipperYL
2.12 / Animate Open
  • openXS
  • openXM
  • openXL
  • openYS
  • openYM
  • openYL
2.13 / Animate Twist
  • twistT
  • twistR
  • twistB
  • twistL
2.14 / Animate Torsion
  • torsionT
  • torsionR
  • torsionB
  • torsionL
2.15 / Animate Twister
  • twisterT
  • twisterR
  • twisterB
  • twisterL
2.16 / Animate Cyclone
  • cycloneT
  • cycloneR
  • cycloneB
  • cycloneL
2.17 / Animate Slip
  • slipT
  • slipR
  • slipB
  • slipL
  • slipTR
  • slipBR
  • slipTL
  • slipBL
2.18 / Animate Slide
  • slideT
  • slideR
  • slideB
  • slideL
  • slideTR
  • slideBR
  • slideTL
  • slideBL

3 / Animate Duration

La duration de l'animation correspond à la propriété :

animation-duration

5 durations d'animations sont disponibles :

  • tn
    correspond à 1s
  • sm
    correspond à 2s
  • md
    correspond à 5s
  • lg
    correspond à 10s
  • wd
    correspond à 60s

4 / Animate Options

Toutes les animations peuvent aussi s'implémenter à l'aide d'une classe composées de plus de 3 parties, on peut y adjoindre jusqu'à 6 options en les concatenants à l'aide du tiret.

Il est possible de concatener le nombre d'options que l'on souhaite, l'ordre n'ayant aucune importance, du moins concernant ces options.

Les classes Animate se composent alors de 4 à 9 parties :

type-name-duration-option1-option2-...-option6

Exemples :

  • .anime-grow-md-loop
  • .hover-full-lg-double-alt
  • .child-cycloneT-sm-linear-inv-large

Les options concatenables sont les suivantes :

  1. timing-function
  2. delay
  3. iteration-count
  4. direction
  5. fill-mode
  6. origin
4.1 / Option Animation Timing Function

Le timing function de l'animation correspond à la propriété :

animation-timing-function

10 valeurs timing function sont disponibles :

  • in
    correspond à ease-in
  • out
    correspond à ease-out
  • ease
    correspond à ease-in-out
  • linear
    correspond à linear
  • start
    correspond à steps(4, start)
  • end
    correspond à steps(4)
  • chrono
    correspond à steps(60, start)
  • springS
    correspond à cubic-bezier(1, 2, 1, -2)
  • springM
    correspond à cubic-bezier(1, 5, 1, -5)
  • springL
    correspond à cubic-bezier(1, 10, 1, -10)
4.2 / Option Animation Delay

Le delay de l'animation correspond à la propriété :

animation-delay

5 valeurs delay sont disponibles :

  • tn
    correspond à 1s
  • sm
    correspond à 2s
  • md
    correspond à 5s
  • lg
    correspond à 10s
  • wd
    correspond à 60s
4.3 / Option Animation Iteration Count

L'iteration count de l'animation correspond à la propriété :

animation-iteration-count

2 valeurs iteration count sont disponibles :

  • double
    correspond à 2
  • loop
    correspond à infinite
4.4 / Option Animation Direction

La direction de l'animation correspond à la propriété :

animation-direction

3 valeurs direction sont disponibles :

  • rev
    correspond à reverse
  • alt
    correspond à alternate
  • inv
    correspond à alternate-reverse
4.5 / Option Animation Fill Mode

Le fill mode de l'animation correspond à la propriété :

animation-fill-mode

3 valeurs fill mode sont disponibles :

  • front
    correspond à forwards
  • back
    correspond à backwards
  • both
    correspond à both
4.6 / Option Transform Origin

L'origin de la transformation correspond à la propriété :

transform-origin

5 valeurs origin sont disponibles :

  • center
  • top
  • right
  • bottom
  • left

Ces valeurs sont associées à l'axe des X et à celui des Y :

  • Si les 2 valeurs sont identiques, l'option s'implémente avec son simple nom.
  • Si les valeurs diffèrent, les initiales seront utilisées, dans l'ordre "XY", par exemple : "tr" pour "top right", "bc" pour "bottom center", etc ...

X - Helper

Les classes helper sont constituées de 8 groupes :

  • Width
    pour modifier la largeur d'un élément
  • Height
    pour modifier la hauteur d'un élément
  • Margin
    pour modifier la marge extérieure d'un élément
  • Padding
    pour modifier la marge intérieure d'un élément
  • Text Align
    pour modifier l'alignement d'un texte
  • Font
    pour modifier le style ou la graisse d'un texte
  • Text Decoration
    pour modifier la décoration d'un texte
  • Cursor
    pour modifier le curseur de la souris

Les codes sources sont disponibles ci-dessous...

1 / Width

Les classes du groupe Width gèrent 3 propriétés CSS :

Ces classes peuvent affecter :

  1. soit l'élément lui-même lorsque l'on appelle une classe dont le préfixe est :
    .w
    .min-w
    .max-w
  2. soit les éléments enfants du parent lorsque l'on appelle une classe dont le préfixe est :
    .gw
    .min-gw
    .max-gw

L'appel d'une classe width se fait en concaténant l'un des préfixes précédents avec en suffixe la valeur nécessaire.

1.1 / Width

6 classes de largeurs sont disponibles (+ 6 classes globales de largeurs) :

  • <div class="w25">Width = 25%</div>
  • <div class="w33">Width = 33%</div>
  • <div class="w50">Width = 50%</div>
  • <div class="w66">Width = 66%</div>
  • <div class="w75">Width = 75%</div>
  • <div class="w100">Width = 100%</div>
1.2 / Min-Width

6 classes de largeurs minimales sont disponibles (+ 6 classes globales de largeurs minimales) :

  • <div class="min-w25">Min-width = 25%</div>
  • <div class="min-w33">Min-width = 33%</div>
  • <div class="min-w50">Min-width = 50%</div>
  • <div class="min-w66">Min-width = 66%</div>
  • <div class="min-w75">Min-width = 75%</div>
  • <div class="min-w100">Min-width = 100%</div>
1.3 / Max-Width

6 classes de largeurs maximales sont disponibles (+ 6 classes globales de largeurs maximales) :

  • <div class="max-w25">Max-width = 25%</div>
  • <div class="max-w33">Max-width = 33%</div>
  • <div class="max-w50">Max-width = 50%</div>
  • <div class="max-w66">Max-width = 66%</div>
  • <div class="max-w75">Max-width = 75%</div>
  • <div class="max-w100">Max-width = 100%</div>

2 / Height

Les classes du groupe Height gèrent 3 propriétés CSS :

Ces classes peuvent affecter :

  1. soit l'élément lui-même lorsque l'on appelle une classe dont le préfixe est :
    .h
    .min-h
    .max-h
  2. soit les éléments enfants du parent lorsque l'on appelle une classe dont le préfixe est :
    .gh
    .min-gh
    .max-gh

L'appel d'une classe height se fait en concaténant l'un des préfixes précédents avec en suffixe la valeur nécessaire.

1.1 / Height

6 classes de hauteurs sont disponibles (+ 6 classes globales de hauteurs) :

  • <div class="h25">Height = 25%</div>
  • <div class="h33">Height = 33%</div>
  • <div class="h50">Height = 50%</div>
  • <div class="h66">Height = 66%</div>
  • <div class="h75">Height = 75%</div>
  • <div class="h100">Height = 100%</div>
1.2 / Min-Height

6 classes de hauteurs minimales sont disponibles (+ 6 classes globales de hauteurs minimales) :

  • <div class="min-h25">Min-height = 25%</div>
  • <div class="min-h33">Min-height = 33%</div>
  • <div class="min-h50">Min-height = 50%</div>
  • <div class="min-h66">Min-height = 66%</div>
  • <div class="min-h75">Min-height = 75%</div>
  • <div class="min-h100">Min-height = 100%</div>
1.3 / Max-Height

6 classes de hauteurs maximales sont disponibles (+ 6 classes globales de hauteurs maximales) :

  • <div class="max-h25">Max-height = 25%</div>
  • <div class="max-h33">Max-height = 33%</div>
  • <div class="max-h50">Max-height = 50%</div>
  • <div class="max-h66">Max-height = 66%</div>
  • <div class="max-h75">Max-height = 75%</div>
  • <div class="max-h100">Max-height = 100%</div>

3 / Margin

Les classes du groupe Margin gèrent 5 propriétés CSS :

Ces classes peuvent affecter :

  1. soit l'élément lui-même lorsque l'on appelle une classe dont le préfixe est :
    .m-
    .mt-
    .mr-
    .mb-
    .ml-
  2. soit les éléments enfants du parent lorsque l'on appelle une classe dont le préfixe est :
    .gm-
    .gmt-
    .gmr-
    .gmb-
    .gml-

L'appel d'une classe margin se fait en concaténant l'un des préfixes précédents avec en suffixe la valeur nécessaire.

1.1 / Margin

7 classes de marges extérieures sont disponibles (+ 7 classes globales de marges extérieures) :

  • <div class="m-auto">Margin = auto</div>
  • <div class="m-0">Margin = 0</div>
  • <div class="m-tn">Margin = .5rem</div>
  • <div class="m-sm">Margin = 1rem</div>
  • <div class="m-md">Margin = 2rem</div>
  • <div class="m-lg">Margin = 5rem</div>
  • <div class="m-wd">Margin = 10rem</div>
1.2 / Margin-Top

7 classes de marges extérieures hautes sont disponibles (+ 7 classes globales de marges extérieures hautes) :

  • <div class="mt-auto">Margin-top = auto</div>
  • <div class="mt-0">Margin-top = 0</div>
  • <div class="mt-tn">Margin-top = .5rem</div>
  • <div class="mt-sm">Margin-top = 1rem</div>
  • <div class="mt-md">Margin-top = 2rem</div>
  • <div class="mt-lg">Margin-top = 5rem</div>
  • <div class="mt-wd">Margin-top = 10rem</div>
1.3 / Margin-Right

7 classes de marges extérieures droites sont disponibles (+ 7 classes globales de marges extérieures droites) :

  • <div class="mr-auto">Margin-right = auto</div>
  • <div class="mr-0">Margin-right = 0</div>
  • <div class="mr-tn">Margin-right = .5rem</div>
  • <div class="mr-sm">Margin-right = 1rem</div>
  • <div class="mr-md">Margin-right = 2rem</div>
  • <div class="mr-lg">Margin-right = 5rem</div>
  • <div class="mr-wd">Margin-right = 10rem</div>
1.4 / Margin-Bottom

7 classes de marges extérieures basses sont disponibles (+ 7 classes globales de marges extérieures basses) :

  • <div class="mb-auto">Margin-bottom = auto</div>
  • <div class="mb-0">Margin-bottom = 0</div>
  • <div class="mb-tn">Margin-bottom = .5rem</div>
  • <div class="mb-sm">Margin-bottom = 1rem</div>
  • <div class="mb-md">Margin-bottom = 2rem</div>
  • <div class="mb-lg">Margin-bottom = 5rem</div>
  • <div class="mb-wd">Margin-bottom = 10rem</div>
1.5 / Margin-Left

7 classes de marges extérieures gauches sont disponibles (+ 7 classes globales de marges extérieures gauches) :

  • <div class="ml-auto">Margin-left = auto</div>
  • <div class="ml-0">Margin-left = 0</div>
  • <div class="ml-tn">Margin-left = .5rem</div>
  • <div class="ml-sm">Margin-left = 1rem</div>
  • <div class="ml-md">Margin-left = 2rem</div>
  • <div class="ml-lg">Margin-left = 5rem</div>
  • <div class="ml-wd">Margin-left = 10rem</div>

4 / Padding

Les classes du groupe Padding gèrent 5 propriétés CSS :

Ces classes peuvent affecter :

  1. soit l'élément lui-même lorsque l'on appelle une classe dont le préfixe est :
    .p-
    .pt-
    .pr-
    .pb-
    .pl-
  2. soit les éléments enfants du parent lorsque l'on appelle une classe dont le préfixe est :
    .gp-
    .gpt-
    .gpr-
    .gpb-
    .gpl-

L'appel d'une classe padding se fait en concaténant l'un des préfixes précédents avec en suffixe la valeur nécessaire.

1.1 / Padding

7 classes de marges intérieures sont disponibles (+ 7 classes globales de marges intérieures) :

  • <div class="p-auto">Padding = auto</div>
  • <div class="p-0">Padding = 0</div>
  • <div class="p-tn">Padding = .5rem</div>
  • <div class="p-sm">Padding = 1rem</div>
  • <div class="p-md">Padding = 2rem</div>
  • <div class="p-lg">Padding = 5rem</div>
  • <div class="p-wd">Padding = 10rem</div>
1.2 / Padding-Top

7 classes de marges intérieures hautes sont disponibles (+ 7 classes globales de marges intérieures hautes) :

  • <div class="pt-auto">Padding-top = auto</div>
  • <div class="pt-0">Padding-top = 0</div>
  • <div class="pt-tn">Padding-top = .5rem</div>
  • <div class="pt-sm">Padding-top = 1rem</div>
  • <div class="pt-md">Padding-top = 2rem</div>
  • <div class="pt-lg">Padding-top = 5rem</div>
  • <div class="pt-wd">Padding-top = 10rem</div>
1.3 / Padding-Right

7 classes de marges intérieures droites sont disponibles (+ 7 classes globales de marges intérieures droites) :

  • <div class="pr-auto">Padding-right = auto</div>
  • <div class="pr-0">Padding-right = 0</div>
  • <div class="pr-tn">Padding-right = .5rem</div>
  • <div class="pr-sm">Padding-right = 1rem</div>
  • <div class="pr-md">Padding-right = 2rem</div>
  • <div class="pr-lg">Padding-right = 5rem</div>
  • <div class="pr-wd">Padding-right = 10rem</div>
1.4 / Padding-Bottom

7 classes de marges intérieures basses sont disponibles (+ 7 classes globales de marges intérieures basses) :

  • <div class="pb-auto">Padding-bottom = auto</div>
  • <div class="pb-0">Padding-bottom = 0</div>
  • <div class="pb-tn">Padding-bottom = .5rem</div>
  • <div class="pb-sm">Padding-bottom = 1rem</div>
  • <div class="pb-md">Padding-bottom = 2rem</div>
  • <div class="pb-lg">Padding-bottom = 5rem</div>
  • <div class="pb-wd">Padding-bottom = 10rem</div>
1.5 / Padding-Left

7 classes de marges intérieures gauches sont disponibles (+ 7 classes globales de marges intérieures gauches) :

  • <div class="pl-auto">Padding-left = auto</div>
  • <div class="pl-0">Padding-left = 0</div>
  • <div class="pl-tn">Padding-left = .5rem</div>
  • <div class="pl-sm">Padding-left = 1rem</div>
  • <div class="pl-md">Padding-left = 2rem</div>
  • <div class="pl-lg">Padding-left = 5rem</div>
  • <div class="pl-wd">Padding-left = 10rem</div>

5 / Text Align

Les classes du groupe Text Align gèrent une seule propriété CSS :

text-align

4 classes d'alignement horizontal de texte sont disponibles :

  • <div class="center">Text-align = center</div>
  • <div class="justify">Text-align = justify</div>
  • <div class="right">Text-align = right</div>
  • <div class="left">Text-align = left</div>

6 / Font

Les classes du groupe Font gèrent 2 propriétés CSS :

3 classes de modification des polices de caractère sont disponibles :

  • <div class="normal">Font-style = normal & Font-weight = normal</div>
  • <div class="italic">Font-style = italic</div>
  • <div class="bold">Font-weight = bold</div>

7 / Text Decoration

Les classes du groupe Text-decoration se composent de 2 parties :

line-style

Ces 2 parties gèrent 2 propriétés CSS :

Mais seul line est obligatoire ; par défaut, la valeur de style est solid.

On peut donc écrire une classe text-decoration de 2 manières :

  • .line
    le style vaudra alors solid (3 classes)
  • .line-style
    chaque valeur est précisée (12 classes)

Une classe supplémentaire est disponible : no-deco, dont la valeur de text-decoration est none

Exemples :

  • .under
  • .over-dashed
  • .throught-wavy
  • .no-deco
1.1 / Text Decoration Line

3 préfixes sont disponibles :

  • <div class="under">Text-decoration-line = underline</div>
  • <div class="over">Text-decoration-line = overline</div>
  • <div class="throught">Text-decoration-line = line-throught</div>
1.2 / Text Decoration Style

5 suffixes sont disponibles :

  • <div class="solid">Text-decoration-style = solid</div>
  • <div class="double">Text-decoration-style = double</div>
  • <div class="dotted">Text-decoration-style = dotted</div>
  • <div class="dashed">Text-decoration-style = dashed</div>
  • <div class="wavy">Text-decoration-style = wavy</div>

8 / Cursor

Les classes du groupe Cursor peuvent affecter une seule propriété CSS :

cursor

Ces classes affectent l'élément lui-même, tous ses enfants directs, ainsi que tous les enfants directs de ces derniers.

7 classes de pointeurs sont disponibles (survolez pour voir le curseur changer) :

  • .cell
  • .crosshair
  • .help
  • .move
  • .forbidden
  • .pointer
  • .text