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. Bootstrap 3
http://getbootstrap.com/
Neskompilovaný Bootstrap 3
https://github.com/twbs/bootstrap
Adresár
LESS
Súbor
Bootstrap.min.js
Dôležitý súbor – bootstrap.less

6. Bootstrap 3
// Core variables and mixins
@import "variables.less";
@import "mixins.less";
// Reset and dependencies
@import "normalize.less";
@import "print.less";
@import "glyphicons.less";

7. Bootstrap 3
// Core CSS
@import "scaffolding.less";
@import "type.less";
@import "code.less";
@import "grid.less";
@import "tables.less";
@import "forms.less";
@import "buttons.less";

8. Bootstrap 3
// Components
@import "component-animations.less";
@import "dropdowns.less";
@import "button-groups.less";
@import "input-groups.less";
@import "navs.less";
@import "navbar.less";
@import "breadcrumbs.less";
@import "pagination.less";
@import "pager.less";
@import "labels.less”;
…

9. LESS
http://lesscss.org/
http://lesscss.org/features/
WP plugin - najrýchlejšie
http://wordpress.org/plugins/wp-less/

10. @base: #f938ab;
.box-shadow(@style, @c) when (iscolor(@c)) {
-webkit-box-shadow: @style @c;
box-shadow: @style @c;
}
.box-shadow(@style, @alpha: 50%) when
(isnumber(@alpha)) {
.box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
color: saturate(@base, 5%);
border-color: lighten(@base, 30%);
div { .box-shadow(0 0 5px, 30%) }
}

11. #mobile-nav-flyout {
background:rgba(18,38,60,1);
li {
text-transform: uppercase;
font-size:16px;
&:hover{}
&:first-child {}
&:last-child {}
a {
&:hover{
}
}
}
}

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

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

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

15. Začíname
začneme s default šablónou
v šablóne WP je nutné mať style.css,
inak hlási, že je šablóna neúplná
style.css môže mať veľkosť 0 kB
Vytvoríme v téme adresár CSS
umiestnime do neho adresár Bootstrap
stihneme si neskompilovanú verziu Bootstrapu z githubu
aby sme vedeli nastaviť náš grid, farby, ...
vyhodíme všetko, čo nepoužívame
kvôli veľkosti finálneho style.css v súbore bootstrap.less

19. <script>
less = {
env: "development",
async: false,
fileAsync: false,
poll: 1000,
functions: {},
dumpLineNumbers: "comments",
relativeUrls: false,
rootpath: ":/a.com/"
};
</script>
<script src="less.js"></script>

20. <link
href='http://fonts.googleapis.com/css?family=Op
en+Sans:400,700&subset=latin,latin-ext'
rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css"
href="<?php echo get_template_directory_uri();
?>/css/font-awesome.min.css">
<link rel="stylesheet/less" type="text/css"
href="<?php echo get_template_directory_uri();
?>/css/style.less" />

21. Zmeny v LESS bez nutnosti preloadu
Vo footer.php
<script type="text/javascript">
(function() {
less.watch();
});
</script>

22. Súborová štruktúra
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

23. Pri developmente
wp_enqueue_script('bootstrap', get_template_directory_uri()
. '/js/bootstrap.min.js', array('jquery'), '2013-07-18', true);
wp_enqueue_script('less', get_template_directory_uri() .
'/js/less.min.js', array('jquery'), '2013-07-18', true);
Po finalizácii šablóny a pri nasadení do ostrej prevádzky
nelinkujeme less.js ani style.less
Prehliadaču posielame už skompilovaný CSS file

24. Skompilované CSS
WIN
http://winless.org/
MAC
http://incident57.com/less/
LESS PHP compiler
http://leafo.net/lessphp/

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

26. function custom_css_classes_for_vc_row_and_vc_column($class_string, $tag)
{
if ($tag == 'vc_row' || $tag == 'vc_row_inner') {
$class_string = str_replace('vc_row-fluid', 'row', $class_string);
}
if ($tag == 'vc_column' || $tag == 'vc_column_inner') {
$class_string = str_replace('vc_span1', 'col-md-1', $class_string);
$class_string = str_replace('vc_span2', 'col-md-2 col-sm-2', $class_string);
$class_string = str_replace('vc_span3', 'col-md-3 col-sm-3', $class_string);
$class_string = str_replace('vc_span4', 'col-md-4 col-sm-4', $class_string);
$class_string = str_replace('vc_span5', 'col-md-5 col-sm-5', $class_string);
$class_string = str_replace('vc_span6', 'col-md-6 col-sm-6', $class_string);
$class_string = str_replace('vc_span7', 'col-md-7 col-sm-7', $class_string);
$class_string = str_replace('vc_span8', 'col-md-8 col-sm-8', $class_string);
$class_string = str_replace('vc_span9', 'col-md-9 col-sm-9', $class_string);
$class_string = str_replace('vc_span10', 'col-md-10 col-sm-10', $class_string);
$class_string = str_replace('vc_span11', 'col-md-11 col-sm-11', $class_string);
$class_string = str_replace('vc_span12', 'col-md-12', $class_string);
}
return $class_string;
}
add_filter('vc_shortcodes_css_class',
'custom_css_classes_for_vc_row_and_vc_column', 10, 2);

27. Čo sa hodí
Sublime
Cez package console
LESS - Syntax Coloring
LESS Build
font awesome - na ikonky
Google chrome inspector
Ctrl+Shift+I na Win
Cmd+Opt+I na Mac

29. Šablóna na stiahnutie
http://vibration.sk/wordcamp/demo-template.zip

30. Otázky?
www.vibration.sk
Twitter @ivusko
Diskusia