Семь лет назад я написал статью «Мысли вслух или почему Google лучше Яндекса». Довольно интересно было вновь читать, поскольку отраженные в ней вещи в целом не потеряли актуальности и сегодня. Наверное в Яндексе читают мой блог, иначе невозможно обьяснить появление метрики — копирование гугловской разработки Analitycs — счетчика для сайтов. Впрочем, мне без разницы кто у кого «позаимствовал», меня больше интересует текущее состояние дел и как это всё скажется на нас — вебмастерах.
Необычная задача. В результате можно добиться того, чтобы какие-то страницы сайта создавались разными CMS. У меня стояла задача обеспечить одновременную работу LPF и MaxSite CMS. То есть был установлен сайт на MaxSite CMS, который замечательно работает. LPF нужно было использовать только для главной страницы и нескольких других (произвольных).
Таким образом задача состоит в том, чтобы загружать только реально созданные LPF-страницы, во всех остальных случаях должна работать MaxSite CMS.
Как правило, такие вещи делаются «в лоб»: вторая система устанавливается в отдельный каталог сайта. Но тогда приходится мириться с дополнительным сегментом в адресе страниц. Ну и в этом способе сложно обеспечить работу главной.
На днях запустил UniCSS.Builder — это генератор html с использованием классов UniCSS в онлайн-режиме. Генератор мне хотелось сделать уже давно, но вот только сейчас получилась готовая реализация. Особая благодарность Юре, который уже традиционно выручил с js-кодом и полезными обсуждениями.
На примерах я покажу разницу в верстке между css-фреймворком UiKit и UniCSS для некоторых блоков. При этом сразу отмечу, что UiKit очень хороший фреймворк, во всяком случае многократно лучше распиаренного бутстрапа или Foundation (это вообще — тихий ужас...). Я лишь хочу показать различия в методике верстки. А UiKit я выбрал именно потому что это хороший фреймворк с которым приятно работать.
Смысл этой затеи в том, чтобы автоматизировать компиляцию less-файлов. Работать должно так: сохранили любой less-файл, сам запускается компилятор и на выходе получается готовый css-файл. Сейчас я расскажу про вариант, который может использоваться любым вебмастером, но самое главное, что он универсальный и подходит и для других целей, например компиляция SCSS.
Перед началом, давайте определимся с основными понятиями.
Сервис GitHub.com предлагает не только бесплатно размещать репозитории, но и позволяет создать отдельный сайт вида USER.github.io. Сайт, правда, будет статичным, то есть его придется делать на «голом» HTML, без использования какой-либо CMS. Такие сайты создаются в рамках GitHub Pages.
Landing Pages Framework позволяет создавать статичные сайты без особых усилий. Я расскажу, как можно создать сайт на гитхабе и использовать LPF для генерации html-файлов.
Если вы, как и я, решили освоить git, то скорее всего у вас возникнет желание разместить свой проект на GitHub.com для публичного доступа.
Как новичку мне было сложно понять, каким образом создать связь между репозиториями. То есть локально у нас есть набор файлов проекта. Нужно каким-то образом выложить их на гитхаб. По сути это обычное копирование, но в git это работает не так очевидно. Пробившись несколько дней, я написал свою пошаговую инструкцию для новичков.
Классы 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-код будет гораздо (многократно!) меньше.
Здесь можно заказать создание сайта (только Украина), шаблона или лендинга. Также вы можете выбрать готовые шаблоны для MaxSite CMS по небольшой цене. Также можно купить отдельные модули, компоненты для вашего сайта.