CSS, HTML, LESS, SASS

Примеры верстки с UniCSS.Builder

CSS, HTML, LESS, SASS16 января 2016 г.

На днях запустил UniCSS.Builder — это генератор html с использованием классов UniCSS в онлайн-режиме. Генератор мне хотелось сделать уже давно, но вот только сейчас получилась готовая реализация. Особая благодарность Юре, который уже традиционно выручил с js-кодом и полезными обсуждениями.

На примерах я покажу разницу в верстке между css-фреймворком UiKit и UniCSS для некоторых блоков. При этом сразу отмечу, что UiKit очень хороший фреймворк, во всяком случае многократно лучше распиаренного бутстрапа или Foundation (это вообще — тихий ужас...). Я лишь хочу показать различия в методике верстки. А UiKit я выбрал именно потому что это хороший фреймворк с которым приятно работать.

LESS-компиляция через Node.js и Grunt

CSS, HTML, LESS, SASS9 декабря 2015 г.

Смысл этой затеи в том, чтобы автоматизировать компиляцию less-файлов. Работать должно так: сохранили любой less-файл, сам запускается компилятор и на выходе получается готовый css-файл. Сейчас я расскажу про вариант, который может использоваться любым вебмастером, но самое главное, что он универсальный и подходит и для других целей, например компиляция SCSS.

Перед началом, давайте определимся с основными понятиями.

CSS: унификация классов и прототипирование (часть 2)

CSS, HTML, LESS, SASS20 декабря 2014 г.

Классы UniCSS состоят из простых css-правил. Этот фреймворк не задает UI сайта. Его задача — перенести верстку с уровня css-файла в html-код.

Смотрите. Обычно мы делаем так (простой пример):

<div class="my-top">
...
</div>
 
.my-top { 
    margin-top: 20px;
    padding: 10px;
    color: #FFF;
    background-color: #888;
}

C помощью UniCSS будет уже так:

<div class="mar20-t pad10 t-white bg-gray500">
...
</div>

То есть мы написали тот же самый код, только в HTML в виде самостоятельных классов. Если проанализировать работу верстальщика, то это постоянное переключение между css и html файлами. Здесь же мы работаем только с html. Вы удивитесь, сколько это экономит времени и насколько упрощает работу!

В данном примере .my-topкакой-то «технический» класс, не содержащий уникальных стилей. Отступы, фон, текст, ширина и прочие примитивы. При использовании UniCSS уже не требуется создавать отдельный класс блока. CSS-код будет гораздо (многократно!) меньше.

CSS: унификация классов и прототипирование (часть 1)

CSS, HTML, LESS, SASS19 декабря 2014 г.

В процессе работы с Landing Page Framework постоянно возникало желание как-то унифицировать используемые css-классы. Проблема именования классов до боли знакома каждому верстальщику. Любой, даже самый примитивный, чисто «технический» блок, потребует своего уникального класса, чтобы указать стили, даже если это всего одна строчка кода.

Избыток классов порождает проблему идентификации: чем top-headerотличается от top-head2? Это знает только верстальщик.

Чтобы навести хоть какой-то порядок, стали придумывать различные методики: самая известная (хотя и очень спорная) BEM. Такой подход решает исключительно одну проблему — имя класса получает хоть какую-то осмысленность и вносит ясность для другого верстальщика, которому придется разбираться в коде в будущем.

Адаптивная сетка. Верстка по-новому

CSS, HTML, LESS, SASS2 октября 2013 г.

Адаптивность на сайтах на сегодняшний момент, как правило, решается единственным способом:

выстраиваем колонки для обычных разрешений (например более 960px);
для средних разрешений колонки становятся «резиновыми»;
для малых экранов сбрасываем float, после чего все ячейки следуют одна под другой.

Посмотрите на демо-примере, где используется именно такой подход. Изменяя ширину браузера можно увидеть как меняются ячейки.

Способ достаточно простой, поэтому получил широкое распространение. Вместе с тем, очевидно, что в нем существуют большие ограничения, связанные с тем, что модель поведения блоков сетки фиксирована и не предполагает более сложной организации, например для средних экранов сделать не только резиновую ширину, но и расположить ячейки попарно «1-2» и «3-4».

Колонки одинаковой высоты для адаптивного дизайна

CSS, HTML, LESS, SASS11 января 2013 г.

Проблема создания колонок одинаковой высоты достаточно известна. Суть её в том, что при вёрстке float-блоки колонок имеют разные высоты, согласно своему содержимому.

Пример разных колонок

В идеале же, нужно получить равные колонки

Равные колонки

Существуют различные способы добиться этого эффекта. Все они без особого труда находятся в гугле, но в основном методика заключается в иммитации колонок («псевдоколонки»). Делается это за счёт различных смещений (margin и padding), дополнительные контейнеры, которые «подставляются» под настоящие блоки, фоновые картинки и даже за счёт border.

Всё это конечно интересно, но при создании адаптивного дизайна ни один из этих методов не работает как следует.

Ситуация совсем оказалась печальной, когда я стал работать с «полурезиновой» адаптивной сеткой, где меняется значение float блоков (left и none), а высота блоков должна меняться к auto при float:none.

Организация Less-файлов

CSS, HTML, LESS, SASS16 августа 2012 г.

C LESS я начал работать примерно полгода назад, но до сих пор окончательно не определился с наиболее эффективной организацией данных.

С одной стороны LESS - это тот же CSS, только более продвинутый. Следовательно и для less-файлов следует использовать те же принципы. Такой подход - большая ошибка. Мне понадобилось много времени, чтобы это понять и нащупать другое направление, по которому и следует двигаться. Причём я даже не уверен, что это окончательный и самый лучший вариант. :)

Предыдущая страница

Следующая страница

Перейти к странице: