Vispārīgi (CSS/JS)

Izmanto PandaGo2 tēmā iekļautos late.js un late.css failus. Tajos paredzēts rakstīt kodu, kas nav nepieciešams uz lapas ielādes brīdi, bet var tikt ielādēts pēc lietotāja interakcijas ar lapu ( peles pakustināšana, touch, utt. ). Šie faili atrodas pandago-child/webpack/src/vendor/theme mapē un, lai tie korekti darbotos administrācijas panelī jādodas uz sadaļu PandaGo Options > Optimisation un jāsaglabā lapa ( Update ).

Ar šo metodi var panākt, ka Google PageSpeed neuzrāda tik daudz skriptus, vai stilus, kā nevajadzīgus uz lapas ielādi.

Par late assetiem var palasīt šeit.

Piemēri:

JavaScript kods, kas izpilda funkciju uzklikšķinot uz pogas varētu tikt rakstīts late.js failā, ja līdz pogai, lai tiktu nepieciešama lietotāja interakcija ( scroll ).

CSS kods, kas dod stilus popup logam varētu tikt rakstīts late.css failā, jo popup loga stili uz ielādi nav nepieciešami.

Skriptus un stilus, kas paredzēti konkrēti vienam skatam arī ir ieteicams izdalīt atsevišķos failos un iekļaut tikai attiecīgajos skatos. To var izdarīt ievietojot CSS/JS failus mapē pandago-child/webpack/src/vendor, no šīs mapes tie tiks pārkopēti uz pandago-child/assets/vendor ar tiem pašiem nosaukumiem. Tālāk no assets mapes tos var iekļaut vajadzīgajos skatos, failā pandago-child/includes/assets.php.

Ja HTML elements veic kādu darbību ar JavaScript palīdzību, piemēram uz peles klikšķa tiek palaista funkcija, tad pievieno šim elementam atsevišķi klasi, kas sākas ar js- tā norādot, ka elements ir saistīts ar JavaScript. Šai js- klasei nepiesaisti stilus, bet JavaScript kodu.

Piemērs:

<button class="btn btn--primary js-show-documents">Parādīt dokumentus</button>

$( '.js-show-documents' ).on( 'click', function() {
    ...
} );

CSS stilus piesaisti klasēm, nevis elementiem. Kā arī centies CSS selektorus rakstīt pēc iespējas vienkāršākus.

Piemēri:

header > div {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
}

Izmanto CSS helper klases, kas pieejamas PandaGo Child tēmā, kā arī centies CSS klases veidot tā, lai stili pārāk bieži neatkārtojas un dažādas klases neizmanto vienus un tos pašus stilus.

Piemēri:

.flex {
    display: flex;
    flex-wrap: wrap;
}

.text-with-image {
    display: flex;
    flex-wrap: wrap;
}

.link-in-row { display: flex; }

.flex {
    display: flex;
    flex-wrap: wrap;
}