Пащук Илья

В зависимости какая у тебя Вложенность будет в меню)

.mobile-menu__list
            .mobile-menu__item.mobile-menu__item--sub Хадж
                ul
                    li
                        a(href='#') Расписание поездок
                    li
                        a(href='#') Документы

$mobMenu.find('.mobile-menu__item--sub').click(function () {
    if ($(this).hasClass('mobile-menu__item--sub-open')) {
        $(this).removeClass('mobile-menu__item--sub-open')
    } else {
        $(this).addClass('mobile-menu__item--sub-open')
    }
     Или 
       $(this).toggleClass('mobile-menu__item--sub-open')
});

Привет, бро а для увеличения ты меняешь initial-scale=1 или стандартно работаешь с

html {
  font-size: 16px;
  @media (max-width: 1280px) {
    font-size: 15px;
  }
}

Я рекомендую использовать rem в место пикселей. надо смотреть пришлите скрины!

Конечно и не будет работать, потому что input одинарный тег по грубому он не имеет закрытия в нем нельзя разместить псевдоэлемент, вот делай так

.input
    i.icon-search
    input.input__field(type="text" placeholder="search")

Ну или просто псевдоклас повесь ток уже на .input
Кстате такой небольшой хак если у тя иконка как раз такого размера как нужно то можно ее вывести еще так

.input:before {
  content: url("../img/sprites/icon-search.svg");
}

В вашем вопросе вы не учли самый главный нюанс, все зависть от дизайна приложения, если все делать по канонам, то есть сначала сделать ui guide всех элементов что нарисовал дизайнер, смотря на гайд можно сразу понимать все отступы и все размеры кнопок и сразу разметить нужные модификаторы для кнопок, а потом только использовать по мере надобности!

Смотря с какой стороны посмотреть, конечно лучше сразу учесть отступы и размеры кнопок задавать с помощью модификаторов, также я рекомендую забыть про px а использовать глобально rem и если надо локально то em!

Вот смотри с одного из проектов:

.button {
  &--sm {
    height: $btn-size-sm;

    padding: 0 rem(20);

    font-size: $btn-size-sm-fn;
    line-height: $btn-size-sm - rem(2);
  }

  &--xs {
    height: $btn-size-xs;

    padding: 0 rem(20);

    font-size: $btn-size-xs-fn;
    line-height: $btn-size-xs - rem(2);
  }

  &--full {
    width: 100% !important;
  }

  &--s150 {
    min-width: rem(150) !important;
  }

  &--s220 {
    width: rem(220) !important;

}

Почему rem или em, потому что они еще позволяют легко менять пропорции если это надо к примеру на маленьких экранах не все влезло:

html {
  font-family: $font-family-primary;
  font-size: 16px;
  font-weight: normal;
  text-align: left;
  line-height: normal;
  letter-spacing: normal;

  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  @media (max-width: 992px) {
    font-size: 15px;
  }

  @media (max-width: 760px) {
    font-size: 14px;
  }

  @media (max-width: 380px) {
    font-size: 13px;
  }
}

Бро мой рабочий конфиг

let gulp = require('gulp'), // Подключаем Gulp
    cleanCSS = require('gulp-clean-css'),
    sass = require('gulp-sass'), // Подключаем Sass пакет
    pug = require('gulp-pug'), // Подключаем pug
    imagemin = require('gulp-imagemin'), // Подключаем библиотеку для работы с изображениями
    pngquant = require('imagemin-pngquant'), // Подключаем библиотеку для работы с png
    cache = require('gulp-cache'), // Подключаем библиотеку кеширования
    spritesmith = require('gulp.spritesmith'), // Подключаем библиотеку создания спрайтов
    merge = require('merge-stream'), // Подключаем merge
    autoprefixer = require('gulp-autoprefixer');
//
// // uglify = require('gulp-uglify'), // Подключаем js-минификатор
// concat = require('gulp-concat'); // Подключаем библиотеку для объеденения файлов

let browserSync = require('browser-sync').create();

let pathBuild = './dist/';
let pathSrc = './src/';

let pathFonts = [
    pathSrc + 'fonts/**/*'
];

gulp.task('sass', function () {
    return gulp.src(pathSrc + 'sass/**/*.+(sass|scss)')
        .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
        .pipe(autoprefixer({browsers: ['last 15 versions'], cascade: false}))
        .pipe(cleanCSS({compatibility: 'ie8'}))
        .pipe(gulp.dest(pathBuild + 'css'));
});

gulp.task('cleanCSSBuild', () => {
    return gulp.src(pathBuild + 'css/main.css')
        .pipe(cleanCSS({compatibility: 'ie8'}))
        .pipe(gulp.dest(pathBuild + 'css/'))
});

gulp.task('pug', function () {
    gulp.src('src/pug/*.+(jade|pug)')
        .pipe(pug({pretty: '\t'}))
        .pipe(gulp.dest('dist/'))
});

gulp.task('js', function () {
    return gulp.src(pathSrc + 'js/**/*.js')
        .pipe(gulp.dest('dist/js'));
});


gulp.task('img', function () {
    return gulp.src(pathSrc + 'img/**/*')
        .pipe(cache(imagemin({
            interlaced: true,
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        })))
        .pipe(gulp.dest('dist/img'));
});

gulp.task('fontsDev', () => {
    return gulp.src(pathFonts)
        .pipe(gulp.dest(pathBuild + 'fonts'));
});

gulp.task('sprite', function () {
    let spriteData = gulp.src('src/sprite/*.png').pipe(spritesmith({
        imgName: '../img/sprite.png',
        cssName: 'sprite.scss'
    }));
    let imgStream = spriteData.img
        .pipe(gulp.dest('src/img/'));
    let cssStream = spriteData.css
        .pipe(gulp.dest('src/sprite/'));
    return merge(imgStream, cssStream);
});

gulp.task('browserSync', () => {
    browserSync.init({
        server: pathBuild
    });
});

gulp.task('watch', function () {
    gulp.watch('src/sass/**/*.+(sass|scss)', ['sass', 'cleanCSSBuild']);
    gulp.watch('src/pug/**/*.+(jade|pug)', ['pug']);
    gulp.watch('src/js/**/*.js', ['js']);
    gulp.watch('src/img/**/*', ['img']);
    gulp.watch('src/sprite/**/*.png', ['sprite']);
});

gulp.task('default', [
    'img',
    'js',
    'sass',
    'pug',
    'fontsDev',
    'cleanCSSBuild',
    'watch',
    'browserSync',
]);

Бро влом разбираться , смотри вот мой рабочий конфиг :

let gulp = require('gulp'), // Подключаем Gulp
    cleanCSS = require('gulp-clean-css'),
    sass = require('gulp-sass'), // Подключаем Sass пакет
    pug = require('gulp-pug'), // Подключаем pug
    imagemin = require('gulp-imagemin'), // Подключаем библиотеку для работы с изображениями
    pngquant = require('imagemin-pngquant'), // Подключаем библиотеку для работы с png
    cache = require('gulp-cache'), // Подключаем библиотеку кеширования
    spritesmith = require('gulp.spritesmith'), // Подключаем библиотеку создания спрайтов
    merge = require('merge-stream'), // Подключаем merge
    autoprefixer = require('gulp-autoprefixer');

let browserSync = require('browser-sync').create();

let pathBuild = './dist/';
let pathSrc = './src/';

let pathFonts = [
    pathSrc + 'fonts/**/*'
];

gulp.task('sass', function () {
    return gulp.src(pathSrc + 'sass/**/*.+(sass|scss)')
        .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
        .pipe(autoprefixer({browsers: ['last 15 versions'], cascade: false}))
        .pipe(cleanCSS({compatibility: 'ie8'}))
        .pipe(gulp.dest(pathBuild + 'css'));
});

gulp.task('cleanCSSBuild', () => {
    return gulp.src(pathBuild + 'css/main.css')
        .pipe(cleanCSS({compatibility: 'ie8'}))
        .pipe(gulp.dest(pathBuild + 'css/'))
});

gulp.task('pug', function () {
    gulp.src('src/pug/*.+(jade|pug)')
        .pipe(pug({pretty: '\t'}))
        .pipe(gulp.dest('dist/'))
});

gulp.task('js', function () {
    return gulp.src(pathSrc + 'js/**/*.js')
        .pipe(gulp.dest('dist/js'));
});


gulp.task('img', function () {
    return gulp.src(pathSrc + 'img/**/*')
        .pipe(cache(imagemin({
            interlaced: true,
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        })))
        .pipe(gulp.dest('dist/img'));
});

gulp.task('fontsDev', () => {
    return gulp.src(pathFonts)
        .pipe(gulp.dest(pathBuild + 'fonts'));
});

gulp.task('sprite', function () {
    let spriteData = gulp.src('src/sprite/*.png').pipe(spritesmith({
        imgName: '../img/sprite.png',
        cssName: 'sprite.scss'
    }));
    let imgStream = spriteData.img
        .pipe(gulp.dest('src/img/'));
    let cssStream = spriteData.css
        .pipe(gulp.dest('src/sprite/'));
    return merge(imgStream, cssStream);
});

gulp.task('browserSync', () => {
    browserSync.init({
        server: pathBuild
    });
});

gulp.task('watch', function () {
    gulp.watch('src/sass/**/*.+(sass|scss)', ['sass', 'cleanCSSBuild']);
    gulp.watch('src/pug/**/*.+(jade|pug)', ['pug']);
    gulp.watch('src/js/**/*.js', ['js']);
    gulp.watch('src/img/**/*', ['img']);
    gulp.watch('src/sprite/**/*.png', ['sprite']);
});

gulp.task('default', [
    'img',
    'js',
    'sass',
    'pug',
    'fontsDev',
    'cleanCSSBuild',
    'watch',
    'browserSync',
]);

и json

{
  "name": "project",
  "version": "1.0.0",
  "description": "project",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.24.7",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^6.0.0",
    "gulp-cache": "^0.4.5",
    "gulp-clean-css": "^3.10.0",
    "gulp-concat": "^2.6.1",
    "gulp-imagemin": "^3.1.1",
    "gulp-minify": "^3.1.0",
    "gulp-pug": "^3.2.0",
    "gulp-sass": "^3.1.0",
    "gulp-uglify": "^2.0.0",
    "gulp.spritesmith": "^6.3.0",
    "imagemin-pngquant": "^5.0.0"
  }
}

Сервисы, ну я не встречал таких, вопрос решается легко чуть выше Глеб Варганов написал примерно как и что, а вообще бро если ты слабоват в веб разработке, то советую или реально изучить работу с формами, если ты заказчик и тебе дико нафиг надо этот веб, тип там подшаманил прикрутил и с богом))), то в таких случаях рекомендую обращаться к людям которые сделаю, я про фрилас! Также советую просмотретьhttps://habr.com/post/245731/ https://htmlweb.ru/java/forms.php

вот так бро:
https://jsfiddle.net/74enouhz/1/

<form class="form">
	<input class="input" placeholder="Name"></inpu>
		<input class="input"  placeholder="Email"></inpu>
		<textarea class="textarea"  placeholder="Message" name="" id="" cols="30" rows="10"></textarea>
</div>

.form {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;

  padding: 10px;

  background-color: #f6f6f6;

  box-sizing: border-box;
}

.input {
  display: inline-block;
  
  width: calc(50% - 26px);

  margin: 10px;

  border: 2px solid #f24f1d;
}

.textarea {
  flex: 1 1 100%;

  margin: 10px;
}

Привет, бро считаю что не то что можно а и нужно юзатсь новые фичи на дворе 2018, бабель полифилс и автопрефикс если уж нужно добиться кроса помогут, насчет ИЕ то они уже отходят в прошлое, я думаю еще полгода максимум год и о нем все забудут невозвратно если еще этого не сделали!!

Во первых если у вас стили собираются через scss, то зачем уже в конечном файле main.min.css, править надо в исходниках и пересобрать, да выше вам уже написали в чем проблема обратите внимание на кодировку файлах на либу слайдера !

А что если просто контент внутри последнего элемента просто определить по правому краю prntscr.com/jsxu51
prntscr.com/jszad1

А что если просто контент внутри последнего элемента просто определить по правому краю  http://prntscr.com/jsxu51
вот : 
<code lang="css">
*{
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.wrap{
  display: table;
  width: 800px;
  border: 1px solid #000;
}
ul{
  display: table-row;
  
  li {
    display: table-cell;
    padding: 10px 10px;
    
    &:first-of-type{
      width: 300px
    }
  
    &:last-child {
      text-align:right;

      width :100px;
      background:red;
    }
   }
}
</code>

С UIKit еще не работал, но что-то мне подсказывает что если нету описания для адаптивности текста, то скорее всего через медиа правила, то есть:

@media (max-width: @your-param) {  
    .uk-text-small,
    . uk-h1 { font-size: 20px; }  
}

Ну или может есть какие-то параметры через атрибут на подобии:

<div uk-h1="ratio:2" >
        Together we can Revolutionize<br>Information Delivery
      </div>

Также не забудь применить autofocus="true" и не помешает к просмотру https://html5tutorial.info/html5-autofocus.php