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 elementuborder: 5px solid black;
- tworzy ramkę i obramowanie koloru czarnegopadding: 20px;
- tworzy przestrzeń wokół elementuwidth: 275px;
- ustawia szerokość naszego elementuheight: 550px;
- ustawia wysokość naszego elementuoverflow: hidden;
- ukrywa treść nie mieszaczącą się na wyznaczonym obszarzemargin: auto;
- tworzy automatycznie marginesbox-shadow: 10px 10px 5px grey;
- tworzy cień dla naszego elementubackground: 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 elementuposition: 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 pikselifloat: right;
- sprawia, że nasz element będzie "pływał" w kierunku prawej krawędzi liniowej swojego elementu rodzicamargin: 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 elementmargin: 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 pikselicolor: 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