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

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

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

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

Читать ➝

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

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

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

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

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

Читать ➝

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

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

Читать ➝

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

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

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

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

Читать ➝

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

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

Читать ➝

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

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

Читать ➝