Webmobili 5: differenze tra le versioni
Nessun oggetto della modifica |
|||
| Riga 45: | Riga 45: | ||
=== Inclusione dei CSS in pagina === | === Inclusione dei CSS in pagina === | ||
Seguendo la guida di Lighhouse, i css vengono caricati in modo asincrono se viene utilizzato il seguente markup: | |||
<syntaxhighlight lang="html"> | |||
<link rel="preload" href="/Content/css/designbest-custom.min.css" as="style" onload="this.onload = null; this.rel = 'stylesheet'"/> | |||
</syntaxhighlight><br/> | |||
Per avere migliori prestazioni il contenuto custom delle pagine conviene che venga inserito direttamente INLINE, nell'header della pagina.<br/> | 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.<br/><br/> | Per farlo utilizzare l'apposita '''@section HeadCustom''' come nel seguente esempio.<br/><br/> | ||
| Riga 53: | Riga 58: | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Il metodo helper <code>Html.InlineCss()</code> va fisicamente a leggere il contenuto di ogni CSS specificato e lo appende in pagina nel tag <code><style/></code> già minificato. | Il metodo helper <code>Html.InlineCss()</code> va fisicamente a leggere il contenuto di ogni CSS specificato e lo appende in pagina nel tag <code><style/></code> già minificato.<br/><br/> | ||
== JavaScript - Organizzazione == | |||
Bla bla bla | |||
== Sottoprogetti == | == Sottoprogetti == | ||
Versione delle 15:35, 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
Seguendo la guida di Lighhouse, i css vengono caricati in modo asincrono se viene utilizzato il seguente markup:
<link rel="preload" href="/Content/css/designbest-custom.min.css" as="style" onload="this.onload = null; this.rel = 'stylesheet'"/>
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.
JavaScript - Organizzazione
Bla bla bla
