Jakiś czas temu na naszym blogu ukazał się artykuł dotyczący zalet korzystania z paczek firmy MDBootstrap oraz drugi z przykładowym wykorzystaniem paczki MDB do stworzenia projektu strony. Tym razem jednak mam dla was coś trochę innego, ponieważ postanowiłem stworzyć projekt mobilnej aplikacji do sprawdzania pogody.

Poniżej przedstawiony projekt nie jest w pełni działającą aplikacją, tylko interfejsem graficznym. Jednak pozwólcie, że opiszę Wam proces jego tworzenia krok po kroku, by każdy mógł zrozumieć jak działają poszczególne elementy kodu i stworzyć coś podobnego. Pracować będziemy na paczce MDB Pro którą możecie dostać tutaj. Efekt końcowy możecie zobaczyć na zdjęciu powyżej lub tutaj.

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: Teraz stworzymy podsawę wyglądu naszej aplikacj, a więc w pliku index.html tworzymy div z klasą .containter .mt-5. Następnie wewnątrz tego stworzonego diva tworzymy kolejnego tym razem z klasą .phone, wewnątrz którego tworzymy kolejnego diva z klasą .content.

Krok 4: W divie z klasą .content tworzymy następnego diva wraz z klasą data. Wewnątrz niego będą znajdowały się wszystkie elementy naszej aplikacji. Teraz tworzymy nagłówek pierwszego stopnia h1 i wewnątrz niego umieszczamy dowolną wartość temperatury, np. 12°. Gdy już mamy to gotowe, przydałaby nam się jakaś ikonka związana z pogodą. Wchodzimy więc tutaj i wpisujemy cloud, a następnie kopiujemy kod naszej ikony do naszego projektu i wklejamy wewnątrz diva z klasą .data. Jednak to nie wszystko, ponieważ musimy dodać do naszej ikony jeszcze kilka klas, które przydadzą nam się później. Dodajmy więc do klasy naszej ikony następujące klasy:

• .rounded
• .icon-weather
• .fa-lg

Krok 5: Stwórzmy 2 paragrafy, w których będą zawarte informacje o pogodzie oraz przykładowa lokalizacja. Do pierwszego paragrafu dodajemy klasę .text, a wewnątrz paragrafu wpisujemy jakąś informację o pogodzie, np. Scattered Clouds. Do drugiego paragrafu dodajemy klasę .second-text, wewnątrz paragrafu wpisujemy przykładową lokalizację, np. Warsaw/Poland. Na sam koniec pod tymi dwoma paragrafami dodajemy znacznik hr.

Krok 6: Stwórzmy teraz kolejnego diva z klasą .buttons-wheather. Wewnątrz niego umieścimy nasze przyciski, które możecie znaleźć tutaj. Przekopjujmy więc stamtąd przycisk twittera i wklejmy go 4 raz wewnątrz naszego diva. Zanim jednak przejdziemy dalej musimy trochę zmodyfikować kod tych przycisków. Mianowicie z każdego przycisku musimy usunąć klasę .btn-tw. Następnie z każdego przycisku usuwamy całą zawartość znacznika i. W miejsce tego znacznika wstawiamy ikony o nazwach:

• .fa-map-marker-alt
• .fa-share
• .thermometer-three-quarters
• .fa-plus

Wszystkie te ikony możecie znaleźć tutaj. Gdy już to zrobicie wasz kod w pliku index.html wewnątrz znaczników body powinien wyglądać jak na obrazku poniżej.

Krok 7: Teraz przejdźmy do pliku style.css, tworzymy w nim klasę .phone i wewnątrz nawiasów klamrowych wpisujemy następujące właściwość:

• border-radius: 25px; - tworzy zaokrąglenia na rogach naszego elementu
• border: 5px solid black; - tworzy ramkę i obramowanie koloru czarnego
• padding: 20px; - tworzy przestrzeń wokół elementu
• width: 275px; - ustawia szerokość naszego elementu
• height: 550px; - ustawia wysokość naszego elementu
• overflow: hidden; - ukrywa treść nie mieszaczącą się na wyznaczonym obszarze
• margin: auto; - tworzy automatycznie margines
• box-shadow: 10px 10px 5px grey; - tworzy cień dla naszego elementu
• background: url("adres url naszego tła"); - ustawia tło dla naszego elementu

Nasz kod powinien teraz wyglądać tak:

Krok 8: Stwórzmy teraz 2 klasy .content i .data. Wewnątrz klasy .content wpisujemy następujące właściwość:

• margin: auto;
• width: 225px;
• height: 500px;

Natomiast wewnątrz klasy .data wpisujemy:

• top: 30%; - określa odległość od górnej granicy elementu
• position: relative; - nasz element posiada pozycję relatywną
• width: 225px;
• height: 400px;

Nasz kod powinien teraz wyglądać tak:

Krok 9: Teraz zajmiemy się następnymi klasami. Stwórzmy więc następujące klasy .icon-weather, .text oraz znacznik h1. Wewnątrz znacznika h1 wpisujemy:

• color: white; - określa kolor całego elementu (w tym przypadku na biały)
• font-size: 50px; - określa wielkość czcionki na 50 pikseli
• float: right; - sprawia, że nasz element będzie "pływał" w kierunku prawej krawędzi liniowej swojego elementu rodzica
• margin: 0px; - ustawia margines na 0 pikseli

Natomiast wewnątrz klasy icon-weather wpisujemy:

• color: white;
• float: right;
• clear: right; - sprawia, że interesujący nas element nie będzie mógł "opływać" innego elementu posiadającego właściwość float wraz z wartością right.

Wewnątrz klasy .text wpisujemy:

• position: relative;
• right: 15%;
• float: right;
• clear: both;
• top: -23px; - ustala ile pikseli za górną granicą ma się znajdować nasz element
• margin: auto;
• color: white;

Nasz kod powinien teraz wyglądać tak:

Krok 10: Stwórzmy następującą klasę .second-text, 2 znaczniki - hr, a oraz jeden indetyfikator #buttons-wheather. Wewnątrz klasyh1 wpisujemy:

• position: relative;
• right: 15%;
• float: right;
• clear: both;
• top: -30px;
• color: grey;
• font-size: 10px;
• margin: auto;

Następnie wewnątrz znacznika hr wpisujemy:

• position: relative;
• font-size: 10px;
• margin: auto;
• border-top: 1px solid #4B515D;
• top: 90px;
• width: 170px;
• left: 30px;

Wewntąrz indetyfikatora #buttons-wheather wpisujemy:

• width: 200px;
• height: 200px;
• position: absolute;
• top: 100px;
• left: 70px;

Ostatnią rzeczą, jaką zrobimy w tym projekcie będzie wpisanie wewnątrz znacznika a następujących wartości:

• margin: 5px !important; - nadpisuje margines i ustawia go na 5 pikseli
• color: white;

Efekt końcowy

To wszystko, nasz projekt jest gotowy! Jeśli wszystko robiliście krok po kroku, to powinnien wam się ukazać poniższy obrazek

Cały kod źródłowy możecie znaleźć tutaj