Работаем с less в Sublime Text. Компилируем less исходники Bootstrap

Используем less из Sublime текст. Компилируем less исходники Bootstrap

Less — это препроцессор для CSS стилей. В двух словах — это CSS который можно программировать. Если вы не используете препроцессоры, то рекомендую ознакомиться и начать использовать.

Самый простой способ начать компилировать less код в css в Sublime Text — это установить плагин Less Build. Главное чтобы в пути к компилируемому файлу не было русских символов, и работать он будет хорошо. Для новичков этого вполне хватит. Еще можно установить плагин BuildOnSave, чтобы билдить не сокращением Ctrl+B, а нажимать привычное Ctrl+S, и билд будет происходить по сохранению файла.

Читать далее

Препроцессор SASS. Установка и настройка в Sublime Text

Препроцессор SASS. Установка и настройка SASS в Sublime Text

Препроцессоры ускоряют работу верстальщика. Если с работой с препроцессором LESS все просто, установил плагин и он работает. То чтобы компилировать SASS нужно взять бубен и немного потанцевать с ним. Разберемся как настроить компиляцию SASS файлов в Sublime Text.

Читать далее

DIV на всю высоту родителя

DIV на всю высоту родителя

Изящное CSS решение чтобы сделать высоту блока равной высоте его родительского блока. Применяется в том случае когда высота родительского блока не задана фиксировано, и определяется контентом внутри него.

Читать далее

Обучение верстке сайтов HTML5/CSS3 – Продолжается!

Анонс курса по обучению HTML5 / CSS3 с нуля до профи

Этим летом я стартовал курс по обучению верстке сайтов. Уже прошло два потока. Программа курса прошла проверку боем, и должен сказать что мой опыт меня не подвел. Студенты которые приходили с нуля, теперь могут верстать современные сайты. Адаптивность, отображение на мобильных устройствах, responsive menu, выпадающее меню, слайдеры, фреймворк twitter bootstrap не вызывают проблем. Сейчас я готовлю программу для третьего потока обучения. В основе она останется такой же как и была, но я хочу сделать ее еще лучше, настолько, насколько это возможно.

Читать далее

Сниппеты в Sublime Text. Как создать сниппет. Полная инструкция

Сниппеты в Sublime Text. Как создать сниппет. Полная инструкция

Сниппеты — это готовые блоки кода, которые часто используются при создании html разметки, css стилей, программного кода, и так далее. Использование сниппетов значительно сокращает время на написание кода, так как вы начинаете использовать заготовки прямо из редактора. Если вы используете расширение Emmet в Sublime Text — то вероятно знакомы со сниппетом который создает html разметку с doctype html5 при наборе знака ! и нажатии клавиши TAB. В этой статье мы разберемся подробно как создать свой сниппет в Sublime Text 2.

Читать далее

Кроссбраузерность HTML страниц: зачем нужны reset.css и normalize.css

Кроссбраузерность HTML страниц: зачем нужны reset.css и normalize.css

Чтобы страница одинаково хорошо отображалась в разных браузерах, необходимо работать над ее кроссбраузерностью. В этом нам помогает тестирование страницы и отладка html/css разметки. Но есть инструменты, которые помогут сократить наведение порядка в стилях, и добиться того чтобы базовые стили были одинаковы в разных браузерах. Что это за инструменты, зачем и как их использовать — рассмотрим далее.

Читать далее

30 CSS-селекторов, которые вы должны знать

30 CSS-селекторов, которые вы должны знать

Поговорим о CSS селекторах. Помимо обычного обращения к элементам через имя класса, id и название html тегов, можно использовать специальные комбинации и команды. Рассмотрим их в статье подробнее. Некоторые селекторы поддерживаются всеми браузерами, некоторые только самыми новыми версиями браузеров.

Читать далее

Как ускорить сайт на WordPress в 17 раз. Пошаговая инструкция

Как ускорить сайт на WordPress. Как я ускорил загрузку своего сайта в 17 раз

Представляю наиболее полную инструкцию с способами по ускорению работы сайта на WordPress. Благодаря описанным ниже способам я ускорил загрузку своего сайта с 24,40 секунд до 1,41 секунды. Увеличил скорость загрузки в 17,3 раза! Хороший результат. Чтобы узнать как — читайте полную статью.

Читать далее