Aan de rechterkant van de forums zijn er een reeks modules. "Modules" visueel, "Modules" letterlijk in code, en "Modules" in de zin dat de inhoud die ze bevatten een verwante groep is, gescheiden / verschillend van de inhoud in andere modules.
De eerste die we bekijken is de Categorieën-module. Vanilla Forums plaatst deze letterlijk in een map met de naam “modules”, wat prettig is. Deze specifieke is, zoals je zou kunnen raden, "categories.php".
We zoeken de plaats waar de titel wordt uitgevoerd, geven deze een klasse en beginnen met stylen. We voegen gewoon een kleine ondermarge toe zoals geschikt is voor deze titel, maar niet elke afzonderlijke
buiten.
Ga dan verder met het stylen van de container zelf. Modules hebben meestal de klassenaam "Box" in Vanilla Forums. Onze module HTML-klasse is "module". We zouden de strijd kunnen beginnen om elke afzonderlijke module in Vanilla te vinden en onze eigen klasse toe te voegen. Sommige dagen voel ik me opgewassen tegen die uitdaging en op sommige dagen zeg ik gewoon: "Werk slimmer, niet harder." Vandaag gaan we slimmer werken. We maken een placeholder-selector in Sass met de stijlen van een module, maar zonder onze bestaande .moduleklasse opnieuw te maken .
%fake-module ( background: white; padding: $padding; clear: both; box-shadow: 0 0 5px rgba(black, 0.2); margin: 0 0 $padding 0; position: relative; )Placeholder-selectors voeren zelf helemaal geen CSS uit. Maar ze kunnen worden @extendverwerkt. Dus nu kunnen we ervoor zorgen dat alle dozen in Vanilla-stijl onze modulestijl hebben.
.Box ( @extend %fake-module; )We leren dat whiteSmokedit een geweldige kleur is.
In de opmaak die Vanilla ons geeft voor de lijst met categorieën, geeft het ons een 'actieve' klasse, zodat we de stijl een beetje kunnen veranderen en het duidelijk kunnen maken in welke categorie een gebruiker zit (aangezien deze module op veel pagina's staat, zijn homepages en categoriepagina's inbegrepen).
We komen een klein ding tegen waarbij het gebruik van - $ variable niet goed werkte, we moesten in plaats daarvan - # ($ variable) doen. Gewoon een van die dingen over Sass of Ruby of wat dan ook.
Om ongeveer 10.30 uur leg ik de theorie uit van hoe CSS-driehoeken werken. We overwegen om een driehoek aan de linkerkant van de actieve klasse te gebruiken, zoals onze wireframes aangeven.
We eindigen door het aantal threads naar rechts te plaatsen om gebruikers een idee te geven van hoe groot de categorie is.