Jedną z głównych cech WordPressa jest jego prostota. Tworząc wtyczki często chcemy zadbać o to by ich użytkownik nie musiał dotykać kodu. Niestety niemożliwym jest stworzenie kodu CSS odpowiadającego za wygląd kodu wynikowego wtyczki, który będzie pasował do wszystkich dostępnych motywów. Stąd autorzy wtyczek tworzą często dodatkowe opcje, pozwalające określić podstawowe kolory. Czytaj dalej currentColor – prosty sposób na zmniejszenie ilości generowanego kodu CSS
Tag: CSS
type.js – dodatkowe właściwości CSS dla tekstu
type.js to biblioteka, która emuluje działanie dodatkowych właściwości CSS odpowiadających za wygląd tekstu.
Jak łatwo się domyślić robi to czasem dość brutalnie np. poprzez otoczenie każdej litery elementem typu span, ale w niektórych przypadkach, gdy zależy nam na ładnej typografii warto rozważyć jej zastosowanie, szczególnie wtedy, gdy nie mamy zbyt dużo tekstu do poprawiania w ten sposób.
Dostosowanie motywów WordPressa do druku
Przygotowanie wsparcia wersji drukowanej w motywach dla WordPressa
Obecnie ładna wersja do druku to często pomijany aspekt stylowania motywów – istnieje jednak wiele rodzajów witryn, gdzie wersja drukowana może być pomocna dla użytkownika – najprostszy przykład to wszelkie blogi kulinarne (choć oczywiście są ludzie, którzy zaryzykują zalanie tabletu w kuchni ;)). Największa zaletą przygotowania wersji drukowanej jest to, że jej stylowanie nie wymaga z reguły zbyt dużo czasu.
Grafika we wpisie powstała na bazie zestawu Hand Drawn Web icons.
JP Custom CSS
JP Custom CSS
Jeżeli spodobał się Wam moduł Custom CSS dostępny w JetPacku, ale nie macie ochoty instalować samego JetPacka, to powyższa wtyczka jest dla Was. Dodatkowo w profilu użytkownika JP Bot znajdziecie też kilka innych przydatnych modułów wyciągniętych z kodu JetPacka.
The State of Web Type
The State of Web Type
Trochę w nawiązaniu do wczorajszego wpisu – strona na której można sprawdzić obecny stan wsparcia różnych funkcji CSS związanych z typografią.
SmartUnderline – piękne podkreślenia tekstu dla Twojej strony
SmartUnderline
Powyższa wtyczka to bardziej ciekawostka i pokaz tego jak sprytnymi technikami CSS można wzbogacić typografię na swojej stronie. Choć podejrzewam, że wielu miłośników typografii skusi możliwość posiadania pięknych podkreśleń tekstu.
Własne alerty, responsywne wykresy, materiały o SVG – Front-endowe Inspiracje #5
W końcu odkopałem się z zaległości po ostatnich konferencjach i wyjazdach, a zanim wpadnę w wir kolejnych pora na garść linków ze świata front-endu.
Czytaj dalej Własne alerty, responsywne wykresy, materiały o SVG – Front-endowe Inspiracje #5
Ukryte funkcje Emmeta, DPI, filmy o CSS oraz gra dla grafików – Front-endowe Inspiracje #4
Ukryte funkcje Emmeta
Zbiór kilku ciekawych funkcji Emmeta – jeżeli korzystasz z tego rozwiązania w swoim edytorze – lektura obowiązkowa.
Poradnik o DPI dla projektantów
Wnikliwa analiza tematu rozdzielczości ekranów dla projektantów.
C3.js
Biblioteka do tworzenia wykresów bazująca na D3.
Filmy o CSS
Lista najważniejszych materiałów video dotyczących CSS z ostatnich lat.
sweep.js
Malutka biblioteka do tworzenia płynnych przejść kolorów z użyciem przestrzeni kolorów HSL i HUSL. Dla niewtajemniczonych polecam ten wpis.
Colorrun – gra dla grafików
Prosta gra skupiająca się na wybieraniu jaśniejszego koloru z dwóch widocznych na ekranie. Aby nie było za łatwo – trzeba to robić w coraz krótszym czasie.
Beautiful Open
Kolekcja ładnych witryn powiązanych z projektami Open Source.
perfBar
Biblioteka do analizy wydajności stron.
uilang
Ciekawy koncept stworzenia prostego narzędzia do tworzenia animacji z użyciem języka naturalnego.
Favikonki, generator rozszerzeń dla Chrome, responsywne SVG i efekt powiększenia w CSS – Front-endowe Inspiracje #3
Extensionizr
Generator dla tych, którzy szybko chcą sobie wygenerować bazę do stworzenia rozszerzenia dla przeglądarki Chrome.
Wszystko co trzeba wiedzieć na temat favikonek
A w zasadzie nie tylko favikonek, ale też innych rodzajów ikon, których wraz ze wzrostem rynku urządzeń mobilnych znacząco przybyło.
JavaScript Quality Guide
Gdyby ktoś szukał wytycznych jak pisać ładny i porządny kod w JavaScript, to warto przejrzeć powyższy poradnik
Tworzenie responsywnych grafik SVG
W czasach gdy format SVG staje się coraz bardziej popularny ze względu na wyświetlacze o wysokiej rozdzielczości, warto poznać techniki, które umożliwiają tworzenie grafik wyświetlających się różnie w zależności od rozmiaru ekranu.
PatternBold
Mała kolekcja wzorów tła wykonanych w SVG wraz z prostym generatorem pozwalającym określić rozmiar, kolor i rodzaj wzoru.
Monocle
Świetny efekt, który można ciekawe wykorzystać w wielu rodzajach aplikacji.
Kalkulator maksymalnych rozmiarów zdjęć wyświetlanych w iOS
Proste narzędzie, które pozwala szybko sprawdzić czy rozmiary naszego obrazka nie przekraczają wymiarów obsługiwanych przez poszczególne urządzenia z iOS.
Front-endowe Inspiracje #2
3 API JavaScript, które mogą się okazać przydatne w przyszłości
Artykuł opisujący 3 API: Web Alarms API, Presentation API oraz Standby API, które są dopiero w początkowej fazie rozwoju, ale warto ten rozwój śledzić, gdyż mogą znacząco wzbogacić nasze webaplikacje. Polecam też lekturę wpisu o innych 5 API, które w przyszłości mogą znacząco usprawnić mobilne wersje stron internetowych.
jstinytest – najprostsza biblioteka do testów jednostkowych w JavaScript
Jeżeli nie macie czasu lub ochoty rozgryzać API i konfiguracji popularnych frameworków do testów jednostkowych w JavaScript, a jednocześnie potrzebujecie prostego mechanizmu przeprowadzania testów jednostkowych to jstinytest jest dla Was 🙂
Autopolyfiller dla JavaScript
Autopolyfiller to idealne rozwiązanie dla wszystkich, którzy nie chcą więcej pamiętać o tym dla jakiej przeglądarki i kiedy trzeba dodać kod by wesprzeć niezaimplementowaną funkcjonalność JavaScript. To taki autoprefixer tylko dla JavaScript 🙂
Offline-first
Zbiór materiałów na temat przygotowywania stron i webaplikacji, które sprawnie działają bez połączenia z Internetem.
baguetteBox
Skrypt tworzący popupy ze zdjęciami dla galerii zdjęć – w odróżnieniu od większości innych tego typu skryptów ten działa bez pomocy dodatkowych frameworków.
20 darmowych fontów stylizowanych na pismo odręczne
Świetny zestaw naprawdę ładnych i darmowych fontów.
gif.js
Biblioteka w JavaScript do manipulowania animowanymi grafikami w formacie GIF.
Pexels – kolekcja darmowych zdjęć
Kolejna strona z dużym zbiorem darmowych zdjęć na licencji Creative Commons Zero (CC0).
Mazwai – kolekcja darmowych filmów wideo
Kolekcja darmowych filmów wideo do wykorzystania we własnych projektach na licencji Creative Commons.
CSS Guidelines
Wytyczne służące tworzeniu czytelnego i skalowalnego kodu CSS.
CSS Shorthand Generator
Jeżeli macie problemy z zapamiętaniem skróconej składni CSS to ta strona wygeneruje skrócony kod za Was.
Wszystko co powinno się wiedzieć o wyrażeniach regularnych w JavaScript
Pokaźny zbiór użytecznych informacji na temat wyrażeń regularnych w JavaScript.
Dwa przykłady preloaderów dla stron
Strony WWW coraz częściej upodabniane są do aplikacji na tablety i smartfony – preloadery dla całych stron to jeden z przykładów na implementację efektów rodem z platform mobilnych.