bartłomiejkrztuk 2014

CZEŚĆ!

bartłomiejkrztuk 2014

BOOTSTRAP W JOOMLAmodyfikować, 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 ‣ Najpopularniejsze repozytorium

GitHub’a (~ 72k ★) ‣ Ponad 20 wydań w tym dwa

kluczowe: v2 oraz v3 ‣ Mobile first (v3) ‣ Responsywny

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

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ń

bartłomiejkrztuk 2014

– getbootstrap.com

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

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

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

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

bartłomiejkrztuk 2014

WARIANT IDEALNY

bartłomiejkrztuk 2014

bootstrap.css bootstrap.js

…

JUI

MODUŁ KOMPONENT

SZABLON WTYCZKA

bartłomiejkrztuk 2014

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

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.

bartłomiejkrztuk 2014

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

‣ 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)

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

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

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;

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.

bartłomiejkrztuk 2014

Jak zrobić to jeszcze szybciej?

Bootstrap Magic

bartłomiejkrztuk 2014

bartłomiejkrztuk 2014

‣ BootSwatchr - http://bootswatchr.com/ ‣ StyleBootstrap - http://stylebootstrap.info/ ‣ Fancyboot - http://fancyboot.designspebam.com/

Podobne rozwiązania

bartłomiejkrztuk 2014

CZY BOOTSTRAP JEST MI WŁAŚCIWIE POTRZEBNY?

TO ZALEŻY

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:

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:

bartłomiejkrztuk 2014

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 used by the current page.

‣bootstrap.min.css: 94% is not used by the current page

bartłomiejkrztuk 2014

Dla dociekliwych…

bartłomiejkrztuk 2014

Kontakt

@BartekKrztuk

www.krztuk.pl

bartłomiejkrztuk 2014

PYTANIA?

bartłomiejkrztuk 2014

DZIĘKUJĘ!