Téléchargement du Framework SimplonStrap
Pour télécharger le Framework, cliquez sur le bouton ci-dessous.
Download SimplonStrap.css
La Grille Flex
La grille permet de placer et de dimensionner facilement ses divs et ses colonnes. "containflex" permet d'initialiser la grille. La taille de la grille prend celle de la div sur laquelle elle est initialisée. "colnorm" crée une colonne qui adapte sa taille aux nombres de colonnes placées dans le "containflex". "colnorm" donne donc la même taille à toutes les divs. Vous pouvez aussi choisir des tailles : petit, moyen ou grand avec "coltiny", "colmedium" et "colbig". Vous disposez aussi de colonne "flex" qui permette de mettre des colonnes dans des colonnes car elles font office de container.
Le Html
<div style="border: 1px solid black;" class="containflex h600p">
<div style="background-color: red; padding: 16px;" class="colflexnorm">
<div style="background-color: blue; margin: 6px;" class="coltiny">
</div>
<div style="background-color: blue; margin: 6px;" class="colmedium">
</div>
<div style="background-color: blue; margin: 6px;" class="colbig">
</div>
</div>
<div style="background-color: blue;" class="colnorm">
</div>
</div>
Le Css
/* -----------------------------------------------Grid */
.containflex {
display: flex;
box-sizing: border-box;
}
.colnorm {
flex: 1;
box-sizing: border-box;
}
.coltiny {
flex: 0.5;
box-sizing: border-box;
}
.colmedium {
flex: 2;
box-sizing: border-box;
}
.colbig {
flex: 4;
box-sizing: border-box;
}
.colflexnorm {
display: flex;
flex: 1;
box-sizing: border-box;
}
.colflextiny {
display: flex;
flex: 0.5;
box-sizing: border-box;
}
.colflexmedium {
display: flex;
flex: 2;
box-sizing: border-box;
}
.colflexbig {
display: flex;
flex: 4;
box-sizing: border-box;
}
La Grille sans Flex
Pour les amateurs de BootStrap et les vétérans d'Internet Explorer, nous avons également implémenté une grille de base 12 colonnes, n'utilisant aucun flex.
classe du container: "grid"
Fonctionnement des dimensions des colonnes: w-dividende-diviseur, allant de 1 à 12
Exemples :
- une colonne de taille un douzième: "w-1-12" = "one-twelve"
- une colonne de taille un tier: "w-1-3" = "w-4-12" = "four-twelve"
- une colonne faisant la moitié de la taille de son parent: "w-1-2" = "w-2-4" = "w-3-6" = "w-6-12" = "six-twelve"
Pour créer vos propres grilles, je vous propose d'utiliser la fraction la plus simplifiée de leurs noms de classe. Par exemple, si vous souhaitez y mettre deux colonnes - disons un tier et deux tiers - vous pourriez leur ajouter les classes "w-1-3" et "w-2-3"; par contre, si vous souhaitez ajouter une colonne dont le diviseur est 12, mon conseil est d'utiliser uniquement les classes de largeur de colonnes terminant par 12 ("w-1-12", "w-2-12", ..., "w-12-12")
Le Html
<div style="border: 2px solid black;" class="grid h600p">
<div style="background-color: pink; padding: 16px;" class="w-1-2">
<div style="background-color: grey; border: 2px solid pink;" class="w-1-12">1/12</div>
<div style="background-color: grey; border: 2px solid pink;" class="w-7-12">7/12</div>
<div style="background-color: grey; border: 2px solid pink;" class="w-4-12">4/12</div>
</div>
<div style="background-color: grey; padding: 16px;" class="w-1-2">
<div style="background-color: firebrick; border: 2px solid white;" class="w-1-3">1/3</div>
<div style="background-color: firebrick; border: 2px solid white;" class="w-2-3">2/3</div>
</div>
</div>
Le Css
/* -----------------------------------------------Grid */
/*------ Dans SimplonStrap */
.grid, .borderbox{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Grid Display*/
.grid {
display: block;
clear: both;
}
.grid *{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Grid Widths */
/*--1/12--*/
.grid .one-twelve, .grid .w-1-12 {
width: calc(100%/12);
float: left;
padding: 10px;
}
/*--2/12--*/
.grid .two-twelve, .grid .w-1-6, .grid .w-2-12 {
width: calc(100%/6);
float: left;
padding: 10px;
}
/*--3/12--*/
.grid .three-twelve, .grid .w-1-4, .grid .w-3-12 {
width: calc(100%/4);
float: left;
padding: 10px;
}
/*--4/12--*/
.grid .four-twelve, .grid .w-1-3,.grid .w-2-6, .grid .w-4-12 {
width: calc(100%/3);
float: left;
padding: 10px;
}
/*--5/12--*/
.grid .five-twelve, .grid .w-5-12 {
width: calc(500%/12);
float: left;
padding: 10px;
}
/*--6/12--*/
.grid .six-twelve, .grid .w-1-2, .grid .w-2-4, .grid .w-3-6, .grid .w-6-12{
width: 50%;
float: left;
padding: 10px;
}
/*--7/12--*/
.grid .seven-twelve, .grid .w-7-12 {
width: calc(700%/12);
float: left;
padding: 10px;
}
/*--8/12--*/
.grid .eight-twelve, .grid .w-2-3,.grid .w-4-6, .grid .w-8-12 {
width: calc(200%/3);
float: left;
padding: 10px;
}
/*--9/12--*/
.grid .nine-twelve, .grid .w-3-4, .grid .w-9-12 {
width: 75%;
float: left;
padding-right: 10px;
padding-bottom: 10px;
}
/*--10/12--*/
.grid .ten-twelve, .grid .w-5-6, .grid .w-10-12 {
width: calc(500%/6);
float: left;
padding: 10px;
}
/*--11/12--*/
.grid .onze-twelve, .grid .w-11-12 {
width: calc(1100%/12);
float: left;
padding: 10px;
}
/*--12/12--*/
.grid .twelve-twelve, .grid .w-12-12, .grid .w-1{
width: 100%;
float: left;
padding: 10px;
}
/**Grid Media Query**/
@media all (max-width:768px){
.grid [class*="w-"] {
width:100%;
}
}
/*------ Dans le style.css utilisé pour cette doc*/
.grid [class*="w-"]{
height: 100%;
color: white;
font-size: 0.9em;
}
.grid [class*="w-"] div{
text-align: center;
}