Elastic is fantasic.

by on with Jeden komentarz

Kodując strony www musisz zadbać o ich responsywność… Ok, wszystko fajnie i super, ale co to tak na serio jest i jak (krok po kroku) do tego się zabrać?

Responsive web design

Zacznijmy od początku. Co to jest RWD? To owa elastyczność strony. Dostosowuje się do rozmiaru ekranu. A co najfajniejsze, możemy również wybierać: co pokarze się na komórkach, a co na desktopie. Zasada jednak jest taka, aby zaczynać od mniejszych rozmiarów i rozbudowywać (dostosowywać) treści czy dodatkowe „bajery”.


Responsive web design (RWD) – technika projektowania strony www, tak aby jej wygląd i układ dostosowywał się automatycznie do rozmiaru okna przeglądarki, na której jest wyświetlany np. przeglądarki, smartfonów czy tabletów[1]. Strona tworzona w takiej technice jest uniwersalna i wyświetla się dobrze zarówno na dużych ekranach, jak i na smartfonach czy tabletach.

WikiPedia

Pierwsze kroki

Przede wszystkim w pliku html musimy załączyć odpowiedni link. W części <head> zamieszczamy poniższą <meta>.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Z kolei w pliku css warto wpisać deklarację:

* { box-size: border-box; }

Wtedy rozmiar każdego elementu będzie brał pod uwagę również rozmiar „ramki”, czyli paddingu oraz marginesu. Zdecydowanie ułatwi to pozycjonowanie ich na stronie.

( „*” – symbol gwiazdki odwołuje się do ustawień globalnych)

Mamy kilka dróg, aby usprawnić pracę nad stroną responsywną. Można troszkę się pomęczyć i poznać flexbox, grid-css lub stworzyć własny grid. Do czego w pierwszej kolejności zachęcam, bo warto najpierw poznać zasady i podstawy, by później przejść do Bootstrapa, którym szybciej stworzymy odpowiednią stronę.

Za każdym razem używamy @media i stylujemy do każdego breakpointu. Trzeba pamiętać, że np. duży font na desktopie wygląda dobrze, ale już nie koniecznie na smartfonie. Wymaga to zmiany wielkości przy odpowiedniej rozdzielczości ekranu.

Flexbox

Flexbox to pierwszy ze sposobów na uzyskanie responywnej strony. Polega on na określonych właściwościach CSS. Pozycjonujemy elementy strony, aby w chwili zmiany rozdzielczości zostały użyte odpowiednie wartości.
Istotna właściwość tej metody to display:flex. Włącza opcję flexboxa, a ustawiamy ją na „rodzicu”. Doskonale wyjaśnione jest to w kursie Kodu.je (link na końcu wpisu). Kurs jest króciutki i całkowicie po polsku, jeśli ktoś nie czuje się pewnie w językach obcych. W wersji anglojęzycznej przoduje zdecydowanie Wes Bos (link na końcu wpisu).

Grid

Tu wyróżniamy własny grid lub grid-CSS. Ten pierwszy oparty jest na procentowym udziale dwunastu kolumn.

* { box-sizing: border-box;}

/*clear-fix*/
.row::before,
.row::after {
     content:"";
     display: table;
     clear: both;
}

[ class*= 'col-'] {
    float: left;
    min-height: 1px;
}

/*szerokości kolumn*/
.col-1 { width:8,33%;}
.col-2 { width:16,66%;}
.col-3 { width:25%;}
.col-4 { width:33,33%;}
.col-5 { width:41,66%;}
.col-6 { width:50%;}
.col-7 { width:58,33%;}
.col-8 { width:66,66%;}
.col-9 { width:75%;}
.col-10 { width:83,33%;}
.col-11 { width:91,66%;}
.col-12 { width:100%;}

Nie wgrywamy tu pełnego bootstrapa, a jedynie definiujemy własną siatkę kolumn i rzędów. Pamiętać trzeba, że wszystkie kolumny, jakie tworzymy, musimy umieszczać w rzędach, w każdym rzędzie suma tych kolumn musi wynosić 12.

Jeśli chodzi o grid-css to kluczową deklaracją jest grid-template. Więcej na ten temat z pewnością znajdziecie na YT, ale rekomenduję kurs Wes-a Bos-a.

Bootstrap

To najprostszy sposób na responsywną stronę. Podłączamy najnowszego Bootstrapa do pliku html i za pomocą odpowiednich klas ustawiamy odpowiednio siatkę.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

Najnowszą obecnie wersją jest 4.2.1.
Warto również zapisać również skrypty (przed zamykającym znacznikiem </body>) JS, Popper.js i jQuery.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

Wszystkie linki znajdziesz na stronie Bootstrapa 😜, o tu.

Kursy

Znalazłam dwa miejsca, które super prosto tłumaczą co i jak z flexbox i gridem. Są to:

Jeśli chodzi o Bootstrap to spokojnie można go ogarnąć z pomocą dokumentacji lub Kurs / Tutorial Bootstrap 4.
Miejsca, które warto odwiedzić (poza oczywiście YT) to:

Będę kończyć ten króciutki wpis. Najważniejsze to poznać wszystkie powyższe metody i … wybrać, która nam najbardziej odpowiada. Całe szczęście, że w sieci znajdziemy wiele darmowych materiałów do nauki, ja proponuje te, które sama sprawdziłam. Powodzenia i miłego poszerzania wiedzy.

Follow Danuta:

Blogująca mama dwóch chłopców. Ciągle ucząca się i poszukująca pomysłu na siebie. Obecnie pogłębiająca tajniki programowania.

One Response

  1. Daniel Dan
    | Odpowiedz

    Dzięki za pomocny post! Polecam przeczytanie tego artykułu.
    https://y-sbm.com/blog/ile-kosztuje-strona-internetowa-niestandardowa

Zostaw komentarz