SECON'14

«Верстаем без боли или grunt для самых маленьких»

Дмитрий Вислов, undev

«Верстаем без боли»

Ну или grunt для самых маленьких


Дмитрий Вислов, undev

Многое делается руками

ПОТРАЧЕНО

emmet.io

Emmet

        #content.smart > ul > li.item_0$*3 > a
      

Emmet

        <div id="content" class="smart">
           <ul>
              <li class="item_01"><a href=""></a></li>
              <li class="item_02"><a href=""></a></li>
              <li class="item_03"><a href=""></a></li>
           </ul>
        </div>
      

Emmet

        tdu -> text-decoration: underline;
        fz12 -> font-size: 12px;
        posa -> position: absolute;
        m0-a -> margin: 0 auto;
        p10-15-7 -> padding: 10px 15px 7px;
        bdrn -> border-right: none;
      

Ruby On Rails

gruntjs.com

nodejs.org






npm install -g grunt-cli

package.json

        {"name": "myProject",
        "version": "1.0.0",
          "devDependencies": {
            "grunt": "~0.4.1",
            …
            "grunt-contrib-jade": "~0.8.0",
          }
        }
      

Gruntfile.coffee

        module.exports = (grunt) ->
          grunt.initConfig
            …
          grunt.loadNpmTasks "grunt-contrib-connect"
          grunt.registerTask "server", "connect"
      



npm install grunt-contrib-sass

grunt-sass

        sass:
          dist:
            files:
              "compile/css/app.css": ["sass/app.sass"]
      

livereload

АД

grunt-contrib-watch

        watch:
          options:
            livereload: true
          css:
            files: "sass/*.sass"
            tasks: ["sass", "awesome-task"]
      

Vendor prefixes

        .selector {
          -webkit-box-shadow: inset 0 0 1px 1px #e3e3e3;
          -moz-box-shadow: inset 0 0 1px 1px #e3e3e3;
          -ms-box-shadow: inset 0 0 1px 1px #e3e3e3;
          -o-box-shadow: inset 0 0 1px 1px #e3e3e3;
          box-shadow: inset 0 0 1px 1px #e3e3e3; }
        }
      

Vendor prefixes

        
          @mixin box-shadow($parameters)
            …
            -o-box-shadow: $parameters
            box-shadow: $parameters
           
          .selector
            +box-shadow(inset 0 0 1px 1px #e3e3e3)
        

autoprefixer

caniuse

grunt-autoprefixer

        autoprefixer:
          single_file:
            options:
              browsers: ["last 1 version", "> 1%", "ie 8", "ie 7"]
              src: "compile/css/app.css"
              dest: "compile/css/app.css"
      

CSS Comb

csscomb

grunt-csscomb

        csscomb:
          dist:
            files:
              "compile/css/app.css": ["compile/css/app.css"]
      

CSSO

grunt-csso

        csso:
          dist:
            files:
              "compile/css/app.css": ["compile/css/app.css"]
      

CSS-sprites

glue

sprite-factory

glue sprite.conf

        [sprite]
        retina=true
        less=true
        algorithm=square
        size=true
        padding=0
        url=/assets/bloom_sprite/
      

grunt-spritesmith

        sprite:
          all:
            src: 'img/for-sprite/*.png'
            destImg: 'img/sprite.png'
            destCSS: 'sass/sprite.sass'
            cssFormat: 'sass'
      

imgo

imgo

grunt-imagemin

        imagemin:
          dynamic:
            files: [
              optimizationLevel: 3
              pngquant: true
              src: "compile/img/*.{png,jpg}"
              dest: "." ]
      

grunt-imagemin

DataURI

DataURI

        background: url(data:image/gif;base64,R0lGODlhEAA
QAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfj
Z0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVI
CSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QA
nQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0Sl
BCBMQiB0UjIQA7)

grunt-datauri

        datauri:
          default:
            options:
              classPrefix: "data-"
              src: ["img/base64icons/*"]
              dest: ["sass/base64.sass"]
      

grunt-tasks

        grunt.registerTask "default", "watch"
      
grunt.registerTask "makecss", ["sass", "autoprefixer", "csso"]
grunt.registerTask "makeimg", ["datauri", "sprite", "imagemin"]

bower.io

bower search

bower install

bower.json

      {
        "name": "package",
        "version": "0.0.1",
        "dependencies": {
          "jquery": "~2.1.0"
        }
      }
    

yeoman.io

yo yogurt

_bower.json

      {
        "name": "package",
        "version": "0.0.1",
        "dependencies": {
          <% if (jquery) { %>, "jquery": "~2.1.0"<% } %>
        }
      }
    

_Gruntfile.coffee

    <% if (datauri) { %>datauri:
      default:
      options:
        classPrefix: "data-"
        src: ["app/compile/img/base64icons/*"]
        dest: ["app/sass/base64.sass"]
    <% } %>
    

Вёрстка без рутины — признак молодчины

© @artpolikarpov

«Верстаем без боли».

Dmitry Vislov, undev