Webmobili 5: differenze tra le versioni
| Riga 18: | Riga 18: | ||
=== CSS generici === | === CSS generici === | ||
Sono globali, sempre inclusi nel bundle e devono rispettare la nomenclatura che segue: | Sono globali, sempre inclusi nel '''bundle''' e devono rispettare la nomenclatura che segue: | ||
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
.wm-text-size-big1 { | .wm-text-size-big1 { | ||
| Riga 37: | Riga 37: | ||
=== CSS specifici per pagina === | === CSS specifici per pagina === | ||
Gli ''.scss'' specifici per pagina stanno nella cartella ''pages''. | 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). | 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 <code>Html.InlineCss()</code> va fisicamente a leggere il contenuto del CSS e lo trasporta in pagina nel tag <code><style/></code> | |||
== Sottoprogetti == | == Sottoprogetti == | ||
Versione delle 15:20, 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
<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/>
