Рубрики
Верстальщику

10 + 1 CSS фраймворков — которые смогут облегчить жизнь верстальщику

Огромное спасибо автору данного поста за полезную подборку, а посему вот адрес русскоязычной статьи, кросс-пост из блога автора.

Давайте кратко разберёмся, что такое CSS фреймворк. Вольный перевод с английской википедии гласит:

Это библиотека, которая предназначена для создания и внедрения более лёгкого и валидного кода. Общий смысл этой библиотеки схож с PHP или JS библиотек, которые получили более широкое распространение и известность широким массам.

Звучит заманчиво, эти фреймворки избавляют от большого количества рутинной работы, дают готовые решения, которые можно использовать и облегчают прохождение валидации (не всегда у таких фреймворков на первом месте стоит валидация — не всегда).

Использование этих библиотек (которых, к слову, намного больше десяти), безусловно, будет требовать от вас знаний стилей, как минимум базовых. Ну и как водиться, надо будет потратить некоторое время на освоение библиотеки, но как говорится — это не сложно. Было бы желание. Почти у всех библиотек основная структура (или ядро) одинакова и проста как две копейки. Это header, footer, menu, submenu, content и т.д.

Я более чем уверен, что если вы серьёзный разработчик, то вы уже наверняка юзаете библиотеку, если не готовую. то самописную. И вы знаете, сколько это экономит нервов, времени и сил на рутинную до невозможности работу.

Ниже висит список из десяти библиотек. Я не призываю вас их скачивать и тестировать, просто на мой взгляд, они заслуживают того, что бы о них знали. Хотя бы из-за размеров комьюнити вокруг них и из-за количества пользователей. Везде есть примеры, документация, кое-где есть даже видео-туториалы 🙂

  1. Elements CSS Frameworks
  2. WYMstyle: a CSS framework
  3. YAML CSS Framework
  4. YUI Grids CSS
  5. Boilerplate CSS Framework
  6. Blueprint CSS
  7. CleverCSS
  8. Tripoli Beta CSS Framework
  9. ESWAT Web Project Framework
  10. CwS CSS Framework

От себя добавлю плюс +1 русский источник http://css-framework.ru/ — очень достойный ресурс.

Рубрики
Верстальщику

Давайте заставим их думать о стандартах!!!

Вебмастера! Внимание! На 9-е апреля назначена мировая акция CSS Naked Day.

Цель: показать всю важность создания единых стандартов верстки.
Метод: отключить на 1 день CSS на своих сайтах и показать, как всё это выглядит без стилей.

В прошлом году в ней приняло участие почти 2000 сайтов, а в этом ожидается ещё больше, включая довольно серьёзные ресурсы вроде того же XHTML.com, который будет участвовать в акции.

В 2006-м году специально для этой акции был даже создан плагин для WordPress, который впрочем с новыми версиями уже не работает. Но его функциональность легко восстановить: замените объявление CSS-импорта в файле header.php в папке вашей темы на следующий код:

<?php
function is_Naked_Day() {
$use_gmt_offset = 1;
$start = date('U', mktime(0,0,0,04,09,date(Y)));
$end = date(’U', mktime(24,0,0,04,09,date(Y)));
$now = time(’U');
if($use_gmt_offset)
$offset = get_settings(’gmt_offset’)*60*60;
$start = $start + $offset;
$end = $end + $offset;
$now = $now + $offset;
if (($now >= $start) && ($now <= $end))
return true;
else return false;
}
if(is_Naked_Day()) {
echo “<!– Сегодня CSS Naked Day –>“;
} else {
echo “<link rel=’stylesheet’ href=’”.bloginfo(’stylesheet_url’).”‘ type=’text/css’ media=’screen’ />“; } ?>

9 апреля этот код отключит CSS на сайте строго по времени и с учётом вашего часового пояса. На сайтах по ссылкам можно найти варианты кода для других движков (и если копируете код — исправьте кавычки на обычные, WP их коверкает).

Лично я впишу это у себя в блоге однозначно, поскольку стандарты вещь просто необходимая!!! Да здравствуют стандарты!!!

Рубрики
Верстальщику

Простая и полезная прозрачность (CSS прозрачность)

Во многих дизайнерских решениях для создания прозрачности на сайтах используются изображения в формате .png24(или более новый формат .png32 ), при этом верстальщикам приходится применять pngfix или специальные фильтры для подобных изображений, чтобы они корректно выглядели в IE6 и более поздних браузерах от Microsoft.Однако, по-моему, очень часто верстальщики не уделяют должного внимания свойству opacity, которое во многих случаях помогает решить нужные задачи, не прибегая к использованию .png24 (или .png32).

Тем более, если к свойству opacity добавить javascript, можно получить весьма интересные эффекты.

Рубрики
Верстальщику

Миямото Мусаси и вёрстка

Просто спупер замечательная статья, которую я нашел в записях коллеги Юрия “akella” Артюха.

Как пишет сам автор — это «ассорти из советов для фрилансеров-верстальщиков от одного из лучших воинов этой планеты». Добавить здесь нечего, действительно емко и в точку. Советую читать. И спасибо Юрию.

Книга Пяти Колец

Книга написана в 17 веке, одним известным японским мастером, Миямото Мусаси. Я пытаюсь проводить параллели с современным миром.

Cостояние духа

В бою состояние твоего духа не должно отличаться от повседневного. И в схватке и в обыденной жизни ты должен быть целеустремлен, но спокоен. Встречай ситуацию без напряжения, однако не беспечно, с духом уравновешенным, но не предубежденным.

Не позволяйте багам возникшим в верстке завладеть вами. Все равно, по опыту, они всегда решаются только когда успокаиваешься и перестаешь орать “Ну какого !@# IE!?”.

Когда вы увлечены эмоциями, вы себя с ними отождествляете. Буддисты, например, советуют разделить себя и свои эмоции. Очистить душу для любви (к вёрстке) и сострадания (к багам).

Рубрики
Верстальщику

Условные комментарии в CSS и персональные CSS-хаки для Internet Explorer 7, Opera и FireFox

К сожалению, полное соответствие стандартам понимания CSS остается проблемой для браузеров разных производителей и сегодня. И если Opera, Firefox и Safari близки к правильному пониманию стандартов, то самый массовый обозреватель интернета Internet Explorer (даже в последней 7 версии) очень далек от правильной интерпретации стандартов html и css.Поэтому вебмастеру очень часто в своей работе приходится сталкиваться с трудностями согласования внешнего вида страницы в различных клиентских агентах. Здесь как раз и приходят нам на помощь CSS-хаки и условные комментарии. Сначала про условные комментарии.