Sur le côté droit des forums, il y a une série de modules. «Modules» visuellement, «Modules» littéralement dans le code et «Modules» en ce que le contenu qu'ils contiennent est un groupe lié, séparé / différent du contenu des autres modules.
Le premier que nous examinons est le module Catégories. Vanilla Forums les met littéralement dans un dossier appelé «modules», ce qui est bien. Celui-ci, comme vous pouvez le deviner, est «categories.php».
Nous trouvons l'endroit où le titre est sorti, lui donnons une classe et commençons à styliser. Nous ajoutons simplement une petite marge inférieure comme il convient pour ce titre, mais pas tous
là-bas.
Ensuite, passez au style du conteneur lui-même. Les modules ont tendance à avoir un nom de classe «Box» dans les forums Vanilla. Notre classe HTML de module est «module». Nous pourrions commencer le combat pour trouver chaque module dans Vanilla et ajouter notre propre classe. Certains jours, je me sens à la hauteur de ce défi et certains jours, je dis simplement "Travaillez plus intelligemment, pas plus dur." Aujourd'hui, nous travaillerons plus intelligemment. Nous allons créer un sélecteur d'espace réservé dans Sass qui a les styles d'un module, mais sans recréer notre .moduleclasse existante .
%fake-module ( background: white; padding: $padding; clear: both; box-shadow: 0 0 5px rgba(black, 0.2); margin: 0 0 $padding 0; position: relative; )Les sélecteurs d'espace réservé ne génèrent aucun CSS par eux-mêmes. Mais ils peuvent être @extend-ed. Alors maintenant, nous pouvons simplement faire en sorte que toutes les boîtes de style Vanilla aient notre style de module.
.Box ( @extend %fake-module; )Nous apprenons que whiteSmokec'est une couleur géniale.
Dans le balisage que Vanilla nous donne pour la liste des catégories, cela nous donne une classe «active» afin que nous puissions changer un peu le style et rendre évident la catégorie dans laquelle se trouve un utilisateur (puisque ce module est sur beaucoup de pages, pages d'accueil et pages de catégorie incluses).
Nous avons rencontré un petit problème où l'utilisation de - $ variable ne fonctionnait pas correctement, nous devions faire - # ($ variable) à la place. Juste une de ces choses à propos de Sass ou Ruby ou autre.
Vers 10h30, j'explique la théorie du fonctionnement des triangles CSS. Nous envisageons d'utiliser un triangle à gauche de la classe active, comme le disent nos wireframes.
Nous terminons en positionnant le nombre de threads à droite pour donner aux utilisateurs une idée de la taille de la catégorie.