Tomasz Dziuda

✓ Lead Developer w GavickPro

✓ @dziudek

✓ wp.dziudek.pl

✓ zebymniezapomnial.tumblr.com

Darmowe rozszerzenia

✓ Oparte na licencji GPL

✓ Darmowe wsparcie techniczne

✓ Pełna funkcjonalność dostępna za darmo

✓ Łatwy wgląd do kodu źródłowego i jego zmian na Githubie: https://github.com/GavickPro

GK LESS

LESS?

LESS = CSS +

Zmienne

Funkcje

Mixiny

Warunki

Komentarze inline

DRY

Zagnieżdżone reguły

Operacje matematyczne

@base_size: 1000px;

.border-radius(@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius;}

.parent { .border-radius; width: @base_size; .child { .border-radius; float: left; width: @base_size * 0.25; &:hover { background: #eee; } & > div { .border-radius; } } }

.parent { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; width: 1000px;}.parent .child { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; float: left; width: 250px;}.parent .child:hover { background: #eee;}.parent .child > div { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}

LESS CSS>> Preprocessor >>

Dla zainteresowanych

✓ http://lesscss.org/

✓ http://less2css.org/

✓ http://ciembor.github.io/lesscss.org/

✓ https://github.com/dziudek/LESS-Mixins

✓ http://www.slideshare.net/dziudek/less-word-up-wrocaw2013

✓ http://getpreboot.com/

Konfiguracja

Możliwości

✓ Możliwość określenia katalogów wejściowych i wyjściowych

✓ Kompilacja wybranych plików LESS

✓ Kompilacja na życzenie

✓ Generowanie errorlogów

Gdzie pobrać?

Github: https://github.com/GavickPro/GK-LESS

Dokumentacja: https://www.gavick.com/documentation/wordpress-themes/plugins-for-wordpress/gk-less/

GK Tabs

Struktura Widżetu

Struktura Widżetu

Konfiguracja

Podstawowe

Interfejs

Animacja

Inne

Możliwości

✓ 6 wbudowanych styli

✓ Konfigurowalne animacje

✓ Konfigurowalny interfejs

✓ Cache

Konfigurowalny interfejs

Dostępne Style

Responsywność

✓ Obsługa gestów na ekranach dotykowych

✓ Pełna skalowalność

Własne Style

✓ Tworzymy plik o nazwie my-style.css

✓ Tworzymy w tym pliku odpowiedni nagłówek (File Header API):

   /* Name: My style */

✓ Poprzedzamy wszystkie selektory CSS klasą .my-style

✓ Odświeżamy ustawienia widżetu, wybieramy z listy styli My style i cieszymy się nowym stylem :-)

Akcje i Filtry

✓ gk_tabs_before_tabs_wrapper

✓ gk_tabs_before_tabs_list

✓ gk_tabs_after_tabs_list

✓ gk_tabs_before_tabs

✓ gk_tabs_after_tabs

✓ gk_tabs_after_tabs_wrapper

✓ gk_tabs_tab_title

✓ gk_tabs_tab_content

✓ gk_tabs_prev_button

✓ gk_tabs_next_button

Gdzie znaleźć?

Github: https://github.com/GavickPro/GK-Tabs

Dokumentacja: https://www.gavick.com/documentation/wordpress-themes/plugins-for-wordpress/gk-tabs/

Przerwa dla Gardła ;-)

GK News Show Pro

Struktura

Wpis

Źródłodanych

Formatwpisu

Kontener

Wpis

✓ Standardowo składa się z:

✓ Tytułu

✓ Tekstu

✓ Grafiki

✓ Bloku informacji

✓ Hiperłącza

Kontener

✓ Struktura otaczająca wpisy

✓ Pozwala na tworzenie dowolnych układów

Źródło danych

✓ Źródło informacji wyświetlanych we wpisie

✓ Generuje elementy artykułu

✓ Mapuje dane dla formatu wpisu

Format wpisu

Opisuje strukturę wpisu za pomocą wstawek zamienianych na odpowiednie wartości

{ID} {URL} {TITLE} {TEXT} {IMAGE_FULL}

{IMAGE_LARGE} {IMAGE_MEDIUM}

{IMAGE_THUMBNAIL} {CATEGORIES} {AUTHOR_ID}

{AUTHOR_NAME} {AUTHOR_URL} {DATE} {COMMENT_COUNT}

{COMMENTS}

<h3> <a href={URL}>{TITLE}</a></h3>

<p>{TEXT}</p>

<small>{DATE}</small>

Dostępne źródła danych

✓ WordPress

✓ WooCommerce

✓ Pliki XML

✓ Pliki JSON

✓ Kanały RSS

Dostępne Kontenery

✓ Kontener domyślny

✓ News Gallery

✓ Title Overlay

Konfiguracja

Filtry i Akcje

✓ gk_nsp_art_title

✓ gk_nsp_art_text

✓ gk_nsp_art_image

✓ gk_nsp_art_info

✓ gk_nsp_art_readmore

✓ gk_nsp_link_title

✓ gk_nsp_link_text

✓ gk_nsp_before_article

✓ gk_nsp_after_article

✓ gk_nsp_before_link

✓ gk_nsp_after_link

✓ gk_nsp_before_wrapper

✓ gk_nsp_after_wrapper

Przykłady użycia

Gdzie znaleźć? (beta)

Github: https://github.com/GavickPro/GK-News-Show-Pro

Dokumentacja: https://github.com/GavickPro/GK-News-Show-Pro/wiki

Let’s talk about future

GavernWP v.2.0

[Screeny]

Nowe rodzaje responsywnego menu

Font Awesome

GK LESS - integracja

✓ Plik variables.less

✓ @nazwa: wartość; //Etykieta;opis

Nowe podstrony

✓ FAQ

✓ Team

✓ Team member

✓ Odświeżona Galeria

✓ Archiwum

Porządki

✓ Przegląd dokumentacji inline

✓ Usunięcie mało popularnych opcji

✓ Zmiana ustawień domyślnych na wygodniejsze

Optymalizacja

✓ Cache plików JSON

✓ Nowa struktura ustawień

✓ Zoptymalizowane Widget Rules

Kiedy?

~Listopad 2013

Ważne Adresy

✓ http://www.gavick.com/

✓ https://github.com/GavickPro

✓ @gavickpro

Pytania?