Показать меню раздела

Дизайн и верстка

Визуальный дизайн PmWiki-проектров можно разделить на три области: дизайн wiki-разметки, дизайн шаблона, дизайн Рецептов.

К дизайну wiki-разметки относится визуальное оформление основного контента страниц, который изменяется авторами сайта.
К дизайну шаблона относится визуальное оформление макета дизайна (см. дефолтный Skin: thisSite.tmpl)
К дизайну Рецептов относится визуальное оформление конкретных Рецептов .

Где писать CSS-код?

Существует несколько вариантов размещения CSS-кода:

  1. через $WikiPageCSSFmt — CSS хранится прямо в самой PmWiki и редактируется online. Например, при $WikiPageCSSFmt = '{$Group}.{$Name}'; кастомный CSS-код можно будет писать на любой странице, и он будет применяться только к ней. Аналогично можно сделать специализацию для Групп или всего сайта. Когда использовать:
    1. если авторы вашего сайта способны и должны писать CSS-код сами;
    2. если вы хотите иметь возможность online-редактирования CSS;
  2. через PmWiki:CustomWikiStyles  — можно модифицировать отображение Wiki-разметки. Когда использовать:
    1. если вы хотите изменить дизайн wiki-разметки, с этого следует начать в первую очередь;
  3. через local.css — можно хранить CSS код в классическом виде, т.е. в виде статических файлов. CSS-код будет добавляться к текущей Странице, Группе, Сайту только тогда, когда соответствующие файлы существуют. Когда использовать:
    1. если дизайн вашего сайта систематически отличается от группы к группе и удобно сделать отдельные файлы для каждой;
    2. если вы хотите внести незначительные общие правки CSS дефолтного макета, используя классический подход;
  4. в массиве $HTMLStylesFmt — принято хранить и переопределять стили Рецептов. Когда использовать:
    1. если вы хотите переопределить CSS-код какого-то Рецепта;
    2. при разработке своего собственного универсального Рецепта, требующего незначительного объема CSS-кода;
  5. через thisSite.less можно подключать как классический статический CSS, так и динамический LESS. В обоих случаях сохраняется возможность online-компиляции, включая (пере)компиляцию самого Bootstrap. Когда использовать:
    1. если вы хотите значительно изменить CSS: создайте новый LESS-файл, подключите его в thisSite.less командой @import, пишите код в нём. Это позволит, например:
      • компилировать его online;
      • править переменные Бутстрапа в bootstrap-local-variables.less, компилировать Бутстрап;
      • скопировать директорию /pub на локальный компьютер и, поправив переменную $PhCssUrl в (farm)config.php, работать с локальным компилятором, например Win LESS.
    2. если вы планируете разработать собственный макет дизайна, ,т.е. изменить не только CSS, но HTML-верстку дефолтного макета, а также если у вас несколько сайтов или макетов дизайна. В этом случае скопируйте директорию pub/skins/thisSite, дав ей новое имя. Аналогично переименуйте все файлы внутри новой директории. Подключите вновь созданный макет дизайна с помощью $Skin. И вот теперь правьте всё, что угодно.

Так где правильно хранить код? Видимо, на этот вопрос нет однозначного ответа.
Необходимо иметь долгосрочную картину развития ресурса, чтобы принять взвешенное решение.

А всё таки?

ОК, вот простой практический совет. Начните с использования local.css и пишите весь свой CSS-код в одном месте. Применяйте остальные методы только тогда, когда, со временем, осознаете их удобства и преимущества.

Несколько слов о существующих CSS-классах

В Rext существуют следующие группы CSS-классов:

  1. дефолтные от фреймворка Bootstrap составляют 90%, лучше запомнить их;
  2. дефолтные PmWiki и сторонних Рецептов PmWiki составляют небольшой процент. К сожалению, нет достаточно хорошего способа отличить их от Бутстраповских , но есть ориентиры: они встречаются только при интерпретации wiki-разметки (т.е. не используются в thisSite.tmpl ) и их имена обычно односложные без дефисов.
  3. стили Rext, по историческим причинам имеют префикс "ph", а стили Cooks — "ph%имя_рецепта%".

Как называть свои CSS-классы?

Старайтесь называть их так, чтобы по названию класса было понятно:

  • этот класс из wiki-разметки, tmpl-шаблона или Рецепта?
  • этот класс ваш или один из дефолтных?

Хорошей идеей будет использование уникальных префиксов для новых классов, а также использование существующей DOM-структуры TMPL-макета и дефолтных классов тогда, когда этого достаточно.

Также старайтесь применять классы-модификаторы. Если в контенте ваш листинг лежит внутри div class="myPagelist", то тот же листинг в макете можно дополнительно застилисть через div class="myPagelist myTMPLmod".

Связанные статьи: