Лучшая практика создания простой темы?

Привет!

У меня есть скромные, хотя и немного устаревшие, знания CSS, но я отнюдь не дизайнер.

Чтобы создать простую тему, используя только переопределения CSS, с чего лучше начать? Я не имею в виду инструменты (discourse_theme и тому подобное), а говорю исключительно с точки зрения дизайна.

Хороший пример того, что я хотел бы сделать, — это переработка навигационных меню (nav-pills).
Каждый раз, когда мне удаётся что-то изменить, это «ломает» что-то другое, потому что контексты, в которых находятся изменённые элементы, различны.

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

Я также пытался внести некоторые изменения в select-kit, но оказалось, что правильно настроить мои модификации для любого варианта select-kit — это просто кошмар.

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

Поэтому, полагаю, начинать переработку с конкретной страницы — не лучшее решение. Я думал начать со страницы /styleguide, поскольку это, вероятно, её цель, но легко заметить, что проблема часто остаётся той же. Каждый элемент, отображаемый в styleguide, лишён контекста, в котором он используется на реальной странице.

Элементов так много, и взаимодействий между элементами и страницами настолько много, что это быстро становится подавляющим, и я начинаю экспоненциально наращивать свои правки, чтобы «исправить» их, что именно и не следует делать.

Надеюсь, описание моей проблемы не слишком размыто.

Если у вас есть какие-либо советы, которые помогут мне внести мои небольшие изменения, я буду очень признателен! :hugs:

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


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

7 лайков

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

Да, начинать со стайлгайда в данном случае не самый полезный подход. Похоже, главное изменение — это добавление панелей поверх фона? Я полагаю, вы смотрели мой шаблон темы Canvas. Поможет ли он как отправная точка или лучше просто позаимствовать стили панелей?

Макеты страниц не везде одинаковы, поэтому вам придётся объявить довольно много исключений. Панели в Canvas — это наиболее последовательная реализация, которую я делал на данный момент.

3 лайка

Я не стал подробно изучать Canvas, так как сначала хотел узнать, будет ли оно использоваться или совместимо с обновлённым дизайном Foundation :slight_smile:

Но я посмотрю, спасибо!

2 лайка