Jeszcze jeden blog o programowaniu

Radosne twórczości leniwego programisty

Posts Tagged ‘angular

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

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

%d blogerów lubi to: