вторник, 19 ноября 2019 г.

Сборник SASS миксинов

Решил собрать в одном месте, часто используемые миксины:

Изменение цвета placeholder

@mixin placeholder-color($color) {
 &::-webkit-input-placeholder { /* WebKit browsers */ color: $color; }
 &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: $color; } 
 &::-moz-placeholder { /* Mozilla Firefox 19+ */ color: $color; } 
 &:-ms-input-placeholder { /* Internet Explorer 10+ */ color: $color; } 


взял его здесь
Как то так

Еще момент с затемнением кнопок при наведении.
Можно не подбирать цвета, а изменить тон, для этого в SASS/SCSS уже есть функции darken, lighten

  • darken($primary-color, 10%) — затемнение
  • lighten($primary-color, 10%) — осветление
взято здесь

пятница, 15 ноября 2019 г.

Начало верстки - советы и трюки

Решил записывать фишки по верстке, для удобства.

Заметил, что трачу много времени на начало нового проекта - каждый раз настраивая webpack/gulp. Для решения этого, погуглив конечно, понял - нужен базовый шаблон проекта, и использование githab. Это не новость, для многих очевидные вещи, но я долго до этого додумывался, поэтому может пригодится новичкам.

Вкратце - создаем базовый шаблон (или форкаем или используем подходящий, благо их сейчас много) для клонирования. И используем его каждый раз при начале нового проекта.

По шагам (что бы не забыть):

  • Сперва создал удобный git boiler template, содержащий wepback sass pug. Точнее форкнул подходящий мне Forked from vedees/webpack-template-pug. Вы можете использовать тот, что подходит вам. 

1. Открываем в терминале папку проектов.
cd c:/projects
Далее, в папке проектов в моем случае Projects

2. Клонируем git webpack template.git
git clone xxxxxx.git
в итоге  в папке Projects будет создана папка (в моем случае) webpack-template

3. Даем новое название данной папке - (например project_name1)


  • Далее создаем новый репозиторий для нового проект project_name1 в githab, для дальнейшего указания в качестве удаленного репозитория. (Можно было сделать это сразу.)


4. Переходим в папку с проектом
cd c:/projects/project_name1

5. Удаляем папку .git
rmdir .git

6. Инициализируем новый git, добавляем текущие файлы и коммитим. Затем добавляем удаленный репозиторий, созданный ранее.
git init
git add .
git commit -m "first commit"
git remote add origin project_name1.git

7. Запускаем установку пакетов из package.json
npm install

Все, можно работать над новым проектом.

Теперь над началом нового проекта по верстке, уходит 5-10 минут.