Ao longo do lado direito dos fóruns, há uma série de módulos. “Módulos” visualmente, “Módulos” literalmente em código e “Módulos” em que o conteúdo que eles contêm é um grupo relacionado, separado / diferente do conteúdo em outros módulos.
O primeiro que examinamos é o módulo Categorias. O Vanilla Forums literalmente os coloca em uma pasta chamada “módulos”, o que é legal. Este em particular, como você pode imaginar, é “categories.php”.
Encontramos o local onde o título é produzido, damos uma aula e começamos a estilizar. Nós apenas adicionamos uma pequena margem inferior conforme apropriado para este título, mas nem todo
lá fora.
Em seguida, passe a estilizar o próprio contêiner. Os módulos tendem a ter o nome de classe “Box” dentro dos Fóruns Vanilla. Nossa classe de módulo HTML é “módulo”. Poderíamos começar a lutar para encontrar todos os módulos do Vanilla e adicionar nossa própria classe. Alguns dias eu me sinto à altura desse desafio e alguns dias eu apenas digo "Trabalhe de forma mais inteligente, não mais difícil". Hoje vamos trabalhar de forma mais inteligente. Faremos um seletor de espaço reservado no Sass que tem os estilos de um módulo, mas sem recriar nossa .moduleclasse 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; )Os seletores de espaço reservado não geram nenhum CSS por si próprios. Mas eles podem ser @extendeliminados. Portanto, agora podemos apenas fazer com que todas as caixas no estilo Vanilla tenham nosso estilo de módulo.
.Box ( @extend %fake-module; )Aprendemos que whiteSmokeé uma cor incrível.
Na marcação que Vanilla nos fornece para a lista de categorias, ela nos dá uma classe “ativa” para que possamos mudar um pouco o estilo e deixar claro em qual categoria o usuário está (já que este módulo está em muitas páginas, homepages e páginas de categoria incluídas).
Encontramos algo em que usar - $ variable não funcionou direito, tivemos que fazer - # ($ variable) em seu lugar. Só uma daquelas coisas sobre Sass ou Ruby ou o que seja.
Por volta das 10:30, explico a teoria de como os triângulos CSS funcionam. Estamos considerando usar um triângulo à esquerda da classe ativa, conforme nossos wireframes dicam.
Terminamos posicionando o número de tópicos à direita para dar aos usuários uma noção de quão grande é a categoria.