Базовая сеточка в веб-дизайне
Веб художники совсем взбудоражены одной малеханькой неувязкой, товарищи из печатного решетка просто имеют все шансы усилить нам пинка, вопросцем о том можем ли мы добиться в интернет, такового выравнивания как они используют в печати теснее немало лет. Давайте поглядим прецедентам в личико, сейчас в интернет проще применять видео, нежели отлично настроить шрифты, либо выровнять составляющие с внедрением всепригодной сетки.
Но интернет художники военные дети, мы этак элементарно никак не сдаемся. В долговременной и тяжеленной сражению с кривыми браузерами мы переносим в интернет все наиболее изощренные и трудные техники из печатного дела.
У нас имеется технология.
В прошедшем году, правда и в данном было немало дискуссий о применении сеток в дизайне страниц. Mark отдал нам lesson plan, Khoi case study и Cameron отдал нам toolkit. тут все светло, у нас имеется помощь браузеров, познания и приборы для сотворения многоколоночных разметок.
Мы можем привнести некие взгляды пропорциональности и равновесия в наши странички с поддержкою иной техники отлично знаменитой в печатном деле базисной сетки.
В печати это просто, элементарно подключите базисную сетку в Quark либо InDesign и установите нужную вышину рядов, в интернет совершенно иная деяния, довольно трудно выровнять составляющие по вертикали, так как мы никак не знаем в каком месте кончается любой вещество, ещё ужаснее то, будто мы никак не можем установить величина шрифта, этак как нам необходимо. И все-же применив незначительно арифметики и догадливости, разрешено вынудить данный способ действовать на интернет странице.
Сетка
Я применяю пиксели в качестве единицы измерения в данной заметке, разумею, будто кое-кому данный отбор имеет возможность появиться странноватым, чуток позднее я поясню, отчего я его устроил и предложу альтернативную технику, использующую условные единицы.
Первое будто мы обязаны изготовить это избрать вышину рядов сетки. Я избрал обычный величина шрифта 12 пикселей и вышину рядов 18 пикселей, чтоб заполучить неплохой лидинг в 150%. совсем принципиально заблаговременно найти какую вышину рядов вы будете применять. Вы обязаны избрать известие объема шрифта к вышине этак чтоб читабельность слова была как разрешено лучше.
Мы применяем способ порекомендованный Khoi и сделаем циклическое фоновое изваяние, которое станем применять в процессе работы чтоб существовать убежденными в том будто наши строчки пребывают на собственных местах, поглядите образчик чтоб взять в толк как это выглядит.
Вы увидели, будто строчки размещены никак не буквально на чертах сетки, это соединено с тем, будто в CSS вышина строчки задается с поддержкою отступов над и перед знаками, потому еще легче расположить контент меж чертами сетки, нежели напрямик на их. естественно, вы сможете поменять фоновое изваяние либо прибавить отступы к деталям этак чтоб контент распологался буквально на чертах сетки, однако я никак не вижу надобности накручивать нам полностью довольно и такого, будто есть.
Параграфы и заголовки
Начнем с такого, будто установим margin и padding для всех частей одинаковым 0, чтоб никак не волнуется о том, какие смысла браузер употребляет по умолчанию. На практике нам пригодиться наиболее непростая система, однако для образца довольно применять селектор *.
* {
margin: 0;
padding: 0;
}
Мы желаем прибавить место меж параграфами, однако смысл по умолчанию одинаковое 1 em ( в нашем случае это 12px) никак не идет к нашей сетке, установим нижнее поле параграфа 18px.
p {
margin-bottom: 18px;
}
Когда станем налаживать заглавия принципиально определить вышину строчки кратную 18, и еще прибавить нижнее поле 18px.
h1 {
font-size: 24px;
line-height: 36px;
margin-bottom: 18px;
}
h2 {
font-size: 18px;
line-height: 18px;
margin-bottom: 18px;
}
h3 {
font-size: 12px;
line-height: 18px;
}
Алгоритм максимально обычный, ежели необходимо прибавить отступы либо поля они обязаны существовать кратны 18, чтоб полосы подходили сетке, никак не непременно прибавлять сходу 18 пикселей, разрешено применять пары которые в сумме предоставляют 18, к примеру верхнюю рубеж 12 пикселей, а нижнюю 6.
Списки
Мы пристрастились прибавлять незначительно места меж веществами перечня и опосля либо пред перечнем в целом. В зависимости от шага сетки разрешено прибавить более места (целую линию сетки) либо никак не прибавлять его вовсе.
ul, ol {
margin-bottom: 18px;
}
Плавающие составляющие и боковые панели
Внесем незначительно распорядка и сюда. Изображения и остальные плавающие составляющие в тексте обязаны обладать вышину кратную шагу сетки, в нашем образце 18 пикселям. ежели величина изображения никак не кратен 18, разрешено прибавить к нему рамку, величина которой станет подходить данному притязанию. контент около изображения обязан кончаться на той ведь полосы сетки, в каком месте и само изображение.
.left {
float: left;
margin: 0 18px 18px 0;
}
.right {
float: right;
margin: 0 0 18px 18px;
}
Другие плавающие составляющие, эти как вставки слова, творят незначительно более проблем, тяжело предречь их вышину, поэтому будто она находится в зависимости от численности слова снутри. однако покуда все изображения и контент снутри вставки идут по стопам правилу 18 пикселей, а рубежа и отступы в сумме предоставляют 18 пикселей либо кратны им, все обязано подходить нашей сетке.
.callout {
border: 1px solid #ddd;
padding: 8px 10px;
margin-bottom: 18px;
}
Заметьте, будто я установил отступы исподнизу и поверх одинаковыми 8 пикселям, поэтому будто бордер отчуждает ещё 2 пикселя (8 + 8 + 1 + 1 = 18).
Также необходимо прибрать нижнюю рубеж крайнего вещества, чтоб в конце вставки никак не было очень огромного места. Это никак не накаленно для нашей разметки (потому будто отступ подходит сетке), однако все-же я принял решение поправить это и употреблял псевдо-класс :last-child, IE6 естественно его никак не соображает, однако это никак не шибко воздействует на разметку.
.callout :last-child {
margin-bottom: 0;
}
Еще 1 принципиальная вещица, о которой вы обязаны держать в голове, творя вставки и боковые панели, это вышина строчек, она никак не обязана изменяться, в том числе и ежели вы делаете контент мелочнее, для 11 и 10 пиксельных шрифтов, вышина строчки 18 пикселей остается комфортной для чтения.
Наша страничка вполне подходит сетке
Вы сможете поглядеть образчик срубленный с внедрением описанной больше техники. ежели вы никак не веруете мне, никак не необходимо раздобывать линейку, элементарно поглядите на данный ведь образчик с заметной сеткой.
Вы теснее мыслите, отчего базисная сеточка совсем изредка употребляется в интернет. странички надлежащие ей благовидны, однако совсем трудно использовать её, ежели ваша метка усугубляется. Как и в печати, базисная сеточка, никак не постоянно верный отбор для хоть какой разметки, время от времени вам необходимо прибавить блоки никак не надлежащие сетке, чтоб метка заработала.
Тем никак не наименее, внедрение базисной сетки в интернет полностью может быть, она имеет возможность существовать в особенности эффективна в случае применения нескольких колонок. отлично сбалансированная сеточка, в том числе и в пределах лишь основной колонки слова, имеет возможность подбавить вебсайту сияние и повысить читабельность.
Не опасайтесь пикселей
Я употреблял пиксели заместо em в данном образце лишь по одной фактору, это все упрощает. В пикселях я могу установить вышину строчек для только акта, и недостает надобности считать её, ежели необходимо применять наиболее небольшой шрифт, а в исследованию образцов совсем принципиальна простота восприятия.
Вы сможете применять условные единицы измерения, однако это существенно осложнит вычисления. совсем элементарно установить вышину строчек 18 пикселей (line-height:1.5em), однако как скоро вам пригодиться применять шрифты иного объема, вам будет необходимо сделать большие вычисления чтоб установить вышину строчки подобающую базисной сетке, к тому ведь разные методы округления, применяемые браузерами, лишь усложняют задачку. Тем никак не наименее, это может быть и ежели вы желаете испытать данную технику с условными объемами шрифтов, я советую вам хорошую заметку Ричарда Руттера, Compose to a Vertical Rhythm.
С иной точки зрения как художники мы обязаны устремляться к равновесию меж точной вплоть по пикселя разметкой, и нескончаемой эластичностью. Изменяемый величина шрифтов это вещество аксессибилити, а никак не дизайна, в совершенстве он обязан поддерживаться браузером, никак не несамостоятельно от такого, как изготовлена страничка, и почти все инновационные браузеры этак и поступают.