diff --git a/_page.twig b/_page.twig index 6d63d41..efd27ed 100644 --- a/_page.twig +++ b/_page.twig @@ -19,6 +19,7 @@

{% block docTitle %}Le beau code web{% endblock %}

+ {% block docIntroduction %}{% endblock %} {% block docContent %} {% for component in components %} {% include component %} diff --git a/docs/guide-generalites.html b/docs/guide-generalites.html index 666d93f..5ccb5f3 100644 --- a/docs/guide-generalites.html +++ b/docs/guide-generalites.html @@ -20,6 +20,7 @@

BCW-1 Recommandations générales pour le codage web

+

diff --git a/docs/guide-html.html b/docs/guide-html.html index e0fa8e7..64df309 100644 --- a/docs/guide-html.html +++ b/docs/guide-html.html @@ -1,24 +1,35 @@ - - - - BCW-2 Recommandations pour le codage en HTML — Le beau code web - - - + + + + + + + + BCW-2 Recommandations pour le codage en HTML — Le beau code web + + + +

BCW-2 Recommandations pour le codage en HTML

-
-

+ + + +
+

+ Validité du code - -

+ + +

+

  1. @@ -119,8 +130,10 @@

-
- Justification + +
+ Justification +

  1. @@ -204,15 +217,12 @@

-
-
- + + +

+ + +
- - - - + + + + - + \ No newline at end of file diff --git a/docs/guide-style.html b/docs/guide-style.html index 37e435a..7900017 100644 --- a/docs/guide-style.html +++ b/docs/guide-style.html @@ -1,19 +1,25 @@ - - - - BCW-3 Recommandations le codage CSS — Le beau code web - - - + + + + + + + + BCW-3 Recommandations le codage CSS — Le beau code web + + + + - +

BCW-3 Recommandations le codage des feuilles de style

+

Introduction

@@ -48,11 +54,17 @@

Introduction

-
-

+ + + +
+

+ Mise en forme des règles - -

+ + +

+
  1. Dans une liste de sélecteurs, il est recommandé @@ -95,7 +107,10 @@

    font-family: Arial, Helvetica, sans-serif; } -
    Justification + +
    + Justification +
    1. La même logique préside aux trois premiers points : @@ -133,14 +148,81 @@

      à un niveau international.

      2. -
    -

- + + + + + + + +
- - - - - - + + + + + \ No newline at end of file diff --git a/docs/principes.html b/docs/principes.html index e97a4f0..ba12bfe 100644 --- a/docs/principes.html +++ b/docs/principes.html @@ -2,7 +2,7 @@ - + @@ -20,6 +20,7 @@

BCW-0 Principes du « Beau code web »

+

À qui s’adresse ce guide diff --git a/guide-html-010-valide.twig b/guide-html-010-valide.twig index e0fa8e7..bf30a50 100644 --- a/guide-html-010-valide.twig +++ b/guide-html-010-valide.twig @@ -1,24 +1,9 @@ - - - - - - - BCW-2 Recommandations pour le codage en HTML — Le beau code web - - - - - -
-

BCW-2 Recommandations pour le codage en HTML

-
-
-
-

+{% embed '_recommandation.twig' %} + {% set recId = 'validite' %} + {% block recTitle %} Validité du code - -

+ {% endblock %} + {% block recContent %}

  1. @@ -119,8 +104,8 @@

-
- Justification + {% endblock recContent %} + {% block recRationale %}

  1. @@ -204,31 +189,5 @@

-
-
- -
- - - - - - - - + {% endblock recRationale %} +{% endembed %} \ No newline at end of file diff --git a/guide-html.twig b/guide-html.twig new file mode 100644 index 0000000..e0799d2 --- /dev/null +++ b/guide-html.twig @@ -0,0 +1,4 @@ +{% extends '_page.twig' %} +{% block pageTitle %}BCW-2 Recommandations pour le codage en HTML — Le beau code web{% endblock %} +{% block docTitle %}BCW-2 Recommandations pour le codage en HTML{% endblock %} +{% set components = 'guide-html-*.twig'|glob %} \ No newline at end of file diff --git a/guide-javascript.html b/guide-javascript.twig similarity index 100% rename from guide-javascript.html rename to guide-javascript.twig diff --git a/guide-php.html b/guide-php.twig similarity index 100% rename from guide-php.html rename to guide-php.twig diff --git a/guide-style-010-forme.twig b/guide-style-010-forme.twig index 37e435a..c23820e 100644 --- a/guide-style-010-forme.twig +++ b/guide-style-010-forme.twig @@ -1,58 +1,9 @@ - - - - - - - BCW-3 Recommandations le codage CSS — Le beau code web - - - - - -
-

BCW-3 Recommandations le codage des feuilles de style

-
-
-
-

Introduction

-

- Les feuilles de style CSS sont principalement constituées de règles de style. - Chaque règle comporte un sélecteur ou une liste de sélecteurs - 1, - suivi d’une liste de déclarations (p.ex. 2). - Chaque déclaration est constituée d’une propriété 3 - suivie d’une valeur 4, - laquelle peut avoir plusieurs composantes 5. - Certaines propriétés peuvent admettre des déclarations comportant une - liste de valeurs 6. -

- 
h1,
-h2 {
-	margin: 0 auto;
-	color: green;
-	border: 1px solid black;
-	font-family: Arial, Helvetica, sans-serif;
-}
- -
-
-

+{% embed '_recommandation.twig' %} + {% set recId = 'forme' %} + {% block recTitle %} Mise en forme des règles - -

+ {% endblock %} + {% block recContent %}
  1. Dans une liste de sélecteurs, il est recommandé @@ -95,7 +46,8 @@ h2 { font-family: Arial, Helvetica, sans-serif; } -
    Justification + {% endblock recContent %} + {% block recRationale %}
    1. La même logique préside aux trois premiers points : @@ -133,98 +85,74 @@ h2 { à un niveau international.
      2. -
    -
- -
- - - - - - - - - \ No newline at end of file + + + {% endblock recRationale %} +{% endembed %} \ No newline at end of file diff --git a/guide-style.twig b/guide-style.twig index 37e435a..92fa116 100644 --- a/guide-style.twig +++ b/guide-style.twig @@ -1,19 +1,8 @@ - - - - - - - BCW-3 Recommandations le codage CSS — Le beau code web - - - - - -
-

BCW-3 Recommandations le codage des feuilles de style

-
-
+{% extends '_page.twig' %} +{% set components = 'guide-style-*.twig'|glob %} +{% block pageTitle %}BCW-3 Recommandations le codage CSS — Le beau code web{% endblock %} +{% block docTitle %}BCW-3 Recommandations le codage des feuilles de style{% endblock %} +{% block docIntroduction %}

Introduction

@@ -48,183 +37,4 @@ h2 {

-
-

- Mise en forme des règles - -

-
    -
  1. - Dans une liste de sélecteurs, il est recommandé - de ne mettre qu’un sélecteur par ligne. -
    2. -
  2. - De même, il est recommandé - de ne mettre qu’une déclaration par ligne. -
    3. -
  3. - Chaque déclaration doit se terminer par un point-virgule ;, même quand celui-ci est facultatif. -
    4. -
  4. - Les espacements doivent être utilisés de façon cohérente sur l’ensemble d’un site. -
    5. -
  5. - Il est recommandé de ne pas mettre d’espace - entre une propriété et le séparateur :, - mais d’en mettre un systématiquement après ce séparateur. - De même, il est recommandé - de mettre un espace après chaque virgule , - dans une liste de valeurs, mais pas devant. - Il est également recommandé de faire précéder - les accolades ouvrantes { d’un espace. -
    6. -
- -
Justification -
    -
  1. - La même logique préside aux trois premiers points : - un changement doit pouvoir être localisé sur une ou plusieurs lignes, - mais pas au sein d’une ligne. - La principale raison est la maintenabilité. - Ceci permet aux systèmes de versionnement, Git ou autre, de suivre - individuellement chaque modification, limitant ainsi les risques - de conflits au moment des fusions merge. - Accessoirement, cela permet aussi de faire des tests en commentant plus - aisément tel ou telle déclaration. - En effet, à titre de contre-exemple, si l’on plaçait des déclarations de - position, - top, - left et - right - sur une même ligne, il ne serait pas facile d’agir sur la seule déclaration - de top. -
    2. -
  2. - La raison la plus souvent invoquée pour la règle précédente, - « un changement par ligne », est la - lisibilité, - mais il semble que celle-ci dépende surtout des habitudes de chaque codeur. - C’est donc la principale raison du point n°4. -
    3. -
  3. - Le point n°5 est également motivé par des raisons - de lisibilité. - Les espaces recommandés permettent une séparation visuelle suffisante. - L’absence d’espace devant les séparateurs permet de respecter la - typographie de l’anglais, langue de référence du CSS, et donc d’assurer - une meilleure - cohérence - à un niveau international. -
    4. - -
-
- -
- - - - - - - - - \ No newline at end of file +{% endblock %} diff --git a/index.html b/index.twig similarity index 100% rename from index.html rename to index.twig