Webmobili 5: differenze tra le versioni
| Riga 37: | Riga 37: | ||
=== CSS specifici per pagina === | === CSS specifici per pagina === | ||
Gli ''.scss'' specifici per pagina stanno nella cartella ''Content/scss/pages''. | Gli ''.scss'' specifici per pagina stanno nella cartella ''Content/scss/pages''.<br/> | ||
Possono essere più "sporchi" perché sono l'ultimo gradino di inclusione (si consiglia sempre e comunque di mantenere ordine ed eleganza). | 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 === | === 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). | Nella cartella ''Content/scss/components'' troviamo tutti quei css che fanno riferimento a moduli che vengono inclusi in alcune pagine (non tutte).<br/> | ||
In questi casi, quando si dovrà includere il componente si includerà anche il CSS corrispondente (es. moduli carousel o telecomando). | 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 === | === Inclusione dei CSS in pagina === | ||
Per avere migliori prestazioni il contenuto custom delle pagine conviene che venga inserito direttamente INLINE, nell'header della pagina. | Per avere migliori prestazioni il contenuto custom delle pagine conviene che venga inserito direttamente INLINE, nell'header della pagina.<br/> | ||
Per farlo utilizzare l'apposita '''section HeadCustom''' come nel seguente esempio. | Per farlo utilizzare l'apposita '''section HeadCustom''' come nel seguente esempio.<br/><br/> | ||
<syntaxhighlight> | <syntaxhighlight> | ||
Versione delle 15:24, 22 feb 2021
| 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
Per avere migliori prestazioni il contenuto custom delle pagine conviene che venga inserito direttamente INLINE, nell'header della pagina.
Per farlo utilizzare l'apposita section HeadCustom come nel seguente esempio.
@section HeadCustom {
@Html.InlineCss("~/Content/css/slick.min.css", "~/Content/css/components/carousel.min.css", "~/Content/css/pages/scheda-progetto.min.css")
}Il metodo helper Html.InlineCss() va fisicamente a leggere il contenuto di ogni CSS specificato e lo appende in pagina nel tag <style/> già minificato.
