Responsive Web Design. Nowoczesne strony WWW na przykładach

Spis treści......Page 2
O autorze......Page 8
O recenzentach......Page 10
Zawartość książki......Page 12
Czas na działanie......Page 13
Zrób to sam......Page 14
Piractwo......Page 15
Rozdział 1. Koncepcja RWD......Page 16
Metaznacznik viewport i zapytania medialne CSS3......Page 17
Skalowalne obrazy w elemencie picture......Page 19
Dowiedz się więcej o HTML5 i CSS3......Page 22
Po co używać systemów?......Page 23
Kto używa tych systemów?......Page 25
Przeglądarki internetowe......Page 29
Elastyczne skryptozakładki......Page 30
Krótkie wprowadzenie do preprocesorów CSS......Page 31
LESS......Page 32
Sass, czyli Syntactically Awesome Stylesheets......Page 38
Więcej o preprocesorach CSS......Page 40
Co utworzymy w tej książce?......Page 41
Podsumowanie......Page 42
Rozdział 2. Tworzenie elastycznego portfolio przy użyciu systemu Skeleton......Page 44
Co zawiera Skeleton?......Page 45
Początkowy dokument HTML......Page 46
Skalowalna siatka......Page 47
Zwijanie kontenera......Page 48
Zapytania medialne......Page 49
Style przycisków......Page 50
Style formularzy......Page 51
Ikony Apple’a......Page 52
Jak ma wyglądać budowana strona?......Page 53
Tworzenie dokumentu w systemie Skeleton......Page 55
Czas na działanie — dodawanie nowego pliku CSS......Page 56
Dodawanie własnych fontów......Page 57
Przygotowywanie obrazów......Page 58
Ikony mediów społecznościowych......Page 59
Czas na działanie — sprite’y......Page 60
Ikony kontaktowe......Page 61
Atrybuty danych HTML5......Page 62
Czas na działanie — konstruowanie dokumentu HTML......Page 63
Podsumowanie......Page 68
Rozdział 3. Ulepszanie strony portfolio przy użyciu CSS3......Page 70
Model polowy CSS......Page 71
Własność CSS3 box-sizing......Page 72
Piksele......Page 73
Jednostka em......Page 75
Ustawianie rodziny fontów......Page 77
Czas na działanie — ustawianie rodziny fontów nagłówków......Page 78
Czas na działanie — definiowanie stylów nagłówka......Page 79
Selektor dziecka......Page 80
Selektor przylegającego elementu siostrzanego......Page 81
Ogólny selektor elementu siostrzanego......Page 82
Pseudoklasa CSS3 :nth-child......Page 83
Style miniatur i podpisów......Page 84
Czas na działanie — definiowanie stylów miniatur i podpisów......Page 85
Przekształcenia dwuwymiarowe CSS......Page 89
Funkcja translate()......Page 90
Wartości przejść CSS3......Page 92
Czas na działanie — zmiana obrazu po najechaniu kursorem......Page 93
Filtrująca nawigacja po stronie......Page 96
Czas na działanie — tworzenie filtra portfolio......Page 97
Stopka......Page 98
Czas na działanie — formatowanie stopki......Page 99
Definiowanie stylów dla mniejszych ekranów......Page 104
Czas na działanie — rozmiar obszaru widoku poniżej 960 pikseli......Page 105
Czas na działanie — rozmiar obszaru widoku od 767 do 480 pikseli......Page 106
Czas na działanie — rozmiar obszaru widoku poniżej 480 pikseli......Page 108
Testowanie strony w różnych rozmiarach obszaru widoku......Page 110
Podsumowanie......Page 112
Rozdział 4. Tworzenie strony produktu przy użyciu systemu Bootstrap......Page 114
Czas na działanie — przygotowywanie systemu Bootstrap......Page 115
Przygotowywanie grafik......Page 116
Czas na działanie — instalowanie aplikacji CrunchApp......Page 118
Tworzenie plików LESS......Page 120
Czas na działanie — tworzenie nowego pliku LESS w CrunchAppie......Page 121
Kompilowanie kodu LESS na standardowy CSS......Page 122
Czas na działanie — dodawanie plików LESS do CrunchAppa i kompilowanie ich na CSS......Page 123
Składnia reguły @font-face......Page 124
Formaty fontów dla różnych przeglądarek internetowych......Page 125
Czas na działanie — definiowanie nowego fontu przy użyciu reguły @font-face......Page 126
Siatka systemu Bootstrap......Page 127
Czas na działanie — tworzenie nowego pliku LESS do przechowywania zapytań medialnych CSS3......Page 128
Tworzenie nawigacji w systemie Bootstrap......Page 129
Tworzenie dokumentów HTML......Page 130
Czas na działanie — tworzenie podstawowych dokumentów HTML5......Page 131
Czas na działanie — budowa struktury HTML treści strony głównej......Page 135
Treść strony galerii......Page 139
Czas na działanie — definiowanie struktury treści strony galerii......Page 140
Czas na działanie — definiowanie struktury treści strony kontaktowej......Page 142
Czas na działanie — definiowanie struktury treści strony O nas......Page 146
Czas na działanie — definiowanie struktury treści strony o zasadach korzystania......Page 148
Podsumowanie......Page 149
Rozdział 5. Ulepszanie strony produktu przy użyciu CSS3 i LESS......Page 150
Czas na działanie — definiowanie zmiennych......Page 151
Czas na działanie — definiowanie własnych domieszek LESS......Page 153
Funkcje LESS do modyfikacji kolorów......Page 154
Pojęcie zakresu......Page 155
Czas na działanie — dodawanie ogólnych reguł stylistycznych......Page 156
Pozbywanie się przedrostków firmowych......Page 159
Style przycisków......Page 160
Czas na działanie — zmienianie stylów przycisków systemu Bootstrap......Page 161
Czemu te przyciski są takie duże?......Page 162
Czas na działanie — dodawanie stylów nagłówka witryny......Page 163
Czas na działanie — dodawanie stylów stopki......Page 166
Czas na działanie — formatowanie stylu sekcji powitalnej......Page 169
Sekcja wezwania do działania......Page 170
Sekcja galerii......Page 171
Czas na działanie — definiowanie stylu sekcji galerii......Page 172
Czas na działanie — definiowanie stylu sekcji referencji......Page 173
Czas na działanie — formatowanie stylu pola adresu e-mail......Page 174
Strona galerii......Page 175
Czas na działanie — dostosowywanie stylów tytułu strony......Page 177
Strona kontaktowa......Page 178
Czas na działanie — dostosowywanie stylów strony kontaktowej......Page 180
Strona O nas......Page 181
Zapewnianie dobrego wyglądu strony w różnych urządzeniach......Page 183
Czas na działanie — poprawianie wyglądu strony w oknach o szerokości do 767 pikseli......Page 185
Czas na działanie — poprawianie wyglądu strony w oknach o szerokości do 480 pikseli......Page 189
Usuwanie niepotrzebnych reguł stylistycznych......Page 192
Podsumowanie......Page 194
Rozdział 6. Elastyczna strona firmowa na bazie systemu Foundation......Page 196
Gem Foundation......Page 197
Czas na działanie — instalowanie systemu Foundation i konfiguracja nowego projektu......Page 198
Składnie Sassa i SCSS......Page 199
Czas na działanie — instalowanie edytora Sublime Text i włączanie kolorowania składni SCSS......Page 200
Czas na działanie — tworzenie arkuszy stylów SCSS, aby nie utrudniać obsługi systemu......Page 202
Konfiguracja projektu Compassa......Page 203
Czas na działanie — konfiguracja ścieżki projektu w pliku config.rb......Page 205
Czas na działanie — obserwowanie zmian w arkuszach stylów SCSS......Page 206
Przygotowywanie obrazów......Page 207
Siatka......Page 208
Style interfejsu użytkownika......Page 211
Wtyczka do jQuery Orbit......Page 212
Czas na działanie — modyfikowanie podstawowego dokumentu HTML......Page 213
Czas na działanie — tworzenie treści strony głównej......Page 217
Czas na działanie — budowa struktury HTML strony Usługi......Page 224
Strona z cennikiem......Page 229
Czas na działanie — budowa struktury HTML strony z cennikiem......Page 230
Czas na działanie — budowa struktury HTML strony O nas......Page 235
Czas na działanie — budowa struktury HTML strony kontaktowej......Page 239
Podsumowanie......Page 243
Rozdział 7. Rozszerzanie systemu Foundation......Page 244
Czas na działanie — włączanie monitorowania projektu......Page 245
Wprowadzenie do funkcji kolorów Sassa......Page 246
Czas na działanie — dostosowywanie zmiennych Sassa dotyczących kolorów systemu Foundation......Page 247
Własne rodziny fontów......Page 249
Czas na działanie — dodawanie własnych rodzin fontów przy użyciu domieszki Compassa......Page 250
Czas na działanie — formatowanie sekcji nagłówkowej......Page 253
Wprowadzenie do funkcji pomocniczych Compassa dotyczących sprite’ów......Page 254
Stopka......Page 255
Czas na działanie — formatowanie stylu stopki......Page 256
Wprowadzenie do selektorów strukturalnych CSS3......Page 260
Strona główna......Page 261
Czas na działanie — formatowanie strony głównej......Page 262
Do boju......Page 269
Strona Usługi......Page 271
Czas na działanie — formatowanie strony o usługach......Page 272
Strona z cennikiem......Page 277
Czas na działanie — formatowanie stylu strony z cennikami......Page 278
Czas na działanie — formatowanie stylu stron O nas i Kontakt......Page 281
Czas na działanie — czynności końcowe......Page 283
Testowanie witryny......Page 285
Książki......Page 286
Internet......Page 287
Skorowidz......Page 288