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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

О сайте

Здесь вы получите самую полную информацию о создании сайтов на MaxSite CMS.

Рейтинг@Mail.ru