Ответы пользователя по тегу Адаптивный дизайн
  • Как установить и настроить адаптивную сетку smartgrid для работы?

    Vsnegovik
    @Vsnegovik
    frontend-разработчик
    smart-grid на выходе создает файл (не пайпится), его подключаем в styl (sass, less) файле. Библиотека не умеет создавать папки, поэтому либо вручную создаем папку vendor, либо средствами gulp. Использую stylus, можете заменить его любым удобным Вам.

    c9aff30608f94308bac036b229613ab1.png
    gulpfile.babel.js
    import gulp   from 'gulp'
    import stylus from 'gulp-stylus'
    import grid   from 'smart-grid'
    import del    from 'del'
    
    const settings = {
        outputStyle: 'styl', /* less || scss || sass || styl */
        columns: 12, /* number of grid columns */
        offset: "30px", /* gutter width px || % */
        container: {
            maxWidth: '1200px', /* max-width оn very large screen */
            fields: '30px' /* side fields */
        },
        breakPoints: {
            lg: {
                'width': '1100px', /* -> @media (max-width: 1100px) */
                'fields': '30px' /* side fields */
            },
            md: {
                'width': '960px',
                'fields': '15px'
            },
            sm: {
                'width': '780px',
                'fields': '15px'
            },
            xs: {
                'width': '560px',
                'fields': '15px'
            }
        }
    };
    
    const paths = {
      styl: {
        vendor: './vendor/',
        src:    './src/**/*.styl',
        dest:   './dest'
      }
    }
    
    const clean = () => del([ 'dest' ])
    export { clean }
    
    export function init(cb){
      grid(paths.styl.vendor, settings)
      cb()
    }
    
    export function styl_build(){
      return gulp.src(paths.styl.src)
        .pipe(stylus({
            paths : [
              'src',
              'vendor'
           ]
         }))
        .pipe(gulp.dest(paths.styl.dest))
    }
    
    const build = gulp.series(
      clean,
      init,
      styl_build
    )
    export { build }
    
    export default build

    package.json
    {
      "name": "template",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "gulp": "gulp"
      },
      "author": "Vsnegovik",
      "license": "ISC",
      "devDependencies": {
        "babel-preset-es2015": "^6.22.0",
        "babel-register": "^6.22.0",
        "gulp": "github:gulpjs/gulp#4.0",
        "gulp-stylus": "^2.6.0",
        "smart-grid": "^1.0.3",
        "del": "^2.2.2"
      }
    }

    .babelrc
    {
      "presets": [ "es2015" ]
    }

    index.styl
    @import smart-grid
    
    .items
      row-flex()
      justify-content-md(center)
    
      .item
        col()
        col-3()
        col-md-5()
        col-xs-10()

    Ответ написан
    6 комментариев