CSS Grid kontra Flexbox

css gird & flexbox

css gird & flexbox

Inspiracja

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:

flexbox wsparcie przeglądarek
Źródło caniuse.com

Wsparcie CSS Grid:

grid wsparcie przeglądarek
Ź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ąć.

css grid i flexbox

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

 

<div class="container">
    <div class="red">
        <p>red</p>
    </div>
    <div class="blue">
        <p>blue</p>
    </div>
    <div class="yellow">
        <p>yellow</p>
    </div>
    <div class="green">
        <p>green</p>
    </div>
</div>

Wspólny CSS

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”.

$red: #ed4040;
$yellow: #ffef68;
$blue: #4286f4;
$green: #99e265;

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    width: 500px;
    height: 300px;
    margin: 150px auto 0 auto;
    border: 2px solid black;

    .red, .blue, .yellow, .green {
        heigth: 100%;
        width: 100%;
        font-size: 25px;
        text-align: center;
    }
}

.red {
    background-color: $red;
}

.blue {
    background-color: $blue;
}

.yellow {
    background-color: $yellow;
}

.green {
    background-color: $green;
}

Po dodaniu tych stylów otrzymujemy bazę dla obu przykładów.

markup

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
}

display: flex

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).

flex-direction: row

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”.

<div class="container">
    <div class="red">
        <p>red</p>
    </div>
    <div class="column-wrapper">
        <div class="blue">
            <p>blue</p>
        </div>
        <div class="yellow">
            <p>yellow</p>
        </div>
    </div>
    <div class="green">
        <p>green</p>
    </div>
</div>

Po zmianie HTML-a otrzymujemy trzy kolumny.

flexbox

Krok 3

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.

.column-wrapper {
    flex: 0 1 50%
}

.red {
    background-color: $red;
    flex: 0 1 25%;
}

.green {
    background-color: $green;
    flex: 0 1 25%;
}

Dostajemy następujący efekt:

Krok 4

Stylujemy dzieci elementu „column-wrapper”. Chemy żeby każde dziecko zajmowało połowę wysokości rodzica.

.blue, .yellow {
    height: 50%;
}

Końcowy efekt z użyciem Flexboxa

Tutaj na CodePen zaprezentowany jest ostateczny kod oraz efekt.

See the Pen Flexbox example by SowaProgramuje (@sowaProgramuje) on CodePen.

CSS Grid

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
}

grid

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”.

mozilla grid dev tools

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).

css grid example

Trzy kolumny oraz dwa wiersze:

css grid example1

Skoro wiemy ile wierszy i kolumn jest potrzebne czas na zdefiniowanie ich wielkości. CSS Grid wprowadza nową jednostkę jaką jest fr czyli „fraction of available space”. Tutaj można przeczytać więcej na temat jednostek jakie możemy używać z CSS Grid.

css grid example2

Do diva „container” dodajemy następujące style:

.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.

grid-template

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ę.

.red {
    background-color: $red;
    grid-area: red;
}

.blue {
    background-color: $blue;
    grid-area: blue;
}

.yellow {
    background-color: $yellow;
    grid-area: yellow;
}

.green {
    background-color: $green;
    grid-area: green;
}

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.

grid 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:

.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
    "red blue green"
    "red yellow green"; 
}

Na poniższej grafice zilustrowane jest definiowanie grid-template-areas.

css grid example

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.

grid-template-area

Końcowy efekt z użyciem CSS Grid

Tutaj można zobaczyć i przeanalizować samodzielnie ostateczny kod.

See the Pen CSS Grid by SowaProgramuje (@sowaProgramuje) on CodePen.

Podsumowując

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:

oraz o Flexbox:

 

Masz jakieś pytania, uwagi do kodu? Daj znać w komentarzu!

Konkurs na animację grafiki SVG – Kodu.je

konkurs animacja svg css

konkurs animacja svg css

Konkurs Daj się Poznać dobiegł już prawie do końca. Czas zabrać się za inne ciekawe rzeczy. Dzisiaj znalazłam konkurs na stronie Kodu.jePolega on na zanimowaniu pliku SVG za pomocą CSSa i/lub JSa. 

  • do 3 lipca 2017
  • kod zamieszczamy na CodePenie
  • pracę wysyłamy na adres email:  kontakt@kodu.je, z tytułem „Konkurs Animacja SVG” oraz odnośnikiem do CodePena
  • do pracy nie używamy żadnych bibliotek / frameworków
  • „do pliku z animacją można dodać własne elementy svg”
  • „uczestnik który chce, aby jego praca została opublikowana na jednej z podstron kodu.je bądź w filmie na YouTube do zgłoszenia konkursowego musi załączyć zgodę. Możne zrobić to w treści e-maila”

Link do regulaminu oraz link do grafiki konkursowej

A tutaj jest tutorial stowrzony przez kodu.je dotyczący animacji plików SVG.

Ja osobiście wcześniej robiłam kurs animowania SVG za pomocą CSS na stronie TeamTreeHouse. Jest tam darmowy 7 dniowy trial, więc spokojnie można zrobić ten 85 minutowy kurs, a nawet więcej. Moim zdaniem materiały są bardzo przydatne, dlatego podczas nauki kodowania i programowania korzystałam z płatnej subskrypcji.

 

Kliknij w ten link a dostaniesz 50% zniżki na pierwszy miesiąc subskrypcji w TeamTreeHouse.

Jeśli zdecydujesz się wziąć udział w konkursie to zostaw linka do swojego projektu w komentarzu! Ja na pewno będę brać udział i pochwalę się efektem swojej pracy 😉

 

 

 

Avocode – co to jest i czy warto korzystać?

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-screen
Avocode – widok głowny
avocode-screen
W 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.

avocode-screen
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.

avocode-screen
Kawałek kodu opisujący button w CSS
avocode-screen
Ten 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.

avocode-screen
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.

avocode-screen
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-screen

 

Avocode ma sporo zaawansowanych ustawień, które pozwalają dostosować to narzędzie do naszych potrzeb.

avocode-screen
W zaawansowanych ustawieniach możemy np. domyślny format kolorów
avocode-screen
W 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.

avocode-pricing
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! 🙂 

Pytania techniczne na rozmowie na stanowisko Junior Frontend Developer

Pytania techniczne junior frontend developer

Pytania techniczne junior frontend developer

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?