Webmobili 5
| Webmobili 5 | |
|---|---|
| http://www.designbest.com | |
| Ambiente di test | http://www.dbdemo47.it (altri dettagli) |
| Sistema di versionamento | |
| Tipo | SVN |
| URL del trunk | https://svn.office.webmobili.it/svn/WM4/WM45 |
| URL base dei branch | https://svn.office.webmobili.it/svn/WM4/branches/ |
Webmobili 5 è l'attuale implementazione del progetto Webmobili.
CSS - Organizzazione
Abbiamo fatto largo utilizzo di SCSS in quanto generano un output minificato. File usati (in ordine crescente di specificità)
- designbest-custom.scss (è costruito importando tutti gli altri file)
- _designbest-custom.variables.scss (dove vengono definite i valori delle variabili di grandezza, colore, dimensioni più usate nel sito)
- _designbest-custom.mixins.scss (punto unico dei mixin tipo transition, shadow, transform ecc...)
- _designbest-custom.reset.scss (cambia il comportamento base dei tag)
- _designbest-custom.general.scss (classi generiche utilizzate in tutte le pagine)
- _designbest-custom.components.scss (moduli che si ripetono in diverse pagine)
- _designbest-custom.header.scss (specifiche regole per l'header)
- _designbest-custom.footer.scss (specifiche regole per il footer)
Approccio misto, definire gli elementi che si usano di più crearne le classe e in parallelo creare le classi mattoncino per sovrascrivere gli attributi che cambiano in situazioni particolari.
CSS generici
Sono globali, sempre inclusi nel bundle e devono rispettare la nomenclatura che segue:
.wm-text-size-big1 {
font-size: $font-size-big1;
}
.wm-text-size-medium1 {
font-size: $font-size-medium1;
}
.wm-text-size-medium2 {
font-size: $font-size-medium2;
}
/* ... */
con wm- come prefisso.
CSS specifici per pagina
Gli .scss specifici per pagina stanno nella cartella Content/scss/pages. Possono essere più "sporchi" perché sono l'ultimo gradino di inclusione (si consiglia sempre e comunque di mantenere ordine ed eleganza).
CSS di moduli riutilizzabili
Nella cartella Content/scss/components troviamo tutti quei css che fanno riferimento a moduli che vengono inclusi in alcune pagine (non tutte). In questi casi, quando si dovrà includere il componente si includerà anche il CSS corrispondente (es. moduli carousel o telecomando).
Inclusione dei CSS in pagina
<syntaxhighlight> @section HeadCustom {
@Html.InlineCss("~/Content/css/slick.min.css", "~/Content/css/components/carousel.min.css", "~/Content/css/pages/scheda-progetto.min.css")
}
</sytaxhighlight>
Il metodo helper Html.InlineCss() va fisicamente a leggere il contenuto del CSS e lo trasporta in pagina nel tag <style/>
