#138

Czy Bootstrap to przeżytek? – Budowanie własnej biblioteki komponentów UI z wykorzystaniem SASS/SCSS

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ć?

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

Partner:

Sponsorem warsztatu jest firma Metrosoft.

We are changing how information is accessed in the Fund Industry value chain. By combining applicable leading edge technology with our knowledge and creativity, we are simplifying and automating business processes to reduce cost of investing and increase transparency. We are adding value globally.

Metrosoft is a tight-knit group of curious, passionate, and creative professionals. We are open and collaborative. We use our collective industry experience and superior technical expertise to create compelling solutions on the Fundsphere® platform. We question everything.

Żarówka

Czego się nauczysz?

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żdż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.
Grupa

Dla kogo jest ten warsztat?

Warsztaty skierowane są dla osób, które chciałyby poznać możliwości SASSa/SCSSa oraz tworzenia layoutów stron i aplikacji internetowych.
Notatnik

Wymagania wstępne

Od uczestników wymagane jest podstawowe stosowanie HTML i CSS.
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.

Prowadzący

Krzysztof Ścira:

Absolwent AGH - Informatyka Stosowana w Hutnictwie. Prezes Zarządu i front-end developer firmy desi9n.pl tworzącej aplikacje webowe, aplikacje mobilne oraz programowanie dedykowane. Wielokrotny prelegent na konferencjach związanych z programowaniem urządzeń mobilnych i programowaniem front-end. W wolnych chwilach pasjonat boksu olimpijskiego.

Program warsztatów

  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).

Uwaga

W trosce o jakość warsztatów jesteśmy zmuszeni ograniczyć liczbę uczestników. **Kwalifikacja odbywa się na podstawie odpowiedzi udzielonych w formularzu zgłoszeniowym oraz - w dalszym kroku - kolejności zgłoszeń.** Potwierdzenie udziału w warsztatach wraz z instrukcją przygotowania środowiska otrzymasz najpóźniej na 7 dni przed planowaną datą wydarzenia.

Zapisy na wybrany warsztat zostały zakończone.