Zaskocz użytkownika ciekawą animacją menu na Twojej stronie lub aplikacji!
Nawigacja jest bardzo ważnym elementem każdej strony internetowej. Poniżej znajdziesz 10 inspiracji – zarówno na wersję desktop-ową jak i na urządzenia mobilne.
Po obejrzeniu poniższego wystąpienia Morten Rand-Hendriksen na temat CSS Grid postanowiłam przetestować ten sposób pozycjonowania elementów. Zdecydowanie polecam obejrzenie tej prelekcji.
W tym artykule chciałabym porównać na prostym przykładzie dwie metody: Flexbox oraz CSS Grid.
Wsparcie przeglądarek
Zanim przejdziemy do rzeczy, mała notka na temat wsparcia przeglądarek. Na ten moment (13.08.2017) wsparcie CSS Grid jest częściowe. Istnieją problemy z Internet Explorer, Edge, Opera Mini oraz na starszych wersjach iOS Safari. Z powyższego wideo wynika że już niebawem CSS Grid będzie w pełni wspierany przez Edge, stąd warto się zainteresować tematem CSS Grid.
Wsparcie Flexbox:
Wsparcie CSS Grid:
A jak to wygląda w praktyce i czym się różni CSS Grid od Flexboxa? Przekonajmy się na przykładzie.
Cel
Moim celem jest uzyskanie takiego samego efektu za pomocą dwóch różnych metod. Tutaj jest grafika prezentująca jaki efekt chcę osiągnąć.
Wspólny HTML
Zacznijmy od kodu HTML, który jest wspólny dla obu przykładów. Mamy tutaj div o klasie „container”, który ma czwórkę dzieci, które na potrzeby tego przykładu mają klasy „red”, „blue”, „yellow”, „green”*. W środku każdego dziecka znajduje się paragraf.
*w rzeczywistości starajmy się nadawać nazwy klas opisujące czym dany element jest, a nie jak wygląda
W tych przykładach będę używać SCSSa. Na początek dodajemy ogólne style, dla rozróżnienia nadajemy różne kolory poszczególnym dzieciom elementu „container”.
Po dodaniu tych stylów otrzymujemy bazę dla obu przykładów.
Flexbox
Krok 1
Na sam początek w CSSie nadajemy elementowi o klasie „container” display: flex. W ten sposób cztery divy, które są bezpośrednimi dziećmi elementu „container” zostały uporządkowane jeden obok drugiego, a nie jak było wcześniej jeden pod drugim.
.container {
display: flex;
// tu są jeszcze pozostałe, wspólne style
}
Jest to spowodowane zaaplikowanie domyślnej właściwości jaką jest „flex-direction: row”. Stąd elementu układają się jeden koło drugiego w jednym rzędzie (inne właściwości „flex-direction” to row-reverse, column i column-reverse).
Krok 2
Aby uzyskać zamierzony efekt używając flexboxa musimy nieco zmienić strukturę HTML. Zmierzamy do stworzenia trzech divów, które będą w jednym rzędzie, jak na grafice powyżej. Dodajemy div o klasie „column-wrapper”, w którym znajdą się dwa elementy: „blue” i „yellow”. Teraz div o klasie „container” ma trójkę dzieci: „red”, „column-wrapper” oraz „green”.
Teraz musimy jeszcze dodać style na elemencie „column-wrapper”. Skorzystamy z właściwości jaką jest „flex”. Dzięki temu będziemy mogli rozdysponować przestrzeń rodzica za pomocą procentowych wartości. Chcemy, żeby div o klasie „column-wrapper” zajmował połowę szerokości swojego rodzica, a pozostałe elementy zajmowały po 25% szerokości.
Teraz zobaczmy jak uzyskać ten sam efekt, ale z użyciem CSS Grid. Wracamy do naszego podstawowego markupu. Mamy rodzica o klasie „container” oraz czwórkę dzieci: div-y o klasach „red”, „blue”, „yellow” i „green”. W przypadku CSS Grid nie będziemy towrzyć dodatkowych elementów w HTML, jak było w przypadku Flexboxa (div o klasie „column-wrapper”). CSS Grid pozwala na opisanie struktury dokumentu, bez potrzeby dodatkowych div-ów, które mają na celu jedynie wspomóc jego stylowanie.
Krok 1
Podstawowe style już mamy, czas przejść do definiowania CSS Grid. Nadajemy elementowi o klasie „container” display: grid. W efekcie elementy zostały ułożone jeden nad drugim oraz wypełniły całą wysokość rodzica.
.container {
display: grid;
// tu są jeszcze pozostałe, wspólne style
}
Firefox udostępnia w swoim inspektorze możliwość podglądu linii CSS Grid-u. Po najechaniu kursorem na kratkę koło display: #grid pojawiają się linie oddzielające poszczególne „komórki” tzw. „Grid highlighter”.
I jeszcze zbliżenie:
Krok 2
CSS Grid można porównać do tabeli. Możemy definiować kolumny oraz wiersze. Tutaj na poniższej grafice demontuję jak musimy podzielić nasz „container”, żeby uzyskać zamierzony efekt. Należy zdefiniować trzy kolumny oraz dwa wiersze. Element „red” będzie zajmować dwie komórki (całą pierwszą kolumnę), element „green” również będzie zajmować dwie komórki (całą ostatnią kolumnę). W CSS Grid mamy możliwość definiowania położenia elementów w dwóch osiach: pionowej i poziomej. W przeciwieństwie do Flexboxa, gdzie definiujemy „flex-direction” i jest on tylko jednowymiarowy (row, row-reverse, column lub column-reverse).
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
// to będą trzy kolumny, ich szerokość będzie do siebie w stosunku 1:2:1
grid-template-rows: 1fr 1fr;
// to będą dwa wiersze, ich wysokość będzie do siebie w stosunku 1:1
}
Po dodaniu tego kodu każdy element zajął tylko jedną komórkę w Grid. Zostały dwie puste komórki. Aby to zmienić musimy zdefiniować grid-areas oraz grid-template-area.
Krok 3
Grid-area nadawany jest na dzieciach elementu, który ma display grid. Zdefiniowanie nazw konkretnych elementów w CSS Grid pozwoli na prostszą orientację.
Po dodaniu tych stylów wizualnie wygląda to niezbyt dobrze, wręcz jakbyśmy się oddalili od naszego celu, ale jeszcze musimy zdefiniować grid-template-area.
Krok 4
Czas na zdefiniowanie grid-template-area. Musimy zdefiniować, które elementy będą zajmować które i ile komórek. Będziemy korzystać z grid-area, które zdefiniowaliśmy w poprzednim kroku.
Na elemencie „container” dodajemy
grid-template-areas:
"red blue green"
//w cudzysłowie definiujemy co będzie w poszczególnych komórkach w pierwszym wierszu
"red yellow green";
//w drugim cudzysłowie definiujemy kolejny wiersz w naszej "tabeli"
Ostatecznie do elementu „container” zostały dodane takie style:
Na poniższej grafice zilustrowane jest definiowanie grid-template-areas.
Komórki w których zdefiniowane są takie same grid-areas zostają scalone do jednego obszaru. Element „red” oraz element „green” zajmują po dwie komórki, natomiast element „blue” oraz „yellow” zajmują każdy po jednej komórce.
Końcowy efekt z użyciem CSS Grid
Tutaj można zobaczyć i przeanalizować samodzielnie ostateczny kod.
CSS Grid jest nowszym sposobem pozycjonowania elementów. Działa on trochę jak tabela, gdzie możemy definiować ilość kolumn, wierszy oraz „scalać” poszczególne komórki. Zarówno CSS Grid jak i Flexbox mają jeszcze wiele innych, bardziej zaawansowanych właściwości, których w tym artykule nie omówiłam, a które są bardzo pomocne w pozycjonowaniu elementów.
Ostatecznie używając CSS Grid kod HTML zajął 2 linie mniej, natomiast SCSS 1 linię mniej.
Dodatkowe materiały
Oto linki do stron, na których można dowiedzieć się więcej na temat CSS Grid:
Ostatnio spotkałam się ze sporym problemem. Designer mojego klienta dostarczył mi pliki, które zaprojektował w Sketchu, czyli aplikacji do projektowania graficznego na Macu. Przekopałam internet w celu znalezieniu sposobu na otworzenie tych plików graficznych na Ubuntu bądź na Windowsie. Generalnie było ciężko, dlatego znalazłam inne rozwiązanie – zdecydowałam się wypróbować Avocode.
Avocode jest zarówno aplikacją desktopową jak i webową. Pozwala na otwieranie plików zarówno w formacie PSD jak i tych stworzonych w Sketchu. Program ten jest dostępny na Maca, Windowsa i Linuxa.
Dlaczego Avocode jest fajnym narzędziem?
Pozwala na eksportowanie warstw lub elementów (pojedynczo lub kilka na raz.) Mamy możliwość eksportu w formatach: SVG, PNG, JPG oraz WEBP. Elementy zapisane w SVG możemy od razu skalować 2x, 3x lub 4x razy.
Generuje gotowe kawałki kodu: CSS, Less, Sass, SCSS, Stylus, Swift, Android, CSS w JS i React Native. Mamy gotowe informacje min. na temat wysokości, szerokości elementu, czcionki i jej rozmiaru, kolorów; wszystko od razu z odpowiednimi jednostkami. Wystarczy skopiować jednym kliknięciem i wkleić do swojego edytora.
Umożliwia tworzenie zespołów i dzielenie się projektami graficznymi. Komunikacja jest ułatwiona dzięki możliwości dodawania komentarzy.
Avocode umożliwia proste kopiowanie tekstu od razu jako element HTML bądź eksportowanie go jako JPG lub PNG. Wystarczy jedno kliknięcie i tekst jest gotowy do wklejenia do naszego edytora.
Pozwala na definiowanie zmiennych – kolorów, czcionek, gradientów, rozmiarów i odległości. W ten sposób kopiowany kod z Avocode będzie od razu uwzględniał i kopiował nasze zmienne. Jeszcze tego nie testowałam, ale wydaje się to ciekawa opcja.
Dodatkowo, podaje dokładne wymiary oraz położenie elementu. Wystarczy wybrać narzędzie Measure w górnym menu, najechać kursorem na dany element i dostajemy o nim pełen zestaw informacji, zarówno w odniesieniu do granic warstwy jak i innych elementów położonych na tej warstwie. W ten sposób Avocode pomaga w ustalaniu marginesów i paddingów.
Avocode ma sporo zaawansowanych ustawień, które pozwalają dostosować to narzędzie do naszych potrzeb.
Dopiero zaczynam korzystać z tego narzędzia, ale uważam, że jest bardzo cenne, ułatwia i usprawnia kodowanie. Sama aplikacja jest dość intuicyjna, całkiem przyjemna w użytkowaniu. Nie jest idealna, ale ciągle jest usprawniana i dodawane są nowe funkcjonalności. Narzędzie jest płatne (po 14 dniowym trialu), można płacić miesięczną subskrypcję, którą można anulować w każdej chwili, bądź skorzystać ze zniżki na plan roczny.
Mam nadzieję, że ten artykuł był pomocny. Daj znać czy korzystałeś/korzystałaś z tego narzędzia. A może znasz jakieś inne, ciekawe i konkurencyjne? Jeśli masz jakieś pytania zostaw komentarz! 🙂
Pytania techniczne, które pojawiły się na moich rozmowach kwalifikacyjnych na stanowisko Junior Frontend Developer:
Rozwiń skrót HTML i CSS
Co to jest box model?
Jakie korzyści daje Sass?
Jaka jest różnica pomiędzy mixin a funkcją w Sass?
Czy w CSS są funkcje?
Do czego służy tag data w HTML?
Czym różni się null od undefined?
Czym się różni “==” i “===”?
Czy korzystałaś/korzystałeś z repozytorium?
Jak dostaniesz plik .psd to co robisz żeby zacząć pracę? Jak wygląda proces?
Co robimy z kodem przed wrzuceniem na produkcję?
Co to są pseudo selektory? Jakie znasz? Jakie dają możliwości
Z jakiego edytora korzystasz?
Czy korzystałaś/korzystałeś z task runnera?
Jakie znacz rodzaje display? Omów różnice
Czym różni się id od classy?
Czym różni się position relative od absolute?
Co to jest position fixed?
Czy miałaś/miałeś do czynienia z Wodrpressem?
Czy korzystałaś/korzystałeś z flexbox?
Jakie są różnice między Bootsrap 3 a 4?
Czy miałaś do czynienia z walidacją formularza?
Z jakich systemów operacyjnych korzystasz?
Jak wybrać jakiś element w jQuery?
Ile elementów może mieć taką samą klasę?
Jakich narzędzi używasz do debugowania kodu?
Jak wybrać w jQuery elementy input typu text?
Jak rozwiążesz konflikt powstały podczas mergowania branchów?
Czy znasz jakiś preprocesor HTMLa?
Co to są media
Co to jest W3C?
Co to jest branch?
Co to jest GIT?
Co to jest Gulp? Do czego służy?
Co to jest npm? Do czego służy?
Co to jest JSON? Gdzie się z tego korzysta?
Co to jest API?
Co to jest AJAX?
Co to jest RWD?
Pytania z rozmowy ogólnej:
Nad jakimi projektami procowałaś? Jak to wyglądało?
W którą stronę chciałabyś się rozwijać jeśli chodzi o frontend dewelopment?
Czy pracowałaś/pracowałeś w zespole podczas projektu programistycznego?
Jak się uczyłaś/uczyłeś programowania?
Czy byłaś/byłeś na jakiś kursach programistycznych?
Z jakich źródeł korzystasz?
Czy możesz się pochwalić swoimi projektami?
Wymień swoje trzy zalety
Jesteś ołówkiem, zostałaś/zostałeś wrzucony do wiadra z wodą, jak się wydostaniesz?
W celu świadczenia usług na najwyższym poziomie stosuję pliki cookies, które będą zamieszczane w Twoim urządzeniu (komputerze, laptopie, smartfonie). W każdym momencie możesz dokonać zmiany ustawień przeglądarki internetowej i wyłączyć opcję zapisu plików cookies. Ze szczegółowymi informacjami dotyczącymi cookies na tej stronie można się zapoznać tutaj: polityka prywatności.
Ta strona używa plików cookie, aby poprawić Twoje doświadczenie podczas poruszania się po stronie. Spośród nich, pliki cookie, które są skategoryzowane jako niezbędne, są przechowywane w Twojej przeglądarce, ponieważ są one niezbędne do działania podstawowych funkcji witryny. Używamy również plików cookie stron trzecich, które pomagają nam analizować i zrozumieć, w jaki sposób korzystasz z tej strony. Te pliki cookie będą przechowywane w Twojej przeglądarce tylko za Twoją zgodą. Masz również możliwość zrezygnowania z tych plików cookie. Jednak rezygnacja z niektórych z tych plików cookie może wpłynąć na komfort przeglądania strony.
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
Cookie
Duration
Description
cookielawinfo-checkbox-analytics
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional
11 months
The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy
11 months
The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.