Урок 7. Миксины. Часть 2

Привет! Миксин можно использовать как функцию, в которую передаются параметры. Названия параметров могут быть любыми. Создаем миксин .mixin с параметром @width: .mixin(@width) { width: @width; } Когда мы используем миксин и указываем значение, оно и будет задано, например: .block { .mixin(33%); } Здесь мы указали читать дальше…

Урок 6. Миксины. Часть 1

Привет, друг! Миксин (mix-in — примесь) — это функция, которая позволяет в одних классах использовать свойства других классов. 1. Запускаем gulp в проекте командой gulp. 2. Создаем в index.less класс .bg: .bg { background-color: #fcfcfc; } 2.1. Теперь создаем другой класс .block-text, и в нем читать дальше…

Урок 5. Переменные в Less

Привет! Сегодня говорим о переменных Less. У вас должен быть установлен Nodejs и глобально npm. Довольно часто можно видеть одно и то же значение, повторяющееся много раз по вашим таблицам стилей: a, .link { color: #428bca; } .widget { color: #fff; background: #428bca; } Переменные упрощают читать дальше…

Урок 4. Компиляция с помощью Gulp

Привет! 🙂 В прошлом уроке по Less речь шла о Компиляции на Node.js, на этот раз используем Gulp для сборки файлов. На всякий случай напомню, что предварительно должен быть установлен Nodejs и npm. Отслеживаем зависимости с packagae.json 1. Создаем папку less1.1. В консоли нужно перейти читать дальше…

Урок 3. Компиляция на Node.js

Привет! В этом уроке сделаем компилятор на Node.js. Напомню, что Node.js должен быть установлен, в чём вам поможет статья Как установить Node.js и проверить его работу. 1. Создаем папку less Устанавливаем в неё пакет less через командную строку Windows или Open Server: 1.1. Команда: npm читать дальше…

Урок 2. Компиляция на клиенте

Привет! В этом уроке рассказываю о том, как сделать компиляцию LESS на клиенте, что означает — непосредственно в браузере. Вариант 1. Компиляция LESS через консоль 1. Создаём папку, допустим, по названию урока, less 1.1. Устанавливаем плагин LESS в папку проекта, локально, с помощью команды в консоли: читать дальше…

Урок 1. Что такое LESS

Привет! Начинаю публиковать уроки по LESS, это мои конспекты, местами дополненные информацией из официальной документации. LESS (Leaner Style Sheets — компактная таблица стилей) — это препроцессор CSS, позволяющий писать ясный CSS с использованием программных конструкций вместо статических правил, т.е. является динамическим языком стилей. Less разработан Alexis Sellier под влиянием читать дальше…

Адаптивный список на flex — 2

Друзья, привет! Первый вариант списка не flex можно посмотреть в этой статье и в этом демо-примере. Отличия второго варианта: другой фон больше текста background у каждого элемента списка большая иконка FontAwesome медиа-запросы для ширины иконки на разных экранах текст и иконка выравниваются по центру добавлен читать дальше…

Адаптивный список с помощью flex

Привет! С помощью css-свойства flex сегодня сделаем адаптивный список. Даем возможность пользователю через админку добавить простой маркированный список, а на выходе получить оформленный икноками Font Awesome список в две колонки. При этом он должен перестраиваться в одну колонку на мобильных устройствах. И еще момент – читать дальше…

Как сделать треугольник через CSS

Всем привет! Раньше верстальщики практически все элементы дизайна вырезали в Фотошопе из PSD макета, в том числе и треугольники – маленькие и больше, – неважно. Просто не было возможности прописать их кодом. Сейчас HTML5 повелевает отрабатывать свои навыки в CSS3 и с его помощью создавать читать дальше…