Toolbox CSS – набор стилей

Toolbox CSS – набор готовых CSS стилей, которые можно использовать при разработке сайта. Этот набор является дополнительным к вашему основному файлу стилей и не обязывает к однозначному использованию как фреймворк.

Например, вам нужно сделать привязку элемента по левому краю. Для этого вы можете использовать класс .floatLeft. Для выделения сообщений с ошибками подойдет класс .error. Нужно добавить иконку к ссылке на e-mail? Используйте a[href^="mailto"]

Toolbox CSS съэкономит ваше время на написание стилей. Кроме того, вы всегда можете добавить свой собственный класс или изменить существущие. Такой набор будет актуален для верстки любого сайта.

Код можно скопировать отсюда, или скачать по ссылке ниже:

Код

/*  
Toolbox CSS  

http://get-element.3dn.ru

*/  
/*  
Разметочные инструменты
*/  
.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; }  
/*  
Настройки печати
*/  
.page-break { page-break-before: always; }  
/*  
Настройки типографии
*/  
.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; }  
/*  
Для укладки и стайлинга  
*/  
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); }  
/*  
Отображение значений
*/  
.hide { display: none; }  
.show { display: block; }  
.invisible { visibility: hidden; }

  • FalleN

  • 2436

  • 1

  • 250
Теги: CSS, Toolbox, набор

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

Добавить комментарий:

Для добавления вы должны авторизироваться!