Pour utiliser Style.css, vous avez deux options :
Vous pouvez télécharger le fichier CSS de Style.css et ses dépendances pour l'inclure dans votre projet.
<link rel="stylesheet"
href="style.css">
Vous pouvez également utiliser le CDN de Style.css pour inclure le framework dans votre projet.
<link rel="stylesheet"
href="https://style-css.untypequicode.fr/css/style.css">
<link rel="stylesheet" href="section.css">
<link rel="stylesheet"
href="https://style-css.untypequicode.fr/css/section.css">
Vous pouvez gérer la taille et la couleur des sections en utilisant les classes suivantes :
<section class="s-mh-25
s-bg-s"></section>
La valeur de la taille est exprimée en vh.
s-mh-25
s-mh-50
s-mh-75
s-mh-100
s-bg : couleur par défaut
s-bg-s : couleur secondaire
s-bg-blue : couleur bleue
s-bg-green : couleur verte
s-bg-yellow : couleur jaune
s-bg-orange : couleur orange
s-bg-red : couleur rouge
s-bg-purple : couleur violette
Vous pouvez gérer le placement du contenu des sections en utilisant les classes suivantes :
<div class="sv"></div>
sh
sh-v
sh-a
sh-v-a
sv
sv-a
<link rel="stylesheet"
href="animation.css">
<link rel="stylesheet"
href="https://style-css.untypequicode.fr/css/animation.css">
Vous pouvez gérer les animations des éléments en utilisant les classes suivantes :
<div class="ah-n"></div>
Le paramètre n permet de définir le type
d'animation. La valeur de n est celle par
défaut, il n'est pas nécessaire de l'ajouter.
Le paramètre h détermine que le composant sera
caché au chargement de la page. Il faut ajouter la classe
avec le s pour afficher le composant au
chargement de la page.
ah ah-n
ah-i
as : animation affichée au chargement
de la page, à utiliser avec une animation
<link rel="stylesheet" href="text.css">
<link rel="stylesheet"
href="https://style-css.untypequicode.fr/css/text.css">
La gestion des tailles de texte est automatique. Vous pouvez gérer la taille du texte le plus petit et le plus grand en utilisant les lignes de code css suivantes :
:root { --max-font-size: 15rem; --min-font-size: 2rem;
}
La gestion des largeurs de texte est automatique. Vous pouvez gérer la largeur du texte le plus petit et le plus grand en utilisant les lignes de code css suivantes :
:root { --max-font-weight: 500; --min-font-weight: 400;
}
<link rel="stylesheet" href="button.css">
<link rel="stylesheet"
href="https://style-css.untypequicode.fr/css/button.css">
btn
btn-r
btn-c
second
blue
green
yellow
orange
red
purple
<link rel="stylesheet" href="color.css">
<link rel="stylesheet"
href="https://style-css.untypequicode.fr/css/color.css">
Vous pouvez gérer les couleurs en utilisant les variables css suivantes :
var(--bg-color)
Les couleurs disponibles sont :
Default : var(--bg-color) var(--text-color)
var(--main-color)
Blue : var(--second-bg-color)
var(--second-text-color)
var(--second-main-color)
Blue : var(--blue-bg-color)
var(--blue-text-color)
var(--blue-main-color)
Green : var(--green-bg-color)
var(--green-text-color)
var(--green-main-color)
Yellow : var(--yellow-bg-color)
var(--yellow-text-color)
var(--yellow-main-color)
Orange : var(--orange-bg-color)
var(--orange-text-color)
var(--orange-main-color)
Red : var(--red-bg-color) var(--red-text-color)
var(--red-main-color)
Purple : var(--purple-bg-color)
var(--purple-text-color)
var(--purple-main-color)