HTML

HTML

HTML > Emmet

ul.foo>(li.foo__bar>a[href=#$]{Link $})*5^+button{Submit}

<ul class="foo">
	<li class="foo__bar"><a href="#1">Link 1</a></li>
	<li class="foo__bar"><a href="#2">Link 2</a></li>
	<li class="foo__bar"><a href="#3">Link 3</a></li>
	<li class="foo__bar"><a href="#4">Link 4</a></li>
	<li class="foo__bar"><a href="#5">Link 5</a></li>
</ul>
<button>Submit</button>

HTML > Шаблонизаторы

JADE

HTML > Шаблонизаторы

HTML

HTML > Jade

Преимущества

HTML > Jade

Как применить?

HTML > PostHTML

Для чего?

CSS

CSS

Emmet-livestyle

CSS > Препроцессоры

CSS > Препроцессоры

Stylus

CSS

CSS > PostCSS

CSS

Парсер

Плагины

Генератор

CSS

CSS > PostCSS

Плагины

CSS > PostCSS

Autoprefixer

.foo-bar {
  background: linear-gradient(to top, black, white);
  display: flex
}

.foo-bar {
  background: -webkit-linear-gradient(bottom, black, white);
  background: linear-gradient(to top, black, white);
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex
}

CSS > PostCSS

postcss-bem

@b nav {                        /* @b - определение блока */
    @e item {                   /* @e - определение элемента */
        display: inline-block;
    }
    @m placement_header {       /* @m - определение модификатора */
        background-color: red;
    }
}

.nav {}
.nav__item {
    display: inline-block
}
.nav--placement_header {
    background-color: red
}

CSS > PostCSS

Использование

Node.js

postcss

postcss-cli

gulp-postcss

JavaScript

JavaScript

JavaScript > Node.js

Среда исполнения JavaScript

Системы сборки

Системы сборки

Grunt.js

Системы сборки > Gulp.js

Таск-раннер

Препроцессоры

Минификация

Конкатенация

Оптимизация изображений

Работа со шрифтами

Git

Тестирование

Системы сборки > Gulp.js

Как работает?

var gulp    = require('gulp');
var stylus  = require('gulp-stylus');


gulp.task('stylus', function() {

  return gulp
    .src('source/styles/main.styl')
    .pipe( stylus() )
    .pipe( gulp.dest( 'dev/css' ) );

});

Системы сборки > Gulp.js

Где применять?

Статичная верстка

Фреймворки

CMS

Повседневная жизнь