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

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

Классы 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-код будет гораздо (многократно!) меньше.

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

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

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

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

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

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

Сайту 8 лет!

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

Как книги. Взял какая понравилась, почитал, отложил. Да, в ней разделы, главы, но это всё равно отдельная цельная сущность. Если проводить аналогию, то сайт — это и есть одна книга. Например книга «Блог» для тех, кому интересны мысли автора. Книга «MaxSite CMS для чайников» будет иметь своего читателя, даже если там появится глава «Как установить телескоп на борту МКС».

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

Используем Live Reload без проблем

Есть такое понятие «Live Reload» — это автоматическое обновление страницы в браузере, когда изменился составляющий её css-файл (html, js и т.д.). На практике это выглядит так: вебмастер внес изменения в css-файле, сохранил, браузер автоматом обновил страницу. То есть если по простому, то не нужно каждый раз нажимать кнопку «Обновить страницу» в браузере.

Чтобы реализовать Live Reload для своих задач потребуется совсем немного.

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

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

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

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

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

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

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

LPF — простой PHP-фреймворк для создания одиночных страниц

Не так давно возникла задача сделать простую Landing Page (целевая страница сайта). На такой странице, как правило располагается вся необходимая информация о товаре/услуге.

Технически она создается в виде отдельного html-файла. Проблема тут только в том, что работать с «голым» HTML не очень удобно, ну и страшно не хотелось отказываться от возможностей LESS для создания css-стилей.

Ставить отдельную копию MaxSite CMS тоже не совсем разумно: ради пары страниц это явный перебор. Таким образом родился небольшой PHP-фреймворк «Landing Page Framework» специально «заточенный» для создания одиночных страниц.

Его смысл в том, чтобы выделить верстку каждой страницы в отдельный php-файл, и при этом обеспечить вебмастера привычными «плюшками».

В частности LPF может выполнять автоматическую компиляцию LESS в CSS, выполнять авторасстановку тэгов (вручную расставлять P — бр-р-р-р...), поддерживать привычный BBCode. Помимо этого будет работать ЧПУ, а также поддержка любого CSS-,JS-фреймворка. Плюс высочайшая скорость работы (при минимальной нагрузке на сервер) и не требуется база данных.

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