_blank

_Blank – Etape 04

17 mars 2019

1Les « colonnes »

Se reporter au schéma de la vue « écran de bureau »

Chaque colonne fera l’objet de la création d’un contenant.
La class (en référence à la feuille de style) déterminera le comportement de la colonne.
1. Largeur
2. positionnement
Chaque colonne recevra un numéro par ligne.

2Dans la feuille de style skeleton.css

Ouvrir dans Notepad++ HTML CSS/Site/css/skeleton.css.
Le comportement générique des colonnes est défini lignes 38 à 42.
Les colonnes sont définies pour les écrans de bureau lignes 55 à 79.

/* For devices larger than 550px */
@media (min-width: 550px) {
    (…)
}

(voir)

Observation

.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

Explications

Lignes 38 à 42 = la proposition est double – elle s’adresse à column et columns.
Toutes les colonnes occupent la totale largeur de leur contenant.
Toutes les colonnes « flottent » à gauche.
(Ce qui permet d’avoir un contenu à leur droite et donner l’idée de « grille »)
« La propriété box-sizing est utilisée pour modifier le modèle de boîte CSS par défaut qui est utilisé pour calculer la largeur et la hauteur des éléments. » (source) (voir également)
Lignes 55 à 57 = Toutes les colonnes ont une marge à gauche de 4%
(afin de marquer la séparation entre chacune d’elle)
Lignes 58 à 60 = La marge à gauche est ramenée à 0 pour les premières colonnes de chaque ligne
Lignes 62 à 79 = définition des largeurs de colonnes
(colonne en anglais = column – noter qu’une colonne unique = column ou columns)

3Manipulation

Dans page index-ALL.html, depuis Notepad++ :

Insérer dans chaque ligne autant de contenant que nécessaire
Attribuer à chaque contenant les styles correspond à la définition des colonnes désirées
Attribuer un numéro – dans un paragraphe – correspondant à la colonne (par ligne)

Exemple

(Pour ACCUEIL ligne 2)

<!-- ACCUEIL ligne 2 -->
	<div class="row">
		<div class="four columns">
		<p>1</p>
		</div>
		<div class="four columns">
		<p>2</p>
		</div>
		<div class="four columns">
		<p>3</p>
		</div>
	<!-- /ACCUEIL ligne 2 -->

Noter que les class combinées (en base 12) de quatre colonnes (four columns ) correspondent à un tiers de la largeur totale du contenant parent ; tiers qui peut également être défini par les class combinées one third (.one-third.column { width: 30.6666666667%; })

4Pour finaliser cette avancée et gagner en lisibilité

Attribuer les couleurs correspondante du schéma aux différents éléments
Les couleurs sont (par ordre d’apparition) :
- Gris = #e7e7e8
- Vert =#99c555
- Violet =#4e5ca5
- Magenta =#d92c89
- Bleu =#52a7dc
- Orange =#e9973e
Ajouter une « marge intérieure haute » au contenant principal (container/la « page »)
Définir une hauteur aux colonnes
Définir une « marge extérieure bas » aux lignes

Dans Notepad++ HTML CSS/Site/css/skeleton.css.

Ajouter ligne 420

/* COULEURS ETAPE 4*/
.gris {
background-color: #e7e7e8;
}
.vert {
background-color: #99c555;
}
.violet {
background-color: #4e5ca5;
}
.magenta {
background-color: #d92c89;
}
.bleu {
background-color: #52a7dc;
}
.orange {
background-color: #e9973e;
}
/* MODIFICATION COLONNES ET LIGNES POUR LISIBILITE */
.container {
padding-top: 20px;
}
.column,
.columns {
height: 100px;
}
.row {
margin-bottom: 20px;
}

/* (quelquechose) */ correspond à un commentaire en CSS.
Comme un commentaire en HTML, il est utile pour se repérer dans le code.

Dans Notepad++ HTML CSS/Site/index-ALL.html.

Ajouter le style souhaité aux éléments qui le requiert.
```
<body class="gris">


<div class="container">

	
	<div class="row">
		<div class="twelve columns vert">
		<p>1</p>
		</div>
	
	</div>
```
(Pour l’exemple, la class gris ajoutée à body donne la couleur grise au fond de page.
la class vert ajoutée au contenant colonne de la ligne ENTETE, lui attribue le fond vert.)

5Le code final de la page

<!DOCTYPE html>
<html lang="en">
<head>

  <!-- Basic Page Needs
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta charset="utf-8">
  <title>Your page title here :)</title>
  <meta name="description" content="">
  <meta name="author" content="">

  <!-- Mobile Specific Metas
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- FONT
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">

  <!-- CSS
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/skeleton.css">

  <!-- Favicon
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="icon" type="image/png" href="images/favicon.png">

</head>
<body class="gris">

<!-- PAGE -->
<div class="container">

	<!-- ENTETE -->
	<div class="row">
		<div class="twelve columns vert">
		<p>1</p>
		</div>
	<!-- /ENTETE -->
	</div>
	
	<!-- ACCUEIL ligne 1 -->
	<div class="row">
		<div class="twelve columns violet">
		<p>1</p>
		</div>
	<!-- /ACCUEIL ligne 1 -->
	</div>
	<!-- ACCUEIL ligne 2 -->
	<div class="row">
		<div class="four columns magenta">
		<p>1</p>
		</div>
		<div class="four columns magenta">
		<p>2</p>
		</div>
		<div class="four columns magenta">
		<p>3</p>
		</div>
	<!-- /ACCUEIL ligne 2 -->
    </div>
	
	<!-- 2 COLONNES 2/3+1/3 -->
	<div class="row">
		<div class="eight columns bleu">
		<p>1</p>
		</div>
		<div class="four columns orange">
		<p>2</p>
		</div>
	<!-- /2 COLONNES 2/3+1/3 -->
	</div>
	
	<!-- 2 COLONNES 1/3+2/3 -->
	<div class="row">
		<div class="four columns orange">
		<p>1</p>
		</div>
		<div class="eight columns bleu">
		<p>2</p>
		</div>
	<!-- /2 COLONNES 1/3+2/3 -->
	</div>
	
	<!-- PLEINE LARGEUR -->
	<div class="row">
		<div class="twelve columns bleu">
		<p>1</p>
		</div>
	<!-- /PLEINE LARGEUR -->
	</div>
	
	<!-- PIED -->
	<div class="row">
		<div class="twelve columns vert">
		<p>1</p>
		</div>
	<!-- /PIED -->
	</div>

 
<!-- /PAGE -->
</div>

<!-- End Document
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html>

6Dans votre navigateur…

Lire index-ALL.html avec Firefox

Précédent Suivant