CSS, HTML, LESS, SASS

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

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

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

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

Читать дальше...

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

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

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

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

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

Читать дальше...

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

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

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

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

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

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

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

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

Читать дальше...

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

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

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

Читать дальше...

Пример создания универсального LESS-микса для табов (вкладок)

В MaxSite CMS 0.73 с помощью плагина Tabs можно задавать табы прямо в тексте. Делается это довольно просто с помощью bb-кодов.

[tabs]
 
[tab=Один]
текст первый
[/tab]
 
[tab=Два]
текст второй
[/tab]
 
[tab=Три]
текст третий
[/tab]
 
[/tabs]

В default-шаблоне уже присутствуют базовые css-стили для табов, правда они довольно невзрачные.

Пример табов для шаблона default

Покажу как можно улучшить вид табов и сделать универсальный микс, который можно использовать в разных шаблонах. Результат может быть таким.

Пример измененных табов

Читать дальше...

Mixin в LESS бывают разные

Миксы достаточно универсальны. В простом варианте - это готовый набор css-правил. В более сложном случае - это параметизированные примеси, по сути - функции. Для новичков не сразу понятна разница, хотя они имеют принципиальные отличия: первый вариант по сути copy-paste. Второй - функция, принимающая аргументы и имеющая более сложный алогритм вывода.

Рассмотрим основные отличия этих видов.

Читать дальше...

Почему нужно изучать LESS

LESS - технология, позволяющая значительно сократить время вёрстки сайта. Работая с LESS постоянно ловишь себя на мысли, что именно таким и должен быть стандартный CSS - с улучшенным синтаксисом, переменными, примесями, функциями и т.п... Впрочем об этом пока можно только мечтать, может в CSS 9 и появится нечто подобное, ну а нам пока ничего не остаётся, как решать текущие проблемы самостоятельно.

Почему нужно изучать LESS? Можно, конечно, гордиться, что хороший верстальщик может нагенерировать десятки килобайт кода в день, но логичней было бы уточнить: а насколько зависит объем кода от объёма выполненной работы?

Читать дальше...