HTML5 & CSS3

#6 SASS + Compass: Rytm pionowy

Dostępne jest aż 6 części kursu SASS + Compass.
Dostęp do wszystkich znajdziesz na webroad.pl/tag/SASS.

Dzisiaj skupmy się nad tym jak stworzyć rytm pionowy za pomocą Compass. Zacznijmy od tego czym tak naprawdę jest rytm pionowy (ang. vertical rhythm). Rytm pionowy jest to prawidłowość w ustaleniu rozmiaru odstępów, skutkująca uporządkowanym i przemyślanym rozmieszczeniem elementów witryny, głównie tekstu, w pionie.

SASS i LESS

Richard Rutter w 2006 roku opublikował artykuł „Compose to a Vertical Rhythm”, w którym dosadnie wytłumaczył podstawy tej techniki. Pokaże Wam jak za pomocą Compass zmienić prostą i pozornie uporządkowaną witrynę taka jak ta:

w witrynę faktycznie uporządkowaną w pionie:

Podstawowe zmienne i linia podstawowa

Żeby ustalić nasz podstawowy rytm pionowy należy ustawić dwie zmienne. Trzecia zmienna odpowiada za zmianę domyślnego koloru linii.

$base-font-size:   16px;
$base-line-height:   24px;
$grid-background-baseline-color: #91E1FF;

$base-font-size odpowiada za podstawową wielkość czcionki, analogicznie $base-line-height odpowiada za podstawową wysokość linii.

Teraz możemy ustanowić linie podstawową.

/* ================================================================ *
*  Vertical Rhythm
* ================================================================ */
@include establish-baseline;
</pre>
{/source}

{source}
<pre xml:lang="css">
/* ================================================================ *
*  Vertical Rhythm
* ================================================================ */
/* line 61, ../../../../Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/typography/_vertical_rhythm.scss */
* html {
  font-size: 100%;
}

/* line 64, ../../../../Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/typography/_vertical_rhythm.scss */
html {
  font-size: 16px;
  line-height: 1.5em;
}

Rozmiar nagłówków

Do ustalenia rozmiaru nagłówków będzie nam potrzebna tablica z rozmiarami poszczególnych nagłówków. Opcjonalnie dodałem też klasy, które mogą być przydatne m. in. do rozszerzania.

$hx-sizes:     ( 36px, 24px, 21px, 18px, 16px, 14px );
$hx-classes:   ( "alpha", "beta", "gamma", "delta", "epsilon", "zeta" );

@for $i from 1 through 6 {
    h#{$i},
    .#{nth($hx-classes, $i)} {
        @include adjust-font-size-to(nth($hx-sizes, $i));
        @include rhythm(0, 0, 0, 1, nth($hx-sizes, $i));
    }
}
/* line 82, ../sass/vertical-rhythm.scss */
h1,
.alpha {
  font-size: 2.25em;
  line-height: 1.33333em;
  margin-top: 0em;
  padding-top: 0em;
  padding-bottom: 0em;
  margin-bottom: 0.66667em;
}

/* line 82, ../sass/vertical-rhythm.scss */
h2,
.beta {
  font-size: 1.5em;
  line-height: 2em;
  margin-top: 0em;
  padding-top: 0em;
  padding-bottom: 0em;
  margin-bottom: 1em;
}

/* line 82, ../sass/vertical-rhythm.scss */
h3,
.gamma {
  font-size: 1.3125em;
  line-height: 2.28571em;
  margin-top: 0em;
  padding-top: 0em;
  padding-bottom: 0em;
  margin-bottom: 1.14286em;
}

/* line 82, ../sass/vertical-rhythm.scss */
h4,
.delta {
  font-size: 1.125em;
  line-height: 1.33333em;
  margin-top: 0em;
  padding-top: 0em;
  padding-bottom: 0em;
  margin-bottom: 1.33333em;
}

/* line 82, ../sass/vertical-rhythm.scss */
h5,
.epsilon {
  font-size: 1em;
  line-height: 1.5em;
  margin-top: 0em;
  padding-top: 0em;
  padding-bottom: 0em;
  margin-bottom: 1.5em;
}

/* line 82, ../sass/vertical-rhythm.scss */
h6,
.zeta {
  font-size: 0.875em;
  line-height: 1.71429em;
  margin-top: 0em;
  padding-top: 0em;
  padding-bottom: 0em;
  margin-bottom: 1.71429em;
}

Wstawka adjust-font-size-to pozwala na dostosowanie rozmiaru tekstu elementu w jednostkach em, na podstawie rozmiaru w pikselach.

Wstawka rhythm jest bardzo sprytnym narzędziem do ustalenia marginesów (margin) i obszycia (padding).

Przyjmuje pięć argumentów. Są to odpowiednio: margines górny, obszycie górne, obszycie dolne, margines dolny, rozmiar czcionki w pikselach dla tego elementu. Pierwsze cztery argumenty są to liczby naturalne oznaczające ilość linii.

.wired-rhythm {
  @include adjust-font-size-to(18px);
  @include rhythm(2,3,4,5,18px);
}
/* line 96, ../sass/vertical-rhythm.scss */
.wired-rhythm {
  font-size: 1.125em;
  line-height: 1.33333em;
  margin-top: 2.66667em;
  padding-top: 4em;
  padding-bottom: 5.33333em;
  margin-bottom: 6.66667em;
}

Rysowanie linii

Linie poziome „rysujemy” w bardzo prosty sposób w poparciu o wcześniej ustawione zmienne.

html {
  @include baseline-grid-background();
}
/* line 76, ../sass/vertical-rhythm.scss */
html {
  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(5%, #91e1ff), color-stop(5%, rgba(145, 225, 255, 0)));
  background-image: -webkit-linear-gradient(bottom, #91e1ff 5%, rgba(145, 225, 255, 0) 5%);
  background-image: -moz-linear-gradient(bottom, #91e1ff 5%, rgba(145, 225, 255, 0) 5%);
  background-image: -o-linear-gradient(bottom, #91e1ff 5%, rgba(145, 225, 255, 0) 5%);
  background-image: linear-gradient(bottom, #91e1ff 5%, rgba(145, 225, 255, 0) 5%);
  -webkit-background-size: 100% 1.5em;
  -moz-background-size: 100% 1.5em;
  -o-background-size: 100% 1.5em;
  background-size: 100% 1.5em;
  background-position: left top;
}

Rozmiar pozostałych elementów

Pozostałe elementu możemy dostosować do naszych potrzeb w sposób analogiczny jak w przypadku nagłówków.

p, ul {
  @include rhythm(0, 0, 0, 1, $base-font-size);
}

figcaption {
  @include rhythm(0,0,0,0,14px);
}

Podsumowanie

Stosowanie rytmu pionowego nie jest może elementem kluczowym dla witryny, ale ma na pewno więcej zalet niż wad i jest techniką godną uwagi. Istnieje wiele sposobów na rytm pionowy, ten który serwuje nam Compass jest bez wątpienia jednym z najprostszych i najbardziej elastycznych. Jeżeli jesteś zainteresowany tą techniką to polecam zajrzeć na stronę dokumentacji Compass i poznać również rzadziej stosowane wstawki, które jeszcze bardziej mogą ułatwić Ci pracę.

Przydatne linki

Tagi:compasskurssass

Brak komentarzy

Napisz komentarz jako pierwszy!

Zostaw odpowiedź