Sage - twoje szablony będą od dziś jak supermodelki

Wojciech Walczak InterSynergy

www.intersynergy.pl www.wpdoc.org

Szczupłość

Ładny wygląd

Czy koledzy będą zazdrościć?

Chcesz przetestować?

Czym jest Sage?

• Szablon startowy

• Połączenie narzędzi przydatnych do developmentu

• Zestaw najlepszych praktyk do tworzenia szablonów

Struktura

Obrazki, CSS, JavaScript, fonty

Pliki językowe

Klasy i funkcje szablonu

Elementy szablonu

Główny plik szablonu

DRY

Don't Repeat Yourself

Continously Repeating Yourself

base.php

header.php

footer.php

index.php

single.php

sidebar.php

?

Sidebar nie będzie wyświetlany, jeżeli funkcja zwróci true

Komponenty

Bower

• Szybka instalacja frontowych pakietów

• Zarządzanie zależnościami

• Dbanie o odpowiednie wersje bibliotek

Bower

Wszystkie pakiety będą działać, ponieważ Bower kontroluje zależności między nimi i w razie potrzeby instaluje również biblioteki potrzebne do ich poprawnego funkcjonowania

Gulp

Gulp• Task Manager, automatyzacja procesów • Preprocessing CSS; SASS → CSS

• Sprawdzanie poprawności JavaScript • Konkatenacja

• Usuwanie nieużywanych klas, odchudzanie kodu • Optymalizacja obrazków • Podgląd na żywo • Działa strumieniowo - przewaga nad Grunt’em

BrowserSync

BrowserSync• Współpracuje z Gulp’em

• Automatycznie odświeża stronę po zapisaniu zmienionego pliku

• Umożliwia wyświetlanie strony znajdującej się na lokalnym komputerze na urządzeniach podpiętych do tej samej sieci

• Synchronizacja wyświetlania (scroll, przechodzenie między stronami, formularze)

asset-builder

asset-builder

• Pomaga zarządzać ładowanymi bibliotekami

• Ustala, które pliki należy połączyć, gdzie powinny zostać zapisane po przetworzeniu

Pliki zostaną połączone w jeden

Dziękuję za uwagę

Wojciech Walczak

ww@intersynergy.pl http://www.intersynergy.pl

www.wpdoc.orgwww.intersynergy.pl