#6 SASS + Compass: Rytm pionowy


27 września 2013 / Michał Załęcki


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 odpowiada za podstawową wielkość czcionki, analogicznie $base-line-height odpowiada za podstawową wysokość linii.

Teraz możemy ustanowić linie podstawową.

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.

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.

Rysowanie linii

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

Rozmiar pozostałych elementów

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

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:


Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *