Štýlujme WordPress šablóny rýchlejšie
Bootstrap 3 a LESS
Ivan Potančok
CEO of vibration.sk
Bootstrap 3 & LESS
1. Úvod
2. Postup
3. Ukážka
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ší...
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í...
LESS
Prečo nie SASS?
lebo Bootstrap je v LESS
rýchlejšie sa rendruje
mixiny, premenné, operácie, funkcie
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
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="#...
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ém...
Súbory
vytvoríme si
config.less - obsahuje všetky farby, typografiu
mixins.less - obsahuje mixiny, ktoré používame
style.l...
Pri developmente
Nalinkujeme si cez wp_enqueue_script() less.js
Po finalizácii šablóny a pri nasadení do ostrej prevádzky
...
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 nastave...
Čo sa hodí
Sublime
LESS to CSS BuildSystem
LESS Syntax Coloring
font awesome - na ikonky
Ukážka témy
Otázky?
www.vibration.sk
@ivusko
Diskusia
Štýlujme WordPress šablóny rýchlejšie - Bootstrap 3 a LESS (Ivan Potančok)
Upcoming SlideShare
Loading in …5
×

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

640 views

Published on

Published in: Internet
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
640
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. Štýlujme WordPress šablóny rýchlejšie Bootstrap 3 a LESS Ivan Potančok CEO of vibration.sk
  2. 2. Bootstrap 3 & LESS 1. Úvod 2. Postup 3. Ukážka
  3. 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. 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. 5. LESS Prečo nie SASS? lebo Bootstrap je v LESS rýchlejšie sa rendruje mixiny, premenné, operácie, funkcie
  6. 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. 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. 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. 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. 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. 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. 12. Čo sa hodí Sublime LESS to CSS BuildSystem LESS Syntax Coloring font awesome - na ikonky
  13. 13. Ukážka témy
  14. 14. Otázky? www.vibration.sk @ivusko Diskusia

×