Front End & teemakehitys

Front End devaaja keskittyy erityisesti teemakehityksen visuaalisen puoleen. CSS- preprosessorikielenä dude käyttää SASS-kielen SCSS-syntaksia. SCSS-kehitykessä tulee käyttää scss-lintiä laadukkaan koodin tarkistamista ja varmistamista varten sekä stylefmt:tä tarvittaessa automaattiseen koodin paranteluun.

Front End -kehittäjä voi myös tarvittaessa ehdottaa/committaa muutoksia tai korjauksia back endiin ja erityisesti toteuttaa front end -puolta helpottavia muutoksia vapaasti.

digitoimistodude/air ja digitoimistodude/devpackages tarjoavat WordPress-teemakehitykseen edellyttävät paketit ja työkalut, kuten gulp, npm ja browsersync. digitoimistodude/dudestackin createproject-skripti sekä digitoimistodude/airin newtheme.sh sisältävät näiden oikeaoppisen, automatisoidun asennuksen.

Modulaarinen rakenne

SCSS-tyylit on toteutettava modulaarisesti, eli jokainen oleellinen layout tai view on tallennettava omaksi tiedostokseen. Esimerkkinä toimii airin tiedostorakenne, joka näyttää tältä:

sass/
– base
— _accessibility.scss
— _config.scss
— _helpers.scss
— _global.scss
– layout
— _forms.scss
— _general.scss
— _sidebar.scss
– modules
— _hero.scss
— _upsells.scss
— _etc.scss

Rakenteeseen voi ehdottaa muutoksia suoraan Airin GitHub- repositorioon sass/ -hakemistoon. Lähtökohta on, että esim. template-partsissa sijaitsevilla php-tiedostoilla olisi aina views/ -kansiossa saman niminen SCSS-pari.

Front End devaaja aloittaessaan rakentaa WordPressin teematiedostoihin HTML-rakenteen back end -kehittäjälle valmiiksi. Järkeviä PHP-ratkaisuja voi rakentaa valmiiksi, kuten tietyt echot, svg includet, oleelliset functions.php:n muutokset tai vastaavat, mutta WP Queryt ja laajemmat PHP-toiminnallisuudet jätetään back end -kehittäjän työstettäväksi.

Riippuvuudet

Projektissa käytettävät SCSS- ja JS-palikat haetaan npm upstreamista ja lisätään vaatimuksina teeman package.jsoniin aina kun mahdollista. Jos kyseessä on esimerkiksi muutaman rivin @mixin, voidaan tehdä poikkeus ja tarvittavan dependenssin toistuessa keskustella siitä, lisättäisiinkö tämä myös airiin defaultiksi.

Front endissä tarvittavat lisäosat tai muut PHP:ta käyttävät riippuvuudet on lisättävä composer.json-tiedostoon tarvittaessa.

Tuetut selaimet

Front End koodin on toimittava julkaisuhetkellä vallitsevissa selaimissa, kuten Mozilla Firefoxin, Google Chromen, Safarin ja Internet Explorerin uusimmissa versioissa. Tämän lisäksi air-teeman gulpfile.js:ssä määritetty autoprefixer varmistaa, että prefixit on kunnossa kolmeen vanhempaan versioon.

Internet Explorerissa tuetaan versioita 11 ja ylöspäin. Versiota 11 vanhemmille tuki rakennetaan lisätyönä.