Okej, wybiła 16:00, mam nadzieję, że mnie słyszycie
To będzie taka druga transmisja na Youtube w moim życiu, proszę o wyrozumiałość
Dzisiaj jak powiedziałem, chciałbym zakodować stronę korzystając z zasad Responsive Web Design
Otóż dostałem od graphic - designera taki oto projekt strony,
zobaczcie że jest wersja na mobile i jest też wersja na desktop,
czyli tak naprawdę na mniejszych urządzeniach powinna wyświetlać się ta wersja graficzna,
natomiast na większych, wyższych - ta
Zanim jednak przejdziemy do bezpośredniej implementacji tego projektu,
chciałbym pokrótce omówić czym to Responsive Web Design jest, czym jest Mobile First itd.
Posłuży mi do tego prosty przykład
Otóż zobaczcie: mam tutaj prostą stronę, jest tutaj zdjęcie i jakiś opis do tego zdjęcia
i to jest dosłownie wszystko co nas interesuje
Zobaczcie - gdybyśmy pisali strony jak do tej pory,
powiedzmy przenieśmy się o 5 lat czy więcej w przeszłość
i spróbujmy napisać tutaj
background: red
Zobaczcie że automatycznie tło całej strony zmieniło się na czerwone,
natomiast gdybyśmy nie mieli tego co sobie tutaj przygotowałem wcześniej, to tło byłoby czerwone dla każdej rozdzielczości strony
Zobaczcie to: przewijam, przewijam, przewijam, przewijam - dla każdej rozdzielczości tło jest czerwone,
a jak dobrze wiemy - używamy różnych urządzeń, używamy komórek, tabletów, komputerów przenośnych do wyświetlania naszych stron,
także jak zapewne już znacie ten koncept - nie wiem - z waszych stron, bądź ze stron które odwiedzacie,
często strony różnią się jeśli chodzi o to co jest wyświetlane
i w zależności od tego na którym urządzeniu uruchamiamy daną stronę
Na komórkach zwykle mamy minimum treści, minimum jakichś wodotrysków, animacji, wszystko jest ułożone jedno pod drugim,
natomiast na desktopie tego jest więcej - więcej boxów i więcej rzeczy ułożonych jest obok siebie itd.
Na przykład taką ikoną jeśli o strony responsywne jest Smashing Magazine
Znajdziecie tutaj różne artykuły, tutoriale, wideo itd. na temat front-endu,
natomiast co jest ciekawe jeśli chodzi o tę stronę to to, ja ona się zmienia w zależności od szerokości wyświetlacza,
zobaczcie że jeśli przesuwam sobie tę stronę, przesuwam sobie okienko i zmieniam jego szerokość na mniejszą,
to wraz z przesuwaniem pewne rzeczy się ukrywają, pewne gdzieś tam się przesuwają aż ...
Zobaczcie że w tym momencie jestem już na takim widoku, który jest zapewne wyświetlany na telefonach,
tutaj już tak naprawdę to menu został zastąpione takim guzikiem menu
i dopiero kliknięcie tego guzika pokazuje nam nasze menu
To jest w zasadzie koncept Responsive Web Design w pigułce, w dosłownie pokazanych kilku sekundach, otóż chodzi o to żeby na każdy z typów urządzeń dostarczyć stronę, która wygląda na takim urządzeniu dobrze
Czyli gdybyśmy chcieli zaimplementować taką oto stronę na komórkach to nie miałoby to sensu, prawda?
Jest tutaj za dużo informacji, natomiast jeśli zobaczymy wersję na komórki,
to taka wersja designu jest o wiele lepsza niż to co pokazałem wcześniej, także na tym polega Responsive Web Design
Zobaczcie to w akcji, jak zrobiono w ogóle, że dla takiej szerokości okna to wygląda tak,
a dla takiej to wygląda tak
Otóż użyto @media-queries i na czym to polega
Zobaczcie że napisałem bardzo prosty selektor to oznacza, że okej - ustaw dla mojej strony tło czerwone,
ale chciałbym aby czerwone tło było tylko dla stron wyświetlonych na urządzeniach mobilnych,
natomiast na tych z większym wyświetlaczem niech będzie to kolor niebieski
i zobaczcie, że ja napisałem coś takiego:
@media (min-width: 640px)
To oznacza że jeśli okienko przeglądarki będzie szerokie na przynajmniej 640px, wtedy te wszystkie style - od tej klamry do tej - zostaną zaaplikowane i będziecie widzieć jej efekt
Czyli jeśli teraz przesuwam sobie to okienko,
zmieniam szerokość - i jest coraz większa - nagle BĘC,
nasza strona ma tło niebieskie i to się dzieje dlatego, że jak na początku powiedziałem,
zrobiłem takie media query i za każdym razem kiedy szerokość naszego wyświetlacza będzie wyższa niż 640px,
te tutaj style zostaną zaaplikowane i będą ważniejsze o 1 stopień, czyli zobaczmy że - jak np. sobie tu zmienię na yellow - no to one będą najbardziej aktualne
Przesuwam z powrotem, jestem na mniejszych wyświetlaczach - jest czerwony
Dobrze też to widać jeżeli chodzi o ten obrazek i tekst do obrazka, otóż zobaczcie - uznajmy, że to jest widok naszej komórki - czyli jak jesteście pewnie przyzwyczajeni, wszystko jest ułożone jedno pod drugim
Natomiast fajnie jest na desktopie jak ten tekst opływałby obrazek,
to można zrobić dzięki takiemu selektorowi, czyli biorę z
.content: img
i ustawiam
float: left - czyli opływaj z lewej,
i zobaczcie że na desktopie nasza skromna strona wygląda w ten sposób,
wygląda troszkę lepiej - wiemy, że jest to tylko przykład bez żadnego designu itd. - natomiast taka będzie jej wersja na większe rozdzielczości,
jeśli pójdziemy w dół to znowu mamy wersję na urządzenia mobilne
Czyli jak chciałem właśnie wyjaśnić jak to się dzieje,
że te rzeczy na tej stronie się ukrywają, zmieniają swoje położenie, wielkość itd.,
to wszystko zostało właśnie zrobione przez media query
Otóż w pewnym momencie powiedziano "Okej, jeśli szerokość będzie większa niż X to pokaż to menu tutaj, jeśli będzie niższa to te style zostaną zaaplikowane"
Także wszystko opiera się na tym,
żeby dobrze napisać te media queries
i użyć do tego jak najmniej kodu, tak aby wszystko stopniowo się pokazywało bądź też ukrywało,
no i dzisiaj postaram się coś takiego zrobić tutaj dla was
i chciałbym zaimplementować oto ten przykład
A to jest prosta scena na którą dostarczył mi grafik,
zobaczcie: przesuwam, wszystko jest jedno pod drugim,
jak otworzyłem projekt w Photoshopie najnowszym i to jest wersja z otwartym menu
a z kolei to jest wersja z zamkniętym,
czyli no dość prosta strona i jest też wersja na desktop,
na desktop ta wersja wygląda w ten oto sposób,
czyli dość podobnie menu zostało domyślnie odkryte,
mamy logo, mamy tytuł tekstu, podtytuł,
dane o autorze, no i sam tekst artykułu rozbity na dwie kolumny,
z kolei tutaj mamy jakiś dodatek, treść poboczną, no i na końcu jest układ kolumnowy
i przy okazji nagłówek, no i pierwsza najważniejsza rzecz - jak zaczynamy implementować taką stronę?
Otóż mamy dwie wersje i często zachodzi pokusa żeby zacząć od tej desktopowej -
wiadomo, pracujemy na desktopie, na laptopie z wielkim wyświetlaczem,
natomiast jest taki koncept jak mobile first - generalnie o co w tym chodzi?
W dużym uproszczeniu o to aby zaczynać implementację jakiejkolwiek strony z myślą o najmniejszych wyświetlaczach,
na których będzie wyświetlana nasza strona internetowa
Czyli w naszym wypadku musimy wziąć ten PSDek dla mobile
i zacząć implementację naszej strony, w tym oczywiście pisząc CSSy od wersji na urządzenia mobilne,
czyli tej tutaj wersji, potem zajmiemy się wersją desktopową,
no i jak na początku to chciałem pokazać, pewnie dla wersji desktopowej użyjemy media query
i powiemy tak "jeśli szerokość jest wyższa niż cośtam, no to przede wszystkim pokaż to menu,
bo domyślnie to menu jest ukryte i zrób parę innych rzeczy jak np. podziel tekst na kolumny
i np. tutaj zrób to menu horyzontalnie ułożone,
a teraz zobaczcie że to menu z footera jest ułożone w ten sposób, każdy element jest pod sobą"
No dobrze więc zajmiemy się wersją na urządzenia mobilne,
ja sobie tu już wcześniej przygotowałem taki wstęp, żeby szybko zacząć
Podzieliłem mój katalog (w którym będę kodował) na 3 foldery:
"css" - tutaj będą wszystkie CSSy, w zasadzie jeden plik main.css,
następnie "img" - tu będą wszystkie obrazki, ja trochę poszedłem na skróty i już sobie uszykowałem kilka,
no i mamy jeszcze folder "js",
wiec tego jest tutaj w zasadzie 3 foldery, jeden plik także niewiele
i zobaczcie że jak sobie włączę tę stronę to nie mamy nic - więc zaczynamy od zera,
a jeszcze słowem wyjaśnienia co zrobiłem wcześniej,
otóż oczywiście wstawiłem te najważniejsze rzeczy które nie mogą umknąć,
czyli tag html, tag head, tytuł - tu jest w moim przypadku "JS.bin", zmieńmy to może na "Artykuł" po prostu,
mam też kodowanie oczywiście "utf-8"
I jeszcze poszedłem na skróty w ten sposób, że zobaczcie taka linijka:
To jest generalnie ładowanie fontu,
otóż designer - w tym projekcie, jak zobaczycie sobie - on użył fonta Open Sans Regular
i między innymi też Open Sans Light itd.,
więc ja postanowiłem tego fonta załadować z takiego dostępnego repozytorium fontów Google'a
i powiedziałem "Okej, chcę Open Sansa w takich i takich wariantach, no i po prostu chcę go załadować i koniec kropka"
W ten sposób nie muszę jakby dbać o to aby mieć takie pliki fontów na swoim serwerze,
czy na swoim dysku - to wszystko zostanie załadowane z internetu - te wszystkie fonty będą dostępne
Oczywiście też wkleiłem main.css żeby z niego korzystać,
no i na końcu taka właściwość
meta name="viewport",
czyli generalnie żebyśmy nie musieli zoomować na urządzeniach mobilnych naszej strony,
żeby wszystko było 1:1 i to by było na tyle
Więc od czego trzeba taki projekt zacząć?
Otóż od HTMLa, nigdy nie zaczynamy od CSSa czy JSa, zawsze zaczynamy od HTMLa
i na czym nam zależy podczas pracy nad takim serwisem?
Otóż zależy nam aby ten HTML był semantyczny,
czyli przede wszystkim żeby używać tagów z głową
i żeby używać tagów HTML zgodnie z ich przeznaczeniem,
czyli np. jeśli ta cała sekcja to pewien nagłówek artykułu,
no to nich to się mieści w headerze
Jeśli np. takie menu jest zaprezentowane w ten sposób, no to wiadomo że to będzie lista linków itd.
Czyli zanim sobie jeszcze pomyślimy co napiszemy,
warto spojrzeć na stronę i podzielić ją na mniejsze części,
na kawałki - popatrzeć i zobaczyć tak: okej, to co to jest? To jest logo strony,
to to jest przycisk hamburger,
otwieramy ukrytą warstwę i tu jest jeszcze menu,
czyli jadąc od góry już wyróżniliśmy trzy elementy: logo, hamburger, który się zmienia (raz jest hamburgerem a raz krzyżykiem do zamknięcia),
lista naszego menu, to też będzie element listy tylko trochę bardziej wyróżniony
Teraz patrzymy - okej to jest tytuł czyli pewnie jakiś nagłówek któregośtam stopnia,
to jest wstęp, artykuł tzw. lead,
no to może być paragraf, znowu kolejna najmniejsza część tj. zdjęcie autora,
nazwa autora, godzina kiedy to zostało opublikowane,
no i całość jeśli byśmy teraz połączyli te najmniejsze rzeczy, które sobie tutaj wyróżniliśmy,
no to te 3 elementy może zostałyby umieszczone w jakiś jeden wielki zbiorczy tag któryby oznaczał,
że to są dane autora, bo to tak naprawdę zdjęcie, nazwa autora i kiedy zostało publikowane,
może być to element związany z informacją o tym artykule, czy o autorze,
także można myśleć aby je połączyć jeśli to oczywiście ma sens
No i idąc tak dalej to wiadomo, mamy tutaj pierwszy paragraf artykułu,
to będzie pewnie jakiś pojedynczy element w HTMLu - proszę mamy sekcję ze zdjęciem i jeszcze jakimś paragrafem do tego zdjęcia,
ona jest tutaj oddzielona tutaj takimi oto przerywnikami i tutaj z kolei mamy kolejny header, kolejny nagłówek,
kolejny paragraf, kolejny paragraf i ta sekcja która jest stopką - czyli całość będzie stopką,
a poszczególne elementy stopki to lista z linkami z menu, no i jakieśtam logo firmy i copyright
Czyli najpierw jak zwykle, zwyczajnie dzieli się stronę na takie pojedyncze elementy
i w ten sposób jadąc od góry pisze się kod,
czyli ja sobie patrzę na tę stronę i mówię "Okej, to jest header,
to jest nagłówek całego artykułu, bo w nim się mieści tytuł, podtytuł, informacje o autorz
i jest jeszcze jakieś takie zdjęcie wstępne, które też zdobi ten artykuł,
więc można powiedzieć że to jest nagłówek artykułu"
Przedtem jest jeszcze menu i logo - no i to jest pytanie - co jest pierwsze?
Generalnie logo i menu,
jeśli jedziemy od góry to to rzeczywiście to logo i menu są pierwsze w strukturze strony,
czyli przechodzimy do edytora i piszemy,
musimy zawrzeć jakoś te dwa elementy
No i to też będzie nagłówek, tak jak ten element cały,
tylko że te rzeczy tutaj są częścią nagłówka artykułu,
a z kolei te dwie rzeczy tutaj są nagłówkiem dla całej strony,
czyli tak naprawdę warto zacząć od całej strony a nie od pojedynczego artykułu najbardziej na zewnątrz, czyli piszemy header i header zamykamy
Okej, to co zaznaczyłem to jest header,
teraz ten header ma w sobie dwie rzeczy, przede wszystkim logo,
które zapewne po kliknięciu przeniesie nas gdzieś,
no i nawigację w taki sposób zaprezentowaną kiedy jest odkryta, czy też w taki sposób kiedy zamknięta
No to zacznijmy od lewej tj. zaimplementujmy logo,
no to jeśli jak powiedziałem to się da klikać to będzie link
i np. uzupełnimy tytuł
Generalnie utarło się że klikanie na tego typu loga itd. z lewego górnego rogu,
wiąże się z tym że przenosi nas do strony głównej,
no to może niech ten link ma taki tytuł i go zamykam
I co jest w środku? No w środku jest jakiś obrazek,
jak na razie zróbmy sobie po prostu placeholder img,
wrócimy do tego później kiedy już przyjdzie nam implementować
No i co jest dalej? Dalej jest ta nawigacja, tak? Dalej jest hamburger,
a jak naciśniemy hamburger (nasz hamburger jest trochę taki niepełny) no to rozwinie się to menu
Czyli generalnie to będzie nawigacja na naszej stronie, prawda?
Te wszystkie elementy sprawiają, że możemy jakoś nawigować - klikamy "Pricing" - przeniesie nas do cennika,
klikamy "About - przeniesie nas do sekcji "O nas" itd.
To jest wszystko nawigacja i do nawigacji został stworzony specjalny tag tj. nav po prostu
Co mamy w navie? W tej naszej całej nawigacji? Otóż nasza nawigacja składa się na ten tutaj przycisk
oraz na menu, czyli tak naprawdę listę linków, po których możemy skakać,
no to zaimplementujmy tę listę
Na razie nie znamy linku, potem ja sobie nieco sprawę ułatwię,
nie będę tego pisał, po prostu skopiuję
Zobaczcie, stworzyłem tę listę, tak?
Mamy "Features", "Pricing", "About" i "Sign up"
Zobaczcie że nie pominąłem za każdym razem title,
to jest ważne żeby wiedzieć w co się klika,
żeby link miał opis
i teraz odświeżam - pojawiło się coś - i teraz jak najadę np. na ten link,
to zobaczę że pojawia się taki opis linku, dokładnie to co sobie tutaj zdefiniowałem
Jeśi napiszę, nie wiem "bla bla" no to - jeszcze muszę zapisać i odświeżyć - no jest "bla bla",
ale nam chodzi o coś bardziej rozsądnego i pomocnego dla użytkownika
I mamy taką listę linków
ale odsyłam znowu do designu,
otóż jest jeszcze ten button,
który jest tym takim niepełnym hamburgerem - zróbmy go - zdefiniujmy też tutaj
 (no i on też coś ma w środku, na razie niech to będzie po prostu hamburger),
zobaczcie że w tym buttonie są po prostu takie dwie linie,
był też znak X, do tego dojdziemy oczywiście gdy będziemy pracować nad aspektem wizualnym w CSSie itd.
To zostawiamy jak jest i też może jakiś tytuł się przyda "Open menu"
Okej, to by było tyle i zobaczcie,
że pojawił się button - dobrze, jedziemy dalej - cały czas zajmujemy się jakby tą warstwą semantyczną,
nie tykamy zupełnie CSSa
Teraz w zasadzie jak zobaczymy co idzie dalej,
to dalej po tych dwóch elementach są szczegóły artykułu,
tu zaczyna się artykuł po prostu, tak?
Mamy artykuł, cały ten box co jest odtąd, scrollujemy sobie na dół to jest artykuł,
i w zasadzie jest to też główna treść naszej strony, bo nic innego oprócz tego artykułu nie ma,
zobaczcie scrollujemy, no i tak naprawdę ta strona jest tylko stworzona dla pojedynczego artykułu,
więc można powiedzieć że zaczynamy teraz główną treść naszej strony, do tego służy tag name,
no i jedziemy, zaczynamy teraz implementację artykułu
czyli piszę  to jest dość łopatologiczne,
no i artykuł jak powiedziałem na wstępie też ma swój nagłówek,
zobaczcie każdy z tych elementów tworzy nagłówek (a przynajmniej tak mi się wydaje), nagłówek artykułu
Jest tytuł, jest podtytuł itd. czyli jedziemy jak zwykle od góry,
patrzymy - okej, mamy tytuł - ale przedtem (jak powiedziałem) te wszystkie rzeczy to nagłówek
I ten nagłówek artykułu piszemy w ten sposób tzn. - okej jest artykuł,
no to teraz jego nagłówkiem jest to co znajdzie się w header,
no i ten nagłówek tworzą właśnie wszystkie tutaj rzeczy
czyli tytuł artykułu biorę sobie,
no i to może być tag h2
Dlaczego h2 a nie h1?
Do tego jeszcze dojdziemy jak zrobimy całą semantykę,
bo powinien oczywiście na stronie wystąpić tag h1,
ale do tego dojdziemy
Na razie go nie ma i to jest dobre pytanie gdzie powinien być
To będzie jakiś lead czy wstęp do artykułu,
znowu możemy zrobić w paragrafie,
tutaj wkleiły mi się jakieś rzeczy z Photoshopa, nie zwracajcie na to uwagi
I co?
I jeszcze te wszystkie rzeczy związane z autorem
i w ogóle jakieś takie dane, metadane,
no to można powiedzieć że to będzie jakiś div,
zgrupujmy te wszystkie 3 rzeczy w jeden div
i w tym divie może być - musi być w zasadzie - zdjęcie,
czyli ja mam takie moje zdjęcie , w folderze
img/author-thumb.jpg
No i zobaczcie tutaj, to jest to i jakaś wiadomość alternatywna na wypadek gdyby się nie załadowało,
no to może w ten sposób
i dalej
Dalej co mamy?
Dalej mamy nazwę autora,
czyli to jestem ja i dalej mamy czas,
datę kiedy ten artykuł powstał,
no i tutaj używamy tagu time, on ma taki atrybut datetime
i tu się ustala właśnie jaką datę on prezentuje
No powiedzmy niech to będzie 2005, październik, 16 października,
no i 25 hours ago na przykład
I to by było już na tyle jeżeli chodzi o header,
zobaczcie że tutaj nic już nie ma jeżeli chodzi o takie rzeczy nagłówkowe, skończyliśmy z headerem
Tak - jest jeszcze kropka, ale ta kropka nie ma jakiegoś znaczenia,
to zrobiłem w CSSie, no i idziemy dalej,
zaczyna się artykuł, czyli możemy napisać, że no okej,
to jest jakiś div,  a może nawet bez diva zaczniemy
Jest paragraf z tekstem, ja sobie to skopiuję
I to byłby ten pierwszy paragraf,
no i teraz zaczyna się ta sekcja taka oddzielona tymi kreseczkami,
ja uznałem że to autorytarnie będzie jakaś treść niezwiązana, poboczna treść artykułu,
czyli używam aside i np. implementuję przede wszystkim ten obrazek,
do tego służy tag figure,
no i teraz img src jakiś tam obrazek
Czego ja użyłem u siebie? U siebie użyłem czegoś takiego, skopiuję po prostu
I alt, to jest ogólnie las
alt="Forest are great in the autumn"
I teraz jeszcze podpis
Picture 1 description
Okej i jeszcze zobaczcie, tutaj są 3 paragrafy tekstu, kopiuję to
No i zobaczcie, że to się pojawiło, jest nasze piękne zdjęcie,
jedziemy niżej, kończy się ta sekcja aside
i dochodzimy do ostatnich paragrafów,
czyli np. wow, nie mogę tego jeszcze skopiować, jeszcze nagłówek
Jako że tytuł jest h2, no to już każda kolejna podsekcja będzie miała h3,
bo ten nagłówek jest zależny od tytułu artykułu i jakby ma stopień h3
Gdybyśmy mieli cokolwiek na tym samym poziomie co tytuł artykułu to oczywiście użylibyśmy h2,
natomiast to jest podtytuł tytułu, no i teraz mamy h3, i kopiujemy nasze paragrafy
Dobra, patrzymy na design co jeszcze?
Skończyła się sekcja, skończył się artykuł - czas na stopkę
Stopka jest zaznaczona kolorem itd., tutaj ma menu zupełnie podobne jak na górze
No to jedziemy
Do stopki jakby używamy footer,
natomiast warto tutaj też tutaj zauważyć, że wyjeżdżam poza main,
to już nie jest główna treść strony, to jest jakby stopka całej strony,
więc artykuł tutaj pełni tutaj główną rolę,
więc musimy zdefiniować footer za mainem,
no i podobnie mamy tą samą listę,
więc sobie skopiuję tutaj,
no i jeszcze logo, tu też zrobię placeholder na razie, no i copyrighty
Zobaczcie, że tak wygląda czysta zupełnie strona bez żadnych CSSów, bez JSa
i to jest mniej więcej to co czytają jakby wyszukiwarki,
które oczywiście są coraz lepsze, ale generalnie wyszukiwarki np. internetowe rozpatrują to co jest napisane na naszej stronie,
a nie to jak coś wygląda, więc to jest jakby wersja jaką widzą wyszukiwarki,
to jest też wersja, którą widzą niektóre czytniki itd., więc warto postarać się żeby ten HTML był semantyczny
Ja na razie specjalnie ominąłem zagadnienia związane z dostępnością,
chciałbym żeby te rzeczy zostały omówione na końcu dopiero, żeby było widać co zmieniamy i dlaczego
Ale jakby powstała w tym momencie podstawowa wersja HTMLa,
mam nadzieję, że semantyczna,
być może gdzieś zrobiłem jakiś błąd,
natomiast uważam, że mniej więcej tak to powinno wyglądać ze względu na przeznaczenie tego tekstu,
który tutaj mamy i tych wszystkich elementów
No i w tym momencie fajnie byłoby zacząć pisać chyba CSSa
Jeszcze zobaczę czy transmisja jakby hula,
okej mamy już 65 widzów - cześć
Są jakieś komentarze
Także witam jeszcze raz wszystkich, dzięki, że oglądacie ten stream, no dobrze - zaczniemy pisać CSSa
Ja mam main.css zupełnie pusty, zupełnie nic tu nie napisałem wcześniej,
więc tak i tak w gwoli ścisłości - ja nie chcę używać żadnych zewnętrznych frameworków,
żadnego bootstrapa, żadnych resetów, normalize'ów itd.
Chcę po prostu napisać to od zera,
jakbym nie wiedział o całym bożym świecie i po prostu pisał coś samemu,
i chcę jakby przez ten proces przejść
Taką pierwszą rzeczą, którą się robi, to oczywiście reset jakichkolwiek marginesów itd.,
więc margin: 0, padding: 0,
zobaczcie, że strona teraz się przykleiła do lewej krawędzi
Czy jeszcze coś muszę tutaj zrobić z takich rzeczy?
No oczywiście, że muszę, przede wszystkim fonty, tak?
Co zrobić z fontami i jakie w ogóle wartości użyć itd?
Ja tu nie będę wszystkiego też mierzył, bo zmierzyłem to wcześniej,
natomiast jeśli chcecie w Photoshopie coś zmierzyć itd., jak tekst wygląda, jakie są właściwości tekstu,
no to tutaj w zakładce typografia macie różne wartości - linia tekstu, interlinia itd., wielkość, typ i wariant itd., kolor - więc wszystkie te informacje są tutaj zawarte
No i zobaczcie, że używamy Open Sansa,
ja też go załadowałem wcześniej, więc dla body jeszcze napiszę przede wszystkim,
że tak używamy Open Sansa, domyślny kolor tj. #3747F, tj. ten kolor tego tekstu tutaj
To można też sobie tutaj zobaczyć, o
Więc to jest kolor, no i też font, jaka jest wielkość fonta? No to podstawowa w tym designie tj. 16px,
zobaczcie, że tu mamy 32px, otóż to też jest mała ciekawostka tj. tak naprawdę 16px,
ponieważ design został projektowany na wyświetlaczu Retina, gdzie wszystko, każdy fix jest podwójny, tak? Czyli te wartości są 2x większe,
jeśli projektujemy na Retinę, więc generalnie muszę je podzielić, te wszystkie tutaj rzeczy na 2,
jak na normalny screen, więc tutaj będzie to 16px,
natomiast jeszcze taka ciekawostka - chciałem użyć remów tutaj,
bo oczywiście możemy użyć pikseli, możemy użyć emów, możemy użyć nawet takiej wartości (vh),
związanych z wielkością V-portu, wysokością w tym wypadku,
natomiast ja chciałem użyć remów i np. 16px w remach byłoby wyrażone w ten sposób,
natomiast musimy zrobić jeszcze jedną rzecz, otóż trzeba napisać dla najwyższego elementu roota tzw. html,
że font-size: 62.5% i wtedy jakby taki zapis,
dzięki odpowiednim proporcjom - o tym jak to działa można przeczytać w jakichś artykułach - natomiast dzięki takiemu ustawieniu
1.6 remów to tak naprawdę 16px, jakbyśmy chcieli 20px to zrobimy 2 remy
No i m.in. w zasadzie na tym to polega
i to się przydaje np. jeśli chcielibyśmy dla jakiegoś wyświetlacza - albo w zasadzie urządzenia - które wyświetla naszą stronę,
jakby powiększyć wszystkie fonty to nie chodzimy (gdybyśmy mieli tutaj mnóstwo selektorów) i nie zmieniamy każdego elementu osobno,
tylko po prostu możemy zmienić ten główny font-size u źródła - u html - i wtedy wszystkie elementy nam się dostosują odpowiednio proporcjonalnie,
także to jest fajne, ale oczywiście jest też dużo wariantów ustawienia,
dużo wariantów jeśli chodzi o font-size i jednostki
No i ja robię tam coś takiego, no okej
Jest już jakiś tam porządek
I co dalej?
Dalej właśnie wypada zacząć od headera, tak?
Wypada w ogóle jakby pokazać to logo,
zobaczcie, że Functionite nie zostało tutaj pokazane
Jak sobie zrobię w inspektorze, to okej, img jest pusty, tak?
No i tutaj też jest dużo szkół, że tak powiem,
jak to zrobić, bo można napisać tak: img/logo.svg alt=""
i to nam wczyta wtedy logo svg, ale też można podstawić bezpośrednio zamiast img samo svg
i to da nam kilka rzeczy, otóż zobaczcie, że domyślnie logo jest białe,
natomiast jak otworzymy menu - logo jest koloru czarnego, to samo dotyczy też hamburgera czy krzyżyka
No i okej, tak się nasuwa na myśl, żeby te dwa różne loga wyciąć z Photoshopa
i je jakoś pokazywać w zależności od tego czy menu jest otwarte czy zamknięte
Ja chcę mieć po prostu jedno logo, które będzie zmieniać kolor, tak?
Zauważcie, to są te same wymiary, te same ...
No to wszystko jest to samo, tylko w zasadzie te dwa loga różnią się kolorem - tylko i wyłącznie
Jakbyśmy zrobili coś takiego to nie zmienimy tego koloru,
generalnie napiszemy, nie wiem: style=color, czy style="fill: red" czy style:"fill: white",
niestety to wtedy nie zadziała, dlatego ja poszedłem,
to też jest taki mój wybór na to ćwiczenie - jak chcę skleić bezpośrednio svg do dokumentu,
no i też sobie skopiuję to z rozwiązania, które już gdzieś tam zrobiłem
No, to jest długie akurat, pewnie da się to jakoś zoptymalizować itd.,
natomiast na potrzebę tego ćwiczenia użyłem czegoś takiego,
zapisuję - jest
Dobra, co dalej?
I zobaczcie teraz, dałem temu svg klasę page-logo,
jak zrobię
.page-logo {
         fill: red;
}
to powinno zadziałać - o, jest czerwone, tak?
Nie muszę mieć kilku wariantów, więc to się przyda na potem
No i co dalej? Okej, mamy tę stronę, no to tak sobie myślę,
to może jeszcze tego hamburgera w takim razie
Jak już jesteśmy przy svg to zobaczcie, że ten hamburger to takie dwie linie, albo krzyżyk
i też użyję tutaj techniki z svg
Niech te rzeczy, oczywiście, że to się da zrobić w CSSie, w kilku innych, po prostu podstawić jako obrazek itd. png np.
Natomiast ja chcę użyć svg do tego,
no i też sobie przygotowałem takie svg wcześniej,
niech to będzie tutaj
I zamiast tego hamburgera zrobię, svg i zobaczcie, mamy tutaj dwa svg:
pierwsze svg tj. tu oznaczyłem już specjalną klasą hamburger icon,
drugi plik svg to jest close-icon, i to jest ten X, to są te dwie linie hamburgerowe,
a to jest z kolei przycisk do zamykania, no i zobaczcie, to się tutaj tak fajnie wyświetliło,
to to jest tyle, no a przy okazji, o coś takiego tu się stało,
jest jakiś szare tło itd., więc możemy zrobić żeby to zniknęło
Chciałbym żeby domyślnie to nie wyglądało, domyślnie tak własnie wygląda button,
on ma jakiś tam szary gradient i obramowanie,
natomiast chciałbym żeby tego nie było,
no i mogę np. wziąć button w CSSie, i mu ustawić jakieś tam rzeczy, żeby inaczej wyglądał,
no to mogę napisać class="hamburger"
Przy okazji jak już się bawimy w klasy to można oznaczyć kilka innych elementów,
to jest nawigacja, to niech ona ma klasę page-nav
i może jeszcze, z kolei tutaj mamy header, to to niech będzie page-header, tak?
Bo to jest nagłówek dla całej strony więc page myślnik header jest rozsądnym wyborem,
tu mamy page-logo,
page-nav,
no całkiem okej
Dobra, czyli chcemy zresetować ten hamburger,
no to możemy napisać
.page-nav .hamburger {
border: 0
background: 0
o - zniknęło - super
Przy okazji zobaczcie jak się to menu wyświetla, no nie tak jak tutaj,
nie tak, zdecydowanie,
no to też zajmiemy się tym menu
To menu jest w page-nav i to jest ulka,
no to jest pytanie czy jeszcze tutaj oznaczać to klasą,
możemy w sumie:

No i teraz
.page-nav .navigation-menu {
list-style: none                          
}
Nie mamy już tych kropek, no i to jest cały czas,
zobaczcie, że to ma wcięcia, czyli te wcięcia jeszcze muszę zresetować,
no i margin, padding, o - jest okej
No dobrze, niech to wszystko jednak jakoś wygląda przyzwoicie,
to może teraz umieśćmy wszystko jeszcze właśnie (powinienem to zrobić na początku) sobie włączyłem widok iPhona 6,
generalnie to się włącza - macie tak domyślnie, prawda? W Google Chromie,
klikacie "Inspect Element", tę ikonkę tutaj z jakimś urządzeniem komórkowym,
wybieracie na jaki chcecie telefon, urządzenie emulować
Jest iPhone 6, no i tak to wygląda na razie na iPhonie 6, no to co? No to fajnie byłoby jakoś zrobić,
aby te rzeczy wyglądały trochę inaczej, więc ja sobie zrobię...
Może logo wypadałoby trochę zmniejszyć i w ogóle zrobić je białe, bo domyślnie jest jakby białe,
no to zrobię:
.page-logo {     
    fill: #FFFFFF
}
To też jest ważne aby trzymać się jakiegoś zapisu,
czyli jeśli można to często jest tak, że standardem w projekcie jest po prostu zapis heksowy z 6 znakami
i jeśli można używać tak, to dobra praktyką taką w zespołach, jest używanie pełnej nazwy, pełnego zapisu,
no i jest teraz białe, nie widać,
może width: 100px,
no dobra ale teraz nam zniknęło to logo, ono cały czas tutaj gdzieś jest,
ale po prostu nie widać go ponieważ mamy tło jakby białe też,
no szybkie sprawdzenie - jest Functionite,
ale chcemy użyć tutaj tego oto zdjęcia,
więc tak żeby się dobrze pracowało, żeby to było tło dla tego tekstu, to może ustawię od razu tło dla całego headera artykułu,
dla tego tutaj, to oznaczmy, jak już stylujemy, że to będzie article, a tu może article-header,
no i teraz możemy napisać 
.article .article-header
no i tutaj to zdjecie, które mam o tutaj właśnie, no to:
background: url (.../img/header-bgr.jpg); no-repeat
BĘC! - Jest coś, tak? Jeszcze niepełne itd.
A zobaczcie, że to tło w ogóle się nie zaczyna od góry itd.
Co by tutaj zrobić, żeby to się tak pojawiało ?
No to może ja jeszcze ustawię kilka własności
W ogóle ono średnio wygląda
background-size: cover,
o, trochę lepiej ale nadal słabo
Ono nadal nie jest tutaj i też ciekaw jestem czemu ono nie jest szerokie na 100%
A, no tak, wypchnął to
Zobaczcie, to zdjęcie spowodowało, że coś tam się rozjechało,
ale to co?
Dobra, okej mamy już mniej więcej header z tłem, trochę słabo to zostało spozycjonowane,
to może background-position: 50%,
o, jest ta meduza na środku i teraz trafmy, żeby to w ogóle zaczynało się odtąd dotąd, tak?
Dlaczego to spadło tutaj na dół? Bo na początku mamy header całej strony,
on jest tutaj, po prostu idzie razem z flow strony
i najpierw jest header, który zajmuje (tutaj zobaczcie) 151px wysokości,
odtąd dotąd,
a potem jest jakby cała reszta
To się  robi tak, że można np. temu headerowi strony zrobić
.page-header {      
position: absolute
}
I zobaczcie, on teraz już inaczej pływa, tak?
Przy okazji gdzieś się pojawia się jeszcze gdzieś cały czas biała przestrzeń, ale tym pewnie się zajmiemy za chwilę
Takie szybkie jeszcze sprawdzenie, to gdzieś pewnie tutaj coś wypycha
Chyba już wiem, jak zobaczycie,
o, ten h2 tutaj powoduje, że mamy jeszcze biały margin,
ale może się nie przejmujmy tym, a może od razu to załatwmy?
Dobra, czyli to jest tytuł artykułu
class"article-title", no i ten margin: 0
Voilà, dobra wszystko coraz lepiej wygląda,
fajnie byłoby gdyby to nam tutaj spadło nieco, żeby nie nachodziło na siebie, tak?
Bo mamy logo i tytuł artykułu nachodzące na siebie, no to ja daje może (co by tu jeszcze zmienić?) tutaj jakiś padding,
ale padding powinien być w tym miejscu, tak?
Bo tu się zaczyna,
okej, article-header,
paddnig-top: 100px,
oczywiście ja tych wartości nie biorę z kapelusza, ja wcześniej tutaj wymierzyłem w Photoshopie itd.,
po prostu nie chcę tego robić na wizji, tu będzie 100
i zobaczcie, że to już tutaj nie nachodzi, jest fajnie,
ale to menu cały czas jest widoczne, no to ja może je ukryję,
page-nav. navigation-menu {
   display: none                        
}
domyślnie jest tak ukryte
O, jest okej,
przy okazji zobaczcie, że wszystko tutaj jest przylepione do krawędzi,
więc trochę też odbijmy, jak tutaj zobaczcie,
tu i tu, więc musimy ustawić odpowiedni padding dla headera,
headera w tym wypadku całej strony, czyli tutaj
To może być np. tj. 20px,
no i z góry jest bodaj 28px,
o - wygląda to już lepiej
Wypadałoby też tę część tego hamburgera wrzucić w prawo itd.,
więc oprócz tych właściwości, to musi być wypozycjonowane absolutnie
i ustawione np. w prawo 20px,
oj nie bardzo, nie bardzo
Teraz jest pytanie, dlaczego to się ustawiło tylko tutaj?
Zobaczcie, to ma taką szerokość, chyba dlatego,
tj. 140px, to był width:100%, o coś lepiej, dobra,
czyli temu elementowi brakuje szerokości, jest minimalnie lepiej,
ale trochę nam wyszło poza obszar Dlaczego tak wyszło?
Zobaczcie że daliśmy width:100%, ale też padding: 20px,
czyli tak naprawdę całowita szerokość tego page-headera tj. 100% viewportu
plus jeszcze 20px paddingu z lewej i jeszcze 20px paddingu z prawej
Żeby w stu procentach mieścił się też ten padding, trzeba użyć tej właściwości na którą pewnie wszyscy czekali: box-sizing
I w tym momencie już ten padding został zaaplikowany i się składa na całą szerokość headera
Co tu jeszcze wypadałoby nam...
Do góry może jakoś to wyrzucić?
O, no i jeszcze ten hamburger powinien być...
O, teraz jest biały
No i przede wszystkim domyślnie jest jakby X ukryty, tak?
No to spróbuję też go ukryć i zobaczcie czym jest ten X,
X jest to close-icon i on jest w hamburgerze, no to piszemy,
okej zacznijmy od page-nav, hamburger i close-icon
Czyli teraz dobraliśmy się do tego tutaj elementu i ukryjmy go,
okej, jest o wiele lepiej
Przy okazji ten hamburger jeszcze wygląda słabo,
zróbmy z nim coś, bo jest o wiele większy niż tutaj,
ja też zmierzyłem wcześniej wartości i powiedzmy, że to będzie hamburger-icon, width: 18px, height: 6px
Jest, okej
i to jest wszystko białe,
no i przy okazji też cały hamburger, jeśli chodzi o jego szerokości to też jest już zmierzony,
to będzie kwadrat 30x30px, ten cały tutaj button
W tym momencie to się o wiele lepiej...
O, zobaczcie, jest taki outline,
no tak, cały czas jeszcze ten obrazek nam psuje lot, ale już jest okej,
no to może przy okazji żeby to tak brzydko nie wyglądało to zajmiemy się tym obrazkiem - gdzie jest ten obrazek? Obrazek w asidzie,
powiedzmy, że to jest jakaś tam niezwiązana z artykułem treść, no i i co? I tutaj nie ma klas przede wszystkim, tak?
Czyli to niech będzie article-sidebar i class=article-picture,
no to teraz możemy napisać, że żeby ograniczyć to zdjęcie,
to napiszmy, że w .article-sidebar, znajdź .article-picture, max-width: 100%, to w tym momencie ograniczy,
powinno przynajmniej ograniczyć szerokości itd., ale co tu się stało?
A, no tak, ograniczyliśmy figure,
no i o wiele lepiej, jest obrazek już w swoich, że tak powiem normalnych wymiarach,
nie rozciąga strony, wrócimy do tego potem
O wiele lepiej się już developuje, no i cały czas mamy tego hamburgera,
zobaczcie, że teraz klikanie nic nie daje itd., ale dlaczego nic nie daje?
Bo nie napisaliśmy JSa, ale też zanim napiszemy JSa, warto na chwilę odsłonić, pokazać to navigation menu
To będzie w zasadzie, to się powinno pokazać jak klikniemy tutaj, prawda?
No i na razie to wygląda daleko od tego jak to zdesignował grafik
No nieco inaczej, więc zajmijmy się tym żeby to menu wyglądało okej
To jest tutaj, tu sobie zdefiniowaliśmy jak ma wyglądać,
no i co ja mogę tutaj zrobić?
Przede wszystkim jakiś te liki, niech to ma szerokość 100%, jeszcze display: none,
o - selektor się zapodział, dobra, nie chcemy dwóch selektorów takich samych,
niech to będzie display: none, ale odblokujemy display: none jak zakończymy stylowanie tego wszystkiego
No okej, teraz to wygląda tak,
przydałby się kolor itd.
Czarny, jaki to jest kolor? Czarny, okej
Więc niech linki mają kolor czarny, o, zapisuję w ten sposób,
czyli linki w li menu niech mają kolor czarny,
okej, usuwamy podkreślenie, font 14, font-size: 1.4rem,
okej i one są wyśrodkowane
To może przechodzimy do menu tekst-align: center,
o - wszystko jest na środku, przydałoby się to białe tło, prawda?
Jakby menu powinno być w stanie otwartym, że tak powiem
jakkolwiek to dziwnie to brzmi,
więc przydałoby się np. podjechać tutaj wyżej
i np. ustawić klasę nav-opened, to oznacza, że ten header jest w stanie kiedy nawigacja jest otwarta
i jeśli nawigacja jest otwarta no to..
Jest aktywna - otwarta, wybaczcie
Więc możemy zrobić tak: nav-opened i teraz...
Jeśli te dwie klasy nałożą się na siebie, czyli są w tym samym momencie ustawione,
czyli w ten sposób można zapisać, to niech tło tego całego headera, czyli tej części jak tutaj widzicie będzie białe
background:FFFFFF
O, fajnie - ale zobaczcie, że teraz nam zniknęły te wszystkie ikonki,
to warto też poprawić, czyli dla takiego stanu logo będzie czarne - jest
To samo z tymi rzeczami,
o można to zrobić też tak, chyba to zadziała
.page-header-nav-opened
Czyli jeśli header jest w stanie, to jest jakby stan headera,
czyli nawigacja jest otwarta, to wtedy dla takiego hamburgera też pokoloruj to wszystko czarno,
o tylko, że to nie ma być hamburger tylko X, czyli jeśli nasza nawigacja jest aktywna,
to niech hamburger-icon będzie ukryty - okej
A z kolei niech nasz guzik do zamykania czyli cross-icon będzie widoczny - o, super
Przy okazji, jest trochę za duży, to można też naprawić,
mianowicie tu mam jego definicję, o tutaj
width:14px - o, git jest lepiej
Teraz dokończmy jeszcze stylowanie tych elementów,
Co by tu zrobić? No tak, te tu bordery itd.
to bierzemy ten selektor, tak?
Który weźmie stąd, zacznie od tego elementu,
potem weźmie ten element
i będzie szukał lików - o, tych wszystkich lików
Te liki zobaczcie, że każdy z tych elementów: to jest li, to jest li i to jest li,
one mają border taki szary,
kolor tego borderu to - o, dosłownie to,
czyli 1px, no i trzymajmy się standardu - o, pojawiło się,
no i jeszcze tutaj wypadałoby dostosować te wszystkie odległości
To ja sobie ustawiłem padding-top na 15px, padding-bottom też na 15px - od razu lepiej
Przy okazji warto byłoby zrobić ten tutaj ostatni item,
jakoś tak jak on rzeczywiście ma wyglądać,
to jest jakby znak, że to będzie sign up - jakiś guzik i zróbmy dla niego klasę
To w ogóle można zrobić na dwa sposoby:
otóż można zrobić coś takiego jak - weź liki wszystkie i dla ostatniego czyli last-child - zobaczcie to jest ostatni,
czyli ten sign up - ustaw takie oto obramowanie zielone itd.
Natomiast ten sign up może być w kilku miejscach,
być może ktoś go przesunie nagle tutaj i już ten last-child już nie będzie aktualny,
więc warto chyba jednak dać jakąś specjalną klasę
class=sign-up
I teraz taki sign up li będzie miał kilka ciekawych rzeczy
Przede wszystkim border: 0,
zobaczcie to jest ten z tym bordem - o, nie ma
No i link dla takiego sign upu będzie miał obwódkę itd.
Więc to będzie: 2px solid (i kolor tej obwódki)
#00BAA5 - jest, pojawiło się, świetnie,
ale jeszcze dużo rzeczy do zrobienia
Trzeba zaokrąglić jakoś te rogi tutaj, to się robi:
border-radius: 25px i zobaczmy
Okej, tu już wygląda lepiej, natomiast cały czas te tutaj paddingi są nie ustawione,
ta przestrzeń wokół
To ja już to zmierzyłem itd. i to jest padding-right: 20px,
padding-left też 20px,
no i o, to wygląda lepiej
No i jeszcze tutaj dojrzycie jest trochę większy margin, więc dla tego sign upu można zrobić margin-top: 30px bodaj,
no i teraz trochę zleciało
I to chyba by było na tyle jeśli chodzi o to menu (jeśli chodzi o wygląd oczywiście)
A i jeszcze jedna rzecz - zobaczcie tu jest takie skromny cień w zasadzie jak zobaczycie,
warto byłoby też to jakoś zaimplementować
To się robi box-shadowem, no i ten box-shadow wypadałoby gdzieś tam dodać na cały ten header, tak?
Tutaj o, tu się powinien pojawić box-shadow
No to ja idę do otwartego headera, o tutaj
No i mam tu wcześniej przygotowany tę definicję box-shadowu,
to jest dość skomplikowane
On będzie mniej więcej tak wyglądał,
to jest kolor zapisany, czarny kolor z takim opacity
i tu są jakby własności tego cienia
No i zobaczcie, jest tutaj pewne tło, jakby pod tym całym menu,
ale wypada teraz jeszcze to wszystko w ogóle jakby wprawić w ruch itd.
Jeśli chodzi o box-shadow (a może jeszcze o box-shadow powiem) ja chyba z tego korzystałem,
tutaj można sobie ustawić różne wartości tego naszego cienia itd.
To jest jeden z wielu serwisów jakie są dostępne, można ustawić kolor cienia itd. więc to polecam
No oczywiście trzeba się sugerować tym jak to jest zaimplementowane w Photoshopie
I co jeszcze?
Dobra, a teraz jakbyśmy tu sobie zrobili, usunęli ten stan, że menu jest aktywne - okej, ja sobie zmieniam
O, pojawia się, znika, pojawia się, znika,
czyli na klik tak naprawdę to wszystko zależy od tej klasy, zobaczcie usuwam tę klasę - nie ma menu,
o, zostało coś jeszcze
Zobaczmy o co chodzi
No tak, ten display: none jeszcze musi być ustawiony
Dobra, to już mogę wrócić do - o, jest zakomentowany
Jeszcze muszę usunąć nav-opened,
o, tylko, że teraz na klikaniu nic się nie dzieje,
a zobaczcie w moim przykładzie zaimplementowałem to tak,
że klikam i wszystko się fajnie zmienia, pojawia,
na kliknięcie potrzeba trochę JavaScriptu, więc zróbmy sobie go
Napiszmy tutaj, nie wiem - main.js i wstawmy ten js do dokumentu,
na samym końcu - js/main.js
i też nie używam żadnego jQuery itd.
No i jeśli klikniemy to, to header dostanie dodatkową klasę i wtedy będzie wiadomo, że to jest otwarte
Czyli chcemy obsłużyć kliknięcie w to (to ma klasę hamburger), więc możemy zrobić var hamburger
i teraz szukamy jakby po dokumencie querySelector, no i element z taką klasą nas interesuje i zobaczmy czy znaleźliśmy
Robię consle.log, to mi wypisze tutaj w konsoli - w sumie ogarnę trochę ekran - okej, jest, zobaczcie, mamy to
No to teraz możemy (jeśli ktoś w to kliknie) hamburger.addEventListener,
to jest taka funkcja po prostu w JSie tak jest i koniec
Jeśli ktoś w to kliknie, czyli click, to odpal tę funkcję
i sobie ją tutaj zapisałem, ona jest pusta, nic nie ma w środku,
a tak się funkcje pisze, no i false na końcu, to wtedy np. zrób tak:
pobierz to do czego dodajemy klasę, czyli page-header, weź page-header i dodaj jakąś klasę,
to się robi .classList.add i nasza klasa to było .nav-opened
Sprawdzam - o, pojawiło się,
natomiast jeszcze daleko temu do doskonałości
Zobaczcie co się teraz stało jak kliknąłem, jest klasa .nav-opened dodana,
natomiast to jest cały czas ukryte, ma display: none,
fajnie byłoby to pokazać jakoś, więc robimy kolejny raz nav-opened i teraz navigation-menu
display: block
Jest, ale zobaczcie, że się nic nie...
Tylko raz mogłem kliknąć, nie mogę tego zamknąć
Więc może sobie muszę coś tu zmienić,
tak - no bo zobaczcie, że za każdym kliknięciem dodaję tylko tę klasę,
a jeśli chcę zamknąć menu, no to muszę ją usunąć - zobaczcie, usuwamy tutaj manualnie,
no i zniknęło menu, więc to samo muszę zrobić w JSie
No można to zrobić tak, można zrobić toggle, tak? Toggle to jest taka metoda nav-opened, jeśli jej nie ma na .page-headerze, albo ją usunie jeśli ona już będzie,
czyli to idealnie nam się zgra, zobaczcie:
ciach - ciach,
ciach - ciach,
ciach - ciach,
ciach - ciach,
ciach - ciach
I to jest menu, ja mam taki oto efekt, że to się fajnie pojawia,
może na końcu dodajmy ten efekt, jest już jakby podstawowa wersja zrobiona
Teraz wypada ostylować header artykułu,
no to co, gdzie jest nasz header?
Tu jest nasz header, no i coś tutaj nie gra, bo zobaczcie, w projekcie to wszystko jest koloru białego,
to może przejdźmy do headera i dodajmy biały kolor
Jest lepiej, tu już wszystko jest wycentrowane, dodaję text-align: center - okej
Ta wielkość headera, może to, w sensie tego headera artykułu, wysokość tego generalnie tj. ja ustalę to na 60% viewportu, czyli 60vh
Viewport zobaczcie, że to jest odtąd dotąd to jest viewport i zobaczcie, żegdzieś tak na 60% ucięło
Ale ustawiam height,
a czasem ten content po prostu może być, może być dużo tego, tak?
Tytuł może być długi, podtytuł itd. więc może min-height, niech to się rozciąga samoistnie,
no i teraz się rozciągnęło
Jeszcze z takich ciekawostek, co tutaj moglibyśmy jeszcze zrobić,
no jakiś padding może, bo tutaj, o - jakiś padding jeszcze, w ogóle z prawej strony i z lewej, z dołu
O, teraz jest lepiej - jak na projekcie, ten tytuł z kolei jest fontem Open Sans Regular,
a jak zobaczycie u nas, u nas ten tytuł jest w ogóle jakoś chyba jest - o, dokładnie zobaczcie,
jest font-weight: bold, to nie jest wariant fonta Regular, wiec trzeba ustawić coś, żeby rzeczywiście ten tytuł był normalnej wagi,
żeby nie był wyboldowany
A gdzie mamy ten tytuł? Mamy go tutaj, okej i font-weight się pisze normal i o, jest, już inaczej to wygląda
To zdjęcie może zmieńmy jakoś,
to zdjęcie jest za wysokie, za wielkie po prostu, okej to niech to zdjęcie ma article-author-photo,
no i ustawiam powiedzmy na max-width tego zdjęcia to niech będzie 60px,
border-radius i teraz też ciekawa rzecz, bo zobaczcie, tutaj jest to zaokrąglone
i wcześniej, kilka lat temu jeszcze wiele, więcej niż pewnie 5, nie było border-radiusa i trzeba było po prostu wycinać takie zdjęcie już zaokrąglone,
natomiast piszemy teraz border-radius 50%, no i automatycznie takie zdjęcie się zaokrągla
Jeszcze musimy zrobić, co jeszcze musimy zrobić?
Wielkość tego fonta, tak?
To jest 41px:
82/2=41,
no to font-size: 4,1remów, jest więcej - okej
To jest z kolei 42, to jest to, tylko nie ma klasy, więc class="article-lead",
no i to ma font-size: (tak jak zmierzyliśmy) 2,1remów, jest o wiele lepiej,
też to jest Open Sans Light
Open Sans Light robi się w ten sposób, że ustala się wagę -  font-weight i 300 to jest Light, jeśli dobrze pamiętam,
o, tak, zmieniło się
Menu działa? Działa
Okej, teraz jeszcze to na zielono, że tak powiem,
tj. autor, czyli .article-author-name może , no i tutaj color to będzie taki
Okej, jest nasz autor, na 14px font-size,
tu jest 16px, czyli w font-size: 1,4rem np.,
to samo z timem, czyli klasa nazywa się .article-date, no i też muszę .article-date ostylować,
żeby to miało też font-size: 1,4rem
No i ciach
Zostaje jeszcze ta kropka i to jest też ciekawe, bo no to jest dobre pytanie jak to osylować, tak?
Generalnie to występuje po artykule, tfu, po autorze artykułu
i to można zrobić w CSSie fajnie, wziąć tego autora i po nim, że tak powiem wygenerować tę kropkę, w CSSie zupełnie
i to jest, to się zapisuje w ten sposób
Wcześniej oczywiście znalazłem ten zapis, więc nie pisze tutaj z pamięci, to się robi tak
To będzie znaczyło, że to jest zapis takiej właśnie kropki
Zobaczcie - pojawiła się, ale ona się powinna pojawić tutaj na dole,
więc można zrobić display: block aby spadła do nowego wiersza - o, jest już tutaj
No i ona nie powinna być zielona, ale biała, o
Jest okej i tutaj by było, no może jeszcze  możemy ją zrobić trochę większą, możemy zrobić font-size: 2rem,
no, jest trochę większa, ale co jest tutaj najważniejsze jeszcze: to wszystko to jest jakoś tak chaotycznie ustawione, prawda?
Te marginesy między sekcjami, one są zupełnie przypadkowo ustawione,
no i ja to chciałbym - zanim się zajmę tym mierzeniem tych marginesów itd., też chciałbym aby to wszystko było flexem,
jakby żeby flex, żeby CSS flexbox zadbał o to jak zostaną te elementy w headerze,
tak w ogóle dla treningu itd., to też da się zrobić żeby te wszystkie tutaj rzeczy były ustawione we flexie
No ja sobie zrobiłem coś takiego, display: flex, no i zobaczcie, to wszystko jest teraz ustawione obok siebie,
ale można zmienić tak jakby orientację flexa no i zrobić flex-direction: column
No i teraz o, teraz wszystko ustawiło się jedno pod drugim
No i co jeszcze fajnie byłoby tu zrobić?
To jak te elementy mają rosnąć, to jak flex ma podzielić przestrzeń tego całego tutaj headera,
ile ma zajmować tytuł, ile ma zajmować podtytuł, ile mają zajmować te elementy,
więc ustawiamy, że niech wszystkie będą proporcjonalnie 1:1, w sensie każdy z tych elementów nie będzie równy,
no i w tym momencie nic się nie zmieniło, jakby tylko daliśmy znać flexowi co by było gdyby jakiś tam element chciał więcej przestrzeni
No i też fajnie byłoby ustawić te wszystkie tutaj, te wszystkie wielkości,
odległości w sensie i to się będzie, no ja tutaj też przygotowałem jakby wcześniej, więc tytuł ma padding-bottom: 24px,
jest taka odległość, z kolei ten lead ma padding-bottom: 44px
O, to już się tutaj fajnie zmieniło, ale jeszcze jest ważna rzecz z tym flexem,
ponieważ cały czas jest ten margines
Tak naprawdę ten margines zmienia, że tak powiem wielkości i odległości, więc ustawmy go na 0 - tutaj i tutaj,
o i teraz mamy odległości paddingiem
Co dalej? Dalej jeszcze musimy zadbać o te tutaj rzeczy - coś tutaj się źle skroiło - article-author też jest jakiś... Ma marginesy,
trzeba je zresetować - o
No i jeszcze tutaj ta odległość jest cały czas ta sama, ja sobie zerkam też na zadanie, które zrobiłem wcześniej,
taka ściągawka, więc wybaczcie, że nie mierzę tutaj tego na żywo itd., bo to zajęłoby pewnie mnóstwo czasu
Tak, zobaczcie, że to zdjęcie jest jeszcze trochę za daleko, w sensie za blisko
No to dajmy margines tego zdjęcia, 25px?
O, jest okej
Co jeszcze możnaby zmienić czy... Sprawdzam, czy header ma wszystkie paddingi itd.
Czy wszystko tutaj jest złożone? A, nie ma border-boxu, czyli zobaczcie, że znowu...
Ja celowo nie dałem tego border-boxu, bo z nim są kontrowersje, że tak powiem
Chcę używać border-boxu, kiedy potrzebuję i tu też będę potrzebował, bo znowu 60 jakby... Inaczej ten padding, ten padding trochę wydłuża mi całą sekcję,
to może dajmy tutaj border-box, box-sizing w sensie - okej i jeszcze sprawdzam, czy wszystko dodałem do headera - wygląda, że tak,
najwyżej jeszcze potem sobie sprawdzimy
Zajrzę na chat, na chacie jakiś off-topik, okej
Więc jedziemy chyba dalej
Menu się otwiera, no dobra,
okej teraz tekst - tekst, no przede wszystkim nie ma tutaj jakichś, jakiegoś odstępu itd. z lewej strony i z prawej
Ja to u siebie załatwiłem też paddingami, jakby to zrobić tutaj?
Aha, to jest nasz paragraf i on powinien mieć - zobaczcie tutaj - z lewej i z prawej jakieś wcięcie,
jakąś wolną przestrzeń, ale nie chcemy jakby pisać takiego ogólnego selektora "Ej, dla każdego paragrafu ustaw jakiś tam padding",
to może ten paragraf, jeszcze włóżmy w taki (na przyszłość jakby tutaj było więcej rzeczy), ustawmy tutaj .article-container
i do tego .article-container ustawmy padding
Jaki to będzie padding? 15px - o, jest
Wielkość fonta, o jeszcze ta odległość stąd,
zobaczcie - tutaj nic nie ma, ciekawe jak się... okej
Paragraf ma margin, to ma padding, no to może niech ten padding z góry będzie 82px, okej
Jedziemy dalej, line-height jeszcze
Tutaj ten... wysokość jest, zobaczcie, jest bardzo duża przestrzeń między liniami,
no i to jest zawsze 52/2 tj. 26px line-heightu,
na to możemy ustawić, że dla article-containera, jest 26 - o, teraz to wygląda lepiej
Możemy też w sumie marginy usunąć na razie, być może tylko z góry, okej
Co jest dalej? Dalej jest taki przerywnik i tu jest też przerywnik,
no to można zrobić różnie, ja to zrobię CSSem np. no i powiem tak, że niech ten, tutaj ten aside ma taki border-top
i też taki border-bottom, czyli wchodzę .article-sidebar, mam tutaj sidebar,
no to może na początku i border-top: 1px solid, okej
Dobra, no i z dołu, jeszcze ta przestrzeń tutaj,
to sobie też zmierzyłem tj. padding-top: 82px,
padding:bottom: 82px,
no i jeszcze margin przy okazji się pojawił: 104px od góry i margin-bottom: 104px z dołu
Zobaczcie, jest już ta przestrzeń, natomiast cały czas nie ma tutaj żadnych paddingów,
ten sam padding, który tutaj ustawiliśmy dla kontenera, warto też ustawić dla sidebara,
no to .article-sidebar, przenieśmy to, zgrupujmy te dwa selektory,
teraz padding dla tych dwóch elementów będzie 15px, okej
Przy okazji nadpisało się coś, to może to przeniosę, o
Spojrzę jeszcze jak to wyglądało u mnie, okej
No i teraz jest jeszcze problem tego, że ta linia jest szeroka na... aż na tyle
Mała ściąga, chcę żeby wszystko wyglądało tak jak wcześniej
Ja tutaj jeszcze, hmm co ja mogę zrobić?
To by była ta cała linia od lewej do prawej, powinno być też trochę w niej, powinno być trochę odstępu,
to może, może zrobię tak,
a, to nie to, to ten aside
No tak, aha, no i to jest idealny też przykład na to dlaczego box-sizing się przydaje ustawiony na globalu,
zapomniałem ustawić box-sizingu i teraz padding rozszerzył mi cały kontener o jeszcze te dodatkowe 15px z każdej strony,
powiedzmy border-box i co bym musiał jeszcze zrobić?
No tak i domyślnie to jest teraz max-width,
a może jeszcze zrobię taki numer: 100% odjąć 30px - o, to będzie najlepsze
Te 30px to po prostu zsumowany padding z lewej i prawej strony, który jest tutaj ustawiony, no i ustalamy żeby szerokość tego całego sidebara była właśnie 100%,
więc 30px to suma i wszystko chce mieć wyśrodkowane, no to piszę: max-width
Tu calc jest bardzo sprytny, jak zobaczymy to jeszcze przy okazji gdzie działa, no działa w  większości przeglądarek od IE10, w IE9,
aha - w dziewiątce też w sumie, oprócz background-position, także ciekawa rzecz
No i co? I margin-auto aby to wycentrować wszystko, jest git
No i to samo muszę też zrobić w zasadzie dla kontenera z pozostałą częścią tekstu,
użyję po prostu np. to się przyda za jakąś chwilkę jak wejdziemy na desktopy,
no okej
Jeszcze paddingi, marginesy paragrafów, powiedzmy 35px
No to tak, article-sidebar p,
article-container p,
margin-bottom: 35px
To oczywiście da się jeszcze zrobić bardziej, że tak powiem rozmyślnie, bo tutaj dubluję jakby sobie logikę,
mógłbym gdzieś tutaj dać np: div class=article-content
i to wszystko wsadzić w..., o
Teraz już mogę napisać article-content p, no i nie trzeba byłoby zmieniać tego selektora raz po raz
Dobra, jeszcze teraz zostało chyba, co jeszcze zostało?
A, to zdjęcie jakoś dziwnie wygląda, co tu się stało?
Aha - figure ma jakiś dziwny margin, gdzie on jest?
Może żeby była kolejność tam, o
Aha, jeszcze tutaj wypada ostylować ten podpis, to będzie ten element,
no to zapiszmy caption i to będzie taki kolor i font będzie italic,
font-style: italic
Oczywiście nie ma tej klasy tutaj i może to wyśrodkować jakoś,
jakby to wyśrodkować? text-align: center
O, jest też jakiś, jakaś przerwa tutaj,
margines 20px, zobaczcie jak to wygląda obecnie
Jest tak, okej - właśnie ta przerwa, zobaczcie, że jak nie ustawię block, to tutaj jest mała przerwa między tym podpisem, a obrazkiem,
to dlatego, że image ma zupełnie inny tryb wyświetlania, całkiem inny display domyślny
i dlatego też ta biała, wolna przestrzeń tj, tak naprawdę gdzieś tam enter czy jakaś spacja napisana bezpośrednio w kodzie w HTML
O, tu jest pewnie ta tutaj, ten biały znak, a może i nie?
Whatever, wypada jednak ustawić może block, ustawię block
Ten moment kiedy się mylisz na żywo...
No i teraz niech ten image ma jakiś tam margin, 20px chyba miał i jest okej
I teraz cały ten figure powinien mieć też 70px margin-bottom i to będzie tyle
No dobra, ja będę trochę skakał szybciej, bo też umówiliśmy się na 2h,
pewnie to się przedłuży jeszcze o jakieś pół godziny z tego co widzę gdzie jesteśmy,
ale będę przyspieszał, no i być może pewne rzeczy ominę, jeśli chodzi o szczegóły itd.,
także tutaj wybaczcie
W sumie już zauważyłem, że coś źle zaimplementowałem, bo ta przestrzeń (tutaj z lewej) jest równa tej tu,
więc dlaczego tu jest więcej paddingu?
Aha, być może coś - o, aha, weźmy sobie ten padding-left
O,  w ten sposób to powinno być zrobione
Czyli jeszcze article-sidebar, zobaczcie muszę tutaj dać padding-left: 0 i padding-right: 0
]No i w tym momencie ten divider, ten border jest okej i też ten padding jest dobrze ustawiony,
jakby aside, sidebar nasz artykułowy nie poszedł bardziej wgłąb, jest stały padding z lewej i prawej - tu i tu
No dobra, to teraz footer
Footer jest tutaj, no to ustawiamy page-footer i class=navigation-menu
No i co? 
.page-footer; class=navigation-menu
i robimy to samo, nie potrzebujemy tych punktów przy każdym z elementów, nie potrzebujemy marginesów, paddingów,
czego jeszcze nie potrzebujemy?
Każdy z tych elementów jest jakby być miał display: block li, bo tutaj na designie, jest to ustawione jeden pod drugim, tak?
Czyli ustawiamy display: block i zobaczcie, że jest,
o, ale już wcześniej
O tak, Boże, domyślnie, oczywiście, że domyślnie to się, ten sposób wyświetla jeden pod drugim
Być może tego display: blocka będziemy używać, potrzebować - zaraz zobaczę
Trzeba by jeszcze to wyśrodkować, może, zobaczcie, że cały content jest wyśrodkowany,
więc niech na cały page-footer będzie text-align: center, czyli tekst, okej
No i teraz muszę tutaj dać ten zielony kolor dla linków
No i oczywiście usuwam podkreślenia i jeszcze może jakiś margines,
bo zobaczcie, one są strasznie ściśnięte: margin-bottom: 35px, o okej
No i przede wszystkim też tło trzeba ustawić, o to właśnie tutaj tło, to będzie to
background-color, o to chyba nie to, okej
To się źle skopiowało, okej
A, ja to ustawiłem do całego menu, a chcę do całego footera, więc przesuwam, o,
no i teraz jest wszystko
Jest jakiś tutaj na dole - aha, zobaczcie ten margin, to jest ta rzecz w designie,
to może class=copyright
No i footer - page-footer.copyright; margin: 0, no i jest okej
No w między czasie jakby ten cały footer ma tutaj paddingi itd. i z dołu, i z góry, też to w między czasie zmierzyłem itd.,
więc 74px, 48px, okej, okej
Kolor, no i wypadałoby znaleźć copyright,
to jest znak copy, o - logo na razie pominę, ponieważ to jest dużo... wklejania tego,
a może po prostu wkleję svg całe
Oczywiście moja metoda jest o tyle słaba, że muszę wklejać takie duże połacie tekstu,
żeby tylko i wyłącznie pokazać logo, natomiast, no można to zrobić też, podlinkować do logo i tyle, jako oddzielnego pliku np.
Zobaczmy, okej - jest białe, no to może dajmy tutaj jakąś klasę, żeby to zrobić na szaro,
to będzie company-logo np.
I teraz .page-footer .company-logo fill i dajmy tutaj ten kolor,
o tak, tylko troszkę za duży width:105 bodaj, okej
No wypadałoby jeszcze zaplanować tę przestrzeń tu tj. 55px, jak to wygląda?
Aha, ostatni ma tyle, no dobrze,
czyli przede wszystkim musimy, nie chcemy, żeby każdy element li miał 35 margin-bottom,
czyli last-child margin: 0, czyli zerujemy dla ostatniego, dla tego - o, teraz jest tutaj bardzo blisko,
no i może cała lista po prostu navigation-menu, niech ma margin-bottom: 55px
O, no i jest jak powinno być
Okej, to jest wersja dla urządzeń mobilnych, zmieściliśmy się w czasie 2h, zastanawiam się czy jeszcze kontynuować dla desktopu
Zobaczmy jak to wygląda w tym momencie dla desktopu
Jeśli macie jakieś preferencje czy kończyć, czy jeszcze kontynuować to, to napiszcie na chacie
Ja w między czasie zobaczę jak to wygląda, okej, okej
Całkiem nieźle, wydaje mi się, że możemy to zrobić jeszcze dzisiaj używając tego czasu, który mamy,
w zasadzie 15 minut powiedzmy
Dobra, ale jeszcze się przyjrzę wersji na mobile, no okej,
jakby proces tworzenia tam nie trwa 2h, także jest to znacznie dłuższy proces,
chciałbym to pokazać na koncepty, tylko na pewno gdzieś się walnąłem i pewne szczegóły jeśli chodzi o wymiarowanie itd.,
jakieś odległości jeszcze są gdzieś do poprawienia, natomiast widzicie już, że jest ten sens zachowany
No to skupmy się teraz na desktop
Zrobiliśmy wersję mobile, czas na desktop
Zobaczmy jak wygląda design na desktop, przede wszystkim na desktopie, jest to menu,
które jest cały czas widoczne, a u nas jest hamburger, więc...
Dobra, więc piszę media-query, czyli chcę coś stworzyć dla szerokości większych niż 40emów
To będzie chyba 640px i dlaczego emy?
Czytałem taki fajny artykuł "em as breakpoints" bodaj Czy to był ten? O, ten, ten Polecam wam przeczytać ten artykuł, dlaczego emy jako breakpointsy,
on wszytko tu wyjaśnia, generalnie chodzi o to, że jak ustawiano na tym portalu piksele, to efekt w pewnym momencie był taki (dla danego breakpointu),
natomiast ustawiano emy, wszystko wyświetlało się w ten sposób, poprawnie
Więc emy ogólnie zależą od wielkości fontu itd., także to tutaj wyszło, że się nie zmieściły te dwa ostatnie itemy
i przez to jakby breakment w pikselach był nieskuteczny, a breakpoint w oparciu o emy, skutecznie pozwoli wyświetlić tutaj menu - to tak w wielkim skrócie
No i co? I przede wszystkim pokażmy to menu, zamiast hamburgera,
w ogóle sprawdzę, czy ten breakpoint działa - background: red, okej
A tutaj, nie, spoko
No to przede wszystkim ukryjmy hamburgera - .page-nav .hamburger, gdzie jest hamburger w ogóle?
O, tutaj, skopiujmy to, no i ukrywamy hamburgera jakby, teraz na wersje desktopowe, na wersje wyświetlaczy większych niż, szerszych niż 640px,
no to idziemy z...
Ukrywam hamburgera - display: none
Okej nie ma hamburgera, ale nie ma też naszego menu, trzeba pokazać to menu
I co możemy zrobić? Możemy zrobić .page-nav .navigation-menu,
no bo to jest to menu, ono ma display: none, o, pokażmy je - display: block
No, ono jest strasznie słabo, że tak powiem pokazane, nie chcemy takiego wyglądu,
chcemy żeby to wyglądało tak, czyli żeby było w jednej linii przede wszystkim
No to bierzemy te wszystkie elementy li i ustawiamy display: inline-block,
oczywiście na ustawienie takich elementów obok siebie jest też multum opcji, pewnie flexbox wszedłby w grę, wybrałem inline-block,
ale może jeszcze na końcu jeszcze zobaczę z flexboxem, whatever
On jest cały czas tutaj, to ja może spróbuję ustawić te page-nav; position: absolute; top: 20px; right: 20px
Okej, poszło gdzieś tutaj, o, cały czas są te bordery, border: 0 - usuwam je, okej
Kolor tego tj. biały, czyli color: white,
margines każdy z tych jest oddalony od siebie, każdy z tych elementów, o tyle,
to będzie więc margin-right: 48px bodaj, o, jest już o wieele lepiej
Co by tu jeszcze dodać? Zobaczmy jak to wygląda, okej,
ten sign up, chyba niepotrzebnie ma margin, tu możemy, no last-childem możemy to złapać,
bo akurat to nie zależy od sign upu, więc margin: 0, okej
O, wyrównało się, fajnie
I co tutaj jest jeszcze, co ciekawego trzeba zrobić? Ta odległość od góry do dołu jest z tego co sprawdzałem, nieco inna,
mam nadzieję, że się nie pomyliłem
Więc to jest 30px, więc ustawiamy, ja też tutaj piszę page-header, żeby zachować jakby kolejność jaką pisałem kod w HTML,
no i page-header to będzie miał padding-top: 30px, no w sumie się nic nie zmieniło,
być może wcześniej ustawiłem?
O, jest 28px, okej, w zasadzie bez sensu, dobra
Może to kwestia szybkiego mierzenia
Co tutaj jeszcze...? O, zobaczcie, że jakkolwiek bym nie rozszerzył tej strony, to jest strasznie tutaj rozciągnięte
Na designie z kolei, ten design, no jest odtąd dotąd, czyli to jest 2040px,
więc szerokość tego designu to na dwa dzielimy, czyli te 2040/2=1020, to projekt jak przypominam dla Retiny,
no i możemy tutaj zrobić max-width takiego headera, niech to będzie 1020, okej
Teraz jednak daliśmy ten limit 1020, zobaczcie, no to jest to, ale to jest wszystko do lewej, więc wypadałoby to wszystko wycentrować:
robię margin: auto, odświeżam i nic się nie dzieje, dlaczego się nic nie dzieje?
Ponieważ page-header, on sobie tutaj ma position: absolute i niestety trzeba jeszcze ustawić mu, że left jest 0 i right: 0,
wtedy tak sprytnie wycentrujemy to
No i zobaczcie, ja to zapiszę to samo tu, no i wszystko jest w miarę okej, teraz czas na content
Zróbmy to samo jakby, sprawmy, żeby to miało 1020px szerokości, a nie było rozciągnięte na całą szerokość okienka,
no to co?
Mamy tutaj takie article-content, możemy np. zrobić max-width też tyle, ciekawe co się stanie
i margin: auto, o - jest wszystko wycentrowane w tym momencie
Kolejna rzecz jaka, czym się różnią te wersje mobile i desktop,
to zobaczcie tutaj na mobile wszystko jest pod sobą, prawda?
Natomiast na desktop są,
jest układ kolumnowy, no i z tym jak zwykle się wiąże ciekawa historia,
bo można to zrobić na trzy sposoby co najmniej, albo i cztery,
albo i więcej, no i ja zaprezentuję dwa
Pierwszy to jest użycie CSS columns, zobaczę na caniuse.com jak to wygląda
Kolumny w CSSie, powstały właśnie do dzielenia tekstu na kolumny, więc zobaczcie, to, wsparcie do tego wygląda dość rozsądnie,
najwyżej trzeba użyć prefiksu, więc może spróbujmy
No bo chcemy ten container, chcemy to wszystko pokazać jako kolumny,
no to zróbmy, że webkit-column-count to są 2, no i jakby nie było webkita, to też...
Pewnie zapomniałem o Mozilli, no oczywiście
O, zobaczcie, że tekst podzielił się na kolumny, to jest super,
tak samo tutaj,
w międzyczasie jeszcze tutaj nam się niestety zapodział ten nagłówek,
no można w tym momencie...
Co można zrobić?
Ten nagłówek nie powinien być włączony jakby w układ kolumnowy, zakładam,
więc ustawienie kolumn CSSu na tym elemencie, na pliku container, no jest takie sobie
Ewentualnie możemy zrobić to... Jakby to można zrobić?
Można to w ten sposób zrobić - h3 przenieść nieco, o
Czy tak, czy nie? Zobaczmy co się stało
Co się tutaj stało?
No article-container ma ten padding, który jeszcze jest z mobilnej wersji, no to przy okazji usuńmy ten padding,
o i teraz to wygląda znacznie lepiej
No i to są kolumny w... jakby używając kolumn CSSowych, ale jeszcze można to inaczej zrobić
Można to zrobić tak, zobaczcie, ja tutaj to zedytuję na gorąco, usuwam te column-count, więc zepsuło nam się
i robię display: flex i voilà, zobaczcie, automatycznie nam ustawiło ten tekst jako w widoku kolumnowym,
więc to jest rzecz, którą trzeba zobaczyć,
czy chcemy używać flexa, czy CSS columns, bo zobaczcie,
jak mamy jeden element, jeden paragraf,
to on się nie ustawi w kolumnę
i to jest wada tego rozwiązania, więc może zostawmy CSS columns na ten moment,
a jakby ktoś chciał jeszcze poeksperymentować z flexem,
to też można ustawić display: flex i już nie trzeba dbać o resztę parametrów,
ustawi to się, że tak powiem w dwie kolumny
No dobra, co my mamy jeszcze tutaj? A, tutaj z kolei ten sidebar ma 680px szerokości, bo oddziela jak zwykle na dwa
Zmierzyłem od linijki do linijki ma 1360px, ale na dwa tj. 680px, no i trzeba by temu asideowi ustawić taką szerokość maksymalną
Jakbym to zrobił? max-width: 680px, o
No i, i coś tutaj się zadziało, także przepiszę to, to media-query dla desktopów i tabletów w sumie,
bo coś ten breakment jest mały,
czyli jeszcze ogarnie tablety przy okazji I to by było article-sidebar, max-width: 680px
Okej i przy okazji zobaczcie tutaj coś się nam zepsuło z tymi marginesami,
to inaczej wygląda w wersji na designie,
co tu się zepsuło? Aha, ten padding mi tutaj zepsuł lot,
no to może go ustawmy - padding-left: 0, padding-right, żeby nie psuł tego górnego, okej
i jeszcze tutaj jakiś cyrk się wydarzył
No i może article-container, niech ma jakiś tam margin-bottom: 40px, no tak 160, margin-bottom: 80px , okej
Aha, no wszystko wydaje się działać, jak na pewno są fakapy do tego, coś na pewno jeszcze trzeba zrobić
Wydaje mi się, że przede wszystkim znowu wchodzi problem tej linii, tego szarego borderu,
ponieważ zobaczcie - na designie jest w ten sposób
Co tu mogło się stać? No może, możemy to zrobić, zrobiliśmy max-width tyle, jakbyśmy ściągnęli max-width, to, nadal jest coś nie tak, aha,
jest jakiś margin, margin: 0
Zobaczcie, że wszystko w porządku, jest równo,
to może padding, jakbyśmy zrobili padding-left: 100px i padding-right: 100px, ano tak
Trzebaby wycentrować całość, a z kolei zostawić szerokość tego całego elementu na 100%,
natomiast wszystko wewnątrz wycentrować
i ustawić 650, 680px,
to może ustawię po prostu tutaj kontener na potrzeby stylowania,
taki szybki strzał - sidebar-content
i wszystko tutaj wsadzę, okej no i sidebar-content miałby, właśnie to co ten element i margin: auto bodaj,
o i jeszcze ten sidebar miał mieć zlikwidowany margin z lewej strony i prawej
No oki, dobra, działa
No okej, trochę, zobaczcie, trochę, o, dlaczego to, już teraz mi się przypomniało dlaczego też postawiłem na flex
Jakby ten header, on jest wycentrowany,
że tak powiem, no nie jest nijak wycentrowany do dołu np.
Zobaczcie, że tutaj jest jakaś przestrzeń od góry do dołu,
od góry do tego tytułu, a ja tak sprytnie chciałem po prostu wszystkie te elementy,
czyli cały header artykułu, wypozycjonować do dołu
Zastanawiam się, czy mi się to uda, czy może nie
Jakby to zrobić, zobaczę to sobie, aha
Wydaje mi się, że tu jeszcze musielibyśmy jakiś padding chyba zmienić, no tak
Ten header jeszcze, no ma skopany nieco padding,
jakbyśmy tutaj zrobili padding,
nie będziemy z flexa jednak korzystać na ten moment,
może kiedy indziej,
żeby zobaczyć jak to się, jak można by jeszcze ułożyć te elementy,
ale jakbyśmy tutaj zrobili w ten sposób padding, o,
to by było znacznie lepiej
No jeszcze trzeba by ułożyć jeszcze te rzeczy tutaj
No dobra, to czyli najpierw ustawiam padding dla headera w artykule, czyli do tego
i to będzie padding-top: 200px i padding-bottom: 92px, okej
Teraz jest mała jakaś nieścisłość, no tak, ten lead jest inny,
ten lead też ma, article-lead ma padding-bottom: 65px na desktopie, o, jest tak
O i ta przestrzeń jest tu troszkę chyba mniejsza,
no ale to już może na następny raz, bo widzę, że jesteśmy już 2h i 20 min na wizji,
dobra, to by było na tyle jeśli chodzi o podstawową wersję tego designu
Jeszcze tutaj dużo trzeba zmienić, ja to mniej więcej zaimplementowałem wcześniej, żeby przećwiczyć i uniknąć jakiejś wtopy,
natomiast... co trzeba zrobić jeszcze? Trzeba zrobić obsługę tego menu, żeby była jakaś animacja, to zrobiłem generalnie na opacity,
ustawiam przezroczystość tego tutaj menu,
tranzycję też ustawiam do całego headera, o, zobaczie tutaj
Robię tranzycję dla tła, dla box-shadow przy okazji,
żeby też ten box-shadow nam nie zostawał i jeszcze parę rzeczy, chyba tutaj robię
No tak, ustawiam opacity, w tym momencie jest jeden jak jest opened,
jak jest zamknięte, to jest to opacity na zero
I trzeba jeszcze ustawić przy okazji pointer-events itd.,
żeby to sie nie..., bo mimo, że ustawiamy opacity na zero to często te elementy,
no po prostu zawsze są klikalne, mimo, że ich nie widać
Tylko display: none tu je tak naprawdę ukrył całkowicie
i nie byłyby klikalne, więc mając opacity: 0, musimy jeszcze tutaj ustawić coś takiego jak pointer-events,
żeby jakiekolwiek zdarzenia myszki nie dotyczyły tego elementu page-nav ul
I przede wszystkim też aria, zobaczcie tutaj dodałem mnóstwo artrybutów: aria-label, expanded, controls itd.
i to jest bardzo ważne, żeby zadbać, jeśli mamy takie rzeczy właśnie, które gdzieś tam się ukrywają, są do kliknięcia przez użytkownika itd.,
jest kilka takich atrybutów, które trzeba użyć i ja się posiłkowałem takim super artykułem, gdzie jest coś takiego jak progressive hamburger
i tutaj zobaczycie całe w sumie wyjaśnienie jak powinno się robić tego typu rzeczy
Być może, będzie to fajny temat na następne nagranie, ale to już pół godziny pewnie,
natomiast dostępność źródła jest bardzo ważna przy takich widgetach,
że tak powiem, które gdzieś tam są interaktywne
Co jeszcze byśmy zrobili?
Tak jeszcze zerkam, to na pewno sprawdzilibyśmy kod,
bo ja pisałem z palca, z pamięci i wg. intuicji,
natomiast ten kod, który mamy,
no pewnie trzeba będzie posprzątać jeszcze, tutaj dużo rzeczy jest do posprzątania,
więc zawsze, po tym takim pierwszym zakodowaniu,
po prostu idzie się przespać i wraca po godzinie drzemki,
i sprawdza po prostu na świeżo, czy coś da się lepiej zrobić, tak? Czy może, nie wiem, za dużo divów?
Ja tutaj widzę, że może to, mógłbym inaczej nazwać tę klasę,
article-container być może, coś takiego jak columns-view,
albo coś sugerujące, że to jest tylko div do stworzenia widoku kolumnowego
Można by też pomyśleć, a przede wszystkim pomyśleć
O czym warto pomyśleć to outline dokumentu, czyli ta semantyka,
do której chciałem wrócić - do h1, zobaczcie, sprawdzam swój outline i chcę coś takiego,
jakby czytnik, wyszukiwarka, czytnik widzi strukturę dokumentu ułożoną w ten sposób,
nie ma nagłówka pierwszego stopnia, jest jakiś untitled section
Okej, jest tytuł naszego artykułu,
znowu jest jakiś untitled section, no i trzeba by te wszystkie nagłówki jakby uzupełnić w ten sposób,
że to wszystko by miało sens, więc np. można już tutaj h1 nazwę,
jakby, nie wiem "Functionite - company website" i to będzie h1,
i zobaczcie, że jak znowu sprawdzę nasz outliner, no to jest już wszystko okej
Następnie jest jakieś kolejne untitled section, to wszystko odnosi się tak naprawdę do tych elementów tzw. sekcjonujących, które użyliśmy, jednym z nich jest nav
Jak dalibyśmy h2 i "Site navigation", to wtedy, o, wtedy widzicie, że już jest wszystko wiadomo, tak?
Na jakie sekcje dzieli się ta strona
Czyli mamy: główny nagłówek, to jest wiadomo Functionite, czyli stona naszej firmy, potem jest navigation, czyli nawigacja, potem jest artykuł,
no i w obrębie artykułu jest jeszcze jedno untitled section, no i to jest sekcja, ta aside, tak?
Ona też powinna mieć tutaj jakiś nagłówek, no tak, powinna mieć h3, bo jest pod h2, w sensie tj. jakiś, jakby to wtrącenie odnosi się do artykułu samego,
ale jest trochę mniej ważne, więc może po prostu "Something about forests", no bo to w sumie jest jakiś tam, są jakieś lasy
No i jak sobie sprawdzimy, o - jest już outline naprawiony, tak? I w ten sposób to się pisze i w ten sposób robi się dobry outline,
ale zobaczcie teraz, jak sobie zobaczycie tę stronę - gdzie ona może być? O, teraz te wszystkie nagłówki, które daliśmy, one są widoczne,
no i teraz trzeba je po prostu ukryć, jakimś display: nonem czy czymś, text-identem żeby one nie były widoczne dla przeglądarek,
które interpretują CSSa dobrze, natomiast wszystkie inne czytniki itd., które z CSSem sobie po prostu nie dadzą rady, biorą HTMLa i wyświetlają po swojemu, one to wtedy zobaczą po prostu,
i to wszystko będzie miało ręce i nogi Jakbyście tę stronę przyłożyli do Kindela, czy czegoś takiego, no to najpierw macie "Functionite - company site" i wszytsko jakby tak pisane w tym layoutcie Kindelowym itd.
No i ja to sobie chyba w tej mojej wersji poukrywałem, no tak, zobaczcie: "Functionite - /h1" , page-title, ukryłem po prostu,
displayem i uzależniłem to od tego czy jest JS, JavaScript w przeglądarce i jeśli jest to zobaczcie, mam taki skrypt, który o tutaj włącza tego JSa na samym końcu, dodaje po prostu klasę JS do body
i jako, że body jest na samej górze, to możemy opisać np. ".js" ukryj coś, co ja tu zrobiłem teraz?
O w ten sposób,: .js. page-title i ukryj, no i w ten sposób dla stony z JSem, jakby te rzeczy się nie włączą
Też to jest sygnał dla projektantów, żeby byli przygotowani na tego typu rzeczy, żeby projektowali strony pod takie sytuacje, gdy strona zostanie wczytana przez jakiś czytnik itd.,
także to jest bardzo, bardzo ważne, bo no musi to też wyglądać na czytniku dobrze i użytkownik nie może być zagubiony, tak?
Bo tego CSSa nie ma, JSa nie ma, więc nawigacja jako taka musi być naprawdę dobrze zrobiona, semantyka itd.
Tak i to by było na tyle, ja tu jeszcze mam taką wtyczkę, która mi zrobi audyt dostępności,
widzę, że jej tutaj nie mam, ciekawe czemu, aaa, nie zainstalowałem jej
To jest coś takiego jak ta wtyczka, instalujecie ją i teraz powinno się coś takiego zadziać
Wchodzicie do Audits i pojawia się nowy punkt Accessibility, odznaczamy to wszystko i klikamy Run
No i zobaczcie, że tutaj jakby mamy testy użyteczności, które gdzieś tam nam zrobił ten plugin, jakieś ostrzeżenia, że warto się zająć kontrastem naszych linków itd.
Jest też problem z focusem, także jest sporo tych rzeczy, które możemy poprawić jeżeli chodzi o dostępność
i na to się tak nie patrzy
Inna rzecz to też stany linków, designer z reguły, to jest dobra reguła, ale niestety nie zawsze jest prawdą
Designer powinien przygotować tak swój design abyśmy mieli na tacy te wszystkie stany buttonów, po kliknięciu przy focusowaniu,
a jeśli button jest aktywny itd., te wszystkie rzeczy, których tutaj nie było, muszą mieć miejsce, czyli np. zdefiniowanie jak wygląda
Zobaczcie, np. tutaj, na Githubie zdefiniowano jak wygląda taki button, po najechaniu kursorem myszki, u nas niestety czegoś takiego nie ma,
więc o to wszystko trzeba też zadbać i dopilnować, żeby to w ten sposób było przygotowane dla was, żebyście nie musieli wymyślać tego typu interakcji użyteczności po swojemu,
bo jakby front-end developer jest od tworzenia kodu, natomiast grafik, designer do projektowania tego typu rzeczy
I to by było chyba na tyle, ciekawe czy jeszcze ktoś mnie słucha
Słucha, o - są jeszcze ludzie
Słuchajcie, może jeśli macie jakieś pytania, to może 5 minut takiej sesji pytań - odpowiedzi,
możecie zadawać te pytania w chacie, czy na komentarzach, nie wiem jak to działa dokładnie
Czy udostępnię gdzieś gotowy projekt z kodem? Myślę, że tak, myślę, że mogę to zrobić, za chwilę wrzucić na Githuba,
a potem po prostu dać linka gdzieś, czy tam na wydarzeniu, czy na grupie "Pierwsze kroki..."
O właśnie, jeszcze à propos grupy
Ciekawe, czy ona jest na Facebooku?
Co jeszcze wam polecam to oczywiście grupę "HTML5 i CSS3 pierwsze kroki"
Polecam wam książkę, jestem niestety na nowym profilu na Chromie, więc niestety nie mam historii, natomiast polecam książkę (jeśli jej nie znacie),
od niej jakby wszystko się zaczęło i tutaj się nauczysz podstaw z naciskiem na semantykę, HTML i CSSa,
natomiast dużo rzeczy takich, o których warto pamiętać, o i polecam tę grupę, jeśli ktoś przyszedł z zewnątrz "HTML5 i CSS3 - pierwsze kroki" Tutaj jest już naprawdę dużo osób i dużo osób zadaje pytania na co dzień
i dostaje fajne odpowiedzi, także zapraszam tę grupę
Patrzę na te pytania, o jest pewne opóźnienie
Czy jestem pewny czy aside jest poprawny semantycznie?
Generalnie - zobaczmy, może popełniłem jakiś błąd
"The  element represents a section of a page that consists of content that is tangentially
related to the content around the aside element, and which could be considered separate from that content"
Generalnie, zobaczcie, że ten design jest strasznie ogólny, teoretycznie to mogłaby być...
Ja po prostu potraktowałem to jako coś niezależnego od artykułu, czy jakąś reklamę, czy jakieś takie wtrącenie zupełnie niezależnie,
natomiast - to mogła być też sekcja, generalnie jeśli to byłoby związane z artykułem, w którym ten aside się znalazł
To więc moglibyśmy użyć section, aside moglibyśmy użyć rzeczywiście jeśli ten cały content, tutaj w środku nie byłby związany z tym co jest tutaj,
więc jakby dobrze - dzięki za czujność, to wymagało wyjaśnienia
No tak, to kwestia interpretacji, więc to akurat mam nadzieję nie byłby duży błąd
Natomiast, no widzicie, tutaj jest wyjaśnienie, możecie zobaczyć jak to wygląda w dokumentacji w W3C
No, generalnie sidebar, tak? Ja to potraktowałem jako sidebar, więc, to jest moja interpretacja
Czytam komentarze,
dobrze, to życzę wam miłego wieczoru, mam nadzieję, że to nie był ostatni raz kiedy nadaję
i że to było dla was ciekawe
Dzisiaj strasznie mnie boli gardło, więc dwie i pół godziny to dla mnie jest niesamowicie heroiczny wysiłek,
więc jeszcze raz dziękuję, że po prostu przyszliście,
obejrzeliście tę transmisję i zobaczymy, przejrzę, z wielką chęcią przejrzę własnie co pisaliście na chacie,
jak to wypadło itd. i zobaczymy, być może już niedługo będzie jakiś kolejny odcinek związany,
albo z tym zadaniem, albo z czymś innym
Także dzięki, miłego wieczoru, na razie
