TS TworcaStron.pl.

Grid CSS – kompletny kurs!

Grid CSS – czyli coś co zatrzęsie światem frontendu, coś co być może doprowadzi do upadku frameworków takich jak Bootstrap, coś co musi znać każdy, kto ma coś wspólnego z frontendem, albo zostanie w tyle…

Mam twoją uwagę?  W takim razie zapraszam niżej:)

Udało się sklepać pierwszy, kompletny kurs wideo po polsku omawiający Grid w CSS. Kurs składa się z 5 (+ 1) odcinków. Wszystkie są na YouTubie. Jeżeli jeszcze nie wiesz jak działa Grid to zapraszam, ponieważ omawiam dosłownie wszystkie opcje, które mamy do dyspozycji.

Myślałem, że zmieszczę się w jednym odcinku, jednak grid jest zbyt skomplikowany żeby dobrze omówić go w kilkanaście minut. Dlatego poniżej około godzina konkretnego materiału.

Odcinek 1/5. Wprowadzenie

Odcinek 2/5. Tworzenie siatki

Odcinek 3/5. Wielość komórek

Odcinek 4/5. Pozycjonowanie

Odcinek 5/5. Szablony

Odcinek dodatkowy: funkcja minmax(), min-content, max-content

Flexbox CSS jako wstęp do Bootstrapa 4

Display: flex;

Poniżej 30 minutowy przewodnik po właściwości CSSa o nazwie „flexbox” (w CSS zapisujemy ją jako display: flex;).

Nie bez powodu mówię akurat o flexboxie. Jest to świetny wstęp przed kursem Bootstrapa 4 ponieważ jedną z jego głównych różnic z poprzednią wersją, jest właśnie wykorzystanie flexa przy tworzeniu siatki. Dobre zrozumienie tego jak działa flexbox, zdecydowanie przyda się podczas tworzenia stron z Bootstrapem v.4 i sprawi, że będziemy rozumieli dlaczego poszczególne elementy zachowują się właśnie w taki sposób.

Kurs Bootstrap 4 dostępny tutaj: Kurs Bootstrap 4
Wpisz kod BOOTSTRAP4_YTPROMO, aby skorzystać ze zniżki 10%

Display: inline-flex;

W filmie nie wspomniałem o możliwości ustawienia display: inline-flex.

Różnica pomiędzy „display: flex” oraz „display: inline-flex” jest identyczna jak pomiędzy „display: block” oraz „display: inline-block„. Czyli łączy w sobie cechy elementu blokowego (np. możemy stosować padding) oraz elementu liniowego (np. możemy ustawiać kilka elementów obok siebie, bez przechodzenia do nowej linii).

CSS, LESS, SASS/SCSS, który wybrać?

Czasy używania czystego CSS powoli odchodzą w niepamięć. Nie ma się co dziwić, pracę trzeba sobie ułatwiać a nie utrudniać. Wydaje mi się, że wśród początkujących częściej używany preprocesor to Less, zgaduję, że jest to spowodowane tym, że pod Sassa musimy przygotować trochę obszerniejsze środowisko aby móc go bezproblemowo kompilować… Może warto poświęcić trochę więcej czasu na konfiguracji kompa aby móc później działać w Sass?  A może wystarczy Less?

Odpowiedz sam sobie, niezależnie czy pracujesz na czystym Cssie, czy na Lessie, czy na Sassie, czy wiesz dlaczego pracujesz właśnie na nim? Czy jest to świadoma decyzja czy bardziej nieznajomość reszty?

No ale na początku, do nauki chyba CSS?

Czemu nie, o ile ta nauka nie trwa dłużej niż jeden dzień. Wyjątkiem może też być bardzo mały plik, bo nie oszukujmy się – mało komu będzie chciało się tworzyć pliki less czy sass do stylów, które mają 50 linii kodu.

Kiedyś czasy były inne i nauka Css była niejako podstawą, ale rozwój technologii doprowadził do tego, że wg mnie nie ma sensu obecnie spędzać zbyt wiele czasu nad czystym Cssem. Spokojnie, to nie będzie 'skok na głęboką wodę’ tylko bardziej 'wejście do jacuzzi’ – preprocesory Css są naprawdę łatwe i przyjemne;)

Jeżeli dopiero zaczynasz przygodę z front-endem to mam dla Ciebie dobrą wiadomość. Jeżeli używasz Less, Sass to znasz również Css, ale nie na odwrót. Dla niektórych, działających w JS może to być zdziwieniem, ponieważ pracując jQuery – wcale nie musisz potrafić pracować na czystym JS.

Less i Sass są tak naprawdę zwykłym Cssem z kilkoma bajerami. Już tłumaczę…

Na pierwszy rzut oka

Porównajmy tak na szybko, z grubsza jak skraca się kod z każdą technologią:

Css

#container{
  width: 800px;
  margin: 0 auto;
}
#container p{
  color: #dedede;
  font-size: 21px;
}
#container p a{
  color: #FF3300; //czerwony
  font-weight: bold;
}
#container p a:hover{
  color: ##FF3333; // jasny czerwony
}

 

Less

#container{
  width: 800px;
  margin: 0 auto;
  p{
    color: #dedede;
    font-size: 21px;
    a{
      color: #FF3300; //czerwony
      font-weight: bold;
      &:hover{
        color: ##FF3333; // jasny czerwony
      }
    }
  }
}

 

Sass

#container
  width: 800px
  margin: 0 auto
  p
    color: #dedede
    font-size: 21px
    a
      color: #FF3300
      font-weight: bold
      &:hover
        color: ##FF3333

 

Skrócenie kodu to nie wszystko. Dodajemy dodatkowo wiele udogodnień takich jak: zmienne, pętle, wyrażenia logiczne, cale funkcje, domieszki…

Less

Less jest trochę bardziej rozbudowaną wersją CSS. Najważniejsza rzecz jaką wprowadza są zagnieżdżenia, dzięki temu zaczyna to trochę przypominać języki programowania, ale przede wszystkim znacząco przyśpiesza pracę. Nie będę się rozpisywał czym się charakteryzuje ponieważ jest wiele artykułów i tutoriali na ten temat, np. http://less.kursbootstrap.pl, http://lesscss.org/

Wielkim plusem Less jest jego łatwość implementacji w projekcie. Praktycznie każdy edytor posiada wtyczki, które bezproblemowo automatycznie kompilują jego pliki. Są również skrypty JS, które robią to samo – ogólnie nie ma żadnych problemów aby w nim działać. Dodatkowo jest często polecany do nauki ponieważ jest bardzo podobny do czystego Cssa.

 

Sass

Sass jest potężniejszą wersją Lessa. Możemy w nim pominąć klamry, średniki to jeszcze bardziej przyśpiesza pracę. Poza tym Sass sam w sobie działa już trochę jak normalny język programowania. Szukasz czegoś do poważnych projektów? Sass jest dla Ciebie! Największym minusem dla nowych użytkowników jest poziom skomplikowania jego instalacji (wymaga, np. wcześniejszej instalacji node.js oraz node-sass lub Ruby a następnie jakiejś wtyczki/programu, który zajmie się kompilacją).  Więcej informacji nt sass możesz znaleźć tutaj: http://sass-lang.com/guide

 

Podsumowanie

Jeśli chodzi o ogólne możliwości tych technologii posegregowałbym je następująco: SASS > LESS > CSS. Końcowe zdanie jednak, którą opcję zastosować w danej sytuacji jest określenie czy faktycznie potrzebujemy czegoś takiego do projektu. O ile jest mało sensownym pisanie CSSa, który ma 1000 linii kodu, o tyle równie mało sensowne będzie tworzenie pliku SASS, który ma 10 linii kodu. Tak samo gdy projekt jest za duży na CSSa, ale i nie potrzebujesz możliwości Sass to warto zostać przy prostym i przyjemnym Lessie.

Ps. Istnieje jeszcze rozróżnienie samego Sassa na 2 podkategorie: scss i sass, których tutaj specjalnie nie omawiałem:)