Простые переменные формата <уровень-элемент-свойство> --v-block-title-padding определенные в контексте класса компонента, и константы формата <уровень-тип-значение> --c-content-indent-big вместо произвольных значений решают более 90% задач, сокращают код, стандартизируют дизайн, улучшают понимание и облегчают масштабирование.
Модификация реализованная классическими приёмами<section class="block block--hero">
<div class="block-conteiner block-conteiner--hero">
<h1 class="block-title block-title--hero">
Hello World
</h1>
<p class="block-subtitle bloc-subtitle--hero">
Это простой пример создания модификации
компонента классическими приемами
</p>
</div>
</section>
<style>
.block-conteiner--hero {
padding: 300px 40px;
}
.block-title--hero {
font-size: 80px;
font-weight: 900;
margin-bottom: 60px;
}
.block-subtitle--hero {
font-size: 40px;
font-weight: 500;
}
@media(max-width: 1200px) {
.block-conteiner--hero {
padding: 200px 40px;
}
.block-title--hero {
font-size: 60px;
margin-bottom: 40px;
}
.block-subtitle--hero {
font-size: 30px;
}
}
@media(max-width: 768px) {
.block-conteiner--hero {
padding: 100px 30px;
}
.block-title--hero {
font-size: 40px;
margin-bottom: 20px;
}
.block-subtitle--hero {
font-size: 20px;
}
}
</style>
Модификация блока реализованная по CLVC методологии<section class="block block--hero">
<div class="block-conteiner">
<h1 class="block-title">
Hello World
</h1>
<p class="block-subtitle">
Это простой пример создания модификации
компонента с использованием CLVC методологии
</p>
</div>
</section>
<style>
.block-hero {
--v-block-conteiner--padding: var(--c-block-indent-big) var(--c-block-indent-lr);
--v-block-title--font-size: var(--c-title-size-big);
--v-block-title--font-weight: 900;
--v-block-title--margin: 0 0 var(--c-content-indent-big);
--v-block-sub-title--font-size: var(--c-text-size-big);
--v-block-sub-title--font-weight: 500;
}
</style>
Жесткие рамки рождают лучшие решения
CLVC родилась из практической задачи оптимизации процесса изменения шаблонов в конструкторе сайтов без доступа к редактированию HTML. В результате нескольких десятков экспериментов нам удалось создать методологию сильно упрощающую работу по разработке и развитию любого проекта
автор CLVC методологии
основатель YudinLab и Aince
CLVC - аббревиатура от основных элементов на которых строиться вся методология: Constant, Level, Variable, Context.
Гибкие стандарты
За частую большинство UI правила в проекте описаны как конечные макеты атомов и компонентов, а когда дизайн задача выходит за их рамки появляется поле для бесконечных правок и обсуждений.
UI в CLVC описан наборами допустимых значений на том или ином уровне интерфейса, что дает гибкость в решении новых задач, при этом сохраняя визуальную стандартизацию и преемственность в каждом новом шаблоне.
Для проекта любого размера
Изначально мы сами предполагали что clvc это про больший проекты, а в малых это избыточное усложнение.
На практике оказалось что даже простенький одностраничный сайт из 10 блоков в действительности можно представить как 2-3 базовых блока и их модификации. Создание даже самых малых проектов по методологии CLVC оправданно сокращением времени и затрат на реализацию проекта.
При этом вполне закономерно можно утверждать, чем больше проект - тем выше эффективность внедрения CLVC
Простата внедрения
По мимо создания новых проектов, CLVC методологию можно легко внедрить в работающие проекты. Внедрение не может проходить не монолитно, а поэтапно с возможностью использования каждого внедренного элемента методологии по отдельности.
Начать можно с определения и внедрения констант. Замените поочередно все произвольные параметры стилей описывающие дизайн на константы.
После замены всех произвольных значений на константы необходимо определить какие для проекта шаблоны являются базовыми выделить и реализовать их по методологии CLVC.
Когда готовы базовые шаблоны можно один за другим заменить все оставшиеся шаблоны на модификации шаблонов реализованные по методологии CLVC.
Мы прошли долгий путь от теории к практики применения и продолжаем работать над улучшением нашей методологии на практике
Вам понравилась идея и вы хотели бы понять подойдёт ли CLVC для вашего проекта, напишите нам в телеграмм и мы все расскажем, покажем и поможем внедрить
Хотите присоединиться к команде? Пишите, задач много и для каждого найдется дело
Не хотите пропустить релиз CLVC.CSS
@clvc_bot
А еще вы можете поддержать наш проект купив чашку кофе или даже целую пиццу команде CLVC, или стать спонсором проекта и получить баннер спонсора на этом сайте. Это поможет ускорить нашу работу, а вам + в карму, почет и уважение