Un thème pour le blog (partie 1)
Après avoir installé le serveur web en local, on va rentrer petit à petit dans le vif du sujet.
Le blog tourne sous WordPress (écrit en PHP, grande communauté, extensible à souhait…).
La création d’un thème passe par un ensemble de fichiers php dédiés aux différents contenus (accueil, liste des derniers articles, articles par catégories, commentaires…) mis en forme par une feuille de styles, voir par exemple ce très bon tutoriel pour approfondir le sujet, celui-ci ou cette sélections de tutoriels sur cette page.
Pour partir sur de bonnes bases, j’ai choisi d’utiliser le Bootstrap de Twitter, un ensemble de « composants » prêts à l’emploi, plus ou moins facile à utiliser. J’ai cependant conscience que cette feuille de styles est avant tout destinée à la création d’interfaces en back-end et que les sites internet l’utilisant en front-end finissent tous par se ressembler…
Les principaux avantages que je vois à utiliser le Bootstrap de Twitter sont les suivants :
- Nativement conçu pour prendre en compte tout type de terminal et pensé avant tout pour les mobiles
- En découle un ensemble de règles valables uniquement pour certains type de terminaux et pas d’autres
- De nombreux tutoriels disponibles pour se former
- De nombreux plugins disponibles également pour l’étendre
- Distribuer avec ses fichiers LESS (j’y reviendrais largement par la suite)
J’ai découvert depuis quelques années que de nombreux outils étaient maintenant disponibles pour faciliter le travail et même aider à la productivité dans le merveilleux monde de la création de sites internet :
LESS permet d’écrire des feuilles de styles « paramétrables » en utilisant des variables et mêmes des « fonctions » appelées mixins (c’est mon côté codeur qui prend le dessus 
); les longues séances de « Rechercher/Remplacer » appartiennent maintenant au passé !
La particularité du Blog-Libre est d’être avant tout un blog multi-auteurs et donc pour vous permettre de repérer d’un coup d’oeil qui écrit quoi, chaque auteur à sa propre couleur attribuée.
Pour me faciliter la tâche, j’utilise le code suivant :
.color-author(@name; @color;)
{
.author-@{name},
.comment-author-@{name} .comment-body,
{
background-color: @color;
border: @color - #222 solid 1px;
box-shadow: 3px 3px 3px rgba(100, 0, 0, 0.3);
}
article.post-author-@{name} header,
article.post-author-@{name} .entry-summary,
{
border-left: 4px solid @color;
}
article.post-author-@{name} .entry-summary p:first-of-type
{
margin-top: 10px;
}
.comment-author-@{name} .comment-body:after {
border-bottom-color: @color;
}
.comment-author-@{name} .comment-body:before {
border-bottom-color: @color - #222;
}
@media (min-width: 768px)
{
.comment-author-@{name} .comment-body:after,
.comment-author-@{name} .comment-body:before
{
border-color: transparent @color - #222;
}
.comment-author-@{name}
.comment-body:after
{
border-color: transparent @color;
}
}
}
Notez la présence des deux variables name et color.
Le code suivant me permet d’attribuer les couleurs aux différents auteurs :
.color-author(tamplan; #E4FDE0); .color-author(cascador; #fff3da); .color-author(augier; #D3F8FC); .color-author(damien; #F6FCD3);
Sur la page d’accueil, l’entête d’un article écrit par Cascador par exemple sera défini par :
article.post-author-@{name} header,
article.post-author-@{name} .entry-summary,
{
border-left: 4px solid @color;
}
Ce qui donne une fois le fichier LESS compilé :
article.post-author-cascador header,
article.post-author-cascador .entry-summary,
{
border-left: 4px solid #fff3da;
}
Et ainsi de suite pour les autres auteurs. Il sera très facile pour moi de rajouter d’autres couleurs quand nous serons rejoints par de nouveaux auteurs réguliers.
Enfin pour être tout à fait complet sur le sujet de la feuille de styles, je vous montre comment j’ai intégré les différents éléments utilisés.
Le contenu du fichier styles.less :
// Core variables and mixins
@import "bootstrap/variables.less";
@import "bootstrap/mixins.less";
// Custom variables
@import "variables.less";
// Reset and dependencies
@import "bootstrap/normalize.less";
@import "bootstrap/print.less";
//@import "bootstrap/glyphicons.less";
// Core CSS
@import "bootstrap/scaffolding.less";
@import "bootstrap/type.less";
@import "bootstrap/code.less";
@import "bootstrap/grid.less";
//@import "bootstrap/tables.less";
@import "bootstrap/forms.less";
@import "bootstrap/buttons.less";
// Components
@import "bootstrap/component-animations.less";
//@import "bootstrap/dropdowns.less";
//@import "bootstrap/button-groups.less";
@import "bootstrap/input-groups.less";
@import "bootstrap/navs.less";
@import "bootstrap/navbar.less";
//@import "bootstrap/breadcrumbs.less";
@import "bootstrap/pagination.less";
@import "bootstrap/pager.less";
@import "bootstrap/labels.less";
//@import "bootstrap/badges.less";
//@import "bootstrap/jumbotron.less";
//@import "bootstrap/thumbnails.less";
@import "bootstrap/alerts.less";
//@import "bootstrap/progress-bars.less";
@import "bootstrap/media.less";
//@import "bootstrap/list-group.less";
@import "bootstrap/panels.less";
@import "bootstrap/responsive-embed.less";
//@import "bootstrap/wells.less";
@import "bootstrap/close.less";
// Components w/ JavaScript
//@import "bootstrap/modals.less";
//@import "bootstrap/tooltip.less";
//@import "bootstrap/popovers.less";
//@import "bootstrap/carousel.less";
// Utility classes
@import "bootstrap/utilities.less";
@import "bootstrap/responsive-utilities.less";
// Mon code commence ici
@import "structure.less";
@import "content.less";
@import "misc.less";
@import "links.less";
@import "authors.less";
.text-primary {
.text-emphasis-variant(@brand-primary);
}
.text-success {
.text-emphasis-variant(@brand-success);
}
.text-info {
.text-emphasis-variant(@brand-info);
}
.text-warning {
.text-emphasis-variant(@brand-warning);
}
.text-danger {
.text-emphasis-variant(@brand-danger);
}
Le fichier variables.less remplace certaines variables justement définies dans le Bootstrap Twitter :
// Overide some Bootstrap variables
@font-size-base: 16px;
@body-bg: #fefefe;
@text-color: #555;
@link-color: #9954bb;
@link-hover-color: #fa71b5;
@link-hover-decoration: none;
@content-link-color: #ff3f9d;
@content-link-hover-color: #2289cc;
@content-link-hover-decoration: none;
@main-header-bg: lighten(@link-color, 55%);
@font-family-base: "Arimo", "Helvetica Neue", Helvetica, Arial, sans-serif;
@headings-font-family: "Courgette","Comic Sans MS",cursive,sans-serif;
@headings-color: @link-color;
@brand-success: #77b300;
@brand-info: #9933cc;
@brand-danger: #c60002;
@brand-warning: #ff8800;
@page-header-border-color: @headings-color;
@navbar-default-link-color: @link-color;
@navbar-default-link-hover-color: @link-hover-color;
@navbar-default-bg: transparent;
@navbar-default-border: @link-color;
@navbar-default-link-active-bg: @navbar-default-bg;
@navbar-default-link-active-color: @link-color;
@nav-link-hover-bg: transparent;
@pagination-color: @link-color;
@pagination-hover-color: @link-hover-color;
@pagination-hover-bg: @gray-lighter;
@pagination-active-color: @pagination-color;
@pagination-active-bg: @gray-lighter;
@pagination-active-border: @pagination-border;
@pagination-disabled-color: @link-color;
@pagination-disabled-bg: @gray-light;
@pagination-disabled-border: @pagination-border;
.tab-focus() {
outline: 0;
}
/** Mon code commence ici **/
@font-family-icon: 'FontAwesome';
@comment-bg: #fff;
@comment-border-color: #ccc;
@site-title-color: @link-color;
@site-title-hover-color: @link-hover-color;
@site-title-font-size: 33px;
@navbar-border-bottom-hover: 4px solid @link-color;
@navbar-border-bottom-active: 4px solid @link-hover-color;
@widget-title-border-bottom: 3px solid @link-color;
@widget-comment-author-color: @link-color;
@label-category-bg: @brand-success;
@label-tag-bg: @brand-warning;
@polaroid-color: #777;
@polaroid-bg: #fffdf2;
@sidebar-widget-title-color: #333;
@comment-post-author-color: @link-color;
@main-footer-color: #999;
@main-footer-bg: #333;
@legal-footer-link-color: @content-link-color;
@legal-footer-link-hover-color: @content-link-hover-color;
@legal-footer-link-hover-decoration: @content-link-hover-decoration;
La spécificité de WordPress est de définir des éléments parfois par des classes et parfois par des identifiants, je définis donc certaines styles utilisés par le logiciel en leur donnant l’aspect d’un bouton.
Par exemple dans le fichier links.less :
// .button-variant et .button-size sont des mixins définies dans le Bootstrap Twitter
.post-edit-link,
.comment-edit-link {
.button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
.button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @btn-border-radius-small);
margin-left: 10px;
}
.comment-reply-link {
.button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
.button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @btn-border-radius-small);
}
#cancel-comment-reply-link {
.button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
.button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @btn-border-radius-small);
font-family: @font-family-base;
}
Les différents fichiers less sont compilés automatiquement en utilisant le plugin WP-LESS
J’espère vous avoir convaincu de la puissance et la réelle facilité à utiliser le langage LESS.
Dans un prochain article, nous verrons la partie code PHP à proprement parler.
Les commentaires sont fermés.