Κατά μήκος της δεξιάς πλευράς των φόρουμ υπάρχει μια σειρά από ενότητες. «Modules» οπτικά, «Modules» κυριολεκτικά σε κώδικα και «Modules» στο ότι το περιεχόμενο που περιέχουν είναι μια σχετική ομάδα, ξεχωριστή / διαφορετική από το περιεχόμενο σε άλλες ενότητες.
Το πρώτο που εξετάζουμε είναι η ενότητα Κατηγορίες. Τα Vanilla Forums τα βάζουν κυριολεκτικά σε έναν φάκελο που ονομάζεται «modules», ο οποίος είναι ωραία. Αυτό το συγκεκριμένο, όπως μπορείτε να μαντέψετε, είναι το «profiles.php».
Βρίσκουμε το μέρος όπου εξάγεται ο τίτλος, δίνουμε μια τάξη και αρχίζουμε το στυλ. Προσθέτουμε μόνο ένα μικρό περιθώριο όπως είναι κατάλληλο για αυτόν τον τίτλο, αλλά όχι κάθε
εκεί έξω.
Στη συνέχεια προχωρήστε στο στυλ του ίδιου του δοχείου. Οι ενότητες τείνουν να έχουν ένα όνομα τάξης του "Box" μέσα στα Φόρουμ της Βανίλιας. Το μάθημα HTML της ενότητας μας είναι "module". Θα μπορούσαμε να ξεκινήσουμε τον αγώνα να βρούμε κάθε ενότητα στη Βανίλια και να προσθέσουμε τη δική μας τάξη. Κάποιες μέρες νιώθω την πρόκληση και μερικές μέρες απλώς λέω «Δουλέψτε πιο έξυπνα, όχι πιο σκληρά» Σήμερα θα δουλέψουμε πιο έξυπνα. Θα κάνουμε έναν επιλογέα placeholder στο Sass που έχει τα στυλ μιας ενότητας, αλλά χωρίς να δημιουργήσουμε ξανά την υπάρχουσα .moduleτάξη μας.
%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 δεν εξάγουν καθόλου CSS από μόνοι τους. Αλλά μπορούν να γίνουν @extend. Τώρα λοιπόν μπορούμε απλώς να κάνουμε όλα τα κουτιά τύπου βανίλιας να έχουν το στυλ μας.
.Box ( @extend %fake-module; )Μαθαίνουμε ότι whiteSmokeείναι ένα υπέροχο χρώμα.
Στη σήμανση που μας δίνει η Vanilla για τη λίστα κατηγοριών, μας δίνει μια «ενεργή» τάξη, ώστε να μπορούμε να αλλάξουμε λίγο το στυλ και να καταστήσουμε προφανές σε ποια κατηγορία βρίσκεται ο χρήστης (δεδομένου ότι αυτή η ενότητα βρίσκεται σε πολλές σελίδες, αρχικές σελίδες και περιλαμβάνονται σελίδες κατηγορίας).
Αντιμετωπίσαμε ένα μικρό πράγμα όπου η χρήση - η μεταβλητή $ δεν λειτούργησε σωστά, έπρεπε να κάνουμε - # ($ μεταβλητή) αντ 'αυτού. Ένα από αυτά τα πράγματα για τον Sass ή τον Ruby ή οτιδήποτε άλλο.
Περίπου στις 10:30, εξηγώ τη θεωρία για το πώς λειτουργούν τα τρίγωνα CSS. Εξετάζουμε να χρησιμοποιήσουμε ένα τρίγωνο στα αριστερά της ενεργής τάξης, όπως το wireframes μας.
Τελειώνουμε τοποθετώντας τον αριθμό των νημάτων προς τα δεξιά για να δώσουμε στους χρήστες μια αίσθηση για το πόσο μεγάλη είναι η κατηγορία.