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:
Źródło caniuse.com
Wsparcie CSS Grid:
Źródło caniuse.com
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.
Avocode – widok głownyW górnym menu dostępne jest kilka narzędzi: Hand, Select, Measure, Color, Slice, Note
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.
Eksportowanie elementu w różnych formatach
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.
Kawałek kodu opisujący button w CSSTen sam button opisany w innym języku
Umożliwia tworzenie zespołów i dzielenie się projektami graficznymi. Komunikacja jest ułatwiona dzięki możliwości dodawania komentarzy.
Dodawanie 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.
Kopiowanie tekstu
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.
W zaawansowanych ustawieniach możemy np. domyślny format kolorówW zaawansowanych ustawieniach możemy np. zmieniać domyślne jednostki
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.
Ceny w miesięcznym rozliczeniu
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! 🙂