Pierwsza strona w HTML i CSS, część 6: CSS

   Pierwsza strona w HTML i CSS    20 października, 2021  |  0

Po długiej przerwie wracamy do pracy nad prostą responsywną stroną www. Dzisiaj zajmiemy się dodawaniem stylów w arkuszu CSS z uwzględnieniem wyświetlania strony na różnych urządzeniach, tj. telefonach, tabletach i komputerach. W tutorialu jak zwykle wykorzystam przeglądarkę Chrome – na weryfikację w innych narzędziach przyjdzie czas w kolejnej części.

Spis treści

Na początek

Podczas pisania strony będziemy korzystać z makiet znajdujących się w tym miejscu. Plik HTML jest dostępny pod tym linkiem, natomiast gotowy arkusz stylów można znaleźć tutaj. Zdjęcia użyte w projekcie można pobrać klikając w ten odnośnik. Teksty pseudołacińskie pochodzą z generatora Lorem Ipsum.

Nadawanie stylów dokumentu – praktyka

Zwykle stojąc przed zadaniem stworzenia strony internetowej, na etapie stylowania przyjęłabym jakąś konwencję nazewniczą (pewnie BEM 🙂 ) i ponadawałabym klasy dla poszczególnych elementów, a później wykorzystałabym ten klasy do definiowana wyglądu w arkuszu CSS.

Jednak ten minitutorial ma trochę inną funkcję i chciałabym tu raczej skupić się na tym jak krok po kroku odwzorować elementy umieszczone na makiecie, a nie na tym dlaczego klasa nazywa się tak a nie inaczej. Zdecydowałam się więc korzystać ze stylowania po tagach konkretnych elementów (z jednym wyjątkiem). Analogicznie w prawdziwym życiu z pewnością nie oddzieliłabym grubą kreską od siebie budowania struktury HTML od pisania CSS, ale znowu – w tym przypadku jest to uzasadnione celem tej serii.

Rozdzielczości i break-pointy

Podczas projektowania strony uwzględniłam trzy układy graficzne odpowiadające z grubsza trzem typom urządzeń: telefonom, tabletom i komputerom. Korzystając z punktów brzegowych (brak-pointów) dla konkretnych urządzeń proponowanych przez twórców frameworka Bootsrap zdecydowałam się na wykorzystanie trzech pierwszych przedziałów:

  • małe – mniej niż 576 pikseli szerokości
  • średnie – więcej niż 575 pikseli i mniej niż 768 pikseli szerokości
  • duże – więcej niż 767 pikseli szerokości

Stylowanie rozpoczniemy od najmniejszego layoutu zgodnie z zasadą mobile first. Zaczniemy od uruchomienia podglądu w Chrome z otwartymi narzędziami developerskimi i ustawimy rozdzielczość na taką poniżej 576 pikseli szerokości.

Podgląd efektów

W każdej chwili możesz podejrzeć efekty swojej pracy otwierają plik index.html w przeglądarce. Jeżeli nie używasz wtyczki Live Server lub innej analogicznej, to efekt nie będzie się automatycznie aktualizował po Twoich zmianach w kodzie, więc pamiętaj o ręcznym odświeżaniu widoku. Jak skonfigurować wtyczkę i VSC opisałam tutaj.

Wyzwanie

Zanim zaczniesz przepisywać kod mam dla Ciebie propozycję: spróbuj samodzielnie dostosować wygląd strony dla konkretnego break-pointa, a dopiero później popatrz na moją propozycję. Samodzielne dochodzenie do wyników i nauka na własnych błędach jest najlepszym możliwym sposobem przyswajania wiedzy i umiejętności. Dodatkowo w CSS te same efekty wizualne można osiągnąć z reguły na kilka sposobów.

Stylowanie – kroje i kolory pisma

Pierwszą rzeczą, od której możemy zacząć upodabniać stronę do makiety, jest zmiana kroju pisma oraz kolorów liter w tytule strony i tytułach przepisów. Dobrym pomysłem byłoby również dodanie marginesów dla całej strony oddzielających jej zawartość od ramki w przeglądarce. A zatem w pliku styles.css możemy dodać reguły:

body {
    margin: 1rem; /*dodajemy marginesy*/
    font-family: 'Ubuntu', sans-serif;
}

h1 {
    font-family: 'MuseoModerno', cursive;
    text-align: center; /*wysrodkowujemy element*/
    color: red;
}

h2 {
    color: forestgreen;
}

Tak będą wyglądały pierwsze linijki w pliku styles.css. Jednak podglądając teraz zawartość strony w przeglądarce możemy zauważyć, że tekst nie wygląda tak samo jak na makietach, nie zgadza się bowiem krój pisma. Stało się tak dlatego, że nie zakodowaliśmy wprost informacji o tym, jakiej czcionki przeglądarka powinna użyć w pierwszej kolejności przy wyświetlaniu strony. Dlatego na samej górze należy dodać zaimportowane kroje, w moim przypadku z Google Fonts.

@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');

@import url('https://fonts.googleapis.com/css2?family=MuseoModerno:wght@600&family=Ubuntu&display=swap');

W tej chwili litery powinny wyglądać już tak jak na makietach. Możemy teraz pokusić się o dostosowanie wyglądu linków, czyli pomarańczowych pozycji w menu oraz ustawienia w nich kolorowych podkreśleń dostosowanych do koloru liter:

a {
    color: darkorange;
    border-bottom: 1px solid darkorange; /*dodajemy kolorowe podkreslenie linku*/
    text-decoration: none; /*usuwamy domyslne podkreslenie*/
}

Dostosowanie zdjęć

Być może Ciebie tak samo jak mnie irytuje w tym momencie to, w jaki sposób wyświetlanie się zdjęć sztucznie rozciąga szerokość strony. Spróbujmy coś na to zaradzić. Pierwszym krokiem będzie ustawienie szerokości zdjęcia na wartość względną, w moim przypadku będzie to 100% szerokości bloku.

img {
    width: 100%;
}

Jeżeli jednak po dodaniu odpowiedniej reguły do pliku CSS tak jak mi nadal przeszkadzać będą Tobie marginesy po bokach zdjęcia, to zwróć uwagę na to, że element <img> umieszczony jest w elemencie <figure>, który domyślnie może mieć ustawione marginesy. Wyzerujmy zatem marginesy.

Jednocześnie podpis pod zdjęciem powinien być szary oraz wyrównany do prawej strony.

figure {
    margin-left: 0;
    margin-right: 0;
}

figcaption {
    text-align: right;
    color: grey;
}

Najmniejsze urządzenia

Przejdźmy do nadawania stylów bezpośrednio w odniesieniu do makiet dla najmniejszych urządzeń moblilnych.

Dostosowanie nagłówka i stopki

Różnicą pomiędzy makietą a obecnym stanem strony, którą widać na pierwszy rzut oka, jest wygląd nagłówka: menu pod tytułem strony zawiera tzw. bullety czyli oznaczenia punktów na liście (kropki) oraz jest ułożone w pionie zamiast w poziomie. Aby zniwelować te różnice potrzebne będą kolejne reguły CSS, jednak aby te reguły miały zastosowanie jedynie do listy, która znajduje się w nawigacji, zabezpieczmy się przy użyciu selektora nav>ul (więcej informacji o selektorach znajdziesz w moim tekście).

Do pozycjonowania elementów w menu wykorzystamy Flexboxa. O tym czym jest Flexbox i jak zacząć przygodę z jego wykorzystaniem pisałam szerzej w tym wpisie.

nav {
    margin-bottom: 2rem; /*dodajemy margines pod nawigacja*/
}

nav>ul {
    list-style-type: none; /*usuwamy bullety (kropki) na liscie*/
    padding: 0;
    display: flex; /*deklarujemy uzycie flexboxa*/
    justify-content: space-evenly; /*konfigurujemy rozmieszczenie w poziomie w tych samych odleglosciach*/
}

Inaczej i znacznie ciemniej na obecnej stronie wygląda również pozioma linia oddzielająca nagłówek od głównej sekcji strony. Zajmijmy się również tym:

hr {
    border-top: 1px solid lightgrey;
    margin-top: 0;
    margin-bottom: 0;
}

Nadeszła kolej na stopkę. Tutaj znowu należy pamiętać, że poza głównym elementem <footer> znajdującym się bezpośrednio w <body> dokumentu html, swój własny element <footer> posiada każdy element <article>. Aby zatem precyzyjnie nadać style posłużymy się selektorem dziecka:

body>footer {
    text-align: right;
    margin-top: 1rem;
}

W tej chwili zarówno stopka jak i nagłówek powinny mieć wygląd mocno zbliżony do tego umieszczonego na makietach.

Marginesy

Aby całość zgadzała się z makietami należy jeszcze dodać kilka marginesów. Potrzebne są one w elementach <article> oraz <li>. Dodatkowo dopiszemy deklarację do istniejącego w arkuszu stylów selektora odwołującego się do elementu <a>.

a {
    ...
    padding-bottom: 1px;
}

li {
    margin-bottom: 5px;
}

main>article {
    margin-bottom: 2rem;
}

Urządzenia o średniej rozdzielczości

Przyszedł czas na dostosowanie layoutu do tabletów. Podstawową zmianą odróżniającą widok na mniejszych urządzeniach od tych powyżej 575 pikseli szerokości jest układ menu w nagłówku: w większych rozdzielczościach menu powinno układać się po prawej stronie w zgrabnej kolumnie.

Grid

Aby uzyskać ten efekt i jednocześnie nie naruszyć układu dla telefonów skorzystamy z media queries (czym są media queries i jak z nich korzystać dość obszernie pisałam tutaj). Przejdźmy zatem do dodania reguł dla urządzeń dla minimalnej szerokości 576 pikseli oraz maksymalnej szerokości równej 767 pikseli. Aby odpowiednio wypozycjonować elementy względem siebie wykorzystam Grid, który oferuje CSS (więcej o tym narzędziu można poczytać w artykule).

Po pierwsze deklarujemy zastosowanie grida poprzez użycie deklaracji display: grid; w regułach dla selektora <nav>. Następnie za pomocą właściwości grid-template-columns nadajemy odpowiednie procentowe szerokości kolumn (chcę, żeby środkowa kolumna z nazwą strony zajmowała połowę szerokości dokładnie w środku widoku, menu obejmowało 25% po prawej stronie od nazwy, a po lewej stronie 25% ma pozostać puste), dlatego właśnie wartość opiszę jako 25% 50% 25%.

Kolejnym etapem będzie przypisanie konkretnych elementów do grida za pomocą roboczych nazw, jakie nadam im za pomocą właściwości grid-area. Mój nagłówek będzie się nazywał header, menu natomiast nazwę list. Pierwsza kolumna ma pozostać pustą komórką w gridzie, domyślnie więc muszę posłużyć się kropką (.): tak oto grid-template-areas, w którym definiuję szablon siatki uzyska wartość ". header list".

@media (min-width: 576px) and (max-width: 767px) {
    nav {
        display: grid; /* deklarujemy uzycie grida */
        grid-template-columns: 25% 50% 25%; /* ustalamy relatywne szerokosci kolumn */
        grid-template-areas: ". header list"; /* definiujemy szablon grida odwolujac sie do nazw nadanych elementom za pomoca wlasciwosci grid-area (np. header dla h1) */
    }

    h1 {
        grid-area: header; /* nadaje nazwe, ktora wykorzystam w budowie szablonu */
    }

    nav>ul {
        grid-area: list; /* nadaje nazwe, ktora wykorzystam w budowie szablonu */
    }
}

Choć grid może w pierwszej chwili wydawać się lekko skomplikowany, to odrobina wprawy spowoduje, że korzystanie z tego narzędzia nie będzie nastręczało już żadnych trudności 🙂

Flexbox

Choć układ na stronie został zmieniony, nadal elementy menu znajdują się obok siebie. Aby uzyskać efekt kolumny należy nadpisać style dla listy elementów w menu.

W tym celu w tym samym media query musimy dopisać reguły dla selektora nav>ul, które zmieniają orientację Flexboxa z wiersza (domyślna opcja) na kolumnę i wyrównują elementy do prawej strony.

Wielokropek (…) oznacza, że już napisaliśmy w tym miejscu wcześniej jakiś kod.

@media (min-width: 576px) and (max-width: 767px) {
...

nav>ul {
        ...
        text-align: right;
        flex-direction: column; /* zmiana orientacji na kolumne */
    }
}

Marginesy

Na koniec pozostało dodać marginesy aby wszystko się dobrze układało. Znowu będziemy posługiwać się regułami wewnątrz media query.

@media (min-width: 576px) and (max-width: 767px) {
...

nav>ul {
        ...
        margin: auto 0;
    }

body {
        margin: 2rem;
    }
}

Urządzenia o dużej rozdzielczości

W ostatniej części zajmiemy się dostosowaniem layoutu strony internetowej do urządzeń o rozdzielczości większej niż 766 pikseli – desktopów. W tym celu znowu wykorzystamy media queries, ale z innymi parametrami.

Widok dla tzw. desktopu jest najbardziej skomplikowany, ponieważ obejmuje podzielenie widoku na dwie kolumny. W tym celu znowu skorzystamy z dobrodziejstw Grida, jednak aby to zrobić musimy wprowadzić drobną modyfikację pliku index.html, mianowicie elemnty <main> i <aside> umieścić w jednym elemencie nadrzędnym. W tym miejscu znakomicie sprawdzi się element <div>, który sam w sobie nie posiada wartości semantycznej, ale pozwoli na nadanie klasy, którą potem wykorzystamy w arkuszu stylów.

A zatem wnętrze elementu <body> będzie miało obecnie taki kształt (nic poza dodaniem elementu <div class="class"> się nie zmieni w pliku index.html):

...
<body>
  <header>
    ...
  </header>
  <div class="class"> <!-- dodajemy otwarcie elementu -->
    <main>
      ...
    </main>
    <aside>
      ...
    </aside>
  </div> <!-- dodajemy zamkniecie elementu -->
 </body>
...

Do tak przygotowanego pliku index.html możemy dopisywać kolejne style. Zaczynamy od dopisania media query dla rozdzielczości powyżej 766 pikseli i deklarujemy grid razem z szerokościami dla kolumn w elemencie o klasie .class oraz dodajemy odstęp (gutter) przy linii siatki:

@media (min-width: 767px) {
    .class {
        display: grid;
        grid-template-columns: 70% 30%;
        column-gap: 1rem; /* dodajemy odstep przy linii siatki */
    }
}

Być może zastanawia Cię fakt, dlaczego tym razem nie używamy właściwości grid-template-areas. Otóż nie ma takiej potrzeby, ponieważ nie dodajemy pustych lub niezdefiniowanych kolumn, jak to miało miejsce wcześniej. Tym razem wykorzystujemy dwa z dwóch elementów znajdujących się w elemencie <div class="class">.

Następnie dodjemy szarą linię pionową pomiędzy kolumnami oraz wyśrodkowujemy zawartość menu i usuwamy kropki (bullety) przy zawartości sekcji "Ciekawe linki":

@media (min-width: 767px) {
    ...

    aside {
        border-left: 1px solid lightgrey;
        padding-left: 1rem;
        text-align: center;
    }

    aside>article>ul {
        list-style-type: none;
        padding: 0;
    }
}

Mogłoby się wydawać, że nasza praca została zakończona, jednak kiedy przyjrzymy się nagłówkowi szybko okaże się, że menu nie wygląda tak jak powinno.

Przyczyną takiego stanu rzeczy jest to, że formatując menu dla średnich rozdzielczości ograniczyliśmy w media query parametrami zarówno dolną jak i górną granicę zastosowania reguł, tj. @media (min-width: 576px) and (max-width: 767px).

To co należy zrobić w tej sytuacji to wydzielić do osobnego media query te reguły, które mają zastosowanie zarówno dla średnich jak i dużych rozdzielczości, czyli wszystkie poza tymi, które układają menu w pionie i wyrównują jest do prawej strony.

Tak po wyżej opisanych zmianach prezentuje się nowe media query @media (min-width: 576px) oraz to co pozostało z pierwotnej wersji @media (min-width: 576px) and (max-width: 767px).

@media (min-width: 576px) {
    nav {
        display: grid;
        grid-template-columns: 25% 50% 25%;
        grid-template-areas: ". header list";
    }

    nav>ul {
        grid-area: list;
        margin: auto 0;
    }

    h1 {
        grid-area: header;
    }

    body {
        margin: 2rem;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    nav>ul {
        text-align: right;
        flex-direction: column;
    }
}

W tym momencie strona w przeglądarce Chrome powinna prezentować się już tak jak na makietach 🙂 Jeżeli udało Ci się dotrwać ze mną aż tutaj: gratuluję!

Aktualizowanie zdalnego repozytorium

Pozostało już tylko zaktualizować pliki w zdalnym repozytorium. Aby to zrobić należy ponownie wykonać sekwencję kroków, które opisałam i opatrzyłam zrzutami ekranu w tym miejscu. Tutaj przypominajka:

  • git add -A – dodanie wszystkich plików do stage’a
  • git commit -m “message” – tworzenie commita, czyli jednostki zatwierdzania zmian dodanych do stage’a
  • git push -u origin master – wypchnięcie zmian z repozytorium lokalnego do repozytorium zdalnego na branch master

Podsumowanie

To już koniec dostosowywania wyglądu strony do makiet 🙂 mam nadzieję, że pisanie stylów pomoże Ci usystematyzować i przećwiczyć Twoją wiedzę z zakresu CSS.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Serie wpisów

©  2024 devolajf.pl. Built using WordPress and the Mesmerize Theme