Jeszcze jeden blog o programowaniu

Radosne twórczości leniwego programisty

Archive for the ‘HTML, CSS’ Category

Bootswatch, czyli darmowe motywy dla znudzonych Bootstrapem

leave a comment »

Ciężko znaleźć w branży webowej programistę, który nie słyszał o Bootstrapie. Podejrzewam jednak, że mniej osób słyszało o kolekcji darmowych motywów – Bootswatch.
Na przykładzie prostej aplikacji w Angularze chciałbym przedstawić instalację jednego z tych darmowych motywów.

Początek nie odbiega od tego, co zwykle robimy. Generujemy czysty projekt Angular, np. narzędziem ng-cli, dodajemy wymagane zależności i instalujemy paczki potrzebne do uruchomienia projektu.

Po krótkiej chwili, gdy otrzymamy informację, że wszystkie zależności zostały zainstalowane poprawnie dodajemy styl wybranego przez nas motywu do globalnych stylów ładowanych w aplikacji – w pliku .angular-cli.json zmieniamy sekcję styles:

Gdyby nie było to widoczne na pierwszy rzut oka, użyłem motywu flatly.

Oczywiście, żeby nie było zbyt pięknie musiałem też „podkraść” fragment zawartości pliku custom.min.css – był w postaci skompresowanej, ale po rozplątaniu dostajemy mniej więcej coś takiego jak poniżej. W dużej mierze chodzi o odstępy pionowe pomiędzy komponentami.

„Zainspirowany” szablonem HTML z przykładu tego motywu wybrałem tylko kilka jego fragmentów żeby pokazać, że jednak coś tam działa:

I to by było wszystko co należy zrobić. Oczywiście można pokusić się o dodanie kilku plików JavaScript, które obsługują takie działania jak popovery czy okienka modalne, ale to może innym razem.

Całość dostępna w repozytorium GitHub.

Written by Filip Górczyński

2018.02.16 at 18:09:51

Zmiana kolejności zakładek w Chrome DevTools

leave a comment »

Jako programiści webowi dużą część czasu spędzamy w DevToolsach, czy jak kto woli – w „narzędziach programisty” – wbudowanych w przeglądarki (osobiście jestem zwolennikiem Chrome’a). W związku z tym dobrze jest skonfigurować to narzędzie – chociaż w niewielkim stopniu – pod siebie.

O ile dobrze jest wykorzystywać dobrodziejstwo skrótów klawiaturowych (do szybkiego podglądu których dostęp uzyskujemy poprzez kliknięcie 3 pionowych kropek [nie znam profesjonalnej nazwy, chociaż spotkałem się z „hamburger menu”] w prawym górnym narożniku DevTools – chodzi dokładnie o przycisk   ). Pełna lista skrótów dostępna jest na stronie chrome-devtools. Używanie skrótów klawiaturowych może znacznie przyspieszyć naszą pracę z tym narzędziem.

To o czym chciałbym jednak napisać to możliwość dostosowania zakładek w DevTools – nie wiem na ile znana jest to funkcja, ale może okazać się dość przydatna. Otóż jeśli nie korzystamy zbyt często z jakiejś zakładki to po prostu ją klikamy i przeciągamy, natomiast te, które wykorzystywane są przez nas najczęściej możemy przeciągnąć na początek, czego kolejnym plusem jest ich widoczność przy zmianie (głównie zmniejszaniu) okna Chrome.

Written by Filip Górczyński

2018.02.14 at 13:59:30

Angular 5 i Font-Awesome

leave a comment »

Jedną z możliwości integracji font-awesome z Angular jest użycie gotowych paczek z repozytoriów npm. Przegląd kilku – oraz szybki rzut oka na datę publikacji ostatnich zmian w tych paczkach wyłonił `angular-font-awesome’. I o ile instrukcja instalacji dostępna jest na stronie repozytorium tej paczki – nie jestem zwolennikiem ponownego szukania samej nazwy paczki ani jak jej użyć.

Dla porządku tworzymy sobie czysty projekt w Angularze:

Instalujemy wybrane przez nas paczki (jako, że jestem zwolennikiem yarna to tego będę używał):

yarn add od razu załatwi nam sprawę dodania tych paczek z odpowiednimi wersjami do pliku package.json.

Dodajemy odpowiednie importy w pliku app.module.js:

oraz ładujemy style globalnie dla całej aplikacji w pliku .angular-cli.json w sekcji styles:

I to już wszystko – powinniśmy mieć możliwość korzystania z ikonek font-awesome w naszej aplikacji wrzucając do szablonu, przykładowo:

Bonus: Bulma CSS Framework

Wartym uwagi jest niewielki framework CSS – Bulma. Instalujemy odpowiednią paczkę (oczywiście nie jest to jedyny sposób instalacji):

W pliku .angular-cli.json dodajemy odpowiednią referencję do pliku CSS naszego frameworka, aby był dostępny globalnie w całej aplikacji:

I oczywiście aby zobaczyć, czy wszystko działa, uzupełniamy np.: app.component.html przykładowym szablonem:

Uruchamiamy serwer i weryfikujemy w przeglądarce, czy wszystko śmiga.

Całość kodu źródłowego dostępna jest też w repozytorium NG5-FontAwesome-Bulma-Boilerplate. Klonujemy (git clone git@github.com:filipgorczynski/NG5-FontAwesome-Bulma-Boilerplate.git), przechodzimy do katalogu projektu (cd NG5-FontAwesome-Bulma-Boilerplate), odpalamy yarn aby zainstalować zależności z package.json i startujemy serwer (ng serve).

Written by Filip Górczyński

2018.02.07 at 10:49:21

Drag & Drop dla wierszy w tablicy [jQuery UI]

leave a comment »

Drag & drop powstały z drobnej modyfikacji Sortable z jQuery UI; do ściągnięcia kompletny przykład sortable.zip

Written by Filip Górczyński

2011.03.15 at 19:30:04

%d blogerów lubi to: