Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
CZEŚĆ! 
bartłomiejkrztuk 2014
BOOTSTRAP W JOOMLA 
modyfikować, rozszerzać, nadpisywać oraz czy 
w ogóle jest on niezbędny? 
bartłomiejkrztuk 2014
CZYM JEST BOOTSTRAP? 
bartłomiejkrztuk 2014
‣ Framework HTML, CSS oraz JavaScript 
‣ Dystrybuowany na licencji MIT (Open 
Source) 
‣ Stworzony przez Twitter’a 
‣ Najp...
Główne zalety Bootstrap’a… 
‣“Scaffolding” czyli rusztowanie - style resetujące, 
12 kolumnowy grid, globalne style itd. 
...
…i trochę wad 
‣Waga (~ 160KB na starcie) 
‣130KB - CSS (wersja skompresowana) 
‣29KB - JavaScript (wersja skompresowana) ...
“Bootstrap 3 is not backwards compatible with v2.x” 
– getbootstrap.com 
bartłomiejkrztuk 2014
Struktura kodu HTML 
bartłomiejkrztuk 2014
Podobieństwo 
bartłomiejkrztuk 2014
Jak opisać Bootstrap’a w 160 znakach? 
bartłomiejkrztuk 2014
BOOTSTRAP W JOOMLA! 
bartłomiejkrztuk 2014
‣ Bootstrap został dodany do Joomla wraz z wydaniem 
wersji 3.0.0 (27.09.2012) 
‣ Wchodzi w część biblioteki JUI (Joomla U...
Timeline 
Bootstrap v.2.0.0 
31.01.2012 
Bootstrap v.2.3.2 
Joomla 3.0.x 
17.06.2013 
Bootstrap v.3.0.0 
19.08.2013 
Boots...
Zalety użycia framework’a Bootstrap 
w Joomla 
‣ Ujednolicenie interfejsu (back-end) 
‣ Responsywność - OOTB (out of the b...
WARIANT IDEALNY 
bartłomiejkrztuk 2014
MODUŁ KOMPONENT 
bootstrap.css 
bootstrap.js 
… 
JUI 
SZABLON WTYCZKA 
bartłomiejkrztuk 2014
A JAK TO CZĘSTO WYGLĄDA 
W PRAKTYCE? 
bartłomiejkrztuk 2014
MODUŁ KOMPONENT 
bootstrap.css 
bootstrap.js 
… 
JUI 
Własny CSS/JS 
Zakłada, że szablon korzysta 
z BS v.2.3.2 ale tego n...
JAK UŻYWAĆ BOOTSTRAP Z 
JOOMLA? 
bartłomiejkrztuk 2014
Wariant minimum - wykorzystanie JUI 
bartłomiejkrztuk 2014
Z wykorzystaniem LESS 
bartłomiejkrztuk 2014
JAK NADPISYWAĆ LUB 
DODAWAĆ WŁASNE STYLE? 
bartłomiejkrztuk 2014
Gdy korzystamy z plików .css/.js (JUI) 
‣ Wykluczamy możliwość edycji styli oryginalnych tak 
więc każda zmiana wymaga nad...
Przykład nadpisywania reguł CSS 
.yourSuffix a.label:hover { color: #ffffff; } 
KOD POCHODZĄCY Z BOOTSTRAP’A 
DODATKOWA KL...
Gdy korzystamy z LESS 
‣ Szczególnie polecane dla twórców szablonów 
‣ Pozwala szybko stworzyć mocno zmodyfikowaną 
wersję...
variables.less 
// Grays 
// ------------------------- 
@black: #000; 
@grayDarker: #222; 
@grayDark: #333; 
@gray: #555; ...
Co można zmodyfikować dzięki variables.less? 
‣ Wszystkie kolory występujące w stylach CSS 
‣ Fonty - font-family, font-si...
Jak zrobić to jeszcze szybciej? 
Bootstrap Magic 
bartłomiejkrztuk 2014
bartłomiejkrztuk 2014
Podobne rozwiązania 
‣ BootSwatchr - http://bootswatchr.com/ 
‣ StyleBootstrap - http://stylebootstrap.info/ 
‣ Fancyboot ...
CZY BOOTSTRAP JEST MI 
WŁAŚCIWIE POTRZEBNY? 
TO ZALEŻY 
bartłomiejkrztuk 2014
Tak, jeśli: 
‣ Masz wrodzoną awersję do CSS i JavaScript 
‣ Czas odgrywa kluczową rolę w projekcie 
‣ Zależy Ci na respons...
Nie, jeśli: 
‣Wydajność, optymalizacja i szybkość działania jest 
priorytetem 
‣ Użycie BS będzie wymagało dużej ilości na...
JAKICH PRZYPADKÓW 
SZCZEGÓLNIE UNIKAĆ? 
bartłomiejkrztuk 2014
Znacząca ilość niewykorzystanych 
reguł CSS 
Z wykorzystaniem BS Bez wykorzystania BS 
bartłomiejkrztuk 2014
Wyniki z Chrome Dev Tools (Audits) 
3941 
rules (90%) of CSS not used 
by the current page. 
1738 
rules (78%) of CSS not ...
Dla dociekliwych… 
bartłomiejkrztuk 2014
Kontakt 
@BartekKrztuk 
www.krztuk.pl 
bartłomiejkrztuk 2014
PYTANIA? 
bartłomiejkrztuk 2014
DZIĘKUJĘ! 
bartłomiejkrztuk 2014
Upcoming SlideShare
Loading in …5
×

Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy 
w ogóle jest on niezbędny?

3,123 views

Published on

Czym jest Bootstrap? Jakie są jego największe wady i zalety? Jak go używać i nadpisywać w Joomla?

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy 
w ogóle jest on niezbędny?

  1. 1. CZEŚĆ! bartłomiejkrztuk 2014
  2. 2. BOOTSTRAP W JOOMLA modyfikować, rozszerzać, nadpisywać oraz czy w ogóle jest on niezbędny? bartłomiejkrztuk 2014
  3. 3. CZYM JEST BOOTSTRAP? bartłomiejkrztuk 2014
  4. 4. ‣ Framework HTML, CSS oraz JavaScript ‣ Dystrybuowany na licencji MIT (Open Source) ‣ Stworzony przez Twitter’a ‣ Najpopularniejsze repozytorium GitHub’a (~ 72k ★) ‣ Ponad 20 wydań w tym dwa kluczowe: v2 oraz v3 ‣ Mobile first (v3) ‣ Responsywny bartłomiejkrztuk 2014
  5. 5. Główne zalety Bootstrap’a… ‣“Scaffolding” czyli rusztowanie - style resetujące, 12 kolumnowy grid, globalne style itd. ‣ Komponenty - przyciski, nawigacja, etykiety, alerty, menu, paginacja… ‣Wsparcie dla LESS/Sass a co za tym idzie możliwość dostosowania wyglądu ‣Prostota użycia i szybkość wdrożenia projektów opartych o Bootstrap ‣Spójność bartłomiejkrztuk 2014
  6. 6. …i trochę wad ‣Waga (~ 160KB na starcie) ‣130KB - CSS (wersja skompresowana) ‣29KB - JavaScript (wersja skompresowana) ‣Konflikty wersji v2 i v3 ‣Wymaga aktualizacji ‣bootstrap.css nie przechodzi walidacji W3C dając 31 błędów i 141 ostrzeżeń ‣bootstrap.js nie używa średników w wielu miejscach (w wersji surowej) więc narzędzia sprawdzające jakość kodu produkują znaczącą ilość ostrzeżeń bartłomiejkrztuk 2014
  7. 7. “Bootstrap 3 is not backwards compatible with v2.x” – getbootstrap.com bartłomiejkrztuk 2014
  8. 8. Struktura kodu HTML bartłomiejkrztuk 2014
  9. 9. Podobieństwo bartłomiejkrztuk 2014
  10. 10. Jak opisać Bootstrap’a w 160 znakach? bartłomiejkrztuk 2014
  11. 11. BOOTSTRAP W JOOMLA! bartłomiejkrztuk 2014
  12. 12. ‣ Bootstrap został dodany do Joomla wraz z wydaniem wersji 3.0.0 (27.09.2012) ‣ Wchodzi w część biblioteki JUI (Joomla User Interface) ‣ Wraz z dodaniem Bootstrap’a przebudowano back-end (Isis) oraz front-end (Prostar) ‣ Wsparcie dla LESS (media/jui/less) ‣ Aktualnie używana wersja - 2.3.2 bartłomiejkrztuk 2014
  13. 13. Timeline Bootstrap v.2.0.0 31.01.2012 Bootstrap v.2.3.2 Joomla 3.0.x 17.06.2013 Bootstrap v.3.0.0 19.08.2013 Bootstrap v.3.2.0 26.06.2014 27.09.2012 Joomla 3.3.x 25.07.2014 do dnia dzisiejszego bartłomiejkrztuk 2014
  14. 14. Zalety użycia framework’a Bootstrap w Joomla ‣ Ujednolicenie interfejsu (back-end) ‣ Responsywność - OOTB (out of the box) ‣ Korzystanie ze wspólnych zasobów przez komponenty, szablony i moduły (bootstrap.css, bootstrap.js) ‣ Łatwość modyfikacji dzięki LESS ‣ Droga na skróty dla deweloperów nie lubiących CSS i JavaScript bartłomiejkrztuk 2014
  15. 15. WARIANT IDEALNY bartłomiejkrztuk 2014
  16. 16. MODUŁ KOMPONENT bootstrap.css bootstrap.js … JUI SZABLON WTYCZKA bartłomiejkrztuk 2014
  17. 17. A JAK TO CZĘSTO WYGLĄDA W PRAKTYCE? bartłomiejkrztuk 2014
  18. 18. MODUŁ KOMPONENT bootstrap.css bootstrap.js … JUI Własny CSS/JS Zakłada, że szablon korzysta z BS v.2.3.2 ale tego nie sprawdza. Korzysta zatem z klas Bootstrap, które nie są wczytane co w efekcie daje brak styli. SZABLON Bootstrap v.3 WTYCZKA bartłomiejkrztuk 2014
  19. 19. JAK UŻYWAĆ BOOTSTRAP Z JOOMLA? bartłomiejkrztuk 2014
  20. 20. Wariant minimum - wykorzystanie JUI bartłomiejkrztuk 2014
  21. 21. Z wykorzystaniem LESS bartłomiejkrztuk 2014
  22. 22. JAK NADPISYWAĆ LUB DODAWAĆ WŁASNE STYLE? bartłomiejkrztuk 2014
  23. 23. Gdy korzystamy z plików .css/.js (JUI) ‣ Wykluczamy możliwość edycji styli oryginalnych tak więc każda zmiana wymaga nadpisania istniejących już reguł = ekstra kod ‣ Duży problem przy kompletnej zmianie kolorystyki ‣ Uciążliwe resetowanie styli (vendor prefixes) ‣ Proponuję stworzyć oddzielny plik np. bootstrap_override.css, gdzie znajdować się będą tylko style nadpisujące oryginalne ‣ Poprzedzamy każdą nadpisaną klasę BS własnym ID lub klasą, co pozwoli nam nie wchodzić w konflikt z innymi rozszerzeniami bartłomiejkrztuk 2014
  24. 24. Przykład nadpisywania reguł CSS .yourSuffix a.label:hover { color: #ffffff; } KOD POCHODZĄCY Z BOOTSTRAP’A DODATKOWA KLASA LUB ID POZWALAJĄCE UNIKNĄĆ KONFLIKTÓW Z INNYMI ROZSZERZENIAMI bartłomiejkrztuk 2014
  25. 25. Gdy korzystamy z LESS ‣ Szczególnie polecane dla twórców szablonów ‣ Pozwala szybko stworzyć mocno zmodyfikowaną wersję BS ‣ Należy skorzystać z variables.less ‣ Istnieje wiele narzędzi ułatwiających dostosowanie zmiennych BS ‣ Większość zmian wprowadzanych jest bez dodatkowego kodu bartłomiejkrztuk 2014
  26. 26. variables.less // Grays // ------------------------- @black: #000; @grayDarker: #222; @grayDark: #333; @gray: #555; @grayLight: #999; @grayLighter: #eee; @white: #fff; ! ! // Accent colors // ------------------------- @blue: #049cdb; @blueDark: #0064cd; @green: #46a546; @red: #9d261d; @yellow: #ffc40d; @orange: #f89406; @pink: #c3325f; @purple: #7a43b6; bartłomiejkrztuk 2014
  27. 27. Co można zmodyfikować dzięki variables.less? ‣ Wszystkie kolory występujące w stylach CSS ‣ Fonty - font-family, font-size, line-height ‣ Style tabel ‣ Buttony ‣ Tabele ‣ Grid - odstępy, szerokość itp. bartłomiejkrztuk 2014
  28. 28. Jak zrobić to jeszcze szybciej? Bootstrap Magic bartłomiejkrztuk 2014
  29. 29. bartłomiejkrztuk 2014
  30. 30. Podobne rozwiązania ‣ BootSwatchr - http://bootswatchr.com/ ‣ StyleBootstrap - http://stylebootstrap.info/ ‣ Fancyboot - http://fancyboot.designspebam.com/ bartłomiejkrztuk 2014
  31. 31. CZY BOOTSTRAP JEST MI WŁAŚCIWIE POTRZEBNY? TO ZALEŻY bartłomiejkrztuk 2014
  32. 32. Tak, jeśli: ‣ Masz wrodzoną awersję do CSS i JavaScript ‣ Czas odgrywa kluczową rolę w projekcie ‣ Zależy Ci na responsywności a nie masz w tej kwestii doświadczenia ‣ Tworzysz prototyp, makietę itp. lub narzędzie dla wąskiego grona użytkowników, które nie wymaga dedykowanego projektu graficznego ‣ Zamierzasz wykorzystać tę samą wersję BS co Joomla bartłomiejkrztuk 2014
  33. 33. Nie, jeśli: ‣Wydajność, optymalizacja i szybkość działania jest priorytetem ‣ Użycie BS będzie wymagało dużej ilości nadpisanych styli ‣ Nie potrafisz zadbać o kompatybilność z innymi rozszerzeniami wykorzystującymi BS ‣ Projekt graficzny posiada oryginalny układ i dostosowanie BS będzie wymagające bartłomiejkrztuk 2014
  34. 34. JAKICH PRZYPADKÓW SZCZEGÓLNIE UNIKAĆ? bartłomiejkrztuk 2014
  35. 35. Znacząca ilość niewykorzystanych reguł CSS Z wykorzystaniem BS Bez wykorzystania BS bartłomiejkrztuk 2014
  36. 36. Wyniki z Chrome Dev Tools (Audits) 3941 rules (90%) of CSS not used by the current page. 1738 rules (78%) of CSS not used by the current page. ‣ bootstrap.min.css: 94% is not used by the current page bartłomiejkrztuk 2014
  37. 37. Dla dociekliwych… bartłomiejkrztuk 2014
  38. 38. Kontakt @BartekKrztuk www.krztuk.pl bartłomiejkrztuk 2014
  39. 39. PYTANIA? bartłomiejkrztuk 2014
  40. 40. DZIĘKUJĘ! bartłomiejkrztuk 2014

×