CSS

Заметки по flex

12.11.2020

Не часто юзаю flex, постоянно гуглю некоторые моменты:

Это короткая запись для:

В Bootstrap разметка с одной фиксированной колонкой выглядит так:

Всё что нужно знать о SASS

05.06.2020

Установка:
Под винду запускаем cmd от администратора. Выполняем:

Настройка:

  1. Открываем наш проект в PHPStorm, идём в Settings -> Tools -> File Watchers.
  2. Добавляем тут SASS/SCSS, все настройки можно оставить по-умолчанию.
  3. Здесь же можно добавить YUI Compressor CSS, чтобы сразу получать минимизированные файлы.
  4. Если после этого перестал работать плагин Live Edit, то идём в Settings -> Build, Execution, Deployment -> Live Edit и увеличиваем задержку.
  5. Если мы не хотим, чтобы какие-то наши SASS-файлы компилировались автоматически, например файлы с миксинами, то им нужно поставить префикс _

Документация:
https://sass-scss.ru/documentation/

Читать полностью »

Прижатие футера к низу страницы средствами flexbox

06.12.2018

Автоматический подгон размера шрифта

10.08.2017

Дедушкин способ: http://fittextjs.com/
Нормальный способ: https://habr.com/post/126863/

Полезные генераторы

19.10.2015

1. Закруглятор углов средствами CSS3

Радует то, что радиус каждого угла здесь можно задать индивидуально. Вендорные префиксы присутствуют.
http://border-radius.com/

 
Читать полностью »

CSS-постпроцессоры

27.08.2015

В своё время я забил на изучение Less, и как позже оказалось, правильно сделал. В чём разница между предпроцессорами типа Less или SASS и постпроцессорами типа Autoprefixer? Первые берут код собственного синтаксиса и конвертируют его в CSS. Вторые берут чистый CSS и дополняют его вендорными префиксами, которые с выходом CSS3 уже всех просто задолбали. Больше не нужно писать ересь типа:

Вместо этого можно писать чистый CSS3, а постпроцессор дополнит всё необходимое:

Полезные front-end библиотеки

27.08.2015
  1. Velocity.js. Позволяет анимировать объекты на странице и справляется с этим значительно быстрее, чем jQuery. Также умеет анимировать цвет. Стоит взять на заметку для проектов, которые затупливают браузер обилием анимации.
  2. normalize.css. Устраняет некоторые "особенности" браузеров, делая вёрстку более кроссбраузерной.
  3. ScrollMe - анимация элементов при скролировании.
  4. Numeral.js - библиотека для расставления точек или запятых в числах.
  5. Пост допиливается...