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ä.

Muuta

Katso myös: Nimeämiskäytännöt.

Viimeksi muokattu käyttäjän Roni Laukkarinen toimesta viestillä "Replace http links with https", katso muutos 1688cb9 GitHubissa. Näytä versiohistoria.

14.8.2020 15:00:14 Muokattu käyttäjän Roni Laukkarinen toimesta viestillä "Replace http links with https", katso muutos 1688cb9 GitHubissa.

1.11.2019 08:41:46 Muokattu käyttäjän Roni Laukkarinen toimesta viestillä "Maininnat pois liittyen vanhaan branch-jaotteluun", katso muutos 29e5228 GitHubissa.

12.8.2019 12:33:45 Muokattu käyttäjän Roni toimesta viestillä "Syncing _pages/front-end-teemakehitys.md from WordPress at https://handbook.dude.fi/wp (Dude Handbook) - wpghs", katso muutos f39e7be GitHubissa.

12.8.2019 12:19:18 Muokattu käyttäjän Roni toimesta viestillä "Syncing _pages/front-end-teemakehitys.md from WordPress at https://handbook.dude.fi/wp (Dude Handbook) - wpghs", katso muutos 3cf93ed GitHubissa.

21.9.2018 12:09:31 Muokattu käyttäjän Roni Laukkarinen toimesta viestillä "Tarkennus", katso muutos fc55def GitHubissa.

16.10.2017 08:58:53 Muokattu käyttäjän Roni Laukkarinen toimesta viestillä "Tuetut selainversiot", katso muutos ebf96ca GitHubissa.

7.8.2017 09:25:53 Muokattu käyttäjän Roni toimesta viestillä "Full export from WordPress at https://handbook.dude.fi/wp (Dude Handbook) - wpghs", katso muutos a0ac9b5 GitHubissa.