Смысл этой затеи в том, чтобы автоматизировать компиляцию less-файлов. Работать должно так: сохранили любой less-файл, сам запускается компилятор и на выходе получается готовый css-файл. Сейчас я расскажу про вариант, который может использоваться любым вебмастером, но самое главное, что он универсальный и подходит и для других целей, например компиляция SCSS.
Перед началом, давайте определимся с основными понятиями.
Классы 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-код будет гораздо (многократно!) меньше.
В процессе работы с Landing Page Framework постоянно возникало желание как-то унифицировать используемые css-классы. Проблема именования классов до боли знакома каждому верстальщику. Любой, даже самый примитивный, чисто «технический» блок, потребует своего уникального класса, чтобы указать стили, даже если это всего одна строчка кода.
Избыток классов порождает проблему идентификации: чем top-headerотличается от top-head2? Это знает только верстальщик.
Чтобы навести хоть какой-то порядок, стали придумывать различные методики: самая известная (хотя и очень спорная) BEM. Такой подход решает исключительно одну проблему — имя класса получает хоть какую-то осмысленность и вносит ясность для другого верстальщика, которому придется разбираться в коде в будущем.
Адаптивность на сайтах на сегодняшний момент, как правило, решается единственным способом:
Посмотрите на демо-примере, где используется именно такой подход. Изменяя ширину браузера можно увидеть как меняются ячейки.
Способ достаточно простой, поэтому получил широкое распространение. Вместе с тем, очевидно, что в нем существуют большие ограничения, связанные с тем, что модель поведения блоков сетки фиксирована и не предполагает более сложной организации, например для средних экранов сделать не только резиновую ширину, но и расположить ячейки попарно «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-стили для табов, правда они довольно невзрачные.
Покажу как можно улучшить вид табов и сделать универсальный микс, который можно использовать в разных шаблонах. Результат может быть таким.
| Результаты |
Идет загрузка…