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ä "Maininnat pois liittyen vanhaan branch-jaotteluun", katso muutos 29e5228 GitHubissa. Näytä versiohistoria.

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.

Tämä Handbook kertoo kuinka me teemme asioita Dudella, mutta saa ottaa koppia myös omaan toimintaan. Emme takaa että kaikki meidän jutut toimivat muilla samalla tavalla. Ole mitä olet! Kaikki on avointa GitHubissa: digitoimistodude/handbook