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ła bym 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 z tamtą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
• fa-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ę obramowanie koloru czarnego
• padding: 20px;-tworzy przesrzeń 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 elemetu
• 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