W poprzednim artykule opisałem najważniejsze kwestie związane z używaniem SASS / SCSS. Opisane zostały zmienne, mixiny oraz dziedziczenie. Dzisiaj temat rozwinę o najbardziej zaawansowane możliwości tych preprocesorów. Jednak już na tym etapie muszę zaznaczyć otwarcie, że używanie warunków czy pętli nie jest rzeczą jaką front-endowiec potrzebuje na co dzień. Modułowość SASS Dzięki modułowości można stworzyć […]
Pracę z preprocesorami CSS czyli SASS, SCSS i LESS trudno wyobrazić sobie bez użycia automatyzatorów zadań. Do przekonwertowania kodu na CSS możemy wykorzystać Grunt.js, Gulp.js i Webpack (po szczegóły zapraszam do poprzednich wpisów). Wprawdzie często używa się określenia SASS myśląc o SCSS, jednak istnieje istotna różnica między jednym, a drugim. SCSS SCSS (Sassy CSS) – […]
RWD vs AWD Responsive Web Design kontra Adaptive Web Design Obie definicje RWD Responsive Web Design oraz AWD Adaptive Web Design określają ten sam ostateczny efekt, jaki twórca strony internetowej zamierza osiągnąć. Efektem tym jest stworzenie strony internetowej, która dopasuje się do szerokości ekranu. Jednak istnieje zasadnicza różnica między środkami jakie zostaną użyte w jednym […]
Flexbox Wyrównanie zawartości w CSS najprościej jest uzyskać poprzez dołączenie do projektu, któregoś z popularnych frameworków front-endowych. Przykładowo w Bootstrap czy Foundation wykorzystując GRID wystarczy tylko używać odpowiednich klas. Jednak nie jesteśmy skazani na korzystanie z Frameworków, bo z pomocą przychodzi nam Flexbox w CSS3. Uwaga justify-content jest wspierany powyżej Safari 5 oraz IE 10, […]
Nie trzeba chyba nikomu tłumaczyć do czego używa się formularzy w HTML. HTML5 dodał kilka elementów do FORM jak pole data czy telefon do formularza, ale niestety część z nich kiepsko wygląda na niektórych przeglądarkach. Dlatego poniżej zamieściłem listę elementów formularza, które śmiało można użyć i nie powinno z nimi być problemu w zależności od […]
Grid jest to siatka, na bazie której w łatwy sposób może zbudować responsywną stronę internetową. Projektowanie zawartości strony na siatce jest bardzo wygodne, a nowoczesne Frameworki takie jak Bootstrap czy Foundation sprawiają, że budowanie strony od zera wyłącznie z wykorzystaniem HTML i CSS staje się dużo bardziej czasochłonne i mało wydajne. Frameworki to nie tylko […]
Niektóre style CSS wymagają użycia dodatkowych prefiksów. Boleśnie mogą się o tym przekonać osoby, które nie sprawdzają efektów swojej pracy na różnych przeglądarkach oraz urządzeniach. W użyciu, są 4 prefiksy: -webkit – dotyczy przeglądarek Google Chrome, Safari, Opera -moz- dotyczy przeglądarki Mozilla Firefox -ms- dotyczy przeglądarek Microsoft Internet Explorer -o- dotyczy przeglądarek Opera Zostało one […]
Wiedza o tym, że kolejność deklaracji ma znaczenie może zaoszczędzić dużo czasu osobom, które są na początkowym etapie poznawania CSS3. Jednak nie dotyczy to tylko osób początkujących w CSS3, podobny problem może pojawić się również używając framework Bootstrap. Osoba używająca framework oraz dodająca własne style CSS np. w osobnym pliku STYLE.CSS, może być niezwykle zdziwiona […]
Zdarzają się sytuacje, kiedy po załączeniu fonta (czcionki) do strony www okazuje się, że jest brak polskich czcionek. Przedstawię dwa rozwiązania tego problemu, które mogły to spowodować: W przypadku użycia czcionek google fonts najpierw należy zacząć od sprawdzenia czy wybrana czcionka w ogóle dysponuje polskimi znakami. Jeżeli mamy to już potwierdzone (w sposób podany na […]
Na pozór banalna sprawa jaką jest stylowanie linków w CSS3 czyli dopasowanie wyglądu linków według własnych preferencji może okazać się nie lada wyzwaniem. Najłatwiej ustalić styl dla linków używając prostego selektora (w tym wypadku link będzie niebieski), jednak rozwiązanie to niesie ze sobą potencjalny problem: a { color: blue; } Jeżeli (dla powyższego przykładu) w […]
W sytuacji kiedy znudziły nam się standardowe ramki w CSS3, a równocześnie chcielibyśmy żeby były one zgodne z Responsive Web Design niezastąpioną funkcją CSS3 jest BORDER-IMAGE, który umożliwia wykorzystanie osobnego pliku jako ramki. Najważniejszą zaletą tej funkcji jest fakt, że przy rozszerzaniu rogi ramki się nie skalują czyli dany element nigdy nie straci na jakości. […]
Redux – zarządzanie stanem w React
RxJs – programowanie reaktywne w Angular2
ILLUSTRATOR – trasowanie zdjęć na wektory
SASS / SCSS preprocesory CSS: modułowość, warunki, pętle 2/2
PHOTOSHOP – niedziałająca funkcjonalność 3D