BoP #5: Ustawiamy elementy

W poprzednim wpisie z serii poznaliście drugą część znaczników HTML, które użyjemy do budowy naszego bloga. Jednak czym byłyby te znaczniki bez CSSa? Zwykłą biało-czarną stroną z niebieskimi linkami. Dlatego dzisiaj zajmiemy się podstawowymi stylami naszego bloga.

 

Wizualizacja sekcji

Na początek warto rozróżnić sobie poszczególne części strony np. różnymi kolorami tła. Wtedy lepiej widzimy gdzie dokładnie co się znajduje i dlatego ja zastosowałem taki zestaw (kolory są losowe i z czasem znikną):

Jeśli nie wiecie co oznacza taki zapis „#c2b2b2” dla właściwości „background” to wspomnę tylko, że są to kolory. Po więcej zapraszam do wpisu „Kolory w CSS„. Efekt jest taki:

Układanie elementów

Jak widać strona ma w tej chwili białe odstępy między poszczególnymi sekcjami i dookoła całej zawartości. Odstępami między sekcjami będziemy zajmować się na bieżąco podczas ich stylowania ale „ramką” zajmiemy się od razu. odpowiada za styl „margin” (margines) dla <body> więc musimy go „wyzerować”

Oczywiście został jeszcze biały fragment na górze ale jest on spowodowany marginesem dla listy <ul> w naszym menu oraz pod stopką. Jest tak dlatego, że zawartość strony jest dość mała i całość „nie sięga” do końca ekranu (jeśli macie mały monitor możecie tego nie zobaczyć). Zajmiemy się tym wykorzystując flexbox.

Flexbox to model pozycjonowania elementów blokowych. Dzięki temu możemy ustawić kolejność i pozycję elementów w pionie i poziomie. Dziś przedstawię podstawy a więcej poznacie w przyszłych wpisach (pierwszy pojawi się już za tydzień).

Flexbox opiera się na relacji kontenera i dzieci (container i items). W naszym przypadku kontenerem będzie <body> a dziećmi <nav>, <header>, <div id=”content”> i <footer>. Na początek musimy „powiedzieć” naszemu kontenerowi, że ma używać flexboxa. Możemy to zrobić za pomocą stylu „display” z właściwością „flex”

 

Jak widzicie wszystkie dzieci kontenera znalazły się w jednym rzędzie i nie ważne jak manipulowalibyśmy oknem przeglądarki (czy codepen.io) pozostaną bez zmian. Jest to domyślne zachowanie, które można zmienić i my to zrobimy, ponieważ te elementy mają wyświetlać się w kolumnie a nie w rzędzie. Do zmiany sposobu wyświetlania elementów (poziomo czy pionowo) służy

Otrzymamy

 

Jak możecie zauważyć oprócz zmiany położenia elementów za sprawą „display: flex” zniknęły białe odstępy pomiędzy sekcjami ale pozostała jedna kwestia – nasza stopka powinna znaleźć się na samym dole okna przeglądarki jeśli nie ma na tyle treści by znalazła się tam „sama”. Po pierwsze musimy „wymusić” na stronie aby zawsze wyświetlała się na całą wysokość

Po drugie musimy ustawić stopce <footer> odpowiednią pozycję. Dzięki temu, że korzystamy z flexboxa możemy ustawić automatyczny (sam ustawi sobie odpowiednią wartość) margines, który „przyczepi” nam stopkę do dolnej krawędzi strony (tylko jeśli zawartość strony jest mniejsza od okna przeglądarki)

 

Na koniec zajmijmy się jeszcze jedną kwestią. Główna część bloga wyświetla się w tej chwili kolumnowo (jedna sekcja pod drugą) a chcemy by pasek boczny (sidebar – <aside>) wyświetlał się z prawej strony. Tutaj też możemy skorzystać z dobroci flexboxa, gdzie naszym kontenerem będzie <div id=”content”> a dziećmi <section> i <aside>, więc wystarczy nadać kontenerowi

Oczywiście w tej chwili codepen się obraził i niepoprawnie wyświetla stronę, dlatego będę wrzucał link do codepen i screen.

http://codepen.io/morawcik/pen/MpBJNb

Jak widać <aside> jest bardzo wąskie i musimy to zmienić. Myślę, że na początek wystarczy jak ustawimy szerokość na 25% ale nie mniejszą niż 300px. Wykorzystamy do tego styl „flex”, któremu zmienimy domyślną wartość (0 1 auto) na „0 0 25%”. Styl „flex” jest skróconym zapisem trzech innych styli: flex-grow, flex-shrink i flex-basis (w skrócie po kolei – zdolność do rozciągania się, zdolność do kurczenia oraz szerokość)

http://codepen.io/morawcik/pen/VpBpPq

 

W tej chwili widać sporo pustej (białej) przestrzeni i jeśli chcecie by wypełniła się tłem wystarczy dla „#content” ustawić wysokość („height”) na 100% co rozciągnie ten element

http://codepen.io/morawcik/pen/WpKpdG

 


Post 5 z 13 z serii Blog od podstaw