Toolbox CSS – набор стилей
Toolbox CSS
Toolbox CSS – набор готовых CSS стилей, которые можно использовать при разработке сайта. Этот набор является дополнительным к вашему основному файлу стилей и не обязывает к однозначному использованию как фреймворк.
Например, вам нужно сделать привязку элемента по левому краю. Для этого вы можете использовать класс .floatLeft. Для выделения сообщений с ошибками подойдет класс .error. Нужно добавить иконку к ссылке на e-mail? Используйте a[href^="mailto"]
Toolbox CSS съэкономит ваше время на написание стилей. Кроме того, вы всегда можете добавить свой собственный класс или изменить существущие. Такой набор будет актуален для верстки любого сайта.
Код можно скопировать отсюда, или скачать по ссылке ниже:
/*
Toolbox CSS
Chris Coyier
http://css-tricks.com
*/
/*
LAYOUT TOOLS
*/
.floatLeft { float: left; }
.floatRight { float: right; }
.clear { clear: both; }
.layoutCenter { margin: 0 auto; }
.textCenter { text-align: center; }
.textRight { text-align: right; }
.textLeft { text-align: left; }
/*
PRINT TOOLS
*/
.page-break { page-break-before: always; }
/*
TYPOGRAPHIC TOOLS
*/
.error { border: 1px solid #fb4343; padding: 3px; color: #fb4343; }
.warning { border: 1px solid #d4ac0a; padding: 3px; color: #d4ac0a; }
.success { border: 1px solid #149b0d; padding: 3px; color: #149b0d; }
.callOut { font-size: 125%; font-weight: bold; }
.strikeOut { text-decoration: line-through; }
.underline { text-decoration: underline; }
.resetTypeStyle { font-weight: normal; font-style: normal; font-size: 100%;
text-decoration: none; background-color: none; word-spacing: normal;
letter-spacing: 0px; text-transform: none; text-indent: 0px; }
/*
STYLING EXTRAS
*/
a[href^="mailto"] { background: url(images/emailIcon.png) left center no-repeat; padding-left: 10px; }
a[href~=".pdf"] { background: url(images/pdfIcon.png) left center no-repeat; padding-left: 10px; }
a.button { color: black; border: 1px solid black; padding: 3px; }
a.button:hover { background: black; color: white; }
.transpBlack { background: url(images/transpBlack.png); }
/*
DISPLAY VALUES
*/
.hide { display: none; }
.show { display: block; }
.invisible { visibility: hidden; }
Дополнительная информация доступна на сайте
Dmoz
Спасибо, классная штука. Конечно, это можно прописать и ручками, но готовый код тут будет не лишним! :)
СрегаЦитировать
Спасибо, действительно очень хорошая идея, можно значительно ускорить процесс изготовления сайта. (:
Денис С.Цитировать
Просто и сердито! +1
KalishaЦитировать
Если не сложно поясните свойство плз { page-break-before: always; }. Первый раз вижу.
FXIXЦитировать
page-break-after как и page-break-before используется в стилях для печати, чтобы установить, после какого элемента нужно переходить на новый лист
page-break-after: auto|always|empty string;
page-break-before: auto|always|empty string;
Подробнее об этих свойствах вы можете прочесть
АвторЦитировать
пасиб. второй день читаю блог, много почерпнул:)
FXIXЦитировать
Очень рада, что на моем блоге вы нашли полезную для себя информацию :) Следите за новыми статьями через RSS и всегда будете в курсе самых свежих обзоров и новостей.
АвторЦитировать