Upload
wcsk
View
341
Download
0
Embed Size (px)
DESCRIPTION
Citation preview
Š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 »</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