1. Štýlujme WordPress šablóny rýchlejšie
Bootstrap 3 a LESS
Ivan Potančok
CEO of vibration.sk

2. Bootstrap 3 & LESS
1. Úvod
2. Postup
3. Ukážka

3. CSS3
nevýhody
opakovanie a zdĺhavé zápisy
neobsahuje premenné
zápisy pre rôzne prehliadače
výhody
lepšie sa debuguje
menší finálny súbor

4. Bootstrap 3
rieši responzivitu
rieši GRID
obsahuje dizajn patterny - nemusíme toľko
štýlovať a môžeme používať ukážky
napísaný v LESS
Bootstrap 3 - mobile first
nevýhody
zápis tried do HTML
nepodporuje staršie IEčka

5. LESS
Prečo nie SASS?
lebo Bootstrap je v LESS
rýchlejšie sa rendruje
mixiny, premenné, operácie, funkcie

6. Zrýchlime to s Bootstrap & Less
podmienky
1. Znalosť HTML + CSS
2. Naučiť sa značky a triedy Bootstrapu
3. Naučiť sa LESS

7. 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>

8. 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 CSS
umiestnime do neho adresár Bootstrap
stihneme si neskompilovanú verziu Bootstrapu
aby sme vedeli nastaviť náš grid
vyhodíme všetko, čo nepoužívame
kvôli veľkosti finálneho style.css v súbore bootstrap.less

9. Súbory
vytvoríme si
config.less - obsahuje všetky farby, typografiu
mixins.less - obsahuje mixiny, ktoré používame
style.less - obsahuje na začiatku súboru importy
config.less
mixins.less
bootstrap.less

10. 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
WIN
http://winless.org/
MAC
http://incident57.com/less/

11. Problémové oblasti
V obsahu sa vyskytujú značky
Bežný užívateľ môže narušiť vzhľad webu
Riešenie
visual composer a nastavenie tried
http://vc.wpbakery.com/
nastavenie function.php pre visual composer - pomôže nám robiť
stĺpce

12. Čo sa hodí
Sublime
LESS to CSS BuildSystem
LESS Syntax Coloring
font awesome - na ikonky

13. Ukážka témy

15. Otázky?
www.vibration.sk
@ivusko
Diskusia