Past Meetup

Czy Bootstrap to przeżytek? - Budowanie własnej biblioteki komponentów UI

This Meetup is past

21 people went

Location image of event venue

Details

Obowiązkowa rejestracja na warsztat przez formularz na stronie: http://stacja.it/warsztaty/2018-03-09-czy-bootstrap-to%20przezytek-budowanie-wlasnej-biblioteki-komponent%C3%B3w-UI-z-wykorzystaniem-SASSSCSS.html

Warsztat jest bezpłatny. Sponsorem warsztatu jest firma METROSOFT (https://metrosoft.com/#/).

Stylujesz kolejną stronę bądź aplikację webową i masz wrażenie, że N-ty raz robisz to samo? Bootstrap Ci nie leży, a grafik tak zaszalał z kontrolkami UI, że i tak trzeba to robić od podstaw? A może po prostu CSS przestaje Ci wystarczać?

W ramach warsztatu dowiesz się jak korzystać z SASSa / SCSSa w budowie interfejsu użytkownika. Jakie techniki i metody zastosować w danym projekcie, aby pisać wydajnie i czytelnie. Które elementy HTMLa dają się bez problemu stylować, a walkę z którymi lepiej sobie darować?

Podczas warsztatów:

- nauczysz się podstaw SASS/SCSS takich jak zagnieżadżanie reguł, rozszerzanie klas,
- poznasz wbudowane mixiny, nauczysz się pisać własne mixiny i dowiesz się kiedy ich używać,
- poznasz sztuczki dzięki którym Bootstrap stanie się dla Ciebie zbędny.

Od uczestników wymagane jest podstawowe stosowanie HTML i CSS. Warsztaty skierowane są dla osób, które chciałyby poznać możliwości SASSa/SCSSa oraz tworzenia layoutów stron i aplikacji internetowych. Uczestnicy w trakcie zajęć korzystają z własnego sprzętu (do wygodnego korzystania z HTMLa, CSSa i SASSa wystarczy właściwie każdy komputer z systemem Windows, OSX lub Linux - wymagane GUI :)

Mile widziane, choć nie wymagane, jest przyniesienie własnego sprzętu mobilnego (telefon / tablet), na którym będzie można testować tworzone layouty, efekty - alternatywą jest użycie WebDeveloper tools z Chrome, ale wiąże się to z pewnymi ograniczeniami.

Podczas warsztatu zapewniemy pizzę w porze lunchu oraz nielimitowany dostęp do kawy, herbaty i wody.

PROGRAM WARSZTATU:

1. Tworzenie layoutów.
- stron www,
- aplikacji internetowych,
- aplikacji mobilnych
2. Typowe kontrolki.
- przyciski,
- linki,
- obrazki.
3. Kontrolki zaawansowane.
- elementy formularzy,
- obrazki RWD z zachowaniem proporcji.
4. Preprocesory CSS.
- LESS vs SASS vs SCSS vs Stylus,
- parsowanie SCSS
- NetBeans, Compass, node-sass.
5. SCSS.
- pętle,
- instrukcje warunkowe,
- klasy abstrakcyjne,
- tworzenie mixinów i stosowanie ich,
- extend vs include.
6. Front-end mobile.
- wzorce do stosowania na urządzeniach mobilnych,
- ViewPort,
- obrazki na wyświetlaczach Retina.
7. RWD.
- tworzenie typowych layoutów responsywnych,
- “Mobile first”, a rzeczywistość,
- reguły przyrostowe,
- procentowe definicje,
- automatyzacja RWD z wykorzystaniem SCSS.
8. Flexbox
- tworzenie layoutów dopasowanych do urządzeń mobilnych,
- środkowanie elementów.
9. FastGrid – wirtualny powrót do tabel - utrzymanie centowania elementów.
10. Przegląd frameworków CSS.
11. Resety i Normalizacje.
- frameworki typograficzne,
- pełne frameworki,
- biblioteki do konkretnych zadań,
- zbiory hacków.
12. Wydajność w aplikacjach mobilnych.
- rendering,
- operacje na DOM,
- zasobożerność efektów graficznych.
13. Dobre praktyki.
- wersjonowanie GIT,
- utrzymanie dużych projektów CSS - Sposoby dzielenia plików,
- konwencje nazewnicze,
- definicje bez efektów ubocznych.
14. Przydatne narzędzia.
- IDE (NetBeans, Atom),
- testowanie CSS,
- kompresowanie CSS,
- Live Coding (CodePen),
- Live Reload (GULP / GRUNT /WebPack).

Obowiązkowa rejestracja na warsztat przez formularz na stronie: http://stacja.it/warsztaty/2018-03-09-czy-bootstrap-to%20przezytek-budowanie-wlasnej-biblioteki-komponent%C3%B3w-UI-z-wykorzystaniem-SASSSCSS.html