Я доработал шаблон для сайта о котором тут писал.

Суть доработки сводилась к тому, чтобы поработать с header'ом. Теперь для мобильной версии сайта "подсвывается" свой header, в который копируется содержание текущего + меню не остается на экране, а прячется под кнопку. Реализацию сделал с использованием jquery (версии 1.7 или выше). Выбор этой библиотеки очевиден: у меня все проекты используют её, и смысла "заморачиваться" на трюки с CSS лично я не видел. Соответственно, появился блок JavaScript кода. Да и возможностей у jQuery побольше (в плане простоты реализации, всё тоже самое можно и на чистом JS сделать).

Итак, дополнительные возможности текущего шаблона:

• Меню в мобильной версии сворачивается под кнопку
• Header в мобильной версии становится полосой с меню
• Также в мобильной версии можно прятать и сайдбары (ничего сложного)

Что добавилось из настроек: классы CSS в "настроченой" части позволяют настроить всё, что угодно.

Да, если необходимо прятать сайдбар для мобильной версии, то добавляем следующий CSS код:

@media screen and (max-width: 599px) {
 .aside-1 {display: none;}
}

Соответственно, для того, чтобы спрятать первый или второй сайдбар, используем имена классов .aside-1 и .aside-2. Аналогично можно прятать footer (класс .footer).

Ссылка для скачивания шаблона: flex-univ-mnu.zip

Скриншоты:

Полный вид:

Мобильный вид:

На досуге запилил некий универсальный шаблон для сайта... Точнее, даже не так. Я тут писал что познакомился с flex css - современным расширением css, которое позволяет буквально творить чудеса. :) Решил поискать, что на эту тему есть в сети - с точки зрения готовых шаблонов сайтов на flex. Ожидаемо, их оказалось немного. В итоге взял один из и "немного допилил". Что вылилось в итоге универсальный шаблон, из которого легко можно сделать:

• сайт шапка + подвал + 2 сайдбара + основной текст
• сайт может быть как "резиновым", так и фиксированной ширины
• легко и изящно может быть исключен любой компонент, то есть шаблон можно использовать для создания сайта типа шапка + подвал + сайдбар и основной текст, или, например, шапка + 2 сайдбара + основной текст...
• сайдбары могут иметь фиксированную ширину
• сайдбары могут иметь произвольный порядок
• и всё это с минимумом кода

Немного про настройку. Я постарался документировать код так хорошо, как это только возможно, поэтому, после настройки но перед исползованием - комментарии лучше порезать. Собственно, правки состоят из 2х частей: правки html и css.

Что касается правок html, то там всё просто: если нужно что-то удалить, то удаляется именно там. Например, надо удалить левый сайдбар - удаляем в части html Aside 1. Ну и т.д. Теги там современные, "говорящие", так что вероятность "пролететь" - невысока.

Сложнее с настройкой CSS. Весь CSS код разделён на 3 части:

• Неизменная часть для верстки - её менять не надо.
• Настроечная часть для кастомизации сортировки - это часть, которая описывает последовательность расположения блоков на экране. Меняя параметр order для блоков, можно добиться того, что сайдбары будут справа. Или слева. Иные параметры (вон, высота-ширина-шрифты-и т.д.) в этой части менять не стоит!
• Настроечная часть для кастомизации - вот тут можно и нужно менять фоны-шрифты и т.д.

Отдельно обращу внимание на параметр width: 1200px для класса wrapper-style. Если его удалить, то макет становится "резиновым". Если изменить - то это и будет искомая ширина вашего будущего сайта.

Да, для работы с шаблоном потребуется знание html + css.

Ссылка на архив с шаблоном: flex-univ.zip

Как я тут писал, инсталлировал я тут MaxSite CMS (версии 0.95) - для того, чтобы сделать сайт-блог. Давно не работал с этой CMS -  в итоге было любопытно посмотерть, что же получилось.

А получилось, доложу я вам, очень даже. Система ощутимо выросла. Первое и основное - шаблон по-умолчанию, который, кажется, позволяет если не всё - то очень и очень многое. Повторюсь: там полностью настраиваемый и расширяемый шаблон. Это означает, что в шаблоне много чего можно настроить через админку, не вникая в структуру файлов. Там же, в админке, можно прописать свои CSS или же подключить свои компоненты, CSS. В общем, реально - сила. Силища. То есть, если вдохновиться как-то свободной темой - то создать на дефолтном шаблоне что-то похожее вполне реально.

Теперь о ложке дегтя. Если нужно "запилить" "совсем свою" тему, то будет ад и треш. Документации нормальной на систему нет. (И кажется - не предвидится). Структура темы по отношению к версиям ниже 0.9 изменена достаточно сильно - в итоге, разобраться что к чему, достаточно сложно. Помогает коллективный разум, это факт. Но сам процесс не вдохновляет.

Кстати, многие в Интернете пишут как раз о том, что система отличная, а вот с документацией - беда.

Ну и параллельно узнал о такой чудесной штуке как flex. На ней построена вся новая тема. Flex - это CSS свойство (семейство свойств), которые очень сильно упрощают верстку для многоколоночных и многострочных страниц. Не bootstrap, конечно, но очень впечатлило. Хорошая статья про flex тут. Век живи, век учись, ага. Особенно, если ты не имеешь с этим дела каждый день.

Я тут лет 5 назад давал ссылки на сайты с бесплатными html-шаблонами сайтов. Но время идет, и сайтов с шаблонами все больше и больше... Итак, дополнение к посту от 12 декабря 2008 года:

•  http://www.openwebdesign.org/ - много шаблонов. Сайт иностранный.
•  http://htmlweb.ru/template/ - шаблонов не очень много, но попадаются интересные.
•  http://www.oswd.org/ - еще один иностранный сайт. Много шаблонов.

Естественно, что в список попали те сайты, которые предоставляют бесплатные шаблоны, без регистрации и прочих танцев с бубном, в виде html + css (чтобы не париться с переводом шаблонов с одних CMS на другие) :)

PS Это не реклама. Просто задумался о редизайне - ну и решил посмотреть, что, где и почем. А результаты выложить - это ж почти святое...

Развитие веб-технологий не стоит на месте. Вот умные люди взяли и придумали LESS - динамический CSS. Чтобы понять, что это - приведу пример с официального сайта:

@base: #f938ab;
.box-shadow(@style, @c) when (iscolor(@c)) {
  box-shadow:         @style @c;
  -webkit-box-shadow: @style @c;
  -moz-box-shadow:    @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box { 
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

Фактически, это "как бы" CSS - но с вкраплениями элементов языков выского уровня. LESS файл подключается, как обычный CSS, с одним "НО": чтобы все это заработало, нужно включить поддержку LESS на стороне сервера или на стороне клиента загрузить специальный JS файл. Примерно так:

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

Дальше - все стандартно и штатно.

Из мыслей. Не знаю, как обработка на стороне сервера, а обработка JS на стороне клиента - это лишнее время отрисовки старницы браузером. Стоит ли того гибкость решения - решать только разработчику.

Ссылки на сайты проекта:

http://lesscss.ru - русскоязычный сайт

http://lesscss.org - англоязычный сайт

Случайно наткнулся. Вот: http://xhtml.ru/instr/3col_creator/index.html

Совершенно замечательная штука: генерирует html + css шаблон для сайта от 1 до 3х колонок (разумеется, с "шапкой" и "подвалом") для разных doctype, разных пропорций... Вещь!

Я проверил пару шаблонов - в моем зоопарке браузеров (opera linux, opera windows на wine, firefox linux, firefox windows на wine, IE 7 и 8 на wine) все работало вполне себе корректно. Так что - пользуйтесь на здоровье.

Нашел классную ссылку, где приведены примеры практически всех наиболее часто встречающихся при верстке сайта CSS решений. Ссылка вот: http://www.shtogrin.com/design/, а находится по ней приемы того, как сделать с использованием CSS:

• поле ввода с иконкой
• иерархический список в select
• горизонтальное одноуровневое CSS меню
• рамки с уголком и с тенью, а также с круглыми краями
• оформление формы ввода при помощи CSS
• CSS галерея
• заголовок в виде линии