Dodatek

Co to jest “mobile first”?

Jak już wiesz w media query możesz ustawić różne warunki. Oczywiście zamiastmax-width(używanego w tej lekcji) możesz także ustalić warunek pod względemmin-width. Co nam to daje?

W taki oto sposób możemy wdrożyć technikę zwaną mobile first. Jeśli porównamy urządzenie mobilne czyli np. smartfon do pełnoprawnego, stacjonarnego komputera to bez wątpienia stwierdzimy, że komputer stacjonarny ma ogromną przewagę w mocy obliczeniowej jak i dostępu do szybkiego internetu (zazwyczaj). Właśnie z tego względu powstała metoda tworzenia stronmobile first.

Polega ona na tworzeniu i kodowaniu strony zaczynając zawsze od urządzeń mobilnych. Powoduje to usunięcie zbędnych elementów z projektu, ograniczenie ilości kodu, a przede wszystkim przemyślenie optymalizacji projektu pod kątem urządzeń mobilnych, dzięki czemu sprawdzamy każdy aspekt strony, aby ta działała szybko i sprawnie na tych najmniejszych urządzeniach.

Jest to dosyć często stosowana praktyka w dzisiejszych czasach i nie jest to już nowość. W praktyce oszczędności w ilości kodu czy rozmiarach plików oscylują w granicy 5 - 20%. Polecam też oprócz mobile first stosować inne dostępne metody optymalizacji i przyspieszania stron jak cache, gzip, webworkers, webp itp. Jeśli tylko jest to możliwe zalecam stosować się do tej metodologii przy tworzeniu nowych projektów. Nie warto jest jednak przerabiać starych projektów na mobile first, bo mija się to zupełnie z celem.

“Nowe jednostki” vw i vh

CSS3 istnieje już jakiś czas na rynku, a prawie wszystkie przeglądarki już dawno dostosowały swoje silniki do nowości jakie przyniosła nam nowa wersja kaskadowych arkuszy styli. Dzięki temu mamy możliwość skorzystania z jednostekvwivh. Co odwzorowują te jednostki?

Ogólnie rzecz biorąc1vwodpowiada1%szerokości obszaru roboczego. Analogicznie działa to z jednostkąvhi wysokością obszaru. Jednostki te nazywane są ogólnie viewport units i możesz je oczywiście stosować wszędzie tam, gdzie używałeś wcześniejpx,emczy%. Czy dane jednostki są przydatne w jakikolwiek sposób?

Oczywiście, że są. Inaczej by ich nie stworzono. Dzięki nim możesz ustalić rozmiary elementu wg rozmiaru okna. Możesz np. zrobić jedną sprytną rzecz. Wyobraź sobie, że chcesz utworzyć kwadratowy element, który będzie zmieniał rozmiar w zależności od rozmiaru okna. Każdy nowoczesny ekran znajdujący się w laptopie oraz większość monitorów ma proporcje 16:9, więc wysokość zawsze będzie mniejsza. Użyjemy więc jednostek wysokości. Pomijając RWD (oczywiście można dostosować ten przykład do wszystkich urządzeń) możemy zarówno do wysokości jak i szerokości elementu przypisać np.25vh. Dzięki temu nasz nowy element będzie zawsze kwadratem o boku równym25%wysokości obszaru roboczego, niezależnie od kształtu okna przeglądarki.

Jednostki te przydatne są również przy rozmiarze czcionki. Używając ich we właściwościfont-sizesprawimy, że zmieniając rozmiar okna przeglądarki zmienimy również rozmiar samych czcionek, co może być w wielu sytuacjach przydatne.

Zadanie 1

W tym zadaniu twoim celem jest utworzenie kwadratowego elementu o boku równym15vh.

Rozwiąż zadanie

Bootstrap jako jeden z najpopularniejszych frameworków

Podobnie jak w świecie JavaScriptu, w świecie CSSa także istnieją swego rodzaju frameworki. Również podobnie do JavaScriptu, frameworków w CSSie jest całe mnóstwo. Do najpopularniejszych należą:

Jednak niekwestionowanym i wieloletnim zwycięzcą tego rankingu jest Bootstrap. Co zawiera jeden z najlepszych frameworków CSS?

Zacznijmy od tego, że domyślnie nie jest napisany w CSSie. Wersja v3 napisana jest w LESS, a następca, który już jest w wersji beta, czyli v4, jest napisana w SASS (scss). Dzięki temu mamy kilka przydatnych funkcjonalności. Po pierwsze możemy używać całego frameworka w skompilowanej wersji do zwykłego kodu CSS. Kod ten jest odpowiednio zoptymalizowany i skompresowany.

Po drugie możemy wygenerować sobie dany kod CSS, wykluczając niektóre komponenty z listy (możesz to zrobić tutaj:http://getbootstrap.com/customize/). Tutaj możemy również zmodyfikować grid, którego chcemy użyć do projektu o czym wspominałem przy okazji lekcji o fluid gird. Nie musisz już własnoręcznie pisać swojego gridu. Możesz go po prostu wygenerować w Bootstrapie i używać razem z resztą frameworka.

Po trzecie możemy używać Bootstrapa kompilując go z kodu źródłowego, dzięki czemu możemy samemu zdecydować czego potrzebujemy w danej chwili i ograniczyć generowanie niepotrzebnego nam kodu.

Jednak Bootstrap to nie sam CSS. Zawiera także wiele przydatnych mini skryptów napisanych w JavaScript, które pomogą nam w codziennej pracy z layoutami. Co m.in. zawiera Bootstrap?

  • Fluid Grid System z 12 kolumnami.
  • Resetowanie większości styli w najpopularniejszych przeglądarkach i systemach operacyjnych.
  • Ustawienie poprawnej typografii dla wielu elementów.
  • Zawiera w sobie wiele ostylowanych elementów jak bloki zapisywane w tekście czy badge.
  • Posiada wiele różnorodnych styli do tabel w tym także proste tabele responsywne.
  • Posiada bardzo dużo klas pomocnych w szybkim i prostym kodowaniu layoutu.
  • Zawiera również wiele styli dla obrazków, przycisków czy formularzy oraz font ikony.

Oprócz tego zawiera wiele skryptów JSowych, m. in.:

  • Dropdowny;
  • Slider;
  • Zakładki;
  • Tooltipy;
  • Modale;
  • i wiele, wiele więcej…

Oprócz możliwości które opisałem powyżej, bootstrap może być także odpowiednio stylowany, dzięki czemu w internecie możemy znaleźć bardzo dużą liczbę gotowych już motywów, które możesz użyć na swojej stronie. Niektóre z nich możesz znaleźć tutaj:http://themes.getbootstrap.com/.

Jeśli jesteś zainteresowany Bootstrapem, zapraszam Cię na oficjalną stronę (w języku angielskim), gdzie znajdziesz kompleksowe informacje na temat tego świetnego projektuhttp://getbootstrap.com/.

Podsumowanie

To już była ostatnia lekcja w tym kursie. Dowiedziałeś się na czym polega Responsive Web Design i dlaczego jest on tak bardzo ważny. Dziękuję za Twoją obecność na moim kursie i zapraszam Cię na kolejne frontendowe kursy, by pogłębiać swoją wiedzę.

results matching ""

    No results matching ""