Вы используете CSS — фреймворк?
Для тех, кто использует CSS — фреймворк в своей работе, прошу поделиться своим опытом в комментариях, будет очень полезно и интересно.
CSS — фреймворк — это заранее подготовленный набор HTML и CSS — файлов. Идея в том, чтобы при создании каждого нового проекта использовать этот готовый набор файлов, в которых для вас уже создан макет, задано шрифтовое оформление и написан весь основной код, общий для большинства сайтов. Я использую собственный CSS — фреймворк, он очень простой, идея взята из книги «CSS ручной работы», применяю его всякий раз, когда приступаю к реализации нового проекта.
Я покажу вам код каждого CSS — файла.
Можно также использовать готовый CSS — фрейворк, например: 960 Grid System или Blueprint. Если вы используете готовый фреймворк, то существует опасность того, что в вашем коде будет много ненужного хлама. Который вы не будете использовать в своем проекте. В любом случае выбор за вами какой фреймворк использовать, я делюсь только своим опытом работы и вариантом который, для меня больше подходит.
Давайте посмотрим как устроены таблицы стилей моего фреймворка. Сначала поговорим об HTML — файле который служит для любого моего проекта, я называю его index.html. Внутри файла index.html находится простая незаполненная структура для тех элементов которые я планирую использовать в любом проекте.
Смотрите и наслаждайтесь.
Файл index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Untitled</title>
<!-- [if gte IE 7]><!-->
<link rel="stylesheet" type="text/css" media="screen, projection" href="css/screen.css" />
<!--<! [endif]-->
</head>
<body>
<div id="wrap">
<div id="header" class="group">
<div id="logo">
LOGO
</div>
<ul id="nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div> <!-- /header -->
<hr />
<div class="group">
<div id="main">
Main
</div> <!-- /main -->
<hr />
<div id="secondary">
Secondary
</div> <!-- /secondar -->
</div> <!-- /.group -->
<hr />
<div id="footer">
Fotter
</div> <!-- /footer -->
</div> <!-- /wrap -->
<!-- c(yats) -->
</body>
</html>
Далее мы посмотрим на каждый из четырех CSS — файлов, которые я использую. Начнем с screen.css — основной таблицы стилей. Она представляет собой всего-навсего список других таблиц стилей. Порядок импортирования важен.
Файл screen.css
/*
Title: Imported style sheets are used in the project
Author: author@yats.com.ua
*/
/* import stylesheets */
@import url ("reset.css");
@import url ("master.css");
@import url ("ie.css");
/* end import */
Первая таблица стилей, которая импортируется в файл screen.css — это таблица стилей reset.css. Она сбрасывает стандартные стили, которые браузеры применяют по умолчанию.
Файл reset.css
/*
Title: Reset default browser styles
Author: author@yats.com.ua
*/
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;
font-size: 100%;
vertical-align: baseline;
border: 0;
outline: 0;
background: transparent;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
:focus {
outline: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
Файл reset.css, который я использую при создании всех проектов, во многом позаимствован у Эрика Мейера. После сброса стандартных настроек браузера мы добавляем стили основного оформления. Основной файл master.css, содержит все стили для дизайна данного сайта. Чтобы ускорить процес создания оформления, я добавил кое-какие базовые элементы.
Файл master.css
/*
Title: Master styles for screen media
Author: author@yats.com.ua
*/
body{
font-family: "Helvetica neue", Helvetica,Arial, sans-serif;
color: #444;
font-size: 62.5%;
background: #fff;
}
/* links */
a:link, a:visited {
color: #369;
outline: none;
}
a:hover{
color: #39c;
}
/* Page structure
------------------------------*/
#wrap{
margin: auto;
max-width: 62.5em
}
#main{
}
#secondary{
}
#footer{
}
/* Header
------------------------------*/
#logo{
}
/* nav */
#nav{
}
/* Main styles
------------------------------*/
/* Secondary styles
------------------------------*/
/* Footer styles
------------------------------*/
#footer{
}
/* Misc.
------------------------------*/
hr, .hide {
display: none;
}
a img {
border: none;
}
/* self-clear floats */
.group:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
И наконец, мы импортируем файл ie.css, в котором содержится весь дополнительный код для Internet Explorer. Я предпочитаю выделить эти правила в отдельную таблицу стилей, чтобы master.css оставался чистым и лишенным того безобразия, которое происходит в IE.
Файл ie.css
/*
Title: IE patches
Author: author@yats.com.ua
*/
/* PNG fix */
* html #selector { /* for IE<6 */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='img/image.png');
background-image: none;
background-repeat: no-repeat;
background-color: transparent;
}
/* self-clear floats */
* html .group { /* IE6 */
height: 1%;
}
*:first-child+html .group { /* IE7 */
min-height: 1px;
}
Я только что описал структуру моего небольшого фреймворка. Это не значить, что я считаю его самым лучшим. Скорее я надеюсь пробудить в вас интерес в создании своего собственного фреймворка(если его у вас еще нет).
Автор: yats
