Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Š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)

733 views

Published on

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Š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

×