Плагин Styleguide на форуме Discourse
Регистрация Войти

Плагин Styleguide на форуме Discourse

Evg Evg 24 Декабря 2021

При установке данного плагина на форум, появляется возможность посетить страницу вида: ваш сайт/styleguide которая будет отображать компоненты и виджеты форума Discourse в различных конфигурациях, чтобы облегчить стилизацию.

Это очень помогает при разработке пользовательских тем и, в частности, нацеливании на некоторые из менее заметных элементов Discourse.

Некоторые примеры того, что вы можете найти на, /styleguide включают следующее + многие другие.

Иконки:

Иконки на Discourse

Посмотрите, как сделано там: https://meta.discourse.org/styleguide/atoms/colors

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

Стилизация Агути

Страница добавлена… Пока она в стадии разработки.

Документация не пишется для пользователей, её не читают. Всё, что создается, создается в основном для персонала. Тут я хочу не только реализовать данную функцию, но в процессе реализации понять, что не так с css которые тут используется. Как это можно улучшить.

Это сразу станет видно, как только заняться упорядочиванием и описание этого.

А если это будет полезно и другим, тем более, — очень хорошо!

LibArea Веб-разработка CSS
8
514
+ Читать

11 Ответов

  1. Yori Yori 24 Декабря 2021

    А возможно сделать страницу открытую, не под админом?

    2
    Ответить
    1. Evg Evg 24 Декабря 2021

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

      Ответить
  1. OleStep OleStep 24 Декабря 2021

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

    1
    Ответить
    1. Evg Evg 25 Декабря 2021

      Давайте попробуем, это нравится. Я как понимаю должно быть так: $red-50: #fef2f2; а далее формирование идет добавляя: .bg-red-50 { background-color: $red-50; }. Подобное в tailwindcss работает.

      Ответить
  1. Evg Evg 25 Декабря 2021 (ред.)

    Хорошая палитра цветов подобрана у tailwindcss. Вытащил от сюда:

    https://github.com/tailwindlabs/tailwindcss/blob/master/src/public/colors.js

    Теперь станет значительно проще. Т.к. всё будет формироваться от неё.

    scssphp хорошо работает с переменными.

    https://github.com/leafo/scssphp

    Осталось убрать вот такое:

    .gray-light { color: #****; }
.gray-light-2 { color: #****; }

    И использовать везде одинаково, например:

    $red-200: #fecaca; // переменная

.red-200 { color: $red-200; }
.bg-red-200 { background-color: $red-200; }
.br-red-200 { border: 1px solid $red-200; }

    Станет очень просто.

    Базовые цвета

    В админ-панели образовалось огромное количество вариантов.

    Сейчас css и так 13кб, будет меньше 10. Но что более важно, работать и запоминать придется только одно, — цвета. Больше ничего.

    3
    Ответить
    1. OleStep OleStep 25 Декабря 2021

      Я про это и говорил, очень гибко всё получается!

      Ответить
    1. Yori Yori 25 Декабря 2021

      Надо scssphp посмотреть, что это такое. Интересно.

      Ответить
  1. Info Info 25 Декабря 2021

    В новой версии закладки перестали добавляться.

    2
    Ответить
    1. Evg Evg 25 Декабря 2021

      Они добавлялись, но стили не отображали это. Подправил, спасибо. +

      Ответить
  1. OleStep OleStep 25 Декабря 2021

    А если аналогичное сделать с интервалами? Именно они сейчас жестко заданные, как и размеры текста. Имеет смысл перейти и тут на переменные?

    1
    Ответить
    1. Evg Evg 25 Декабря 2021

      Дело может быть не в переменных, а в ярлыках к которым уже многие привыкли. Как бы: text-lg и text-xl, ИМХО, куда привычней стало, чем size-14. Тут как посмотреть на самом деле. Давайте перейдем и тут, будет ближе к тому, что многие используют.

      Ответить