Для тех, кто использует 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; } Я только что описал структуру моего небольшого фреймворка. Это не значить, что я считаю его самым лучшим. Скорее я надеюсь пробудить в вас интерес в создании своего собственного фреймворка(если его у вас еще нет).
ссылка на оригинал статьи http://habrahabr.ru/post/171303/
Добавить комментарий