Nimeämiskäytännöt

Dude käyttää tyylipuolella (SCSS) SMACSS (Scalable and Modular Architecture for CSS) ja WordPressin Gutenbergiin pohjautuvaa nimeämiskäytäntöä. Moduuleja, eli ulkoasussa olevia rajattuja 100% leveitä alueita (<section>) kutsutaan nimellä block. Näiden sisällä ensimmäistä diviä kutsutaan nimellä container.

Tyypillinen HTML-rakenne

<section class="block block-example">
  <div class="container">
    <div class="cols">
      <div class="col col-text">
        <p class="block-title-pre" aria-describedby="block-title-something">Some pre-heading</p>
        <h2 class="block-title" id="block-title-something">Some heading - Lorem ipsum</h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel accumsan libero. Duis non erat in odio porta venenatis. Integer nibh nulla, mollis a eleifend a, laoreet ac eros. Aliquam venenatis at mauris non pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla condimentum elementum leo. Etiam viverra nec lectus eu bibendum.</p>

        <p>Aenean ac ultrices metus. Donec pretium laoreet massa accumsan sodales. Integer non facilisis ante. Duis scelerisque ex nulla. Sed sed ligula ipsum. Fusce porttitor tincidunt finibus. Duis ut convallis elit. Curabitur viverra vehicula ante, sit amet dapibus urna dignissim in. Aliquam id molestie dolor, et sollicitudin arcu.</p>
      </div>

      <div class="col col-image col-poster">
        <img src="<?php echo get_theme_file_uri('/images/placeholder.png'); ?>" alt="Dynamic title" />
      </div>
    </div>
  </div>
</section>

Tyypillinen CSS-rakenne

.block.block-example {
  // Default background-color
  background-color: $color-mudgreen;

  h1,
  h2,
  p {
    color: $color-white;
  }

  .block-title-pre {
    margin: 0 0 1rem;
  }

  .block-title {
    margin-top: 0;
  }

  .cols {
    display: flex;
    color: $color-white;
  }

  .col.col-text {
    @media (min-width: $some-breakpoint) {
      width: 50%;
      margin-right: 30%;
    }
  }

  .col.col-image {
    @media (min-width: $some-breakpoint) {
      width: calc(50% - 30%);
    }

    img {
      max-width: 395px;
      width: 100%;
      height: auto;
    }
  }
}

Taustakehitys

PHP-kehityksessä noudatetaan virallista WordPress Coding Standardsia, muutamia teemakehityksen (WPCS) poikkeuksia lukuunottamatta. Poikkeukset on määritelty pohjateeman phpcs.xml-tiedostossa ja vielä tarkennetusti projektikohtaisesti projektin oman teeman phpcs.xml:ssä.

Viimeksi muokattu käyttäjän Roni toimesta viestillä "Syncing _pages/nimeamiskaytannot.md from WordPress at https://handbook.dude.fi/wp (Dude Handbook) - wpghs", katso muutos 73fb710 GitHubissa. Näytä versiohistoria.

12.8.2019 12:34:04 Muokattu käyttäjän Roni toimesta viestillä "Syncing _pages/nimeamiskaytannot.md from WordPress at https://handbook.dude.fi/wp (Dude Handbook) - wpghs", katso muutos 73fb710 GitHubissa.

12.8.2019 12:33:35 Muokattu käyttäjän Roni toimesta viestillä "Syncing _pages/nimeamiskaytannot.md from WordPress at https://handbook.dude.fi/wp (Dude Handbook) - wpghs", katso muutos 5f63b7a 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