Download - Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy w ogóle jest on niezbędny?
![Page 1: Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy w ogóle jest on niezbędny?](https://reader038.vdocuments.pub/reader038/viewer/2022110307/55637490d8b42a4b628b4f4a/html5/thumbnails/1.jpg)
bartłomiejkrztuk 2014
CZEŚĆ!
![Page 2: Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy w ogóle jest on niezbędny?](https://reader038.vdocuments.pub/reader038/viewer/2022110307/55637490d8b42a4b628b4f4a/html5/thumbnails/2.jpg)
bartłomiejkrztuk 2014
BOOTSTRAP W JOOMLAmodyfikować, rozszerzać, nadpisywać oraz czy
w ogóle jest on niezbędny?
![Page 3: Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy w ogóle jest on niezbędny?](https://reader038.vdocuments.pub/reader038/viewer/2022110307/55637490d8b42a4b628b4f4a/html5/thumbnails/3.jpg)
bartłomiejkrztuk 2014
CZYM JEST BOOTSTRAP?
![Page 4: Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy w ogóle jest on niezbędny?](https://reader038.vdocuments.pub/reader038/viewer/2022110307/55637490d8b42a4b628b4f4a/html5/thumbnails/4.jpg)
bartłomiejkrztuk 2014
‣ 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
![Page 5: Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy w ogóle jest on niezbędny?](https://reader038.vdocuments.pub/reader038/viewer/2022110307/55637490d8b42a4b628b4f4a/html5/thumbnails/5.jpg)
bartłomiejkrztuk 2014
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ść
![Page 6: Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy w ogóle jest on niezbędny?](https://reader038.vdocuments.pub/reader038/viewer/2022110307/55637490d8b42a4b628b4f4a/html5/thumbnails/6.jpg)
bartłomiejkrztuk 2014
…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ń
![Page 7: Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy w ogóle jest on niezbędny?](https://reader038.vdocuments.pub/reader038/viewer/2022110307/55637490d8b42a4b628b4f4a/html5/thumbnails/7.jpg)
bartłomiejkrztuk 2014
– getbootstrap.com
“Bootstrap 3 is not backwards compatible with v2.x”
![Page 8: Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy w ogóle jest on niezbędny?](https://reader038.vdocuments.pub/reader038/viewer/2022110307/55637490d8b42a4b628b4f4a/html5/thumbnails/8.jpg)
bartłomiejkrztuk 2014
Struktura kodu HTML
![Page 9: Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy w ogóle jest on niezbędny?](https://reader038.vdocuments.pub/reader038/viewer/2022110307/55637490d8b42a4b628b4f4a/html5/thumbnails/9.jpg)
bartłomiejkrztuk 2014
Podobieństwo
![Page 10: Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy w ogóle jest on niezbędny?](https://reader038.vdocuments.pub/reader038/viewer/2022110307/55637490d8b42a4b628b4f4a/html5/thumbnails/10.jpg)
bartłomiejkrztuk 2014
Jak opisać Bootstrap’a w 160 znakach?
![Page 11: Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy w ogóle jest on niezbędny?](https://reader038.vdocuments.pub/reader038/viewer/2022110307/55637490d8b42a4b628b4f4a/html5/thumbnails/11.jpg)
bartłomiejkrztuk 2014
BOOTSTRAP W JOOMLA!
![Page 12: Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy w ogóle jest on niezbędny?](https://reader038.vdocuments.pub/reader038/viewer/2022110307/55637490d8b42a4b628b4f4a/html5/thumbnails/12.jpg)
bartłomiejkrztuk 2014
‣ 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
![Page 13: Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy w ogóle jest on niezbędny?](https://reader038.vdocuments.pub/reader038/viewer/2022110307/55637490d8b42a4b628b4f4a/html5/thumbnails/13.jpg)
bartłomiejkrztuk 2014
Timeline
Bootstra
p v.2.0.0
31.0
1.20
12
Bootstra
p v.2.3.2
17.0
6.20
13
Bootstra
p v.3.0.0
19.0
8.20
13
Bootstra
p v.3.2.0
26.0
6.20
14
Joomla 3.0.x
27.0
9.20
12
do dnia dzisiejszego
Joomla 3.3.x
25.0
7.20
14
![Page 14: Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy w ogóle jest on niezbędny?](https://reader038.vdocuments.pub/reader038/viewer/2022110307/55637490d8b42a4b628b4f4a/html5/thumbnails/14.jpg)
bartłomiejkrztuk 2014
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
![Page 15: Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy w ogóle jest on niezbędny?](https://reader038.vdocuments.pub/reader038/viewer/2022110307/55637490d8b42a4b628b4f4a/html5/thumbnails/15.jpg)
bartłomiejkrztuk 2014
WARIANT IDEALNY
![Page 16: Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy w ogóle jest on niezbędny?](https://reader038.vdocuments.pub/reader038/viewer/2022110307/55637490d8b42a4b628b4f4a/html5/thumbnails/16.jpg)
bartłomiejkrztuk 2014
bootstrap.css bootstrap.js
…
JUI
MODUŁ KOMPONENT
SZABLON WTYCZKA
![Page 17: Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy w ogóle jest on niezbędny?](https://reader038.vdocuments.pub/reader038/viewer/2022110307/55637490d8b42a4b628b4f4a/html5/thumbnails/17.jpg)
bartłomiejkrztuk 2014
A JAK TO CZĘSTO WYGLĄDA W PRAKTYCE?
![Page 18: Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy w ogóle jest on niezbędny?](https://reader038.vdocuments.pub/reader038/viewer/2022110307/55637490d8b42a4b628b4f4a/html5/thumbnails/18.jpg)
bartłomiejkrztuk 2014
bootstrap.css bootstrap.js
…
JUI
MODUŁ KOMPONENT
SZABLON WTYCZKABootstrap v.3
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.
![Page 19: Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy w ogóle jest on niezbędny?](https://reader038.vdocuments.pub/reader038/viewer/2022110307/55637490d8b42a4b628b4f4a/html5/thumbnails/19.jpg)
bartłomiejkrztuk 2014
JAK UŻYWAĆ BOOTSTRAP Z JOOMLA?
![Page 20: Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy w ogóle jest on niezbędny?](https://reader038.vdocuments.pub/reader038/viewer/2022110307/55637490d8b42a4b628b4f4a/html5/thumbnails/20.jpg)
bartłomiejkrztuk 2014
Wariant minimum - wykorzystanie JUI
![Page 21: Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy w ogóle jest on niezbędny?](https://reader038.vdocuments.pub/reader038/viewer/2022110307/55637490d8b42a4b628b4f4a/html5/thumbnails/21.jpg)
bartłomiejkrztuk 2014
Z wykorzystaniem LESS
![Page 22: Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy w ogóle jest on niezbędny?](https://reader038.vdocuments.pub/reader038/viewer/2022110307/55637490d8b42a4b628b4f4a/html5/thumbnails/22.jpg)
bartłomiejkrztuk 2014
JAK NADPISYWAĆ LUB DODAWAĆ WŁASNE STYLE?
![Page 23: Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy w ogóle jest on niezbędny?](https://reader038.vdocuments.pub/reader038/viewer/2022110307/55637490d8b42a4b628b4f4a/html5/thumbnails/23.jpg)
bartłomiejkrztuk 2014
‣ 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
Gdy korzystamy z plików .css/.js ( JUI)
![Page 24: Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy w ogóle jest on niezbędny?](https://reader038.vdocuments.pub/reader038/viewer/2022110307/55637490d8b42a4b628b4f4a/html5/thumbnails/24.jpg)
bartłomiejkrztuk 2014
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
![Page 25: Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy w ogóle jest on niezbędny?](https://reader038.vdocuments.pub/reader038/viewer/2022110307/55637490d8b42a4b628b4f4a/html5/thumbnails/25.jpg)
bartłomiejkrztuk 2014
‣ 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
Gdy korzystamy z LESS
![Page 26: Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy w ogóle jest on niezbędny?](https://reader038.vdocuments.pub/reader038/viewer/2022110307/55637490d8b42a4b628b4f4a/html5/thumbnails/26.jpg)
bartłomiejkrztuk 2014
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;
![Page 27: Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy w ogóle jest on niezbędny?](https://reader038.vdocuments.pub/reader038/viewer/2022110307/55637490d8b42a4b628b4f4a/html5/thumbnails/27.jpg)
bartłomiejkrztuk 2014
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.
![Page 28: Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy w ogóle jest on niezbędny?](https://reader038.vdocuments.pub/reader038/viewer/2022110307/55637490d8b42a4b628b4f4a/html5/thumbnails/28.jpg)
bartłomiejkrztuk 2014
Jak zrobić to jeszcze szybciej?
Bootstrap Magic
![Page 29: Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy w ogóle jest on niezbędny?](https://reader038.vdocuments.pub/reader038/viewer/2022110307/55637490d8b42a4b628b4f4a/html5/thumbnails/29.jpg)
bartłomiejkrztuk 2014
![Page 30: Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy w ogóle jest on niezbędny?](https://reader038.vdocuments.pub/reader038/viewer/2022110307/55637490d8b42a4b628b4f4a/html5/thumbnails/30.jpg)
bartłomiejkrztuk 2014
‣ BootSwatchr - http://bootswatchr.com/ ‣ StyleBootstrap - http://stylebootstrap.info/ ‣ Fancyboot - http://fancyboot.designspebam.com/
Podobne rozwiązania
![Page 31: Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy w ogóle jest on niezbędny?](https://reader038.vdocuments.pub/reader038/viewer/2022110307/55637490d8b42a4b628b4f4a/html5/thumbnails/31.jpg)
bartłomiejkrztuk 2014
CZY BOOTSTRAP JEST MI WŁAŚCIWIE POTRZEBNY?
TO ZALEŻY
![Page 32: Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy w ogóle jest on niezbędny?](https://reader038.vdocuments.pub/reader038/viewer/2022110307/55637490d8b42a4b628b4f4a/html5/thumbnails/32.jpg)
bartłomiejkrztuk 2014
‣ 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
Tak, jeśli:
![Page 33: Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy w ogóle jest on niezbędny?](https://reader038.vdocuments.pub/reader038/viewer/2022110307/55637490d8b42a4b628b4f4a/html5/thumbnails/33.jpg)
bartłomiejkrztuk 2014
‣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
Nie, jeśli:
![Page 34: Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy w ogóle jest on niezbędny?](https://reader038.vdocuments.pub/reader038/viewer/2022110307/55637490d8b42a4b628b4f4a/html5/thumbnails/34.jpg)
bartłomiejkrztuk 2014
JAKICH PRZYPADKÓW
SZCZEGÓLNIE UNIKAĆ?
![Page 35: Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy w ogóle jest on niezbędny?](https://reader038.vdocuments.pub/reader038/viewer/2022110307/55637490d8b42a4b628b4f4a/html5/thumbnails/35.jpg)
bartłomiejkrztuk 2014
Znacząca ilość niewykorzystanych
reguł CSS
Z wykorzystaniem BS Bez wykorzystania BS
![Page 36: Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy w ogóle jest on niezbędny?](https://reader038.vdocuments.pub/reader038/viewer/2022110307/55637490d8b42a4b628b4f4a/html5/thumbnails/36.jpg)
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 used by the current page.
‣bootstrap.min.css: 94% is not used by the current page
![Page 37: Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy w ogóle jest on niezbędny?](https://reader038.vdocuments.pub/reader038/viewer/2022110307/55637490d8b42a4b628b4f4a/html5/thumbnails/37.jpg)
bartłomiejkrztuk 2014
Dla dociekliwych…
![Page 38: Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy w ogóle jest on niezbędny?](https://reader038.vdocuments.pub/reader038/viewer/2022110307/55637490d8b42a4b628b4f4a/html5/thumbnails/38.jpg)
bartłomiejkrztuk 2014
Kontakt
@BartekKrztuk
www.krztuk.pl
![Page 39: Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy w ogóle jest on niezbędny?](https://reader038.vdocuments.pub/reader038/viewer/2022110307/55637490d8b42a4b628b4f4a/html5/thumbnails/39.jpg)
bartłomiejkrztuk 2014
PYTANIA?
![Page 40: Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy w ogóle jest on niezbędny?](https://reader038.vdocuments.pub/reader038/viewer/2022110307/55637490d8b42a4b628b4f4a/html5/thumbnails/40.jpg)
bartłomiejkrztuk 2014
DZIĘKUJĘ!