Foorumien oikealla puolella on joukko moduuleja. "Moduulit" visuaalisesti, "Moduulit" kirjaimellisesti koodina ja "Moduulit", koska niiden sisältämä sisältö on liittyvä ryhmä, erillinen / erilainen kuin muiden moduulien sisältö.
Ensimmäinen tarkastelemamme on Luokat-moduuli. Vanilla-keskustelupalstat laittaa nämä kirjaimellisesti kansioon nimeltä "moduulit", mikä on mukavaa. Tämä tietty, kuten arvata saattaa, on “categories.php”.
Löydämme paikan, josta otsikko tuotetaan, annamme sille luokan ja aloitamme tyylin. Lisätään vain pieni alamarginaali, mikä sopii tähän nimikkeeseen, mutta ei kaikkia
siellä.
Siirry sitten itse astian muotoiluun. Moduuleilla on yleensä vaniljafoorumien luokan nimi “Box”. Moduulin HTML-luokka on “moduuli”. Voisimme aloittaa taistelun etsimällä jokaisen moduulin Vanillasta ja lisäämällä oman luokan. Jotkut päivät ovat mielessäni tuohon haasteeseen ja toisinaan sanon vain: "Työskentele älykkäämmin, ei kovemmin." Tänään toimimme älykkäämmin. Teemme Sassissa paikkamerkin valitsimen, jolla on moduulin tyylit, mutta luomatta olemassa olevaa .moduleluokkaa uudelleen.
%fake-module ( background: white; padding: $padding; clear: both; box-shadow: 0 0 5px rgba(black, 0.2); margin: 0 0 $padding 0; position: relative; )Paikkamerkki-valitsimet eivät tuota itse mitään CSS: ää. Mutta ne voidaan poistaa @extend. Joten nyt voimme vain tehdä kaikilla Vanilja-tyylisillä laatikoilla moduulimallimme.
.Box ( @extend %fake-module; )Opimme, että whiteSmokeon mahtava väri.
Merkinnässä, jonka Vanilla antaa meille luokaluettelolle, se antaa meille "aktiivisen" luokan, jotta voimme muuttaa tyyliä hieman ja tehdä selväksi, mihin luokkaan käyttäjä kuuluu (koska tämä moduuli on monilla sivuilla ja luokkasivut mukaan lukien).
Me törmäämme pieneen asiaan, jossa - muuttujan $ käyttäminen ei toiminut oikein, meidän oli tehtävä - # ($ muuttuja). Vain yksi näistä asioista Sassista tai Rubystä tai mistä tahansa.
Noin klo 10.30 selitän teoriaa siitä, miten CSS-kolmiot toimivat. Harkitsemme kolmion käyttämistä aktiivisen luokan vasemmalla puolella, kun lankakehyksemme hajoavat.
Viimeistelemme sijoittamalla säikeiden lukumäärän oikealle, jotta käyttäjät saavat käsityksen luokan suuruudesta.