vibration.sk - Ivan Potancok - Bootstrap & Less with WordPress

Štýlujme WordPress šablóny rýchlejšieBootstrap 3 a LESS

Ivan PotančokCEO of vibration.sk

Bootstrap 3 & LESS

1. Úvod2. Postup3. Ukážka

CSS3

nevýhodyopakovanie a zdĺhavé zápisyneobsahuje premennézápisy pre rôzne prehliadače

výhodylepšie sa debugujemenší finálny súbor

Bootstrap 3

rieši responziviturieši GRIDobsahuje dizajn patterny - nemusíme toľko štýlovať a môžeme používať ukážkynapísaný v LESSBootstrap 3 - mobile first

nevýhodyzápis tried do HTMLnepodporuje staršie Iečka

Bootstrap 3

http://getbootstrap.com/

Neskompilovaný Bootstrap 3https://github.com/twbs/bootstrap

AdresárLESS

SúborBootstrap.min.js

Dôležitý súbor – bootstrap.less

Bootstrap 3

// Core variables and mixins@import "variables.less";@import "mixins.less";

// Reset and dependencies@import "normalize.less";@import "print.less";@import "glyphicons.less";

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";

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”;…

LESS

http://lesscss.org/http://lesscss.org/features/

WP plugin - najrýchlejšiehttp://wordpress.org/plugins/wp-less/

@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%) }}

#mobile-nav-flyout { background:rgba(18,38,60,1);

li {text-transform: uppercase;

font-size:16px;&:hover{}

&:first-child {} &:last-child {}

a {&:hover{}

} }}

LESS

Prečo nie SASS?

lebo Bootstrap je v LESSrýchlejšie sa rendruje

mixiny, premenné, operácie, funkcie

Zrýchlime proces s Bootstrap & Less

podmienky

1. Znalosť HTML + CSS2. Naučiť sa značky a triedy Bootstrapu3. 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="#">View details &raquo;</a></p> </div>

Začíname

začneme s default šablónouv š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 CSSumiestnime do neho adresár Bootstrapstihneme si neskompilovanú verziu Bootstrapu z githubuaby 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

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

<link href='http://fonts.googleapis.com/css?family=Open+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" />

Zmeny v LESS bez nutnosti preloadu

Vo footer.php

<script type="text/javascript"> (function() { less.watch(); });

</script>

Súborová štruktúra

vytvoríme si

config.less - obsahuje všetky farby, typografiumixins.less - obsahuje mixiny, ktoré používamestyle.less - obsahuje na začiatku súboru importy

config.lessmixins.lessbootstrap.less

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

Skompilované CSS

WINhttp://winless.org/

MAChttp://incident57.com/less/

LESS PHP compilerhttp://leafo.net/lessphp/

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 triedhttp://vc.wpbakery.com/

Upravime ešte visual-composer-functions.php

pomôže nám robiť stĺpce

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);

Čo sa hodí

Sublime Cez package console

LESS - Syntax ColoringLESS Build

font awesome - na ikonky

Google chrome inspectorCtrl+Shift+I na WinCmd+Opt+I na Mac

Šablóna na stiahnutie

http://vibration.sk/wordcamp/demo-template.zip

Otázky?

www.vibration.sk

Twitter @ivusko

Diskusia