Иван Доброславин

Так-то, там не только placeholder'ы не отображаются. А вообще текст в форме.
Уберите padding: 20px. Инпут высотой 34px. И это с учетом паддингов.
Математическая задачка, сколько остается на содержимое инпута? Правильный ответ, нисколько.

npm up -D

@font-face {
font-family: "PT Serif";
  src: url("../fonts/ptserif-normal.eot");
  src: local('☺'), 
  url("../fonts/ptserif-normal.eot?#iefix") format("embedded-opentype"), 
  url("../fonts/ptserif-normal.woff") format("woff"),
  url("../fonts/ptserif-normal.ttf") format("truetype"), 
  url("../fonts/ptserif-normal.svg#PT Serif") format("svg");

  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "PT Serif";
  src: url("../fonts/ptserif-bold.eot");
  src: local('☺'), 
  url("../fonts/ptserif-bold.eot?#iefix") format("embedded-opentype"), 
  url("../fonts/ptserif-bold.woff") format("woff"), 
  url("../fonts/ptserif-bold.ttf") format("truetype"), 
  url("../fonts/ptserif-bold.svg#PT Serif") format("svg");

  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "PT Serif";
  src: url("../fonts/ptserif-italic.eot");
  src: local('☺'), 
  url("../fonts/ptserif-italic.eot?#iefix") format("embedded-opentype"), 
  url("../fonts/ptserif-italic.woff") format("woff"), 
  url("../fonts/ptserif-italic.ttf") format("truetype"), 
  url("../fonts/ptserif-italic.svg#PT Serif") format("svg");

  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "PT Serif";
  src: url("../fonts/ptserif-bolditalic.eot");
  src: local('☺'), 
  url("../fonts/ptserif-bolditalic.eot?#iefix") format("embedded-opentype"), 
  url("../fonts/ptserif-bolditalic.woff") format("woff"), 
  url("../fonts/ptserif-bolditalic.ttf") format("truetype"), 
  url("../fonts/ptserif-bolditalic.svg#PT Serif") format("svg");

  font-weight: bold;
  font-style: italic;
}

В font-weight можно использовать не ключевые слова, а цифры

100 Ultra Light
200 Thin
300 Light
400 Regular, Normal
500 Roman
600 Medium, SemiBold
700 Bold
800 Heavy, ExtraBold
900 Black

При использовании указывать font-weight и font-style, в зависимости от их комбинаций будет выбран нужный файл шрифта

UPD: Если вам не нужно поддерживать совсем уж древние браузеры IE8 (eot) и Android 4.3 (ttf) то достаточно подключить только woff и woff2.
Svg нужен для Safari версии ниже 5.1

Подробнее смотрите на caniuse.com

Хорошая статья на эту тему nicothin.pro/page/web-fonts

@font-face { 
  font-family: 'Web font'; 
  src: url('webfont.woff2') format('woff2'), 
       url('webfont.ttf')  format('truetype'), /* Только если нужна поддержка старых Android, иначе закомментировать */ 
       url('webfont.woff') format('woff'); 
  font-weight: normal; 
  font-style: normal; 
}

У активного option вы не сможете ничего менять.
Как изменить фон выпадающего списка select'а, то есть фон option?

Это невозможно, т.к. некоторые стили данного элемента управляются программно и могут различаться в различных браузерах.
Однако вы можете воспользоваться одним из jquery \ mootols плагинов для изменения внешнего вида форм и инпутов, или создать свой.

Ctrl+C попробуйте

Должно помочь
https://www.sitepoint.com/community/t/how-to-style...

npm uninstall -g gulp

Решение найдено! Всему виной оказался Вотчер, к примеру имеем мы вот такой вотчер для стилей.

gulp.task('watch', function() {
	gulp.watch('sass/**/*.scss', gulp.series('style'));
});

Всему виной вот эта конструкция, **


Не используйте в вотчере такую конструкрую, пишите прямо все папки где искать, к примеру вот так

gulp.watch(['sass/*.scss', 'sass/block/*.scss', 'sass/page/*.scss'], gulp.series('style'));

В данном примере мы указали 3 папки где будут вотчится все файлы, это sass, block, page. и если теперь вы будете редактировать файлы из этих папак, то стили у вас будут собираться рекордно быстро, и время исполнения таска НЕ БУДЕТ УВЕЛИЧИВАТЬСЯ

ПРИМЕР!!
Имея вот такой таск вотчера.

gulp.task('watch', function() {
	gulp.watch('sass/**/*.scss', gulp.series('style'));
});

Я захожу в файл sass/components/header.scss и редактирую рас 10, пока время выполнения таска не доходит до секунды, потом захожу в файл sass/block.scss и редактирую его 3 раза, обратити внимания на скорость выполнения таска.. 150-180 милисекунд дальше я опять редактирую фай sass/components/header.scss и время выполнения таска уже больше однойсекунды.. так что делайте вывод господа..

С последней версией node-sass gulp-sass не хочет работать.
Удалите node-sass и переустановите gulp-sass.

npm uninstall node-sass gulp-sass
npm install gulp-sass --save-dev

Глобально надо поставить gulp-cli, а не gulp, а локально надо ставить gulp. Gulp-cli это утилита, или программа, которая зарегистрирует в консоли команду gulp. CLI - command line interface, интерфейс командной строки, как-то так. Это надо, чтобы Вы могли в консоли запускать задачи с помощью команды типа 'gulp task'. Если gulp-cli не поставить, то для запуска задач пришлось бы писать что-то типа 'node gulpfile.js', а тогда проблема, что в нем ещё надо указать, какую задачу конкретно запускать надо, потому что node запустит просто скрипт, и выполнятся все задачи, которые там объявлены и вызваны. Либо пришлось бы в package.json регистрировать скрипты под алиасы, сокращенные команды, и для запуска пришлось бы писать npm run task, а в package.json надо тогда описать этот task. Сложно, короче. Gulp-cli умеет принимать название task'a и вызвать его из gulpfile.js. Теперь в gulpfile описываете задачи, и через gulp вызываете.

Этого делать не обязательно. Всё что ставится глобально падает (если Windows) в C:\Users\username\AppData\Roaming\npm\node_modules, а так как в переменной среды окружения прописан путь к C:\Users\username\AppData\Roaming\npm, то это позволяет запустить команду gulp глобально из командной строки отовсюду, т.к. если откроете по вышеуказанному пути gulp.cmd в нём найдёте что-то типа:

"%~dp0\node.exe"  "%~dp0\node_modules\gulp\bin\gulp.js" %*

А если поставить gulp локально, то в проект он устанавливается в %project_path%/node_modules. Чтобы запустить локальный gulp нужно будет написать в командной строке: %project_path%/node_modules/.bin/gulp и если зайти в эту папку можно найти такой же gulp.cmd

Итого: 1 способ по сути просто удобный и быстрый для запуска. 2 способ может пригодится если, например на целевом сервере, где может осуществлятся сборка, не будет возможности установить gulp глобально (не будет хватать прав), в этом случае нас и выручит локальная версия.

Также по правилам хорошего тона в проект записываются все зависимости, поэтому даже если вы на целевом сервере или у себя используете глобальную версию, необходимо указать, что проект использует такой пакет.
Кроме того, Вы можете по необходимости ставить любые пакеты глобально и использовать их по удобному псевдониму, а также, например, иметь 2 разные версии одного пакета

Так?

$("[data-fancybox='gallery']").fancybox({
        //опции
    });

Плагины gulp в node_modules содержат огромное множество вложенных папок, содержащих много мелких файлов. Пока оно всё это хозяйство прочитает с диска - пройдёт много времени. А потом да, из дискового кэша.

Случайно взятый проект, использующий для сборки gulp:

Проблема решилась самым простым образом.
Сначала нужно писать псевдокласс :hover, а затем псевдоэлемент :before, таким образом:
div:hover:after{}