Slide 1

-

.iBEC Systems, 2012 HTML5 Boilerplate CSS IDE- ( ?)

/ (!) ()

- - (Sublime Text 2)Zen Coding chrono.kz (PHP, JS, CSS)SublimeLinter FTP, SVN, GitFTPSync, SVN, Git, TortoiseAlignmentSidebar EnhancementsCodeIntel Win 7

6HTML5 BoilerplateHTML5 ?..HTML5 Boilerplate best practices -

/- reset.css, CSS- CSS-

8 ?

9 IE IE :

.navigation { margin: 10px 25px; }.lt-ie8 .navigation { margin: 15px 30px; }

10X-UA-Compatible

chrome=1 : IE Chrome Frame, IE=edge : IE, Compatibility mode , .htaccess

11UTF-8

HTML5 , ,

12jQuery include Google CDN, Protocol-relative URL,

13ModernizrJS-, HTML5 CSS3 CSS-

14Modernizr (2) polyfill-:

Modernizr.load({ test: Modernizr.geolocation, yep : 'geo.js', nope: 'geo-polyfill.js'});

15.htaccess CSS Gzip ..16Build-script (Apache Ant) JS, CSS (JPG, PNG) development-only (console.log, , ) HTML ( ) HTML, js- css- HTML, - jQueryTutorial Wiki17 IE6 background cacheIE6 PNG - (image-replacement, hidden, clearfix) (QUnit) ..18 CSS19 ? CSS ?

20 CSS

, CSS- DRY: JS PHP 21 CSS (2) CSS global.cssprint.csstypography.cssbuttons.css... @import HTTP-22 CSS (3) -

-webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px;23

24 ?LESS, Sass, Stylus, Closure Stylesheets CSS : ..

CSS-25 (, ) 26: @my_blue: #4e6cb0; // LESS$my_blue: #4e6cb0; // Sass my_blue = #4e6cb0; // Stylus

$primary_color: $my_blue;h1 {color: $primary_color;}

27: (2) ( ):

$font: Arial, Helvetica, sans-serif;$images-path: ../img/;$font-size: 1.5em;$margin: 20px;$width: 80%;

width: $width;background-image: url(#{$images-path}bg.png);28: :width: 25px * 4 + 100px / 2 50px; // 100pxcolor: #990033 + #666; // #FF6699

:$light_blue : lighten($my_blue, 20%);$flashy_blue: saturate($my_blue, 50%);

:@function my_func($param1, $param2) {@return $param1 * $param2 - 10;}

29: Mixins, lighten, , CSS:

@mixin border-radius($radius = 10px) {-webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius;}

.button {@include border-radius(4px);}30: .pop {.pop {}.pop-btn {=>.pop .pop-btn {}}}

.link {.link {}&:hover {=>.link:hover {}

}}

4 31: , CSS

@import colors.scss;@import typography.sass;@import layout/two-column;

CSS ,

#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}32: " Node.js!"Sass RubyLESS Stylus JavaScript

, Ruby Node.js -

33: !" Node.js, Ruby , Next, Next, Next Ruby , Node.js 34: ! (2)gem install sasssass watch :

gem install compasscompass create compass watch 35: Twitter Bootstrap LESS, !" TB, LESS : , Sass ( , , Sass ) LESS, -

, Twitter Bootstrap Sass36 ? Sass , LESS guarded mixins LESS CSS:padding-#{$name}: $value; , Sass Compass, LESS

37 ? (2)LESSSass.module-a {/* */}.module-b { .module-a; border: 0;}

/* --- --- */

.module-a { /* .module-a */}

.module-b { /* .module-a */ border: 0;}.module-a {/* */}.module-b { @extend .module-a; border: 0;}

/* --- --- */

.module-a, .module-b { /* .module-a */}

.module-b { border: 0;}38 ? (3) :

39 ? (4)

40Sass2 .scss : , CSS.sass : , CoffeeScript Compass

41Compass , :CSS3

@import compass/css3/border-radius;

.button {@include border-radius(10px);}

42 Compass43 FireSass Firebug

compass watch --debug-info

44 HTML5 BoilerplateHTML5 Boilerplate website

SassSass websiteSass Referencehttp://css-tricks.com/sass-vs-less/http://verekia.com/slides/css-preprocessors LESS SassCompass website

45 !?46