Tailwind CSS. Projektowanie stron WWW i podejście utility-first Karczew

Poznaj rewelacyjną nowość na rynku frontendu Framework Tailwind CSS to prawdziwy webmasterski hit ostatniego roku. Wyjątkowym i nowatorskim czyni go przyjęta filozofia pracy. Twórcy frameworka proponują bowiem oryginalne podejście do tworzenia stron i aplikacji internetowych. Zamiast ściśle semantycznego sposobu tworzenia klas CSS Tailwind opiera się na fundamencie zwanym Utility-First. Dzięki temu architekt interfejsu nie marnuje czasu na generowanie wymyślnych nazw opisujących poszczególne elementy, a podchodzi do nich bardziej pragmatycznie - definiuje je w taki sposób, który najlepiej odpowiada rzeczywistości. Ta książka przeznaczona jest przede wszystkim dla początkujących i średniozaawansowanych projektantów stron WWW. Czytelnik znajdzie w niej mnóstwo praktycznych informacji dotyczących frameworka Tailwind. Pozna jego możliwości, mocne i słabe strony. Opanuje rządzące nim zasady oraz dostępne w nim narzędzia. Ich użycia nauczy się w praktyce, ponieważ znaczną część podręcznika zajmuje realizacja konkretnego zadania - autor przeprowadzi Czytelnika przez przygotowanie kompletnego konceptu interfejsu z wykorzystaniem wszystkiego, co oferuje w swoich zasobach Tailwind. Spis treści: Od autora Materiały do książki Dane kontaktowe autora Podziękowania Przedmowa Zawartość książki Tailwind CSS. Projektowanie stron WWW i podejście utility-first Adresaci książki Framework Tailwind CSS Zalety Wady Podsumowanie Co będzie Ci potrzebne? Visual Studio Code Tailwind CSS IntelliSense Node.js Rozdział 1. Krótka historia Tailwinda Rozdział 2. Wsparcie przeglądarek Rozdział 3. Tailwind w teorii Instalacja PostCSS 8 PostCSS 7 Bez PostCSS Używanie źródła z CDN Wady korzystania z prekompilowanego źródła z CDN Tailwind CSS i Next.js Tworzenie nowego projektu Weryfikacja działania Tailwind CSS Podejście utility-first Różnica pomiędzy stylami liniowymi Klasa zawsze oznacza to samo Dostęp do pseudoklas typu :hover lub :focus Możliwość zastosowania Media Queries Generowanie własnych klas dla najczęściej powtarzanych elementów Responsywność Punkty graniczne w responsywności Podejście mobile-first Stany i pseudoklasy Style elementu względem stanu rodzica Tryb ciemny (nocny) Style bazowe Własne style bazowe Wyłączanie domyślnych stylów bazowych Wydzielanie komponentów i ich ponowne wykorzystanie Rozdział 4. Przykłady stron wykorzystujących Tailwind CSS Laravel Eurovision GitHub Copilot Netlify Rozdział 5. Przygotowanie do projektu Tworzenie szablonu startowego za pomocą Flexboksa Struktura szablonu z wykorzystaniem Flexboksa Typografia Przyciski ButtonSuccess ButtonDanger ButtonInfo ButtonPrimary ButtonWarning Podgląd przycisków Elementy formularza Pole tekstowe Lista rozwijana Rozszerzone pole tekstowe Pole zaznaczania wielokrotnego Pole zaznaczania jednorazowego Podgląd elementów formularza Karty Odnośniki do logowania i rejestracji Rozdział 6. Praktyczne projekty budowa panelu administracyjnego aplikacji Założenia Wybrane elementy interfejsu użytkownika Formularz logowania Formularz rejestracji Dwukolumnowy szablon panelu administratora Nawigacja główna Rozwijane menu użytkownika Wyszukiwarka Stopka Kafelki stanu aplikacji Ikona użytkownika Ikona książki Ikona biura Ikona komentarza Zapis na newsletter Wezwanie do działania Call To Action Lista z komentarzami Okno modalne Filtry tła rozmycie Warianty cenowe Ładowanie Tabela Nagłówek tabeli Komórka wiersza z treścią tabeli Pierwszy kontakt z JIT Just-in-Time Uzupełnienie tabeli Paginacja Ikona wstecz Ikona dalej Podgląd paginacji pod tabelą Breadcrumbs Artykuł Alerty Alert zielony sukces Alert czerwony błąd Ikony Alerty w akcji Pytania i odpowiedzi FAQ Formularz kontaktowy Mapa dojazdowa Galeria Kalendarz Rozdział 7. Just-in-Time kompilacja w czasie rzeczywistym Czym jest JIT mode w Tailwind CSS? Możliwości trybu JIT Wszystkie warianty są dostępne Wartości dla atrybutów podajemy (prawie) dokładnie tak, jak wyglądają w rzeczywistości Łączenie wielu wariantów Dostępny modyfikator !important Mnóstwo dostępnych pseudoklas Selektor sąsiada Brak konieczności używania klas .transform, .filter i .backdrop-filter Rozdział 8. Palety kolorów Rozdział 9. Zaawansowana konfiguracja Własne przedziały responsywności (breakpointy) Dodawanie kolejnego, szerszego punktu Dodawanie kolejnego, pośredniego punktu Specjalna klasa dla druku Własne palety kolorów Podmiana startowych kolorów na inne Własna paleta kolorów Rozszerzanie domyślnej palety kolorów Rozszerzenia (pluginy) Oficjalne rozszerzenia Tailwind CSS Rozszerzenie dla typografii Rozszerzenie dla formularzy Rozszerzenie dla skracania tekstu Rozszerzenie dla skracania tekstu Prefiksy klas Tworzenie własnych rozszerzeń Dodawanie wariantów Własne komponenty Rozszerzenia stylów bazowych Podsumowanie Rozdział 10. Przydatne miejsca i narzędzia ułatwiające pracę z Tailwindem Dokumentacja Tailwind CSS Tailwind UI Oficjalny blog Tailwind Twitter @adamwathan Tint Windy Tailwind.pl Rozdział 11. Optymalizacja projektu dla środowiska produkcyjnego Analiza i usuwanie zbędnych klas w kodzie wynikowym Wskazywanie lokalizacji plików do analizy Ręczne wskazywanie klas, które mają być zawsze dołączone Usuwanie nieużywanych animacji Zakończenie O autorze: Michał Kortas jest autorem bloga webroad.pl traktującego o tematach z szeroko pojętej dziedziny technologii webowych. Nieprzerwanie od blisko dziesięciu lat spełnia się zawodowo jako architekt projektów i full-stack web developer. Jest autorem książki Bootstrap. Praktyczne projekty, wydanej nakładem Wydawnictwa Helion.