Tag: CSS3

Viewport Units

[Wskazówka] Rozmiary względem obszaru roboczego: vw, vh, vmax, vmin

Czy kiedykolwiek zastanawiałeś się, w jaki sposób ustawić rozmiar elementu na stronie dokładnie względem okna przeglądarki? Ilekroć razy chciałeś użyć do tego Javascriptu? Jeżeli na oba pytania odpowiedziałeś sobie wynikiem większym niż zero, zapoznaj się z poniższą wskazówką. W dzisiejszym wpisie zademonstruję Ci w jaki sposób odnosić się do rozmiarów elementów względem okna przeglądarki (viewport). Pomocne […]

Loader

Prosty preloader CSS3 bez użycia Javascriptu

Tworząc aplikacje przeglądarkowe powinniśmy zrobić wszystko, aby użytkownicy korzystający z nich czuli jak największy komfort. Powinno zależeć nam na dobrej optymalizacji skryptów, jak najmniejszej liczbie przeładowań strony oraz prostocie i intuicyjności interfejsu. Nawet jeżeli klient końcowy musi czekać, powinniśmy go o tym informować. Informacja, niezależnie od tego jaka jest, znacznie lepiej wpływa na wewnętrzny spokój aniżeli […]

Jak segregować właściwości w deklaracjach CSS

Jak pisać deklaracje CSS? Czyli o kolejności właściwości.

Możemy wyróżnić trzy sposoby pisania deklaracji CSS (a konkretnie segregowania właściwości). Pierwszy sposób zakłada grupowanie par właściwość-wartość na zasadzie ich ważności. Drugi opiera się o segregacji alfabetycznej, trzeci zaś to mówiąc krótko sposób opierający się o brak sposobu… Który z nich jest najlepszy?

dokąd zmierza css

Dokąd zmierza CSS?

Im więcej czytam o tym jak powinno się tworzyć kaskadowe arkusze stylów tym więcej myśle w bardziej ogólnych kategoriach o tym czym jest CSS i czym mógłby być. Nie da się ukryć, że CSS jest technologią prostą, pewnie zbyt prostą jak na współczesne potrzeby i dodatkowo zmienia się relatywnie wolno. Właściwie wszystko to co wymyślamy […]

screenshot_00119

Informacja o autorze jako przykład BEM i OOCSS

Wiadomo, że przykład kodu tłumaczy pewne zagadnienie lepiej niż sucha teoria. Poniższy elementu interfejsu został stworzony na potrzeby Bydgoszcz Web Development Meetup #4 jako demo do mojej prezentacji o dobrych praktykach CSS, BEM i OOCSS. W kodzie zastosowane jest kilka ciekawych podejść m. in. logiczne grupowanie selektorów [ ]. Podstawowymi zaletami takiego rozwiązania jest duża przenośność, […]

highres_339750322.jpeg

Micro Relacja: Bydgoszcz Web Development Meetup #4 + prezentacja

Kolejne, już czwarte, spotkanie Bydgoszcz Web Development Meetup za nami. Miałem przyjemność poprowadzić jedną z trzech prezentacji, która dotyczyła dobrych praktyk CSS, BEM, OOCSS na przykładzie inuit.css. Obok mnie prezentacje przeprowadzili Sebastian Małyska (Przychodzi tester do developera) oraz Michał Kowalkowski (O backwi.re i prowadzeniu startupu w Chinach). Na zakończenie Lightning Talks, podczas których m. in. pośmiałem […]

Responsywne tabele na stronach internetowych

„Przesuwane tabelki” – czyli sposób na responsywność tabel na stronie internetowej

Zapewnienie użytkownikom urządzeń mobilnych wygodnego i szybkiego przeglądania stron internetowych to dzisiaj już standardowy wymóg. Responsive Web Design to jeden z fundamentów współczesnej sieci, a rosnąca ilość użytkowników tabletów i smartphone’ów zmusza nas do tego by nie zapominać o użytkownikach tychże urządzeń. O ile technologia poszła na tyle do przodu, że RWD stało się możliwe […]

big-bem

Block, Element, Modifier w CSS

Miałeś kiedyś taką sytuację, że pod koniec dużego projektu sam nie mogłeś połapać się we własnym kodzie? A może jesteś częścią większego zespołu i często nie wiesz dlaczego Twoi koledzy tworzą takie dziwaczne konstrukcje w arkuszach? Witaj w klubie! Każdy frontendowiec miał coś takiego. Można powiedzieć, że to niestety część zawodu, ale nie martw się […]

Dzielenie wyrazów w CSS

Wskazówka: Jak automatycznie dzielić wyrazy w CSS?

Jeszcze jakiś czas temu automatyczne dzielenie wyrazów na stronach internetowych było właściwie niemożliwe. Sytuacja ta uległa nieznacznej zmianie. Dzisiaj – co prawda na tę chwilę musimy korzystać z przedrostków i to w nie wszystkich przeglądarkach – możemy zaprzęgnąć do działania nasz arkusz CSS. Jest to funkcja dopiero rozwijana, ale należy wierzyć, że w niedługim czasie […]

ID-100231888-22

CSS3 Flexbox – podstawowe założenia

Społecznośc deweloperów od dawna czekała na ‚lepszy’ sposób tworzenia układów stron internetowych. Mankamenty konstrukcji opartych na elementach blokowych ze zdeklarowaną właściwością float, liczne obejścia i sztuczki, które stosowano aby dostosować sztywne układy do wyświetlania się na rozmaitych rozdzielczościach w sposób ergonomiczny i jeszcze wiele innych niedogodności stały się częścią dnia codziennego dla wielu twórców stron […]