Cześć! W tym wideo pokażę Ci współczesny responsive web design.

Więc zacznijmy od tego że mamy ustawiony taki oto markup - jest tutaj znacznik meta o nazwie viewport, gdzie ustawiamy domyślną szerokość
viewportu na szerokość naszego urządzenia, no i
początkową skalę na jeden kropka zero.

Tutaj warto też zaznaczyć, aby nie wstawiać w tym miejscu nigdy user-scalable=no, ponieważ jest to bardzo duży problem w kontekście dostępności.

Więc stwórzmy sobie tutaj nasz markup wykorzystamy do tego emmeta, czyli tworzymy diva o klasie container i wewnątrz tego diva będziemy mieli powiedzmy dwanaście boksów.

I teraz po naciśnięciu Taba to nam się ładnie wygenerowało - no
i możemy przejść do stylowania, czyli na klasie box ustawimy może
background na biały no i jakąś początkową wysokość i szerokość, będziemy się bawili tymi właściwościami, tak aby zaprezentować faktycznie responsywność.

No i domyślnie tak jak to jest w html u divy są elementami blokowymi więc zajmują sto procent szerokości danego wiersza pomimo tego że
mają jawnie ustawioną szerokość na sto pikseli i tutaj moglibyśmy zrobić
display na powiedzmy inline block wtedy te elementy były by w jednej linii od siebie - możemy to zrobić tylko na potrzebę prezentacji.

No i faktycznie mamy te elementy już w jednej linii, natomiast no nie jest to współczesny responsive web design. Więc to co możemy zrobić to na naszym kontenerze, czyli tutaj sobie to zapiszemy - na naszym kontenerze stworzymy sobie display grid. No i w przeciwieństwie do na przykład display flex tutaj nie zmienia to nam domyślnie w ogóle renderowania.

Musimy zadeklarować wiersze i kolumny, czyli jeżeli stworzymy sobie grid template row no to możemy tutaj podać liczbę kolumn jeśli wpisaliśmy sobie tutaj na przykład trzy razy jeden fr, fr jest to taka jednostka
która dysponuje dostępną przestrzenią podobne trochę do jednostek
które możecie znać z flexa - natomiast tam nie mamy faktycznie jednostki fr- no ale zamiast pisać to jako trzy osobne kolumny możemy
to zapisać również jako repeat.

I jeżeli chcielibyśmy aby to fr było powtórzone trzy razy no to wpisujemy sobie tutaj trójkę jako pierwszy parametr, no i jeden fr jako drugi więc widzimy że już mamy ładne trzy kolumny i automatyczną ilość wierszy natomiast nie jest to dalej responsive web design więc co możemy zrobić dalej to tutaj zamiast pierwszego parametru trzy możemy dać wartość auto-fit i zmieniając drugi parametr na wartość minmax - jest to taka funkcja która ustawia szerokość czy wysokość elementu - dowolną tak naprawdę wartość elementu między przedziałem pierwszym a drugim.

Czyli jeśli powiedzielibyśmy sobie że nasz box powinien mieć
szerokość od stu pikseli, no do tak wielkiej szerokości jak po prostu się zmieści no to możemy tutaj dać sto pikseli jako tą minimalną
wartość - no i jeden fr jako tą wartość maksymalną.

No i widzimy że w tym momencie gdy zaczniemy sobie to przesuwać, to nam się już ładnie składa tylko że nie mamy tutaj brak odstępów między danymi kartami, czyli moglibyśmy sobie ustawić tutaj po prostu wartość gap - gap jest to po prostu odstęp.

No i jeśli wpiszemy sobie tutaj powiedzmy, dziesięć pikseli no to widzimy że nasz element już ładnie się skaluje - w tym momencie moglibyśmy pozbyć się tej szerokości którą ustawiliśmy tutaj na sztywno i zobaczymy że te elementy, one będą się troszkę rozciągały w zależności od tego
jak dużo miejsca jest dostępne w danym wierszu - gdzie w przypadku tego width'a włączonego, no to mieliśmy takie brzydkie odstępy między
nimi, gdzie nasz grid faktycznie dobrze ustawia te elementy tylko po prostu nasze karty są zahardkodowane na sztywno... w związku z czym możemy się tego pozbyć - no i kolejną istotną kwestią w takim oto podejściu jest to, że warto byłoby pozbyć się tutaj tego heighta ustawionego jawnie przez element i pozwolić naszemu gridowi
definiować jak wysokie powinny być kolejne wiersze.

Czyli moglibyśmy tutaj ustawić grid auto rows i ustawić to powiedzmy na te sto pięćdziesiąt pikseli które ustaliliśmy wcześniej. Jaki jest zysk tego że grid zarządza wysokościami? No taki, że w przypadku kiedy chcielibyśmy aby, powiedzmy drugi wiersz albo trzeci wiersz miały inną szerokość no to możemy to zadeklarować właśnie tutaj.

Ogólnie w tworzeniu różnych komponentów warto jest myśleć o naszych elementach które tworzymy w taki sposób, że dowolny komponent
który umieścimy na naszej stronie będzie dopasowywał się do miejsca w którym jest umieszczony, a to rodzic czyli w naszym przypadku container
będzie definiował jak faktycznie on się będzie wyświetlał.

Tutaj jeszcze tylko zwrócę uwagę że właściwość gap jest oczywiście wspierana w przeglądarkach natomiast Brackets ma po prostu troszkę starszą składnię w związku z czym to gap podkreśla się na czerwono. W przeszłości korzystaliśmy tutaj wartości takie jak grid
gap i generalnie jest to ta sama wartość tylko, że gap działa również
dla flexboxa.

No i co w tym momencie osiągnęliśmy naszym kodem css, jak zobaczymy że zjedziemy do małych breakpointów gdzie już nasze dwie karty nie będą się mieściły, to te elementy będą szersze do
jeden fr ponieważ nie będą mogły już się ścieśnić do
tych stu pikseli - bo gdyby miały być tutaj dwie karty no to one miałyby mniej niż te sto pikseli. W związku z czym funkcjam minmax zwraca nam tutaj jeden fr, a jako że zwraca nam jeden fr czyli całą dostępną przestrzeń no to grid wie że po prostu musi wyświetlić jeden element w rzędzie i mamy bardzo ładny responsive web design bez żadnego media queries.

Możesz zapytać co w takim razie z media queries? Czy dalej musimy korzystać z tej technologii?

I odpowiedź brzmi - jak najbardziej, media queries są dalej potrzebne. Natomiast możemy je wykorzystywać trochę do innych rzeczy niż przeszłości. Więc przejdźmy sobie może do naszego pliku css tutaj quick
edit bracketsa już nam oczywiście umieścił te nasze klasy które stworzyliśmy wcześniej, ale jeśli stworzylibyśmy sobie media queries - media queries piszemy przy pomocy
znaku małpy na początku.

Po angielsku jest to @ rule, to małpa media no i w nawiasach podajemy warunki kiedy dane reguły wewnątrz danego media queries powinny się zaaplikować. Czyli powiedzmy, że na minimalnej szerokości czyli min. width czterysta pikseli.

Oczywiście nie musimy pracować w pikselach możemy używać do tego jednostek względnych jak remy czy emy stworzymy sobie nowe ciało, no i tutaj możemy umieszczać nasze nowe klasy. Czyli powiedzmy że chcielibyśmy aby każdy trzeci box czyli boks nth child i tutaj musimy podać co który element ten selektor powinien zaaplikować swoje style.

Czyli powiedzmy jeżeli damy jeden n to będzie to każdy tak naprawdę element box możemy to sprawdzić przy pomocy background #34b399 i widzimy że wszystkie elementy są zaaplikowane.

Jeżeli zrobimy sobie tutaj dwa n no to co drugi element, trzy n to co trzeci, no i możemy tutaj nawet dodać jakieś inne operacje czyli w naszym przypadku będzie w tym momencie to czwarty element no i oczywiście możemy to modyfikować na różne sposoby no i
fakt że zapisaliśmy to w ten sposób sprawi że ten selektor
zostanie zaaplikowany tylko wtedy kiedy ta wartość zostanie zaaplikowana, czyli w sytuacji kiedy nasze width, czyli nasz viewport
w tym momencie będzie przynajmniej czterystu pikseli.

Jak widzimy tutaj w dimensions ja mam ustawione teraz dziewięćset dwadzieścia dwa szerokości viewportu - jeżeli to zmniejszę poniżej czterystu, no to zobaczymy, że nie ma zupełnie naszego kolorowania.

natomiast oprócz kolorowania można tutaj zrobić
coś bardziej praktycznego, czyli powiedzmy że no zostawimy sobie to w ten sposób taki jaki jest, wrócimy do naszego markupu na chwilę... Zamkniemy nasze quick edity... no i powiedzmy że stworzymy sobie klasę is-large.

Czyli ten element pierwszy czy dowolny inny element chcielibyśmy
aby był większy więc to co możemy zrobić
to zadeklarować sobie tutaj nową klasę is-large i
przy pomocy ponownie css grida możemy ustawić mu szerokość w
kolumnach na, powiedzmy dwa czyli
jak zobaczysz teraz ten element który otrzymał
is-large będzie zajmował szerokość dwóch naszych
boxów.

I w tym momencie mamy ładną już mozaikę... i tutaj widzimy że
mamy też takie puste elementy które oczywiście też możemy za pomocą css grid, naprawić no ale zróbmy sobie też grid row będzie miał span dwa... Tylko musimy dać tutaj średnik.

No i w sytuacji gdy jesteśmy na dużych urządzeniach no to faktycznie
może wyglądać to w porządku chociaż tutaj widzimy że te elementy nam przeskakują - to też możemy sobie zaraz naprawić natomiast na urządzeniach mobilnych, na przykład na telefonach - no to już tutaj
niekoniecznie to wygląda tak dobrze.

Więc to co moglibyśmy zrobić tutaj, no bo jak zobaczymy gdy nasz viewport będzie mieścił tylko i wyłącznie jedną kartę ale dalej is-large dalej będzie zajmował dwie kolumny poprzez span dwa no to widzimy tutaj mamy taki margines brzydki.

Więc to co możemy zrobić to zaaplikować sobie tą klasę tylko i
wyłącznie w sytuacji gdy nasz max-width... czy tak naprawdę możemy użyć min-width - będzie właśnie taki, czyli dopiero w momencie kiedy nasz viewport będzie miał więcej niż czterysta pikseli to to is-large nam wejdzie, ale widzimy, że może w tym momencie nie jest to odpowiednia wartość bo tutaj widzimy jest to czterysta
pikseli, więc może lepiej byłoby stworzyć osobne media query.

Czyli tutaj sobie zduplikować to, wkleić nasz sektor i w momencie
kiedy zobaczymy że faktycznie powinien nadejść czas aby zaaplikować sobie tą klasę, no to wtedy możemy to ustawić no i może być to troszkę sprzeczne z tym co możecie znaleźć w większości tutorialów na temat responsive web design, gdzie mamy na przykład cztery breakpointy
mobile tablet desktop czy extra large i tylko w nich tworzymy nasze break pointy.

Jest to wynikowa tego, że zarządzanie różnymi breakpointami
może być trudne ale sama nazwa wskazuje że breakpoint
jest to punkt w którym coś się psuje w związku z czym
nie ma najmniejszego problemu z tym aby stworzyć sobie tutaj
breakpoint powiedzmy na dwustu trzydziestu jeden... No ciężko też pracować w ten sposób na pikselach, powinniśmy sobie tu zamieścić w różne na przykład css variables, aby wiedzieć jaki jest nasz minimalny threshold - czyli taka wartość na której pracujemy i może na podstawie tych stu pikseli sobie to zbudować biorąc pod uwagę też gap z obydwu stron, czy padding.

No ale powiedzmy że w tym momencie jest to po prostu dwieście dwadzieścia pięć czyli min width to powiedzmy dwieście dwadzieścia sześć żeby to weszło w tym jednym punkcie więcej i jak zobaczymy, faktycznie teraz wygląda to w ten sposób że w momencie kiedy
wchodzimy na breakpoint mobilny nie mamy tutaj tej przestrzeni która była tutaj wcześniej, w sytuacji gdy ustawiliśmy sobie ten is-large tutaj
więc proponuję korzystać z media queries w taki sposób
aby obsługiwać różne edge case, czy skrajne przypadki.

Natomiast sam początkowy layout, samą logikę tego jak nasze elementy powinny się zawijać możecie tworzyć przy pomocy na przykład CSS grida i jak widzimy czterema linijkami jesteśmy w stanie stworzyć taki oto layout który będzie się nam ładnie zwijał niezależnie od szerokości okna
przeglądarki więc to co tutaj jeszcze zaproponuję to ustawienie sobie na naszym kontenerze grid auto flow ustawiony na dense i w tym momencie ta sytuacja gdzie nasze elementy po prostu
się nie mieszczą, ponieważ w naszym sklepie sytuacja
wygląda tak że nasz box pierwszy jest tutaj box drugi jest tutaj,
trzeci tutaj, czwarty tutaj, no i oczywiście kolejne następne
już tutaj tego miejsca nie mogą zająć bo box pierwszy to zabrał.

No to sytuacja jest taka że ten box kolejny is-large nie zmieściłby
nam się w tym miejscu więc to co dense robi - gdy go włączymy, to zobaczymy że on zmienia kolejność renderowania tych elementów czyli jest to taki order z flexboxa.

Ma to swoje implikacje w dostępności i trzeba z tym troszkę uważać, ale jeżeli elementy nie są interaktywne czy jest to po prostu galeria zdjęć,
myślę że nie ma z tym najmniejszego problemu jeżeli jest to tylko kwestia wizualna.

No i zobaczymy że w tym momencie mamy rozjazd tego gdzie spodziewalibyśmy się naszego elementu bo box dwudziesty pierwszy znajduje się tutaj a box dwudziesty drugi, tutaj czyli pomimo tego że box
z linii dwudziestej drugiej jest niżej w markupie no to wyświetla
się jako pierwszy.

Więc tak według mnie może wyglądać współczesny web design, media queries są dalej bardzo przydatnym narzędziem do tworzenia responsywnych stron www natomiast narzędzia takie jak flex box czy css grid załatwiają za nas większość tej ciężkiej pracy którą kiedyś musieliśmy robić, na przykład we własnych implementacjach czy korzystając z bootstrapa.

Tutaj jeszcze poruszę temat mobile first i desktop first. Według mnie zależy to bardzo mocno od przypadku, bo w sytuacji gdy tworzymy na przykład aplikacje desktopowe typu edytory WYSIWYG czyli generatory stron www czy aplikacje do edycji zdjęć niekoniecznie - musimy pracować z mobile first a desktop first będzie miało więcej sensu.

Z mojego punktu widzenia nie ma złego rozwiązania tak długo jak nasz markup pozostaje semantyczny a css odpowiada tylko i wyłącznie za warstwę wizualną.

Warto też pamiętać że koniec końców stronę tworzymy dla
naszych klientów, naszych użytkowników - oczywiście zarządzalność kodem jest też również bardzo ważna, natomiast kolejność tego który viewport zaczynasz stylować według mnie bardzo mocno zależy od po prostu - produktu na którym pracujesz.

‍
Daj znać co sądzisz o tym wideo jeśli chciałbyś dowiedzieć się więcej o
css grid czy flexboxa oczywiście może taki materiał powstać no i jeśli nie subskrybujesz jeszcze kanału koduje serdecznie cię do tego zachęcam.

Trzymaj się i do zobaczenia!