Štýlujme WordPress šablóny rýchlejšie - Bootstrap 3 a LESS (Ivan Potančok)

Štýlujme WordPress šablóny rýchlejšieBootstrap 3 a LESS

Ivan PotančokCEO of vibration.sk

Bootstrap 3 & LESS

1. Úvod2. Postup3. Ukážka

CSS3

nevýhodyopakovanie a zdĺhavé zápisyneobsahuje premennézápisy pre rôzne prehliadače

výhodylepšie sa debugujemenší finálny súbor

Bootstrap 3

rieši responziviturieši GRIDobsahuje dizajn patterny - nemusíme toľko štýlovať a môžeme používať ukážkynapísaný v LESSBootstrap 3 - mobile first

nevýhodyzápis tried do HTMLnepodporuje staršie IEčka

LESS

Prečo nie SASS?

lebo Bootstrap je v LESSrýchlejšie sa rendruje

mixiny, premenné, operácie, funkcie

Zrýchlime to s Bootstrap & Less

podmienky

1. Znalosť HTML + CSS2. Naučiť sa značky a triedy Bootstrapu3. Naučiť sa LESS

Ukážka kódu

<div class="row"> <div class="col-lg-4"> <h2>Heading</h2> <p>Content</p> <p><a class="btn btn-primary" href="#">View details &raquo;</a></p> </div>

Začíname

v šablóne WP je nutné mať style.css, inak hlási, že je šablóna neúplnástyle.css môže byť prázdne

Vytvoríme v téme adresár CSSumiestnime do neho adresár Bootstrapstihneme si neskompilovanú verziu Bootstrapuaby sme vedeli nastaviť náš gridvyhodíme všetko, čo nepoužívame kvôli veľkosti finálneho style.css v súbore bootstrap.less

Súbory

vytvoríme si

config.less - obsahuje všetky farby, typografiumixins.less - obsahuje mixiny, ktoré používamestyle.less - obsahuje na začiatku súboru importy

config.lessmixins.lessbootstrap.less

Pri developmente

Nalinkujeme si cez wp_enqueue_script() less.js

Po finalizácii šablóny a pri nasadení do ostrej prevádzky nelinkujeme less.js

Prehliadaču posielame už skompilovaný CSS file

WINhttp://winless.org/

MAChttp://incident57.com/less/

Problémové oblasti

V obsahu sa vyskytujú značkyBežný užívateľ môže narušiť vzhľad webu

Riešenie

visual composer a nastavenie triedhttp://vc.wpbakery.com/

nastavenie function.php pre visual composer - pomôže nám robiť stĺpce

Čo sa hodí

Sublime LESS to CSS BuildSystemLESS Syntax Coloring

font awesome - na ikonky

Ukážka témy

Otázky?

www.vibration.sk

@ivusko

Diskusia