Kuinka kirjoitan tyylejä?

Tämä on tekninen ohje, ja tulee siirtymään seuraavissa versioissa Sivujetin tekniseen dokumentaatioon https://sivujetti.github.io/dev-docs/fi/.

Lohkosisältötyylien koodi ajetaan stylis -preprosessorin läpi, mutta muutoin se on tavallista CSS:ää. Koodille pätee nämä säännöt:

Koodiin voi kirjoittaa sisäkkäisiä CSS-blokkeja
Uloin blokki kohdistuu sisältölohkon uloimpaan elementtiin

Esimerkki 1

Esim. tekstisisältölohkon html-rakenne on (<div>[ wysiwygHtml ][ lapsiSisältöLohkot ]</div>), jolloin sen tyylien uloin koodi kohdistuu <div> -elementtiin, ja sisempiä elementtejä voi muotoilla vapaasti:

.my-text-style {
  display: inline; // tämä viittaa div-elementtiin

  > p { // tämä viittaa wysiwyg-html:n kaikkiin p-elementteihin
    color: red;
  }
  .j-Image { // tämä viittaa kaikkiin "Kuva" -lapsisisältöihin
    margin: 0;
  }
}

Esimerkki 2

Esim. kuvasisältöjen html-rakenne on (<figure><img>[ lapsiSisältöLohkot ]</figure>), jolloin sen tyylien uloin koodi kohdistuu <figure> -elementtiin, ja sisemmät blokit sen lapsiin:

.my-image-style {
  margin: 0 0 1rem 1rem; // tämä viittaa figure-elementtiin

  > img { // tämä viittaa img-elementteihin
    border: 2px solid red;
  }
  .j-Text { // tämä viittaa "Teksti" -lapsisisältöihin
    font-size: 1rem;
    strong {
      font-weight: 800;
    }
  }
}

Jos haluat käyttää css-blokeissa pseudo-selectoreja tai "tarkennuksia", tulee niiden eteen laittaa &- merkki:

.my-image-style {
  &:before {
    content: "Text";
  }

  // tai (esim. linkkinapeissa)
  &:hover {
    color: lime;
  }
}

Kehitys

Tietoa

Voimanlähteenä Sivujetti 😲