Сделать мир проще

«Simpliste» — это простой адаптивный HTML5 шаблон, созданный с желанием упростить жизнь тех, чьи задачи не требуют сложных CMS, фреймворков и работ по настройке дизайна.

Шаблон написан с использованием минимума кода и с возможностью выбора тем оформления. Дизайн тем подчинен тому же принципу минмализма. В оформлении не используются файлы изображений, все эффекты достигаются за счет CSS3.

Шаблон бесплатен и доступен для скачивания. Он имеет открытый код. Темы оформления для него может создать каждый желающий.

Засучите рукава

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

«Simpliste» готов стать одним из таких проектов, приносящих пользу и удовольствие участникам и пользователям.

Подключайтесь, ведь вы тоже можете сделать немало полезного.

Принципы дизайна

  • Простота — темы должны быть легкими и эстетичными
  • Нейтральность — одна и та же тема оформления может быть применена пользователями для разных целей
  • Удобство — темы будут подгоняться пользователем для собственных нужд и дизайн не должен создавать для этого трудностей

Принципы кода

  • Простота — это не шаблон для CMS и не фреймворк, требующий моря работы для настройки
  • Стандарты — HTML5 и CSS3 выбраны для использования в верстке
  • Аккуратность — лишнего кода не должно быть. Код отформатирован и готов для использования

Дизайнеру

Кто дизайнер?

Прежде всего, простое не значит примитивное. Нужно понимать, что аккуратные, простые дизайны тоже создаются благодаря опыту и вкусу. Поэтому профессионализм должен присутствовать среди качеств дизайнера тем оформления. Но упражнения в минимализме дают отличный повод для тренировки вкуса и развития опыта. Значит, начинающим дизайнерам тоже стоит попробовать свои силы.

Дизайнер-кодер может оказаться самым оптимальным кандидатом. Зная возможности CSS3, можно добиться гораздо большего. Но кто сказал, что любой дизайнер не может научиться CSS? Попробуйте свои силы.

Какой дизайн?

Чтобы почувствовать свободу, надо увидеть ограничения. Поэтому будем относиться к ним философски.

Главное, все дизайны должны быть применены к уже существующему HTML, то есть за счет чистого CSS. Поэтому стоит ознакомиться со структурой верстки шаблона.

Никаких файлов изображений. Всё, включая градиенты и кнопки стилизуется без картинок.

Зато нет большинства ограничений, связанных с версиями браузеров. Можно экспериментировать с возможностями новых технологий.

Как сделать?

Например, автор шаблона «Simpliste» подготавливает темы в Фотошопе, после чего верстает и прорабатывает детали вроде поведения ссылок и кнопок. Если вы не намерены самостоятельно верстать свою тему оформления, то придется продумать все детали заранее. Чтобы сделать жизнь дизайнеров проще, создан файл .psd на основе стандартной темы оформления. То есть вам остается только придумывать дизайн, все элементы шаблона уже на местах. После создания темы понадобится превью дизайна, для этого есть шаблон превью.

Правила хорошего тона для дизайнера:

  • Размеры шрифтов должны быть в пикселях, без процентных значений
  • Шрифты не должны иметь альфа-прозрачности
  • Нестандартные шрифты можно применять только если существует веб-версия данного шрифта, доступная для бесплатного использования с внешнего сервера (например, от Гугл)
  • Не должно быть элементов, свойства которых (цвета, размеры, прозрачность) нельзя узнать из меню свойств Фотошопа (речь о слитых слоях и т.п.)

Кодеру

Кто кодер?

Написать код темы оформления «Simpliste» гораздо проще, чем сверстать среднестатистический сайт. Во-первых, дизайны тем минималистичны, во-вторых, нет необходимости писать HTML, потому что весь код темы находится в файле CSS.

Естественно, нужно иметь представление о верстке, но знания тонкостей поведения float-блоков не требуется, так как можно использовать базовый шаблон как точку старта.

Какой код?

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

Код должен ориентироваться на современные браузеры. Темы работают в браузерах Internet Explorer 8+ (без некоторых возможностей CSS3), Firefox 3.6+, Opera 10+, Safari 3+, Chrome 4+. В прежних версиях браузеров темы тоже будут работать, но их ограничения не должны влиять на код. Префиксные значения браузеров для CSS3 нужно включать в стили. Для генерации кода рекомендуется использовать сервисы вроде CSS3 please или Layerstyle.

Как сделать?

Для начала работы предлагается открыть файл стилей темы «Simple». Большинство стилей останутся неизменными. То, что интересует нас, находится в блоке между /*[Skin "Simple"]*/ и /*[End skin]*/. Путем изменения значений свойств можно достичь нужного результата. Естественно, может возникнуть необходимость создавать собственные свойства. Но классов, которых нет в файле HTML в темах появиться не может.

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

Правила кода

  • Один пробел после названия класса; открывающая скобка ({) на той же строке
  • Два пробела для отступа свойств
  • Все строки закрыты точкой с запятой, закрывающая скобка (}) на отдельной строке

Только для ресета, вспомогательных классов и стилей для печати применены однострочные стили.


Только для стилей мобильных устройств и стилей для печати применяется добавочный отступ в 2 пробела.

/* Комментарии */ в файле стилей применены для отделения блоков друг от друга. Дополнительные комментарии не требуются, код должен быть понятен без комментариев.

Структура файла стилей

/* copyrights */

/* CSS reset */

html { font-size:100%;}
body { margin:0; }
...
Ресет от HTML5 boilerplate
/* End CSS reset */


/* Columns */
.col_33 {
float:left;
}
...
Устройство колонок в шаблоне
/* End columns */


/* Helper classes */
.center {text-align:center;}
.left {text-align:left;}
...
Вспомогательные классы
/* End helper classes */


/* [Skin "Simple"] */
...
Здесь начинаются стили тем оформления Сначала определяется внешний вид и размещение элеметов...
/* Skin appearance */
...
...затем оперделяются цвета и размеры шрифтов, внешний вид кнопок и сообщений /* [End skin] */


@media only screen and (max-width:480px) { /* Smartphone */
...
Стили для смартфонов
}

@media only screen and (max-width:768px) { /* Tablet */
...
Стили для планшетов
}

@media print { /* Printer */
...
Стили для печати
}

Обратить внимание

«Simpliste» — проект с открытым кодом. Передавая результаты своей работы, вы отказываетесь от претензий и требований относительно дизайна и кода созданных тем.

Каждый автор будет упомянут в копирайтах самого начала файла стилей:

/* "Simpliste" template. Renat Rafikov. http://cssr.ru/simpliste/ Skin designed by Steve Jobs http://apple.com/ and coded by Linus Torvalds http://www.linux.com/ */

Отправить свой дизайн или готовую тему можно по почте (renatrafikov@gmail.com) или с помощью Гитхаба.

www.000webhost.com