Задать вопрос
SnaIP

Andrey Perov

Front-end разработчик
Ответы пользователя по тегу Вёрстка

  • CSS - Анимация без JS?

    SnaIP
    @SnaIP
    Front-end разработчик 
    Нужно добавить класс после загрузки документа или всех картинок в любом случае, хотя возможно и можно через keyframes поставить задержку,  могу ошибаться. Но полную загрузку страницы там не отловишь на чистом css

<code lang="javascript">
document.addEventListener("DOMContentLoaded", function(event) {
    // тут добавить класс например к элементу, чтобы произошла анимация
  });
</code>

используйте @keyframes
https://developer.mozilla.org/ru/docs/Web/CSS/@keyframes
    Ответ написан
    Комментировать
    Комментировать

  • Какой есть хороший сервис для проверки адаптивности сайта на разных устройствах?

    SnaIP
    @SnaIP
    Front-end разработчик
    https://www.browserstack.com/

    там много что есть, только стоит платить
    Ответ написан
    2 комментария
    2 комментария

  • Как использовать @mixin несколько раз?

    SnaIP
    @SnaIP
    Front-end разработчик
    если правильно понял...
    @mixin transition($args...) {
  -webkit-transition: $args;
     -moz-transition: $args;
      -ms-transition: $args;
          transition: $args;
}

a {
  color:$color;
  @include transition(color .3s ease);
  &:hover {
    color:$color;
  }
}
    Ответ написан
    8 комментариев
    8 комментариев

  • Как лучше подключать стили и скрипты?

    SnaIP
    @SnaIP
    Front-end разработчик
    Используйте сборщики webpack, gulp и настраиваете под себя их, скину вам простенький пример gulpfile.js можете переделать под свой вариант

    'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var jade = require('gulp-jade');
var concat = require('gulp-concat');
var extender = require('gulp-html-extend');
var browserSync = require('browser-sync');
var autoprefixer = require('gulp-autoprefixer');

var pub = './dist/';
var src = './src/';

gulp.task('js', function () {
    gulp.src(src + 'js/**/*.*')
        .pipe(gulp.dest(pub + 'js/'))
        .pipe(browserSync.stream());
});

gulp.task('sass', function () {
    gulp.src(src + 'sass/index.scss')
        .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
        .pipe(autoprefixer({
            browsers: ['last 3 versions'],
            cascade: false
        }))
        .pipe(concat('app.css'))
        .pipe(gulp.dest(pub + 'css'))
        .pipe(browserSync.stream());
});

gulp.task('directory', function () {
    gulp.src(src + 'fonts/**/*.*')
        .pipe(gulp.dest(pub + 'fonts/'));
    gulp.src(src + 'svg/**/*.*')
        .pipe(gulp.dest(pub + 'svg/'));
});

// gulp.task('jade', function () {
//     return gulp.src(src + 'templates/jade/*.jade')
//         .pipe(jade())
//         .pipe(gulp.dest(pub))
//         .pipe(browserSync.stream());
// });

gulp.task('extend', function () {
    gulp.src(src + 'templates/*.html')
        .pipe(extender({annotations:true,verbose:false})) // default options
        .pipe(gulp.dest(pub))

});

gulp.task('sync', function () {
    browserSync.init({
        server: {
            baseDir: pub
        },
        port: '3000',
        ghostMode: false,
        open: false,
        serveStatic: [src]
    });

    gulp.watch(
        [ '*.html' ],
        { cwd: pub },
        browserSync.reload
    );
});

gulp.task('watchers', function() {
    gulp.watch(src + 'sass/**/*.scss', ['sass']);
    gulp.watch(src + 'templates/**/*.html', ['extend']);
    gulp.watch(src + 'js/**/*.*', ['js']);
});

gulp.task(
    'default',
    [
        'watchers',
        'sass',
        'directory',
        'extend',
        'js',
        'sync'
    ]
);


    + --------- dist
    /fonts
    /svg
    app.css
    index.html
    + --------- src
    + ---- sass
    + ---- templates
    + -------- partials (layout.html header.html footer.html и тд)
    index.html
    + ---- fonts (просто переносятся в папку dist)
    + ---- svg (просто переносятся в папку dist)
    Ответ написан
    10 комментариев
    10 комментариев