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

[Fesor]

Вот не люблю когда пишут «идеальный что-то там»… Всегда потом заходишь, читаешь и разачаровываешься.

p.s. Не все так любят Coffeescript, хоть бы примеры на обычном JS писали.

[maxmert]

Написал уже. Что ж поделаешь? Сильно разочаровались?

[Fesor]

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

[maxmert]

А чем, если не секрет, вдохновились бы?

[Fesor]

Чем-то принципиально новым, отличающимся от имеющихся фреймворков. Пока же я просто вижу очередной фреймворк под задачи автора.

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

[maxmert]

Понимаю. Спасибо.

[ingiboy]

Не сочтите за сарказм, реально интересуюсь — вам нужное новое ради нового или есть ряд задач, которые существующие фреймворки ну никак не в состоянии решить?

[Fesor]

Новое ради нового. Не факт что я буду этот новый инструмент применять, но новые идеи (по настоящему новые и свежие) это всегда здорово.

[AdmAlexus]

Я бы сказал: «Пока я вижу очередной Bootstrap».

[maxmert]

То есть бутстрап так же умеет подключать/отключать темы и размеры к любому виджету? Он же не модульный и не логичный.

[Fesor]

Ну на счет кастомизации… в 2,3,* версиях все было очень грустно с этим. В 3-ей они уже сделали все более гибко. Что до логичности — почему же нет?

[maxmert]

Ну, можно начать с организации файлов. Для каждого элемента должен быть отдельный файл с переменными. Темы вообще никак не должны быть связаны с элементом. Еще много-много чего.

При этом вся кастомизация лежит в одном файлике и вы получаете что-то вроде такого:

@state-success-text:             #3c763d;
@state-success-bg:               #dff0d8;
@state-success-border:           darken(spin(@state-success-bg, -10), 5%);

@state-info-text:                #31708f;
@state-info-bg:                  #d9edf7;
@state-info-border:              darken(spin(@state-info-bg, -10), 7%);

@state-warning-text:             #8a6d3b;
@state-warning-bg:               #fcf8e3;
@state-warning-border:           darken(spin(@state-warning-bg, -10), 5%);

[knekrasov]

Да, особенно, когда пишет автор.

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

Хотя может быть тупо позиционирование.

[maxmert]

Согласен, конечно не бывает. Это скорее поиск идеального решения, чем готовое идеальное.

[Akuma]

А зачем все эти — _ — перед классами? Во всех остальных фрейморках и так понятно что происходит, а у вас придется лишний раз вспоминать какой же символ поставить перед классом

[maxmert]

С такими названиями вы можете спокойно писать классы без префиксов и не бояться нечаяно переопределить класс фреймворка. А запоминаются префиксы за 3-4 минуты использования. Пользы от неймспейсов во фореймворке в разы больше.

[RomanPavlov]

Трудно согласиться, ведь если «нечаянно переопределил класс фреймворка», то скорее всего ты сам себе злобный Буратино. Мое мнение — без префиксов ваш фреймворк выглядел бы чище и семантичнее.

[maxmert]

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

[Fesor]

Префиксы/неймспейсы это действительно полезная штука. Ну можно было бы префиксы сделать симпатишнее, код читался бы лучше. А если вы беспокоитесь за длину селекторов или лишние символы в классах — всегда можно прогнать через сборщик и минифицировать все.

[YAAP]

Вы знаете, мне тоже первое, что бросилось в глаза — --__--__ — не очень понравилось.
Сейчас же, после вашего комментария, я скорее нейтрально буду к этому относиться.

Но «btn-small» смотрится симпатичней, чем "-bht _small_"

[maxmert]

Спасибо. Но тогда вы не сможете добавить свой размер. Сейчас же вы просто кидаете файлик в папку с размерами, даете ему любое название и можете использовать с любым виджетом. А при «btn-small» вам надо в каждом виджете прописать размер.

[MniD]

class="-tabs _right_ _vertical_ -primary-" вообще круть, в следующей мажорной версии автор вообще переименует все классы в символы unicode.

Меня вообще сомнения берут, что правильно имена классов начинать не с буквы.

[Akuma]

С цифры нельзя, это я точно знаю. На счет тире и подчеркиваний тоже не знаю, не пробовал даже.

[maxmert]

Можно. Два тире – нельзя.

[maxmert]

Причины сего описаны чуть выше. Виджет, два модификатора, тема. Вроде все понятно.

[Akuma]

Почему было не назвать их w- t- s- m- a-? Гораздо более очевидно.

[maxmert]

Вы имеете ввиду w-tabs? Возможно. Но фреймворк давно стартовал, поэтому я решил поддерживать старые названия.

[Rastishka]

а почему бы просто не оставить обратную совместимость в новых версиях?

[limonte]

Я конечно не frontend разработчик и может что-то недопонимаю, но почему вы переняли у bootstrap float: left для grid? float автоматически блокирует центрирование grid-а, которое очень часто необходимо.

[maxmert]

Центрировать можно отступами -offset#.

[Fesor]

Это подходит только для части случаев. В большинстве же приходится извращаться с контейнерами.

[limonte]

Могу ли я вас попросить немного кода на вашем фреймворке, чтобы было понятнее? Например div.container, который содержит 3 колонки шириной 25%, которые выровнены по центру относительно div.container.

[maxmert]

Да, с 25% по-центру с 12-ти колонками не выйдет. Это подходит для большей части задач. Приблизительно так:

<div class="-container">

<div class="-row">
<div class="-col3 -offset2"></div>
<div class="-col3"></div>
<div class="-col3"></div>
</div>

</div>

[limonte]

Забавно, у меня всегда были другие представления о центрировании:

[verydima]

А мне нравится. Спасибо — Вы сделали большую работу.

[maxmert]

Спасибо что оценили. Было, откровенно говоря, не просто.

[maxru]

У меня дежавю или вчера этот пост уже был?

[maxmert]

Был-был. Извините. Я видимо в процессе правки нажал какое-то сочетание клавиш и он без предупреждения был опубликован незаконченный. :(

[SystemXFiles]

Достаточно просто пройтись по примерами на сайте, дабы увидеть как где-то что-то ползет или не так появляется.
Стоит последняя на данный момент версия Google Chrome 35.0.1916.114 m. Разрешение экрана 1440x900.
Само по себе такое немного настораживает, но не критично.

[maxmert]

Ого. Где? Если не сложно, скрин на гитхаб. Я исправлю.

[SystemXFiles]

Отправил скрины на github.

[maxmert]

Огромное спасибо!

[GreatRash]

Виджеты -> Inputs inside group. У меня в хроме кривой.

s7.hostingkartinok.com/uploads/images/2014/06/b6d45d68aa7eb9000d26cedf16119388.gif

[maxmert]

Спасибо. Добавляю на гитхаб.

[gigimon]

Неплохо, но, к сожалению, не очень красиво :( жаль, что из «дизайнерских» css фреймворков есть только semantic-ui

[david_mz]

А какие ограничения по версиям браузеров?

[maxmert]

IE 9+

[Softlink]

А может быть вам стоит сделать фреймворк для веб-дизайнеров? Которые хотят делать прототипы в коде. Для разработчиков и так уже много всего. Надо что-то с низким порогом входа. Без всяких там наворотов, чтобы как конструктор собирался. Думаю, займете нишу.

[maxmert]

Спасибо за совет. На самом деле это в плане. )

[vird]

По-моему, хороший инструмент, вполне может заменить bootstrap в многих use case'ах, хотя не спорю, что инструменты разные.
За coffeescript отдельный бонус в карму.

[maxmert]

Спасибо! Но почему-то абсолютную модульность sass с динамически подключаемыми к виджетам темами и размерами никто не отметил. Эх. :)

[vird]

SASS — это замечательно, но это язык, а не библиотека компонентов. В данном случае я вижу для себя смысл попробовать вашу библиотеку там, где раньше я задумывался о bootstrap.

[maxmert]

Еще раз спасибо. :) Я имел ввиду возможность, в отличие от бутстрапа, быстро кастомизировать (менять/удалять/добавлять) темы для виджетов. Даже без правки sass.

[Funcraft]

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

p.s. А ваш сайт оказался уже в закладках (: видите, я и сейчас не смог вспомнить, что уже пробовал его.

[maxmert]

Простите, я не умею названия придумывать :( Честно пытался, никак.

[EvilBeaver]

Ну а как насчет взять заголовок статьи и назвать Ideal или как-то так.

[ecl]

не дай бох, чтобы однажды заехал проект на этом «чуде».

[maxmert]

Не хочу вести себя как драгдиллер, но вы попробуйте. Вам понравится :)

[maxmert]

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

[blazer]

_синтаксис_ -уебищен- -имхо

[maxmert]

Если честно, не знаю что вам ответить. Разве что тег sarcasm забыли. Если вас действительно интересуют причины, почитайте комментарии выше. Или используйте-твиттер-бутстрап-его-легче-кастомизировать.

[blazer]

причины понятны, к ним вопросов нет. вопросы к реализации) есть такой фреймворк например, uikit. они используют префикс ui- в своих классах, и выглядит это и красиво, и лаконично. из названия и так должно быть понятно, виджет это или модификатор. я сам foundation использую, если что. там вообще префиксов нет и проблем это никогда не создавало для меня.

[maxmert]

У меня был печальный опыт с огромным приложением, где страшно было править css. Я уже добавл фичу в гитхаб. В следующей версии сможете поменять любые префиксы и постфиксы на нужные вам. Или убрать совсем. Тут, к счастью, это не сложно сделать.

[olegdunkan]

Проделана большая работа, пусть вы изобрели новый велосипед, спасибо вам.

[maxmert]

Спасибо.

[edolganov]

Дорогой Автор! Вы — два раза большой молодец!

Первый раз потому, что проделали такую большую работу и довели ее до логического конца (релиза). А второй раз — Вы написали большую статью на Хабр и не повелись на типичные провокации в духе «да нафига это нужно?».

Будьте уверены — это нужно. Не согласны обычно те, кто сам ничего такого не создает ;)
Спасибо.

[maxmert]

Спасибо! Останавливаться не собираюсь, сам использую во всех проектах. Надеюсь привнести что-нибудь полезное в opensource сообщество.

[FeNUMe]

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

За сам фреймворк спасибо, всегда вызывает уважение доведенный до релиза продукт. Возможно попробую версию с изменяемыми/нормальными префиксами. Сейчас как раз переписываю один проект с бутстрапом 2, подумывал о более простой и удобной замене.

[limonte]

Думаю, что pure вам понравится.

[maxmert]

Вы можете легко добавить свои или поменять эти. Здесь есть видео – http://maxmert.com/start.
Префиксы вместе с багфиксами и carousel.js появятся в 1.0.5

[remal]

Автор, вы проделали большую работу и вы — молодец!

Проблема в одном — «идеальный» css фреймворк — это набор mixin'ов и все. В верстке не должно быть классов rounded, bordered, button и т.п. Даже group быть не должно. Конечно, mixin'ы должны внутри себя подхватывать переменные/другие mixin'ы, чтобы все это было легко конфигурируемо.

Как бонус, заодно и «проблема» тире/подчеркиваний в начале названий отпадет.

Я, кстати, не фанатик css валидатора, div/табличной верстки (или на что там еще сейчас тру-верстальщики кипятком писают?). Всему свое место. Но вот семантика должна быть и это не обсуждается. Иначе, если в проекте больше пары страничек, то изменения стилей или добавления новых страниц/элементов превращается в ад.

[BaNru]

<span class="-addon">e-mail</span><div class="-field"><input type="text"></div>

И даже про label не знаем, а всё туда же.

<li><a>Menu 1 <i class="-addon fa fa-caret-down"></i></a></li>

Это конечно валидно, но некорректно.
Вместо i надо использовать span.

Печаль-беда. Дальше даже смотреть не стал.

И, кстати, если в фреймворке используются JS, и тем более jQ, то это уже не CSS фреймворк. Но всем же пох***

[BaNru]

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

Извините, если кого задело, но не люблю я поповщину. И не мог я за такой говнокод сказать «молодец, круто, спасибо!»

[maxmert]

Про label знаем.
Span использовать не обязательно.
jQ в фреймворке не используется, видимо плохо читали. Это css-фреймворк, так как js-компоненты необязательны.
Да, я, автор этого говнокода, вас минуснул. Надеюсь пояснил все понятно. Вы ведь совсем не разобрались в чем прелесть (в динамическом отключении/подключении тем, легком отключении и подключении виджетов только лишь правкой одного json-файлика), не заглянули в исходники, не оценили файловую организацию, а уже пишете, что говнокод. Не идеально, согласен (мне много дельных замечаний сделали, согласен почти со всеми), но вы удивили, видимо, не только меня своей поспешностью.

Успехов!

[BaNru]

Про label знаем.

Знаем, но не используем. Есть весомая причина этого?

Span использовать не обязательно.

Я понял, что не обязательно поэтому популярен тег i /* сарказм */
Ну вы же, уважаемый, пишете фреймворк который вплотную работает с HTML (тут привет от КО). Следователь вы должны знать HTML не хуже CSS. Но получается, что вы его очень плохо знаете, ибо знающий не будет писать такой плохой HTML код.

jQ в фреймворке не используется, видимо плохо читали. Это css-фреймворк, так как js-компоненты необязательны.

Я как бы написал и о JS. Но смотрю вы так же не читаете даже комментарии перед тем как минусить. Я в свою очередь написал, что статью не читал. Ладно, предположим, что JS не обязателен. НО…

Вы ведь совсем не разобрались в чем прелесть… правкой одного json-файлика

Но, стоп! А разве HTML и CSS умеет работать с json? (обращаю внимание, что я говорю о HTML/CSS, а не JS)

а уже пишете, что говнокод

Зачем мне заглядывать куда-то, если у вас, у автора фреймворка и статьи в примерах говнокод?!

но вы удивили, видимо, не только меня своей поспешностью.

Я комментировал код из статьи, но люди видимо привыкли к такому говнокоду.

[BaNru]

В общей сложности это выглядит примерно так:

Автор: Гаспада, я написал кнегу в каторой есть маи стихи и росказы
Комментарий 1: Аффта пишы исчо (+6)
Комментарий 2: Спасибо аффтар (+11)
Комментарий 3: Автор, вы бы писать сначала научились (-10)
\- Автор: Ты бы прачитал сночало кнегу

[maxmert]

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

[BaNru]

Ну начинается. Мы разве где-то обсуждаем мои работы? Нет!
Я где-то публиковал свои фреймворки в этой статье и хвалился на весь белый свет? Нет!
Я разве указал на ошибки, которых нет или это не ошибки? Опять нет!
Тогда при чем мои работы?
Или вы считаете такие детские ошибки, для человека, который пишет свои фреймворки — мелочь?

Ну и спасибо, что ответили на мои вопросы.

[maxmert]

Отвечу только про детские ошибки.
Не сомневайтесь, про html и html5 я знаю не по наслышке, работал не только с video и audio api (про верное употребление тегов я уж молчу). При таком объеме документации сложно держать все в поле зрения когда ты делаешь это один (я ведь не для кармы пост публикую, а для контрибьюторов).

Если вы не хотите показывать свой уровень знаний, считаю что на базовых знаниях он и остановился.

Тема себя исчерпала. Боюсь, вынужден повториться: успехов! ;)

[BaNru]

Ну допустим у меня и базовые знания. Но я смог найти ошибки у мастера, значит я превзошел мастера Йоду!

И я всё равно не могу понять, как мастер, который знаком с HTML не по наслышке умудряется допускать ошибки из базовых знаний, при чем повсеместно?! Как?!

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

Автор: Гаспада, я написал кнегу в каторой есть маи стихи и росказы
Комментарий 1: Аффта пишы исчо (+6)
Комментарий 2: Спасибо аффтар (+11)
Комментарий 3: Автор, вы бы писать сначала научились (-10)
\- Автор: Ты бы прачитал сночало кнегу
\-- Комментарий 3: Зачем мне читать книгу, если тут речь неграмотная?
\--- Автор: Ты чо самый умный? Пакажи сваи кнеги для ночала
\---- Комментарий 3: Я не буду показывать свои книги, ибо разговор не о них.
\----- Автор: «Комментатор 3» не самнивайся я писать умею а то что я сделал несколько ошыбок так это потому чта сложно держать всю кнегу в поле зрения когда ты пишышь ее один

[maxmert]

Ник у вас говорящий.

[maxmert]

Постскриптум: был бы очень благодарен (и не только я), если бы вместо язвительных коментариев вы кидали issues в гитхаб. Опенсорс сообщество же! :)

[BaNru]

1) Меня там нет. Я есть в других местах
2) Зачем мне писать issues где-то там, если я комментировал статью и примеры из неё? Мне надо пойти и поискать эти примеры на гихабе? А они там точно есть?
3) Я лишь сделал замечание, пусть и в грубой форме, на основы HTML (выше я уже писал про это)

[Gasoid]

За класс для комментариев спс, вот этого не хватало в бутстрапе.
Как куда-нибудь вставлю ваш фреймворк, скину ссылку ))

[maxmert]

Спасибо.

[ihhi]

Спасибо. Огромный труд. Принципиально попробую.
Но цветовая гамма смущает. Выглядит аляповато и проект от этого проигрывает. Дизайнер необходим.

[maxmert]

Спасибо. Если встретите недочеты, пожалуйста, пишите на гитхаб, я быстро исправлю.

[tamtakoe]

Вот нафига опять свой велосипед изобретать? Нет, чтобы написать файл шаблона для Бутстраба + расширяющие классы для отсутствующих элементов. Нет, нужно все переделать, Бутстрап же лохи писали…

[maxmert]

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

[Fesor]

Ну давайте на чистоту, бутстрап и не предполагалось использовать как CSS фреймворк полноценный. Это коллекция готовых стилей, с помощью которых можно не особо заморачиваясь набросать сносные интерфейсики, админки и т.д. Если у вас кастомный дизайн — то явно что-то другое нужно.

[maxmert]

Вроде как то же самое, набор стилей (он всегда будет кастомный). Даже версию 3.0 не предполагалось использовать как полноценный фреймворк? Дубовость даже в 3.0 никуда не исчезла.

[Fesor]

Да, его позиционируют как фреймворк, но никто не говорил о универсальности. Эта штука очень полезна, когда нету денег на начальный дизайн и только.

[zandroid]

Планируется ли делать грид вариативным под размер, как в бутстрап 3? Т.е. когда есть разные классы для разных экранов (col-xs-12 col-md-6 col-lg-3) — очень удобная штука.

[maxmert]

Да, я сделаю! Добавил feature в гитхабе.