En el lado derecho de los foros hay una serie de módulos. “Módulos” visualmente, “Módulos” literalmente en código y “Módulos” en el sentido de que el contenido que contienen es un grupo relacionado, separado / diferente del contenido de otros módulos.
El primero que miramos es el módulo Categorías. Vanilla Forums los coloca literalmente en una carpeta llamada "módulos", lo cual es bueno. Este en particular, como puede adivinar, es "categorías.php".
Buscamos el lugar donde se imprime el título, le damos una clase y comenzamos a diseñar. Solo agregamos un pequeño margen inferior según sea apropiado para este título, pero no todos
allí afuera.
Luego pasa a diseñar el contenedor. Los módulos tienden a tener un nombre de clase de "Caja" dentro de los foros de Vanilla. Nuestra clase de módulo HTML es "módulo". Podríamos comenzar la lucha para encontrar cada módulo en Vanilla y agregar nuestra propia clase. Algunos días me siento a la altura de ese desafío y otros simplemente digo "Trabaja más inteligentemente, no más duro". Hoy trabajaremos de manera más inteligente. Crearemos un selector de marcador de posición en Sass que tenga los estilos de un módulo, pero sin volver a crear nuestra .moduleclase existente .
%fake-module ( background: white; padding: $padding; clear: both; box-shadow: 0 0 5px rgba(black, 0.2); margin: 0 0 $padding 0; position: relative; )Los selectores de marcador de posición no generan ningún CSS por sí mismos. Pero pueden ser @extend-ed. Así que ahora podemos hacer que todas las cajas estilo Vanilla tengan nuestro estilo de módulo.
.Box ( @extend %fake-module; )Aprendemos que whiteSmokees un color asombroso.
En el marcado que nos da Vanilla para la lista de categorías, nos da una clase "activa" para que podamos cambiar un poco el estilo y hacer obvio en qué categoría se encuentra un usuario (ya que este módulo está en muchas páginas, páginas de inicio y páginas de categorías incluidas).
Nos encontramos con una pequeña cosa en la que usar - $ variable no funcionó bien, tuvimos que hacer - # ($ variable) en su lugar. Solo una de esas cosas sobre Sass o Ruby o lo que sea.
Aproximadamente a las 10:30, explico la teoría de cómo funcionan los triángulos CSS. Estamos considerando usar un triángulo a la izquierda de la clase activa, como indican nuestros wireframes.
Terminamos colocando el número de hilos a la derecha para dar a los usuarios una idea de qué tan grande es la categoría.