MaxSite.org
Блог вебмастера

CSS, HTML, LESS, SASS

Пример создания универсального 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? Можно, конечно, гордиться, что хороший верстальщик может нагенерировать десятки килобайт кода в день, но логичней было бы уточнить: а насколько зависит объем кода от объёма выполненной работы?

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

Цветовая схема подсветки кода LESS-файлов для Notepad++

Те, кто пользуется LESS, как правило сталкиваются с проблемой подсветки кода в Notepad++. Для редактора есть масса готовых схем (user defined language files). Есть там и для less, но с этой подсветкой масса проблем, одна из которых - остутствующие folding - раскрывающиеся блоки. Поэтому как правило для less-файлов ставят обычный CSS-синтаксис.

Я написал свой вариант userDefineLang.xml.

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

Что нам стоит сайт построить?

За последние годы в веб-стоительстве изменения коснулись самой идеологии построения сайта - все больше веб-строителей понимают, что требуется придерживаться концепции, заложенной в HTML 4.0, а именно отделения структуры документа от его отображения. Я бы даже сказал, что сейчас наблюдается некая «мода» на возведение в абсолют этой идеи. Выражается это, например в повальном «переходе» на верстку DIV'ами, вместо привычного использования тегов таблиц (хотя таблицы никто из спецификации не исключал). В принципе нет ничего плохого, в том, что дизайнер будет использовать более «легкие» теги и строго следовать рекомендации W3C. Но вместе с тем я предлагаю все-таки немного спокойней и прагматичней (что-ли) подойти к этому вопросу.

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