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

16:00 - Wprowadzenie do preprocesora LESS
16:30 - Metodyka BEM
17:00 - Pseudoselektory i pseudoelementy
17:30 - Przerwa
18:00 - Flexbox Layout
19:00 - Grid Layout
20:00 - Koniec

css-layouts.jpg