Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy  w ogóle jest on niezbędny?

CZEŚĆ!
bartłomiejkrztuk 2014

BOOTSTRAP W JOOMLA
modyfikować, rozszerzać, nadpisywać oraz czy
w ogóle jest on niezbędny?

CZYM JEST BOOTSTRAP?

‣ 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

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ść

…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ń

“Bootstrap 3 is not backwards compatible with v2.x”
– getbootstrap.com

Struktura kodu HTML

Podobieństwo

Jak opisać Bootstrap’a w 160 znakach?

BOOTSTRAP W JOOMLA!

‣ 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

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

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

WARIANT IDEALNY

MODUŁ KOMPONENT
bootstrap.css
bootstrap.js
…
JUI
SZABLON WTYCZKA

A JAK TO CZĘSTO WYGLĄDA
W PRAKTYCE?

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

JAK UŻYWAĆ BOOTSTRAP Z
JOOMLA?

Wariant minimum - wykorzystanie JUI

Z wykorzystaniem LESS

JAK NADPISYWAĆ LUB
DODAWAĆ WŁASNE STYLE?

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

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

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

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;

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.

Jak zrobić to jeszcze szybciej?
Bootstrap Magic

Podobne rozwiązania
‣ BootSwatchr - http://bootswatchr.com/
‣ StyleBootstrap - http://stylebootstrap.info/
‣ Fancyboot - http://fancyboot.designspebam.com/

CZY BOOTSTRAP JEST MI
WŁAŚCIWIE POTRZEBNY?
TO ZALEŻY

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

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

JAKICH PRZYPADKÓW
SZCZEGÓLNIE UNIKAĆ?

Znacząca ilość niewykorzystanych
reguł CSS
Z wykorzystaniem BS Bez wykorzystania BS

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

Dla dociekliwych…

Kontakt
@BartekKrztuk
www.krztuk.pl

PYTANIA?

DZIĘKUJĘ!

Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy  w ogóle jest on niezbędny?

Recommended

Recommended

More Related Content

Similar to Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy  w ogóle jest on niezbędny?

Similar to Bootstrap w Joomla - modyfikować, rozszerzać, nadpisywać oraz czy  w ogóle jest on niezbędny? (20)