Pull to refresh

Comments 135

Спасибо Вам за Вашу работу, выглядит отлично! Особенно порадовали эффекты появления popup и dropdown :)
Спасибо, что оценили! Старался. :) Очень надеюсь, что всем пригодится.
Пригодится еще как, после пристального рассмотра — супер круто, неделю назад хотел найти что-то по типу бутстрепа на sass, но вот Zurb Foundaton и Compass как-то сильно завазаны на руби-инфраструктуру и поэтому не рубистам их использовать не очень удобно, большое вам спасибо, думаю, что надо вам помочь =)
Макс, в целом всё достаточно интересно и актуально, но есть несколько спорных моментов. Да, ты сделал вроде бы более гибкий фреймворк, чем тот же бутстрап, и я надеюсь что этот инструмент найдёт свою аудиторию, но за счет того, что твой фреймворк более сложный и трудно модифицируемый, считаю что она будет достаточнго узкой.

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

Да, сейчас нам не надо помнить и искать длинных классов, но нам надо будет беспокоиться чтобы наличие модификатора не отразилось на элементах которые мы не хотим менять.

Например:

.-menu > .-group.-error- > input[type="button"]

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

Затем, поизучал maxmert.com/widgets#grid. Если посмотреть на html-код и стили для него, то у меня волосы на голове начинают подниматься – зачем так извращаться над обтеканием, если семантически правильно для таблиц использовать тег table? У нас тут на совсем подходе flexbox ну или на самый крайний случай всё это можно обыграть inline-block.

Идем дальше.

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

В одном из самых первых примеров кода этой статьи я заметил как минимум 3 “недочёта“:
1. Использование тега <a> без указание аттрибута href несемантично;
2. Не вижу смысла использовать тег <i> непоназначению, напомню что он придумывался для оформления текста, по-дефолту делает его курсивом;
3. Не смог найти смысла разделения, казалось бы, единой кнопки на две, причем одна из них никак не функционирует (см. пункт 1);

Всё это можно было бы обыграть более изящно и семантично:

<div class="-group">
   <a class="-btn -thumbs-up-" href="http://www.url.com">I like it</a>
</div>

и в стилях оперировать:

.-btn {
/* стили кнопки */
}
.-btn.-thumbs-up- {
/* стили кнопки с этим модификатором */
}
.-btn.-thumbs-up-:before {
  content: url(../img/thumbsup.png);
}


Могу сделать вывод. Если бы я, в коем-то веке, для какого-нибудь из проектов взял за основу какой-нибудь фреймворк, я бы остановился на бутстрапе.
Спасибо за конструктивную критику. Постараюсь ответить по порядку.

Рефакторинг будет не нужен по одной простой причине – наличие неймспейсов. Создавайте свой класс, навешивайте на элемент, перемещайте по dom-у, все будет в полном порядке. То, что input[«button»] выглядит в toolbar-е немного по-другому, чем просто в dom-е, так и было задумано. Если вас не устраивает внешний вид, можно поменять тему или исправить виджет toolbar-а. В группе кнопка должна тоже выглядеть немного по-другому (бордер-радиус, например), и как вы это обойдете, не использовав .-group > .-btn?

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

А вот это

<div class="-group">
   <a class="-btn -thumbs-up-" href="http://www.url.com">I like it</a>
</div>


плохо, потому что верстальщику все понятно, а вот программисту тут не понятно ничего. С какой стати перед «I like it» должна появиться еще одна кнопка с иконкой? И как именно ей поменять статус? Например поставить -disabled-? На счет несемантичности без href: ну что вы, тут же просто пример. Тег <i> много где используется для иконок, это очень удобно и, на мой взгляд, достаточно логично (i — icon) :)
Действительно, очень круто!
SASS. Оказалось он гораздо гибче и позволяет делать вещи, которые на LESS реализовать сложно, а порой просто нельзя

Интересно… Например?
Примесь, определяющая от кого наследуется модификатор, при генерации css учитывающая полный путь для текущего виджета.
@mixin __set_modificator-type( $type, $list, $mod ) {
	@each $status in $list {
		@if $__object == this {
			$__name: _get-modificator-name( $status );
			&#{$__name} {
				@extend %#{$__inheritance}-#{$type}-#{$status}-#{$mod};
			}
		}
		@else {
			

			@each $_obj in $__object {
				@each $_before in $__before-object {
					@each $_after in $__after-object {
						$_nesting: _get-modificator-nesting( $status, $_before, $_obj, $_after );
						#{$_nesting} {
							@extend %#{$__inheritance}-#{$type}-#{$status}-#{$mod};
						}
					}
				}
			}
		}
	}
}
А есть ли возможность в виндоуз поставить что нибудь по -типу wenLess, что бы не возиться с Ruby
Я с руби, к сожалению, тоже не работал. Это sass синтаксис (если я вас правильно понял).
Я имею в виду, что для работы с Sass нужен Ruby sass-lang.com/tutorial.html

Есть вот такое AIR приложение www.impressivewebs.com/sass-on-windows-with-scout-app/ — я не пробовал, может Вы подскажете, как Вы работает под Windows с SASS — их же надо компилировать. Для LESS у меня стоит WwinLess winless.org/ — который компилит файлы при изменении. Это довольно удобно.
Плюс есть возможность работать с less.js для компилияции в браузере на лету.
К сожалению, ничем помочь не смогу: всю разработку веду на mac :(, поэтому софта для компиляции sass не знаю. В скором времени собираюсь сделать конструктор, который будет прямо на сайте собирать фреймворк, но он, ясное дело, полноценную разработку не заменит.
ну значит у Вас стоит руби — не то что бы это большая проблема для меня — он и на виндоуз ставится без проблем, просто не хотелось бы заморачиваться. Спасибо за ответ.
Не обязательно руби. Как минимум есть форки на PHP и JavaScript, и Python
php и javascript по-моему в альфах до сих пор. Но интересно. Хотя как я понял проще тот же скаут поставить
Есть еще Livereload, хотел на него перейти. У него компиляция не основная функция, есть еще обновление стилей в браузере без перезагрузки, но он постоянно падал с ошибкой. Попробуйте, возможно у Вас заработает.

А я вернулся на Scout.
«Возиться с руби» это громко сказано :)
Сам никогда не юзал руби, но когда понадобилось использовать SASS был удивлен насколько это просто и занимает пару минут от силы.

Порядок действий таков:
1) Скачиваете и ставите руби, пути для винды прописываются автоматом, так что все сразу доступно из консоли
2) Открываете консоль (Win+R -> cmd -> Enter) и ставите SASS: gem install sass
3) Всё готово к работе! В проекте создаете 2 папки scss и css и запускаете команду sass --watch scss:css в контексте этой директории. Теперь все изменения в SASS-файлах автоматом отслеживаются и генерят новый CSS.
Для Visual Studio есть Web Essentials, но в бесплатной студии не взлетит
Присоединяюсь к комменту выше по поводу «возиться». Наоборот, только удовольствие получите, и, если не сталкивались ранее, научитесь :)

Ровно как и для LESS — что может быть проще и приятнее, чем запустить node.js на dev-машинке!
а node.js при чем тут?
Ну и тогда еще вопрос по поводу SASS: а каким форком Twitter Botstrap в виде SASS пользоваться.
node.js нужен для компиляции на сервере
Спасибо, видел -но там несколько есть вариантов — буду пробовать этот
Не просто так посоветовал именно этот. Тоже искал, тоже видел несколько, этот оказался самым актуальным и постоянно обновляемым.
Почему-то не работает «Drop a widget here». Linux, Chrome 25.0.1364.29 dev
К сожалению пока нет возможности тестировать на линуксе. Постараюсь завести виртуалку. Если есть javascript-ошибки, напишите их в github, пожалуйста.
В сафари, кстати, тоже не работает. Точнее, не работывает скидывание модификаторов и состояний.
Спасибо, посмотрю. На Linux?
Safari, как ни странно, есть только для mac :) На linux не знаю, могу завтра посмотреть в хроме, фф, опере.
:) Был бы очень благодарен! В ближайшие два дня попытаюсь поднять виртуалку.
Уже нет. Его перестали обновлять.
В линуксе, но хром стабильный 24.0.1312.52 — работает
Классная работа, не хватало такого. Хорошо, что все модульно, можно использовать в готовых проектах.
В «Scaffolding» ожидал увидеть описание сетки, но перешел на Typography (не очень приятно).
Спасибо. Н-да, недочет. Сегодня ближе к вечеру перенесу.
Да, действительно. Спасибо, поправлю.
Стрелки у поповеров и прогрессбары — шик и няшка! Настолько приятно, что даже странно, почему я нигде раньше этого не видел. Но остальные вещи местами сыроваты, для своих проектов я бы не стал брать, хотя бутстрап меня явно не устраивает чрезмерной «воздушностью», но ритм у него выдержан лучше.
Спасибо! Версия 0.0.1. :) Планов по оптимизации и улучшению очень много.
Наверняка многие части вашей работы, не расходящиеся в идеалогии с оригинальным бутстрапом, можно законтрибьютить и туда. Вот это было бы действительно очень здорово!
Безусловно можно. Много на less, конечно, переписать нужно. Откровенно говоря, сначала я так и хотел сделать. :) Но у меня в планах пока нет. )
В опере 12.12 на сайте не дропаются элементы в специально отведенное поле :(
И еще социальные иконки смещены к верху кнопок
Да, спасибо. Исправлю.
Кстати, по поводу шрифтовых иконок — я бы не был столь категоричен, восхваляя их.

У этого подхода среди прочих есть один огромный, фундаментальный и непобедимый недостаток: в маленьких размерах они практически всегда выглядят ну очень ущербно в сравнении с растровыми, результат совершенно неприемлем, если нужны иконки, скажем, размера 16х16 или 12х12 пикселей (как это почти всегда и бывает).
Тем не менее сейчас их используют все больше. Бутстрап, на сколько я знаю, собираются пересаживать на них.
Тем более в файле темы есть возможность быстро и просто вставить спрайт с любыми своими иконами, если не устраивают шрифтовые.
На маке, вероятно, со шрифтами ситуация получше, но в винде иконки выглядят действительно ужасно. Для хрома есть небольшой трюк. Если в font-face указать путь к svg-шрифту раньше, чем к woff, то ситуация заметно улучшается:



Возможно, вам это пригодится.
Благодарен! Обязательно исправлю.
Я делал скриншоты для этой картинки в последней версии хрома.
Попробовал на одном проекте, стало чуть лучше, но не до конца. В FIReFox и IE значительно лучше
image — с SVG
image — без SVG
image с -webkit-text-stroke: 0.5px;
сорри click2net не проплатил
image с -webkit-text-stroke: 0.5px;
image без SVG
image с SVG

Как видим разницы особой нет между SVG и без SVG — лучший вариант с web-kit-stroke
Есть свойство -webkit-font-smoothing, работает только в webkit, будем надеяться, что разработчики остальных браузеров догадываются о существовании сей проблемы и пытаются ее решить. А так-же есть приемы немного улучшающие ситуацию.
по-моему оно уже не работает — посмотрите я выше оставил пример с web-kit-stroke — лучший трюк на данный момент
Собственно я к тому, что решения с улучшением есть и все движется в лучшую сторону с иконошритфами.
1. 1200px по-моему много. Мой браузер обычно больше 1000 не расширяется.
2. Посмотрите на stylus. Очень мне понравился после less и sass/compass. Написал небольшой mixin для него, теперь responsive-сайты реализую на раз:
.logo
    responsive width 500px 360px 300px
    responsive height 170px 122px 102px
    responsive margin, 50px auto 70px, \
                       40px auto 50px, \
                       20px auto 10px
    responsive image "logo" "logo-tablet" "logo-phone"
    svg "logo"
    hide-text()
Спасибо! Stylus, к сожалению, не трогал. Посмотрю, вдруг позволит реализовать аналогичные вещи более просто.
На счет сетки вы возможно правы. Соберу статистику, исправлю. )
+1 за стилус, ещё и от руби уйдёте, что для некотрых может быть «идеологической» сложностью.
Елки-палки… Спасибо! Смотрел на это слово, вроде бы что-то не так. Поленился посмотреть в словаре. ))
Какие инструменты использовали в разработке помимо упоминаемых LESS и SASS?
LESS я не использовал (для финальной версии :) ). Grunt – для сборки проекта, для сайта пришлось писать свой таск для сборки mustache-темплейтов в одну переменную. Coffeescript – для сайта, и сейчас переписываю плагины. Nodejs – сайт. Mongo – бд на сайте. Вроде ничего не забыл.
В Сафари режется меню в левой колонке. Первые буквы не видны.
А какое у вас разрешение?
макбук айр, наверное 1440 на 900, окно чуть-меньше экрана, сафари 6.0.2
Благодарю! Посмотрю, исправлю.
Круто, автору спасибо за проделанную работу. Нужно попробовать где-нибудь на рельсовых пет-проектах.
С ув. автором поговорили раньше, чем я успел коммент дописать (на issue ответил через гитхаб) ))))

Приятно видеть ))
С документацией вопрос проясните пожалуйста. На github написано, что она есть на сайте, но я там её нигде не нахожу. Возможно, плохо смотрю. Если так, дайте ссылку плз. или просто скажите, где она (ссылка).
Концепция действительно лучше чем у бутстрапа. Из того, что я видел, это первая жизнеспособная альтернатива.
Но для того, чтобы начать ее использовать в бою не хватает двух вещей: стройного дизайна и множества форм (select'ов нет в документации и сгруппированные инпуты).
Спасибо! Был бы очень признателен, если бы вы в гитхабе написали чего нехватка и каким вы видите цельный фреймворк, который готовы использовать в проектах.
Учитвая что Ваш фреймфорк могут использовать другие люди, хочу поинтересоваться чем обусловлено присвоение -webkit-font-smoothing: antialiased; для body, просто не понимаю зачем люди переопределяют нативный рендеринг шрифтов операционной системы?
UPD: да, знаю что оно помогает шрифтовым иконкам, но ведь читабельность шрифтов портится, же
Скорость рендера не сильно страдает, а выглядит, на мой взгляд, гораздо симпатичнее. Шрифты в невебкитовских браузерах выглядят немного по-другому, но это, на мой взгляд, вполне приемлемо (как cleartype в свое время). Если можно сделать красивее, лучше сделать красивее. =) Но возможно вы знаете о каких-то подводных камнях этого свойства, о которых не знаю я?
Ну как бы подводное свойство у него одно — не всем нравится и сама идея его неправильна и граничит с багом: если у меня в системных настройках как бы стоит галка для включения субпиксельного сглаживания и мне так нравится, то почему сайт отображается без субпиксельного сглаживания? Раньше как-то не обращал внимания, но вот это свойство в последнее время почему-то начали эксплуатироваться по полной. Просто оно действительно не всем нравится, лично мне на макоси просто тяжелей читать становится — у текста падает контраст, потому что это grayscale сглаживание — если присмотреться к увеличенным символам то можно увидеть как, например, если цвет текста черный, а фона — белый, то половина пикселей серая, т.е. с заниженной яркостью и тем самым, контрастом, в то время как при субпиксльном сглаживании, субпиксели сохраняют яркость и контраст шрифта.
Спасибо за развернутый ответ. Обращу более пристальное внимание на данное свойство. Мне показалось, что текст более аккуратным становится, да и при чтении больших текстов проблем не замечал. Попробую отключить, сравнить. Еще раз спасибо.
Спасибо за понимание =) моя позиция простая — если, мне тоже нравился бы такой текст, я бы убрал галку в системных настройках и нет проблем — на всех сайтах были бы такие же шрифты, но вот я ее поставил, а на многих сайтах шрифты остались как если бы сглаживание отключено, т.е. как будто веб мастер принимает решение за меня =(
Спасибо всем, кто пишет об ошибках в тексте в багрепорт на сайте. Ответить лично там возможности нет. Я все обязательно исправлю. :)
Очень понравилось!

Scaffolding > Typography > Headers > «All headers from h1 to h2 are available». Мне кажется, должно быть «до h6».
Вы программист?
Да, вы, конечно, правы! Спасибо! Скоро выкачу исправленный вариант.
Да, программист. )
Только программисты пишут _xxx, _xxx_, -ххх-, и, о ужас __хх__ и у них это не вызывает паники ;)
:) Ну, я еще и верстальщиком, и дизайнером долгое время работал. :) Легкие приступы паники верстальщика и дизайнера во мне пропадают, если «xxx» заменяется на что-нибудь понятное и человеческое. :)
Кстати, название напомнило вот этот мем :)

Скрытый текст
Большое спасибо за данный фреймворк.
На сайте был найден небольшой баг. Когда перемещаешь размер на элемент и справа изменяется html, я заметил, что размер дописывается в конец, а не производится его замена на другой, при нескольких применений:

<a class="-btn _huge _small _big _tiny">Dropdown
    <i class="-caret"></i>
</a>  
<div class="-group _tiny">
    <a class="-btn">Dropdown</a>
    <a class="-btn">
        <i class="-caret"></i>
    </a>
</div>
Благодарю! Да, перетаскивать «clear sizes» каждый раз не очень удобно. Исправлю! :)
Все красиво, но вот префиксы и постфиксы, по моему, не совсем удобны.
class=”-{имяВиджета}” – все названия виджетов, например -table, -tooltip, -badge, -modal и т.д.
class=”-{имяСтатуса}-” – имя статуса, например, -error-, -warning-, -info-, -disabled-, -unstyled- и т.д.
class=”_{имяРазмера}” – имя размера, например, _tiny, _small, _big, _huge.
class=”_{именаДругихМодификаторов}_” – например, _loading_, _unclickable_, _active_ и т.д.

Да они лаканичны, но не самоописательны.

Что-то вроде такого, было бы более стройно, что ли:
widget_{имяВиджета}, status_{имяСтатуса}, size_{имяРазмера}, и mod_{именаДругихМодификаторов}.

Может это и длиннее, но сразу понятно о чем речь и не нужно запоминать какое подчеркивание или минус за что отвечат.
Да, я думал над таким вариантом очень долго. На самом деле после пятнадцати минут использования вы уже не будете вспоминать какое подчеркивание за что отвечает, а вот время экономить будете. :)
Зато, если потом пару месяцев не использовать, то нужно будет снова вспоминать где какой знак. Да и сам факт того что у Вас сначала нужно объяснить какой префикс суффикс для чего. В моем случае это мжет вообще не потребоваться.
А с учетом автоподстановок, экономия времени на наборе — несущественна.
Спасибо! Подумаю над неймспейсами.
Предлагаю использовать префиксы типа w- или s-
Имхо, статус, размер, именаДругихМодификаторов можно собрать под одно знамя Модификатора. То, что это модификатор именно статуса или размера, должно подсказать само используемое слово, напр., warning, big,…
Зачем наделять смыслом набор подчеркиваний и дефисов, когда смысл уже заложен?.. К тому же, комбинации, причем двойные, "-" и "_" вносят в исходники хаотичный вид.
<div class="_big -warning- _unclickcable_ -toolitip">...</div>

Пусть все будет лаконично и однообразно:
<div class="-tooltip -big -warning -unclickable">...</div>

А то, может, даже так:
<div class="tooltip -big -warning -unclickable">...</div>


Так, просто предложение…
Спасибо! Да, к неймспейсам есть замечания. Посмотрю, что можно сделать :)
Я честно говоря не понял, почему модификаторам размера отведено особое место. Почему не считать их такими же модификаторами как и все остальные? По собственному опыту я бы не сказал что модификатор размера используется чаще, чем другие. Зачем же различный синтаксис.
Спасибо! Интересно) Неплохая альтернатива Бутстрапу получается.

При drag'n'drop в Chrome 24 под Ubuntu появляется следующее:
Uncaught TypeError: Cannot read property 'nodeName' of undefined (global.js:157)
Мне кажется что меткам больше tags название подойдет. Label у меня всегда ассоциируется с инпутами. А так, отличная работа. Ну и с неймспейсами согласен, упростить можно :)
Has namespaces. You classes will not cross with maxmertkit's classes.

You -> Your

Но я бы написал что-то типа «Has namespaces. No more class names conflicts!»
Может все же так:
By having namespaces you will never fall in to conflicts of overlapped names.

Ну и: Has namespaces некорректно, тогда уже Have namespaces.
Ставьте кнопку «donate» — с удовольствием пожертвую 20-30 енотов на дальнейшую разработку.
Тоже отправил. Надеюсь, проект не стухнет. Так держать!
А на русском языке не планируете сделать сайт?
Пока нет. К сожалению нет времени.
Спасибо! Дейтствительно, фреймворк радует своей обстоятельностью.
Особняком стоит вопрос о поддержке. Есть ли на этот счет какие-то соображения и утешения для сообщества? Планируете ли вы популяризировать продукт? А то, кто бы что ни говорил, но Бутстрап в первую очередь популярен благодаря тому, что перед ним стоит слово Твиттер — это вселяет надежность и доверие)
Да, популяризацией планирую заняться. План на ближайшее время таков:
  1. Сделать онлайн-сборщик с возможностью мгновенного просмотра результатов сборки.
  2. Сделать каталог виджетов
  3. Сделать менеджер пакетов для быстрой установки виджетов (нечто вроде npm), с возможностью добавления своих виджетов в каталог.

Не хочется выезжать за счет других проектов. С помощью сообщества хочется сделать хорошую вещь, которая будет прекрасна сама по себе.
отличный план для развития, хорошая платформа для ui на frontend. — это то что нужно
Спасибо! Мне тоже такого не хватает. )
Я за кофе с сахаром.

Не смотрели ли в сторону TypeScript?
Хотя это дело вкуса, IMHO. Но TypeScript поближе к JavaScript будет в плане синтаксиса.
Пожелание: добавьте еще классы для вывода изображений. А-ля thumbnail в bootstrap.
Добавил issue. Спасибо!
Еще стоит добавить хотя бы еле заметный верхний border для кнопок. Иначе с appendix и в группе с input они смотрятся странно — визуально элементы получаются разной высоты.
Да, благодарю, возможно стоит сделать это по-умолчанию. Добавил issue. Если это необходимо, в файле темы это можно быстро поменять.
Спасибо за быстрые ответы! Надеюсь, со временем это у вас не пройдет :)
Sign up to leave a comment.

Articles