Maxmertkit. Идеальный css-фреймворк05.06.2014 12:33

3f71ec815df8054884935cdf80b3ffba.pngВсю документацию на английском языке вы сможете прочесть на maxmert.com.

Требования и задачиПри создании версии 1.0 мне пришлось пересмотреть основные требования к фреймворку: Возможность легко добавить/удалить размер или тему. Json-файл с прописанными темами и размерами для каждого виджета. Таким образом можно конфигурировать фреймворк исправляя json-файл. Модульность. При отключении или добавлении любого виджета фреймворк должен стабильно работать (привет bootstrap). Особое именование классов для избежания переопределения пользовательских классов. Javascript компоненты без jQuery (но с возможностью его использования, если он подключен). Конечно это не единственные требования, а приоритетные. Их, поверьте, было очень-очень много. В итоге у меня получился фреймворк, которым я сам с большим наслаждением пользуюсь. Так каковы же его основные отличия от уже существующих?

Осторожно! Трафик.

Особенности и отличия Далее полагается описать файловую структуру и ее особенности, но это тоска зеленая. Поэтому сначала перейду к описанию существующих виджетов.

Виджеты Здесь я не буду рассказывать о стандартных виджетах, таких как grid, forms, tables или typography. Это стандарты, которые даже неудобно обсуждать.Кроме того надо напомнить, что классы тем, размеров и модификаторов для всех виджетов одинаковы. То есть, например, размер _major, тема -dark- или модификатор _active_ можно использовать с любыми виджетами.И последнее перед стартом: в этой статье я буду указывать не все возможности, модификаторы, темы и опции, а только самые основные. Для полной домументации добро пожаловать на www.maxmert.com.От винта! Кнопка btn Используется класс -btn.62e821a5adf4ada2e84ca011f127d466.png Добавьте модификатор _round_4a0838af8d2751a5d185c4869adf7eda.png

Round link Модификатор _disabled_ или атрибут [disabled]82dbcfb935648ec6213a67d77d711c54.png

Модификаторы _active_ и _hover_3bda2d977c042d7c48293598b046f26a.png

Кнопка ghost-btn Прозрачная кнопка -btn-ghost наследуется от виджета -btn, так что все модификаторы, в общем-то, те же самые.4181c31f3e0cd3f8dff24bb5288ae55e.png Link С модификатором _round_.20f3808ed245048b16cba4255964dd52.png

Round link Группы Для контейнера с виджетами использовать класс -group.Кнопки внутри групп Добавьте виджеты -btn внутрь группы.01d1c17197e80ff5441bcc8c191daf6c.png

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

Dropdown
Dropdown

Like
You liked it
Элементы формы внутри группы Добавьте элементы формы внутрь группы.a01f1a9a767d3c960accd01c489b621f.png
Button
Button
Button Button
Addon внутри группы Используйте класс -addon внутри группы.cdd69c4cdb90a7adbf201d9db210b61d.png
e-mail
e-mail
e-mail
e-mail
AddonButton
AddonButton
Комбинируйте.27908446f1ffe0f396bab6ed1d8e36ac.png

@ me@maxmert.com
Drops Блоки с выпадающей информацией (dropdown) — -drop.3e27ce0b616eef43c2426522c3cb19fc.png
Drop without content block.
Great with menus and other navigation stuff.

Drop with content block.
Great with text, information, pictures and other stuff.
Задаем позицию и добавляем стрелки. Добавляем -arrow в dropdown.c3707756828d2cce43c8c3e17ff9f74a.png
Header
Dropdown Top
Footer

Header
Dropdown Bottom
Footer

Header
Dropdown Right

Header
Dropdown Left
Navigation Сюда входит много виджетов, отвечающих, соответственно, за навигацию.

Menu Добавьте класс -menu, не забудьте про темы и размеры. Если вы добавите модификатор _vertical_, то получите вертикальное меню. С модификатором _disabled_ пункт меню становится неактивным.07d5de7eb9b37d42d30343beeec37ea2.png

Добавьте -addon для отображения второстепенной информации внутри пунктов меню (например, хоткей).a2bfaac078c4ed73fe2128bd09650aa0.png

Для добавления подменю добавьте виджет -drop с виджетом -menu внутри. Если вы добавите модификатор _hovered_ к виджету -menu, то подменю будет появляться при наведении, если этого модификатора нет — при активации пункта меню.b8fbdad54a251aa1b381b37c0c79c117.png

Tabs Используйте класс -tabs. Как и для всех виджетов работают темы, размеры и модификаторы.9f5317e429f7bd95c20c4c55eff40b6d.png

Кроме того работают модификаторы _left_ и _right_ с модификатором _vertical_. Комбинируйте табы с виджетом grid.74535f3b73456b1069ff6ae74ab16f50.png

Content of the second tab.

Content of the third tab.

Content of the second tab.

Content of the third tab.
Pills Используется класс -pills.a578689ddd31b1ea11574182fa3b21a0.png Navbar Панель инструментов -navbar можно комбинировать со всеми виджетами. При этом если их несколько и они идут подряд, из них формируется составная панель инструментов (пример ниже).dca42efea33a11498a91c01b98345238.png
Button
@

Не забывайте комбинировать grid с -navbar.e4bbb7927dce0d722056abc577bff988.png

Header
Button
List group Используйте класс -list-group. Конечно можно делать вложенные списки. Не забывайте про темы и размеры.8ca0af85874b806c1b20d6d74f6ef4ef.png Bullets Используйте класс -bullets с тегом
    . Тег можно использовать для подписей, если они предусмотрены.d9ed69aec0cae79901f2d5d629982aa6.png

    Для абсолютного позиционирования добавьте модификатор _fixed_, с которым можете использовать модификаторы позиционирования _left_, _center_, _right_ и _top_, _middle_, _bottom_.58e9bc0302a3ba68d6f80184d808906d.png

    Labels Используйте класс -label.3c08fa97bf8cd6673f72789ccf95e639.png default primary error warning

    normal major big huge divine Badges Класс -badge.ba87521766887830c1ac032303b9194c.png default primary error warning

    normal major big huge divine Используйте виджеты -label и -badge внутри других виджетов.76f1fae7b4c80ca4cea18943836ea409.png

    Inbox 12 Inbox 12 Inbox 12 Empty badge is here

    Inbox 12 Sent 2 Drafts
    Progress Класс -progress.4bcedc63a3846325abee9110c93b608b.png
    12%
    25%
    Something goes wrong

    12%
    Slim progress Тонкий прогрессбар можно сделать, используя класс -progress-slim.870cae241c4f3a1f83b7156a7b9f1f56.png

    Alert Информационная табличка создается классом -alert.95dd9f660c9034807a4ea32c9fee90c9.png
    Nothing important here.
    Heads up! This alert needs your attention, but it’s not super important.
    Oh snap! Change a few things up and try submitting again.
    Warning! Better check yourself, you’re not looking too good.
    Thumbnails Можно создать, используя класс -thumbnail.6fbd57d88232fd6b5559abfe797c92cd.png
    Добавим grid. Теперь при изменении размеров окна все миниатюры будут изменяться в размерах, адаптируясь под размеры сетки.c786c0204f86df347bef47bd7475b2f5.png

    Geisha Kyoto, Japan

    Geisha Kyoto, Japan

    Geisha Kyoto, Japan

    Лучше использовать семантически верные теги
    для виджета -thumbnail. Кроме того можно добавить .6b3279fab074089804a049f631896870.png

    Geisha Kyoto, Japan

    Geisha (芸者?), geiko (芸子) or geigi (芸妓) are traditional Japanese female entertainers who act as hostesses and whose skills include performing various Japanese arts such as classical music, dance and games.

    Geisha Kyoto, Japan

    Geisha (芸者?), geiko (芸子) or geigi (芸妓) are traditional Japanese female entertainers who act as hostesses and whose skills include performing various Japanese arts such as classical music, dance and games.

    Geisha Kyoto, Japan

    Geisha (芸者?), geiko (芸子) or geigi (芸妓) are traditional Japanese female entertainers who act as hostesses and whose skills include performing various Japanese arts such as classical music, dance and games.

    Меняйте расположение , добавляя модификаторы _left_ и _right_.c7da982d8b51ba2f112678e9a764e50f.png

    Geisha Kyoto, Japan

    Geisha (芸者?), geiko (芸子) or geigi (芸妓) are traditional Japanese female entertainers.

    Geisha Kyoto, Japan

    Geisha (芸者?), geiko (芸子) or geigi (芸妓) are traditional Japanese female entertainers.

    Avatars Используйте класс -avatar.0a28c6d3952b53b07f236d8c3203107f.png
    Krystalfister
    @Krystalfister     Модификатор _round_ для скругления.098b05756af2b62baedd074a4c49639c.png

    Krystalfister
    @Krystalfister Модификатор _border_ для границы.b0c7a436b6788863fff62ba88b8fa998.png

    Krystalfister
    @Krystalfister Коментарии Необходимо использовать класс -comments, и для каждого коментария класс -item. Я решил что будет неверно привязываться к тегу
  • , так как можно использовать, например, дивы. Если внутри коментария есть блок с модификатором _hidden_, то изначально этот блок будет скрыт и появится только при наведении указателя мыши на коментарий.5bce5f0b29496c040e9bd3208f02b5c4.png Spinners Это спиннеры, предназначенные для индикации загрузки. Их можно использовать внутри других виджетов, например, когда контента для кнопки пока еще нет, логично вставить маленький спиннер, чтобы обозначить загрузку.Square spinner Класс -square-spinner.ae88693fd4bc78d20f91b70fb80c8e9d.png Ring spinner Класс -ring-spinner.12b7b5efc6d2d273bc07b51af2db2745.png FB spinner Класс -fb-spinner. Вы можете добавлять до 10 -addon.15fafcfee547300d92190890b574ff90.png

    With spinner JS Компоненты Сразу оговорюсь, что решил отказаться от jQuery (естественно оставив его поддержку в случае, если он подключен). Библиотека замечательная, но не необходимая в ряде проектов. Мне не хотелось заставлять разработчиков подключать jQuery для использования maxmertkit. Весь js написан на coffeescript без использования сторонних библиотек (native way).Отдельно хочу рассказать про компоненты, использующие событие scroll. При тестировании parallax компонента wall я добавлял до 40 элементов с parallax эффектом на страницу. Для меня было чрезвычайно важно, чтобы даже с таким количеством элементов браузер держал ~60 fps. Было принято решение использовать requestAnimationFrame для уменьшения количества вычислений. К моему удивлению requestAnimationFrame прекрасно заработал в webkit, но в других браузерах, наряду с увеличением fps, наблюдался прерывистый parallax. Поэтому requestAnimationFrame используется во всех плагинах, где есть отслеживание события scroll, кроме компонента wall. Несмотря на это он очень быстр.Все компоненты имеют события beforeactive, onactive, failactive, beforedeactive, ondeactive и faildeactive. Все они поддерживают deferred объекты. То есть каждое из событий может возвращать promise перед тем как активировать/деактивировать компонент. Это очень удобно для ассинхронного javascript.Без jQuery:

    buttons = document.querySelectorAll (»[data-toggle='button']») for btn in buttons btn.button beforeactive: → d = $.Deferred () button = @data['kitButton'] button.el.innerHTML = 'Loading…' button._addClass '_disabled_' setTimeout → d.resolve () ,2000 d.promise ()

    onactive: → button = @data['kitButton'] button.el._removeClass '_disabled_' button.el.innerHTML = 'Checked'

    ondeactive: → button = @data['kitButton'] button.el.innerHTML = 'Checkbox' С jQuery:

    $(»[data-toggle='button']»).button beforeactive: → d = $.Deferred () button = @data['kitButton'] $button = $(button.el) $button.html 'Loading…' $button.addClass '_disabled_' setTimeout → d.resolve () ,2000 d.promise ()

    onactive: → button = @data['kitButton'] $button = $(button.el) $button.removeClass '_disabled_' $button.html 'Checked'

    ondeactive: → button = @data['kitButton'] $button = $(button.el) $button.removeClass '_disabled_' $button.html 'Checkbox' На данный момент есть следующие компоненты:

    button — кнопки. popup — всплывающие подсказки. tabs — табы. modal — модальные окна. scrollspy — добавляет класс active к элементу, если связанный с ним DOM-элемент находится в области видимости на экране. Удобно использовать с -menu, -bullets, -list-group. affix — перемещает элемент внутри контейнера при скролле. wall — создает «стену» с parallax-эффектом (можно использовать как изображение, так и видео), возможно добавить grid с заголовками и текстами. Умеет делать красивый zoom при скролле. skyline — показывает DOM-элемент (с анимацией, которая задается классом), если он оказывается в области видимости на экране. В ближайших планах:

    tilt — следит за наклоном мобильного устройства для показа увеличенного изображения (аналогично facebook paper). Я напишу про него отдельную статью. carousel — для видео и изображений. Конечно с возможностью использовать ее внутри wall с parallax-эффектом. notify — агрегатор уведомлений и сообщений (аналогичный jgrowl). Хочу локально! Для того чтобы развернуть maxmertkit локально, необходимо: Скачать исходники В терминале распаковать и войти в папку с проектом. $ npm install $ bower install Зайдите в папку docs: $ cd docs $ bower install Вернитесь в папку проекта: cd … $ gulp В браузере запустите http://127.0.0.1:3333/ [embedded content]Как изменить или добавить тему? Зайдите в sass/themes. Откройте нужный файл темы. Исправьте переменную $theme. Чтобы добавить тему необходимо:

    Зайдите в sass/themes. Сделайте дубликат существующей темы или воспользуйтесь этим gist maxmertkitTheme. Помните, что название файлов должно начинаться с подчеркивания »_». Исправьте переменную $theme. Добавьте импорт темы в файл sass/main.sass. Добавьте тему к необходимым виджетам в файле mkit.json. [embedded content]Как изменить или добавить размер? Все аналогично теме, только изменился гист для размера и название переменной — $size.[embedded content]

    Ссылки на ресурсы: maxmert.com — документация, примеры. github — исходники; очень прошу делать форки и исправлять ошибки, если вы знаете как и есть немного времени. issues — сообщить об ощибках и багах. me@maxmert.com — если у вас что-то не получается или вы хотите разобраться, пишите!

    © Habrahabr.ru