ArbNet

Bootstrap это кучамала некоторых нужных и остальных не нужных стилей. Мне его придумывать не зачем, пользуйтесь, оно вам облегчит рутинную работу :)

А xml-framework основан на структурировании в xml данных узлов и макетов компонентов с стилями. Мне не нужно кучамала стилей бутстрапа и препроцессоры стилей, так как макет компонента строится html разметкой и в стилях компонента простой css, но цвета будут указываться переменными var(--*).

Разработчик заходит в админку настраивает палитры цветов, в структуре в блоке указывает нужную палитру, всё.

---------- Добавлено 27.12.2019 в 16:54 ----------

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

Цвета указываются от тёмного 0 к светлому 3

учите матчасть css переменных

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

Это вы о себе по ходу :)

Итак, вот что я надумал.

Определяются основные переменные палитры, цвета фона, текста и ссылок соответственно

:root {
 --canvas0: #цвет;
 --canvas1: #цвет;
 --canvas2: #цвет;
 --canvas3: #цвет;
 --paint0: #цвет;
 --paint1: #цвет;
 --paint2: #цвет;
 --paint3: #цвет;
 --link0: #цвет;
 --link1: #цвет;
 --link2: #цвет;
 --link3: #цвет;
}

Разработчик при создании компонента не думает о дизайне и цветах, просто указывает переменные, например для основного фона --canvas2 для тёмного блока --canvas0 для светлого блока --canvas3 для текста тёмного блока --paint0 ну и так далее

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

.color1 {
 --canvas0: #цвет;
...
 --canvas3: #цвет;
 --paint0: #цвет;
...
 --paint3: #цвет;
 --link0: #цвет;
...
 --link3: #цвет;
}
<div class=color1>содержание блока</div>

А может однобуквенные с числом всё таки лучше?

В данном случае, разрабатывается иной подход для движка в котором sass, less применятся не будут.

Это скорее не вопрос наверно, да ответ на самом деле уже озвучен мной. Я при создании темы на 99% был уверен, что никто не сможет ничего толкового ответить.

ЗЫ. Не доросли вы(не вы лично, а все) ещё до моего уровня :)

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

background - длинное слово, я стараюсь делать константы короткими и в то же время понятными по смыслу, иногда сокращаю, иногда ищу слова синонимы по короче.

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

canvas - переводится как полотно, его использую как фон

paint - переводится как краска, его использую для текст, тут можно использовать и "t" от слова text

link - ссылка, а "a" - это тег html для ссылок

Чем короче название(переменной/константы) тем проще её запомнить, и не перепутать с другой, и не делать ошибок при написании, а по одной букве элементарно догадаться/понять её назначение.

так как для фона использовал "c", то для кнопок можно использовать "b"

Никакого выдуманного мира. Оставлять в покое не надо, я за этим тему и создал, может промелькнёт у кого здравая мысль как систематизировать css переменные. Вы вот с открытыми глазами в упор ничего не видите, хотя всё же видно и понятно, удивительно как вы до своих лет дожили с таким рассудком.. А обо мне не беспокойтесь ;)

Цель как раз есть. Я её уже озвучил. Для тех кто в панцире повторю:

Нужно систематизировать или стандартизировать переменные css для цвета, которые разработчики компонентов будут указывать с стилях вместо конкретного цвета.

Думаю можно разделить гамму на цвета фона, текста, ссылок, кнопок так же от тёмного к светлому

от слова canvas - с0, c1, c2, c3 - для фона

от слова paint - p0, p1, p2, p3 - для текста

от слова link - l0, l1, l2, l3 - для ссылок

от слова button - b0, b1, b2, b3 - для кнопок

Есть ещё варианты, буду этот и другие проверять на практике как с разными настройками будет выглядеть страница.

Бред у вас в голове, а я констатирую факты.

Спасибо, насмешили :)

Именно создаются автоматически. Выбирается один цвет и на его основе цветовым кругом подбираются подходящие для гаммы цветов

Вот сервис для получения палитры цветов из картинки https://palettegenerator.com

Это вам насрать, а мне на ваше мнение :)

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

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

Препроцессоры css сделали для верстальщиков которые плохо знают css работают в крупных компаниях чтобы быстро наделать всякого г. Согласитесь можно же без препроцессорах делать, МОЖНО. Так зачем они нужны тем кто и без них отлично сделает, к тому же переменные css это тот же препроцессор получается.