Przykładowy projekt z wykorzystaniem darmowej paczki MDB

Jakiś czas temu dodałem artykuł dotyczący zalet korzystania z paczek firmy MDBootstrap. Możecie go znaleźć tutaj.

Stworzyłem też projekt kafelkowego menu, które jest podobne do tego z Windows Phone z wykorzystaniem wyżej wymienionej technologii. Pozwólcie, że opiszę Wam proces jego tworzenia krok po kroku, by każdy laik mógł zrozumieć jak działają poszczególne elementy kodu i stworzyć coś takiego w swoim zakresie. Podkreślam, że będziemy korzystać z paczki MDB Free, którą możecie pobrać za darmo tutaj.

Efekt końcowy możecie zobaczyć na zdjęciu powyżej lub pod tym linkiem. Co ciekawe - polecam go sprawdzić na urządzeniu mobilnym, ponieważ kafelki układają się dosłownie jak w telefonach Microsoftu.

Krok 1: Wypakowujemy naszą paczkę, otwieramy w niej "index.html" za pomocą dowolnego edytora kodu oraz plik "style.css" znajdujący się w podfolderze "style".

Krok 2: Skupiamy się na sekcji body. Usuwamy cały content pomiędzy komentarzami "Start your project here" i "End your project here".

Krok 3: Musimy podzielić stronę na części za pomocą grida. Tworzymy element div z klasą .container, która będzie przechowywać zawartość naszej strony. Następnie trzy takie elementy z klasą .row. Definiujemy przez to trzy wiersze na naszej stronie. W każdym wierszu tworzymy trzy kolumny, czyli elementy z klasą col.

Krok 4: Do elementu z klasą .container dopiszmy klasę .justify-content-center oraz do każdego elementu z klasą .row klasy .justify-content-center i text-center. Wyśrodkuje nam to wiersze, ich zawartość oraz tekst. Na zdjęciu poniżej przedstawię to na przykładzie jednego wiersza, jednak musicie zrobić tak z każdym.

Krok 5: Zdefiniujmy rozmiary naszych kolumn. Jeden wiersz możemy podzielić na 12 części, jednak jeśli przekroczymy tę liczbę - nic się nie stanie, po prostu kolejne elementy przeskoczą do nowego wiersza, na czym będzie nam zależało przy dostosowywaniu układu na urządzeniach mobilnych. Klasa .col spowoduje, że elementy będą się automatycznie dopasowywały do rozmiaru strony, natomiast przy klasie .col-sm-x, gdzie x to liczba od 1 do 12, na wszystkich urządzeniach powyżej 540px szerokości elementy przyjmą rozmiar x części naszego grida. Dodajmy do każdej kolumny również klasę .waves-effect, która doda nam ładną animację po kliknięciu.

Pierwszy wiersz - pierwsza i druga kolumna z klasami .col-6, .col-sm-4 oraz .waves-effect, a trzecia z klasami .col, .col-sm-4 oraz .waves-effect.

Drugi wiersz - pierwsza i druga kolumna z klasami .col-6, .col-sm-3 oraz .waves-effect, a trzecia z klasami .col, .col-sm-6 oraz .waves-effect.

Trzeci wiersz - wszystkie kolumny z klasami .col oraz .waves-effect.

Krok 6: Dodajmy zawartość do naszych kolumn. Do poszczególnych elementów dopiszemy parę klas, które omówię poniżej, natomiast każdy będzie zawierał klasę font-weight-bold, która pogrubi nam tekst lub ikony.

Pierwszy wiersz - pierwsza kolumna z nagłówkiem pierwszego stopnia o zawartości "12 AM" wraz z klasami .font-weight-bold i .mt-5 (dodaje margines zewnętrzny od góry sprawiając, że nasze elementy znajdą się na środku kolumny). Druga z ikoną budzika (możemy śmiało szukać i kopiować ikony z dokumentacji MDB) o klasach .fa-4x (powiększa tekst lub ikonę 4 razy) oraz .mt-5 i paragrafem o zawartości "6:00" z dodatkowymi klasami .font-weight-bold oraz .mt-2, co lekko oddzieli nam tekst od ikony. Trzecia kolumna z pierwszym paragrafem o klasach .mt-3, .font-weight-bold, .text-left (wyrównuje tekst do lewej krawędzi) i .fa-lg (duży rozmiar ikony lub tekstu) oraz drugim paragrafem wraz z klasami .font-weight-bold, .text-right (wyrównuje tekst do prawej krawędzi) i .fa-4x.

Drugi wiersz - pierwsza i druga kolumna z ikonami kolejno Twittera oraz YouTube'a o klasach .mt-5 i .font-weight-bold, wraz z paragrafami o treści kolejno "Twitter" i "YouTube", każdy o klasie .font-weight-bold. Trzecia kolumna będzie zawierać projekt harmonogramu, czyli kolejno paragraf o klasach .mt-3, .font-weight-bold i fa-2x oraz zawartości "Schedule", poniżej następny o klasie .font-weight-bold i tekście "10:00 - 11:00 Meeting with CEO", a na końcu trzeci zawierający ikonę plusa wraz z tekstem "Add new".

Trzeci wiersz - wszystkie kolumny z ikonami kolejno kalkulatora, Instagrama i kalendarza o klasach .mt-5 oraz .font-weight-bold, a pod nimi paragrafy o treści opisującej ikony, czyli kolejno "Calculator", "Instagram", "Calendar" o klasie .font-weight-bold.

W ten właśnie sposób stworzyliśmy nasz układ oraz zawartość menu. Pozostało nam jedynie je wystylizować językiem CSS.

Krok 7: Przechodzimy do naszego pliku style.css i wybieramy element o klasie .container. Usuwamy mu wewnętrzne marginesy właściwością padding: 0;, a następnie ustawiamy jego tło właściwością background: url("link") no-repeat top center fixed;, gdzie url("link") oznacza adres do naszego zdjęcia (zamiast słowa "link" wklejamy adres url, ja użyłem tego), no-repeat sprawia, że nasze zdjęcie wypełnia element bez powtórzeń, top center określa początkowe położenie tła (w tym wypadku góra i środek), a fixed sprawia, że nasze tło się nie przesuwa podczas scrollowania.

Krok 8: Wybieramy wszystkie wiersze zawarte w naszym elemencie o klasie .container i dodatkowo je środkujemy właściwością margin: 0 auto;, by zapobiec niepożądanym nierównościom (przykładowo w wypadku, gdy jeden wiersz nie wykorzysta pełnych 12 części grida i z jednej jego strony pozostanie dodatkowe miejsce).

Krok 9: Wybieramy wszystkie nasze kolumny, a następnie ustawiamy odpowiedni kolor tekstu zawartego w nich właściwością color: #f0f8ff;, ciągłą ramkę o grubości 1px i tym samym kolorze, co tekst właściwością border: 1px solid #f0f8ff; i wysokość każdej kolumny na 100px właściwością height: 180px;.

Krok 10: Na koniec dodajemy tzw. media query dla ekranów o maksymalnej szerokości 574px, gdzie po spełnieniu tego warunku pozbawimy nasz element o klasie .container dodatkowego marginesu zewnętrznego z góry. Zrobiłem to z myślą o wyglądzie na urządzeniach mobilnych.

To wszystko, wasz projekt jest gotowy!