Gavern Framework - Joomla! Day Poland 2013

Post on 11-Nov-2014

1.575 views 5 download

Tags:

description

 

Transcript of Gavern Framework - Joomla! Day Poland 2013

Gavern Framework

✓ Web Developer w GavickPro

✓ @BartekKrztuk

Bartłomiej Krztuk

Meet Gavernczyli przykład wykorzystania Gavern Framework

Parę słów o Meet Gavern

✓ bezpłatny responsywny szablon dostępny dla Joomla! 3.x

✓ zbudowany w oparciu o Gavern Framework

✓ Bootstrap

✓ LESS

✓ i wiele innych...

Layout Manager

✓ 3 niezależne konfiguracje widoków

✓ szerokość modułów, ilość może być różna dla trybu desktop/tablet/mobile

✓ wizualizacja widoków z uwzględnieniem responsywności

Layout Manager

Layout Manager - pozycje modułów

✓ wizualizacja uwzględnia całą strukturę szablonu (w tym i pozycje niedostępne)

✓ import ustawień z innej pozycji modułu

✓ dodawanie i usuwanie modułów na danej pozycji

Zaawansowane ustawienia pozycji modułu

✓ Default module width - domyślna szerokość modułu gdy nie jest uwzględniony w Layout Manager

✓ Use default module settings - możliwość zrezygnowania z ustawień LM na rzecz domyślnym ustawień Joomla!

Layout Manager - Sidebar

✓ pozycja sidebar’a ( left | right)

✓ szerokość - spanX

✓ override - czyli zaawansowane ustawienia

Layout Manager - Sidebar Override

✓ możliwość przeciążenia/nadpisania ustawień dla konkretnego ItemId menu lub komponentu

✓ nadpisać można zarówno szerokość jak i pozycję

✓ przykładycom_k2 | right | span4198 | left | span6

Ustawieniadomyślne

„przeciążony” widok

...a jak to wygląda w praktyce ?

Layout Manager Live!

LESS

Gavern Framework a LESS

✓ LESS - CSS w nowej formie - Tomasz Dziuda (Dziudek), Aula, jutro 14:40-15:35

✓ CSS w Meet Gavern w 100% stworzony dzięki LESS

✓ Opcje parsowania LESS : jednorazowo lub stale włączone

Fonty

Fonty - wspierane źródła

Fonty - Konfiguracja

✓ nazwa fonta

✓ adres URL do repozytorium fontu

✓ określenie selektorów do których dany font ma być zastosowany

(np. h1,h2,h3, .someAwesomeClass, #notUniqueID)

Fonty - variables.less

✓ wszystkie rozmiary fontów jak i line-height wyliczone są na podstawie dwóch zmiennych LESS

✓ znaleźć je można w pliku less/variables.less

✓ zmiana rozmiaru fontu dla całego szablonu wymaga zmiany tylko w jednym miejscu

Fonty - variables.less

✓ @baseBodyFontSize: 13px; - podstawowy rozmiar (body)

✓ @baseHeadersFontSize: 20px; - nagłówki (czyli header, h1, h2, h3, h4, h5 i inne)

Configuration Manager

Configuration Manager

Configuration Manager

✓ zapisywanie ustawień szablonu i odczytywanie dzięki plikom JSON

✓ integralna część szablonu (nie wymaga dodatkowych pluginów, komponentów, itp.)

✓ przenoszenie ustawień między instancjami Joomla!

✓ pliku zapisywane w miejscu instalacji szablonu - katalog /configs

...o czym warto wspomnieć

✓ Social API

✓ Login with Facebook

✓ Cookie Law

✓ CSS/JS Compression

✓ CSS cache

✓ Prefixfree

✓ Komponenty - K2 (Cobalt)

✓ i wiele innych

Jak można wykorzystać Meet Gavern ?

Trochę na temat przyszłości czyli

Gavern 4

Gavern 4

✓ kolejna wersja naszego framework’a dla Joomla! 2.5 oraz 3.2

✓ ujednolicony panel administracyjny dla Joomla! 3.x oraz 2.x

✓ Layout Manager w szablonach komercyjnych

Gavern 4 i Joomla! 2.5

Gavern 4 i Joomla! 3

Gavern 4 - konfiguracja szablonu

✓ uproszczone zarządzanie szablonem

✓ usunięte zostaną zbędne i nieużywane funkcje

✓ przejrzysty wygląd, intuicyjne kategorie, większa wygoda korzystania

Gavern 4 i Joomla! 3.x

✓ Bootstrap - dołączony i dopasowany stylistycznie do szablonu

✓ Responsywność - zrealizowana za pomocą naszych @media-queries - czyli layout szablonu bez użycia Bootstrap Grid

✓ LESS

✓ Skrypty szablonu w oparciu o bibliotekę jQuery

Gavern 4 i Joomla! 2.x

✓ wsparcie dla LESS (parser PHP)

✓ skrypty szablonu w oparciu o MooTools

✓ Responsywność - jak w szablonach dla Joomla! 3.x

Zalety

✓ Z punktu widzenia użytkownika niezauważalna zmiana z Joomla! 2.x na Joomla! 3.x

✓ LESS - zmiana kolorów szablonu dzięki zmiennym, tak jak w przypadku rozmiarów fontów

✓ Dodanie opcji dostępnych do tej pory jedynie w Meet Gavern

Pytania?