Вёрстка сайтов: CSS, HTML, LESS

Чеклист или методика создания шаблона

Дневник / Вёрстка сайтов: CSS, HTML, LESSПросмотров: 465 (557)

Это даже не чеклист в привычном понимании, а обобщенные пункты, позволяющие выполнить «быстрый старт». К этой методике я подходил много лет, возможно кому-то она тоже будет интересна.

Для начала необходимо дать ряд пояснений, чтобы был понятен основной базис этой методики и вы могли её адаптировать под свои нужды и особенности системы (не обязательно MaxSite CMS).

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

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

Как быстро определить «правильные» шрифты?

Дневник / Вёрстка сайтов: CSS, HTML, LESSПросмотров: 4596 (373)

Раньше на сайтах использовались только т.н. безопасные шрифты — это Arial, Verdana, Times New Roman, то есть те, которые гарантировано установлены у пользователей. С появлением Google Fonts и woff-формата, ситуация кардинально изменилась — появилась возможность загружать произвольный шрифт для сайта.

Наиболее популярны: Open Sans, Roboto, Ubuntu и другие. У этих шрифтов, помимо начертания, есть еще и «адаптация к экранному сглаживанию». Именно поэтому на мониторе с включенным сглаживанием привычный Arial проигрывает Open Sans, хотя их начертания и похожи.

Но, главная проблема в том, что многие шрифты на самом деле содержат неверное отображение русских букв. Возможно это и не проблема для читабельности, но само по себе это выглядит некрасиво и в общем-то неграмотно с точки зрения правильного написания, тому которому мы учились в школе с первого класса.

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

Нормальное описание Flexbox-модели

Дневник / Вёрстка сайтов: CSS, HTML, LESSПросмотров: 6191 (486)

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

Flexbox — мощная штука, которая охватывает достаточно большой пласт задач, но на практике требуется буквально несколько основных его возможностей. В 90% случаев Flexbox используется как замена float-модели блоков, то есть там, где требуется расположить несколько блоков рядом. Плюсом Flexbox будет и то, что его возможности позволяют легко строить адаптивные сетки, вертикальное выравнивание, произвольный порядок и т.п.

На сегодняшний день можно сказать, что flex полноценно поддерживают все современные браузеры, включая и IE11.

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

Сайт на нескольких CMS одновременно

Дневник / Вёрстка сайтов: CSS, HTML, LESSПросмотров: 3403 (251)

Необычная задача. В результате можно добиться того, чтобы какие-то страницы сайта создавались разными CMS. У меня стояла задача обеспечить одновременную работу LPF и MaxSite CMS. То есть был установлен сайт на MaxSite CMS, который замечательно работает. LPF нужно было использовать только для главной страницы и нескольких других (произвольных).

Таким образом задача состоит в том, чтобы загружать только реально созданные LPF-страницы, во всех остальных случаях должна работать MaxSite CMS.

Как правило, такие вещи делаются «в лоб»: вторая система устанавливается в отдельный каталог сайта. Но тогда приходится мириться с дополнительным сегментом в адресе страниц. Ну и в этом способе сложно обеспечить работу главной.

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

Примеры верстки с UniCSS.Builder

Дневник / Вёрстка сайтов: CSS, HTML, LESSПросмотров: 2770 (204)

На днях запустил UniCSS.Builder — это генератор html с использованием классов UniCSS в онлайн-режиме. Генератор мне хотелось сделать уже давно, но вот только сейчас получилась готовая реализация. Особая благодарность Юре, который уже традиционно выручил с js-кодом и полезными обсуждениями.

На примерах я покажу разницу в верстке между css-фреймворком UiKit и UniCSS для некоторых блоков. При этом сразу отмечу, что UiKit очень хороший фреймворк, во всяком случае многократно лучше распиаренного бутстрапа или Foundation (это вообще — тихий ужас...). Я лишь хочу показать различия в методике верстки. А UiKit я выбрал именно потому что это хороший фреймворк с которым приятно работать.

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

LESS-компиляция через Node.js и Grunt

Дневник / Node.js / Вёрстка сайтов: CSS, HTML, LESSПросмотров: 4379 (295)

Смысл этой затеи в том, чтобы автоматизировать компиляцию less-файлов. Работать должно так: сохранили любой less-файл, сам запускается компилятор и на выходе получается готовый css-файл. Сейчас я расскажу про вариант, который может использоваться любым вебмастером, но самое главное, что он универсальный и подходит и для других целей, например компиляция SCSS.

Перед началом, давайте определимся с основными понятиями.

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

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

Дневник / Вёрстка сайтов: CSS, HTML, LESSПросмотров: 7696 (289)

Классы 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.

Рейтинг@Mail.ru