Download to read offline
Štýlujme WordPress šablóny rýchlejšie - Bootstrap 3 a LESS (Ivan Potančok)
- 1. Štýlujme WordPress šablónyrý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šiGRID 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? leboBootstrap je v LESS rýchlejšie sa rendruje mixiny, premenné, operácie, funkcie
- 6. Zrýchlime to sBootstrap & 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"> <divclass="col-lg-4"> <h2>Heading</h2> <p>Content</p> <p><a class="btn btn-primary" href="#">View details »</a></p> </div>
- 8. Začíname v šablóne WPje 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 sicez 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 obsahusa 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 LESSto CSS BuildSystem LESS Syntax Coloring font awesome - na ikonky
- 13.
- 15.