Warsztaty CSS Layouts

Style CSS już od dawna pozwalają na więcej niż ustawienie kolorów w naszej aplikacji webowej. Celem tych warsztatów jest zapoznanie się z dwoma układami stron oraz poznanie kilku wytycznych i trików przy tworzeniu styli CSS.

O warsztatach

Na wstępnie poznamy pracę z lekkim preprocessorem LESS, wprowadzającym takie ułatwienia do pisania styli jak zmienne, zagnieżdżenia, operatory i funkcje. Wraz z pracą z nowo poznanym narzędziem omówimy metodykę BEM, która opisuję w jaki sposób należy strukturyzować arkusze CSS, żeby można było je łatwo rozszerzać i modyfikować. Jako bonus do wstępu omówimy kilka pseudoelementów i ich selektorów, które pozwalają na bardziej elastyczny dostęp do odpowiednich elementów.

Drugą częścią spotkania będzie omówienie dwóch dostępnych layoutów CSS. Flexbox to układ pozwalający na rozmieszczanie i kontrolowanie następujących po sobie elementów z zachowaniem zdefiniowanych przez programistę reguł w stosunku do dostępnego dla elementów miejsca. Grid to relatywnie nowy układ pozwalający na stworzenie poprawnego układu strony, którym łatwo manipulować dla ekranów różnej wielkości.

Plan warsztatów

17:30 - Powitanie
17:35 – Preprocesor LESS
17:50 - Metodyka BEM
18:10 - Flexbox Layout (live coding)
18:40 - Grid Layout (live coding)
19:30 – Pizza/networking
20:00 – Koniec

css-waw.jpg