«В поисках идеального css-фреймворка. Требования, реализация, maxmertkit»

Требования к фреймворку

1. Для классов фреймворка необходимо использовать неймспэйсы. Это позволяет видеть какой класс принадлежит фреймворку, а какой написали вы. К тому же избавляет от риска переопределения класса фреймворка, из-за которого все может сломаться.
2. Все компоненты фреймворка, будь это кнопки или выпадающие меню, должны быть независимыми виджетами, при удалении которых фреймворк внешне не пострадает (я молчу про возможность компиляции).
3. Для внешней модификации фреймворка должен быть отдельный файл с темой, изменив который вы получаете внешне совсем другой фреймворк.
4. Нужно иметь возможность менять имена классов! Причем делать это в файле темы.
5. Необходимо избавить frontend-разработчика от необходимости помнить тонну классов для стилизации кнопочек, менюшек, попапов. Здесь под стилизацией я понимаю применение к ним различных состояний и статусов, например error, loading, disabled и т.д.
   
6. При добавлении в тему фреймворка какого-нибудь модификатора (расскажу о них позже), например, статуса, все подключеные виджеты должны уметь показывать этот новый статус без правки исходного кода этого виджета. Например добавляем в файл темы новый статус “deepspace”, который имеет цвет фона #000. После чего элементы абсолютно всех виджетов (табы, кнопки, попапы) при применении статуса “deepspace” становятся черными.
7. При применении модификатора к виджету-родителю, все виджеты-дети наследуют этот модификатор. Например, если мы имеем группу, внутри которой кнопки и текстовые поля, и стоит задача сделать всю эту группу большой и поставить класс “disabled” всем элементам внутри группы. Для этого добавляем модификаторы (классы, например, big и disabled) не к внутренним элементам, а к группе.
8. Все стандартные иконки – шрифтовые. Это решает очень много проблем.
9. Необходимо иметь возможность быстро собирать новые виджеты с учетом вышеперечисленных требований.

Краткая история создания

Maxmertkit. Структура файлов.

Кредо.

Неймспейсы.

1. Страница загружена, показываем disabled кнопку со статусом загрузки.
   
   
   

   <a class="-btn -disabled- _loading_ -error-">Button</a>

   
   
   
2. Далее осуществляем проверку на на наличие кармы. Предположим пользователь не может удалять контент. Тогда просто удалим модификатор _loading_.
   
   
   

   <a class="-btn -disabled- -error-">Button</a>

   
   
3. Если кармы все же хватает и пользователь может удалять контент, удаляем модификатор _loading_ и -disabled-.
   
   
   

   <a class="-btn -error-">Button</a>

   
   
4. Если пользователь нажал на кнопку, добавляем модификатор _active_.
   
   
   

   <a class="-btn -error- _active_">Button</a>

   
   
5. Когда началось обращение к серверу, добавим модификатор _loading_.
   
   

   <a class="-btn -error- _active_ _loading_">Button</a>

   
   

Наследование модификаторов

<div class="-group">
   <a class="-btn">I like it</a>
   <a class="-btn">
       <i class="-icon-thumbs-up"></i>
   </a>
</div>

<div class="-group -primary-">
   <a class="-btn">I like it</a>
   <a class="-btn">
       <i class="-icon-thumbs-up"></i>
   </a>
</div>

<div class="-group -primary-">
   <a class="-btn">I like it</a>
   <a class="-btn -dark-">
       <i class="-icon-thumbs-up"></i>
   </a>
</div>

<div class="-group -primary- _huge">
   <a class="-btn">I like it</a>
   <a class="-btn -dark-">
       <i class="-icon-thumbs-up"></i>
   </a>
</div>

Промежуточные итоги

Файл темы

$object__modal: -modal;
$object__dropdown: -dropdown;
$object__tooltip: -tooltip;
$object__toolbar: -toolbar;
$object__progressbar: -progress;
$object__progressbar__bar: #{$object__progressbar}-bar;

Виджеты, имеющиеся в maxmertkit

• Таблицы, -table
  
• Формы -form
  
• Иконки -icon
• Социальные иконки -icon-social
• Сетка -grid
  
• Кнопка -btn
  
• Group -group
  
• Табы -tabs
  
• Бейджи -badge
  
• Метки -labels
  
• Выпадающий контент -dropdown
  
• Меню -menu
  
• Меню в dropdown’е (каюсь за повтор, но я не удержался, больно нравится; меню в дропдауне выглядит немного по-другому)
  
• Тултип -tooltip
  
• Прогрессбар -progress
  
• Уведомления -notify, используются совместно с javascript-плагинами
• Окна -modal, используются совместно с javascript-плагинами

Яваскрипт

1. Popup. Для tooltip’ов и dropdown’ов.
2. Tabs.
3. Button. Для создания кнопок-чекбоксов и радоибаттонов.
4. Modal.
5. Affix.
6. Scrollspy.
7. Notify.
8. Carousel.

1. Во многих плагинах в качестве коллбэка beforeOpen, beforeAction, afterOpen и др. (все в доках) можно писать $.ajax (или использовать $.Deferred внутри коллбэка). До тех пор, пока данные не будут получены, плагин не будет предпринимать никаких дальнейших действий (можно получать, например, контент для dropdown’а). Это очень удобно и позволяет сосредоточиться на протекающих процессах, а не на способах их реализации.
2. Помимо javascript анимации, реализована css анимация. Смотрится, на мой вкус, потрясающе.
3. Все плагины отслеживают изменение параметров внутри себя. То есть, чтобы изменить тему, нужно просто передать плагину {theme:’dark’}, он сделает все остальное. Скажем “нет” постоянным вызовам методов.
4. Во многих плагинах есть “бездна”, куда сбрасывается каждый инстанс плагина. То есть из экземпляра плагина у вас есть доступ к другим экземплярам этого же плагина. Чрезвычайно удобно, если, например, нужно закрывать все dropdown’ы, когда открывается текущий экземпляр.
5. Есть еще что-то, о чем я наверняка забыл.

Создание нового виджета

button,
.#{$object__button},
input[type="button"]
{
        @extend %__object;
        text-decoration: none;
        cursor: pointer;
        border-width: $object__button-border-width;
        border-style: solid;
        @include border-radius( $object__button-border-radius );
        @include box-shadow( $object__button-shadow );
}

$__inheritance: object;
$__before-object: '';
$__object: 'button' 'input[type="button"]' '.#{$object__button}';
$__after-object: '';
@include set_modificator($mod__status, color-invert, border-color, gradient-vertical, text-shadow);

$__inheritance: object;
$__before-object: '';
$__object: append-list('button' 'input[type="button"]' '.#{$object__button}', '', ':hover');
$__after-object: '';
@include set_modificator($mod__status, gradient-vertical-darken);

'button:hover' 'input[type="button"]:hover' '.#{$object__button}:hover'

$__inheritance: object;
$__before-object: '';
$__object: append-list('button' 'input[type="button"]' '.#{$object__button}', '', ':active');
$__after-object: '';
@include set_modificator($mod__status, gradient-vertical-darkener);

button,
.#{$object__button},
input[type="button"] {
       $__inheritance: object;
       $__before-object: '';
       $__object: this;
       $__after-object: '';
       @include set_modificator($mod__status, color-invert, border-color, gradient-vertical, text-shadow);
       
       &:hover {
                $__inheritance: object;
                $__before-object: '';
                $__object: this;
                $__after-object: '';
                @include set_modificator($mod__status, gradient-vertical-darken);
       }
       &:active {
                $__inheritance: object;
                $__before-object: '';
                $__object: this;
                $__after-object: '';
                @include set_modificator($mod__status, gradient-vertical-darkener);
       }
}

$__inheritance: object;
$__before-object: '';
$__object: this;
$__after-object: '';

$__inheritance: object;
$__before-object: '';
$__object: this;
$__after-object: '';
button,
.#{$object__button},
input[type="button"] {
        @include set_modificator($mod__status, color-invert, border-color, gradient-vertical, text-shadow);
        &:hover {
                @include set_modificator($mod__status, gradient-vertical-darken);
        }
        &:active {
                @include set_modificator($mod__status, gradient-vertical-darkener);
        }
}

$__inheritance: object;
$__before-object: ‘’;
$__object: '.#{$object__group}';
$__after-object: 'button' 'input[type="button"]' '.#{$object__button}';
@include set_modificator($mod__status, color-invert, border-color, gradient-vertical, text-shadow);

-group.-error- > button { ... }
-group.-error- > input[type="button"] { ... }
-group.-error- > .-btn { ... }
-group.-info- > button { ... }
-group.-info- > input[type="button"] { ... }
-group.-info- > .-btn { ... }
…
и так для всех статусов.

$__inheritance: object;
$__before-object: ‘.#{$object__menu}’;
$__object: '.#{$object__group}';
$__after-object: 'button' 'input[type="button"]' '.#{$object__button}';
@include set_modificator($mod__status, color-invert, border-color, gradient-vertical, text-shadow);

.-menu > -group.-error- > button { ... }
.-menu > -group.-error- > input[type="button"] { ... }
.-menu > -group.-error- > .-btn { ... }
.-menu > -group.-info- > button { ... }
.-menu > -group.-info- > input[type="button"] { ... }
.-menu > -group.-info- > .-btn { ... }
…
и так для всех статусов.

$__inheritance: $object__group-important;
$__before-object: '.#{$object__group}';
$__object: 'button.#{$mod__loading}' 'input[type="button"].#{$mod__loading}' '.#{$object__button}.#{$mod__loading}';
$__after-object: '';
@include set_modificator(exclude-items($mod__status,$mod__status__disabled, default), loading);

• color
• color-darken
• color-invert
• color-important
• color-invert-important
• text-shadow
• border-color
• border-color-darken
• border-color-darkener
• border-color-lighten
• border-color-lightener
• border-color-important
• background-color
• background-color-lighten
• background-color-lightener
• background-color-darken
• background-color-darkener
• gradient-vertical
• gradient-vertical-darken
• gradient-vertical-darkener
• gradient-vertical-three
• gradient-horizontal-three
• shadow
• outline
• loading
• loading-dark

set_modificator($mod__status, {имяКомпонента}, {имяКомпонента}, … )

• line-height
• line-height-small
• input-line-height
• font-size
• font-size-small
• padding
• padding-small
• padding-big
• padding-huge
• input-padding

set_modificator($mod__size, {имяКомпонента}, {имяКомпонента}, … )

В качестве послесловия

• Выкачена версия 0.0.2. Исправлены основные ошибки, спасибо всем, кто принял участие. Я продолжаю работу в этом направлении :)
• Добавлена адаптивная верстка. Теперь достаточно применить модификатор _responsive_ к блоку, внутри которого она должна быть (например к body).