Генератор (x)html-css скелета.Суббота, Ноябрь 19, 2011 г. То о чём я хочу вам сегодня рассказать, скорее всего для многих покажется банальностью. Но всёже, вдруг кто то ещё не в курсе? Вдруг для кого то это станет ещё одним полезным инструментом? Если это так, то пользуйтесь на здоровье. Каждый раз начиная нарезать какой либо макет, я ловил себя на мысли что всегда делаю это практически по одной наезженной схеме. Хидер, футер, сайдбар и тд и тп. Следующей мыслью было сделать один обобщённый шаблон с которого можно было бы начать вёрстку практически любого, более-менее типового сайта. Ведь это же логично, избавиться от однообразной рутиной работы, не повторяться, DRY (привет Django). У многих такие шаблоны скорее всего даже есть. Но своих понаделать я не успел. И это хорошо что не успел. Мой товарищ muhas поделился со мной ссылкой как раз именно такого сервиса. Сервиса который генерирует кроссбраузерный html+css скелет. Вот же он csstemplater.com. Путём нехитрых манипуляций задаём параметры будущему скелету, выбираем более понравившийся сброс css, и всё, скелет готов. Все генерируемые скелеты блочные. Надеюсь нет необходимости в контексте этого поста объяснять преимущества блочной верстки? Я считаю, что таблицы нужны только лишь для таблиц. Вот такая вот тавтология :). Хотя, каюсь, в силу наверно недостаточного мастерства и терпения, использую таблицы в некоторых не табличных ситуациях. Но самое главное что это происходит всё реже и реже. Напоследок пару слов о css сбросе. Я использую вариант сброса от «Eric Meyer».
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
Единственные изменения которые я привношу это: Удаляю «font-size: 100%;» строка 14. В противном случае в wysiwyg редакторах различных cms становится невозможным нормально управлять размером шрифта. Удаляю «list-style: none;» для списков, 21-23 строки. Так же для нормальной работы со списками в wysiwyg. Добавляю класс
.empty {
font-size: 1px;
text-decoration: none;
}
Сейчас объясню для чего. Я часто делаю ссылку (тег a) блочной, для того чтобы можно было задать бэкграунд, размер и отступы. И если в такой ссылке не предусмотрен текст то помещаю пробел (некоторые браузеры странно относятся к пустым блокам) и присваиваю класс empty, для того чтобы этот пробел не был виден. Вот и всё, надеюсь кому нибудь пригодится. | ||
Оставить коментарий
)
