0,0
рейтинг
5 июня 2014 в 12:15

Разработка → Maxmertkit. Идеальный css-фреймворк



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

Требования и задачи


При создании версии 1.0 мне пришлось пересмотреть основные требования к фреймворку:

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


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

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


Особенности и отличия



  • Не сочтите за самолюбование, но им действительно легко и удобно пользоваться.
  • Модульность. Вы можете отключить любой виджет, при этом maxmertkit будет выглядеть и работать как прежде. Дело здесь в двух вещах. Во-первых, если в виджете используется, например, grid, то он импортируется непосредственно в виджет. Во-вторых, на уровне Sass в maxmertkit предусмотрена защита от множественных импортов для предотвращения дубликатов кода.
  • Темы и Размеры. В файле mkit.json лежат темы и размеры для каждого виджета. При правке mkit.json maxmertkit будет перекомпилирован, таким образом вы можете быстро добавлять или удалять темы.
  • Наименования классов.
    -widget — widget, for example -btn
    -theme- — theme, for example -primary-
    _size — size, for example _major
    _modifier_ — modifier, for example _active_
    -animation-- — animation, for example -fadein--
    Теперь, взглянув на код ниже, вы сможете без чтения документации понять, что вы увидете в браузере:

    <ul class="-menu -primary- _big">
    	<li class="_active_">
    		<a>Menu item 1</a>
    		<div class="-drop -door--">
    			...
    		</div>
    	</li>
    	<li>
    		<a>Menu item 1</a>
    	</li>
    	<li class="_disabled_">
    		<a>Menu item 1</a>
    	</li>
    </ul>
    
    <a class="-btn -error- _huge _active_">Big activated error button</a>
    

  • Быстрые javascript компоненты. В отличие от многих других фреймворков, maxmertkit не использует события «scroll» напрямую. Везде, где есть возможность используется requestAnimationFrame, в результате скорость работы многократно возрастает. Основная задача – держать больше 60 fps что бы ни происходило на странице. .
  • Поддержка deferred-объектов для событий onactive, beforeactive и т.д. То есть можно асинхронным кодом (например ajax-запросом) получать данные для любых компонент maxmertkit перед его активацией (например перед показом модульного окна или попапа).


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

Виджеты


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

Кнопка btn

Используется класс -btn.

<button class="-btn">Default</button>
<button class="-btn -primary-">Primary</button>
<button class="-btn -error-"><i class="fa fa-repeat"></i> Error</button>
<button class="-btn -info-"><i class="fa fa-bell"></i> Info</button>
<button class="-btn -primary- _unstyled_"><i class="fa fa-gift"></i>Primary</button>


Добавьте модификатор _round_

<button class="-btn _round_">Round button</button>
<input type="button" class="-btn _round_" value="Round input">
<a class="-btn _round_">Round link</a>


Модификатор _disabled_ или атрибут [disabled]

<button class="-btn _disabled_">With modifier</button>
<button class="-btn" disabled="">With attribute</button>
<button class="-btn _disabled_ -primary-">Primary modifier</button>
<button class="-btn -primary-" disabled="">Primary attribute</button>


Модификаторы _active_ и _hover_

<button class="-btn">Default</button>
<button class="-btn _hovered_">Hovered</button>
<button class="-btn _active_">Active</button>

<button class="-btn -primary-">Default</button>
<button class="-btn _hovered_ -primary-">Hovered</button>
<button class="-btn _active_ -primary-">Active</button>


Кнопка ghost-btn

Прозрачная кнопка -btn-ghost наследуется от виджета -btn, так что все модификаторы, в общем-то, те же самые.

<button class="-btn-ghost -primary-">Button</button>
<input type="button" class="-btn-ghost -primary-" value="Input">
<a class="-btn-ghost -primary-">Link</a>


С модификатором _round_.

<button class="-btn-ghost -primary- _round_">Round button</button>
<input type="button" class="-btn-ghost -primary- _round_ _active_" value="Round input">
<a class="-btn-ghost -primary- _round_">Round link</a>


Группы

Для контейнера с виджетами использовать класс -group.

Кнопки внутри групп

Добавьте виджеты -btn внутрь группы.

<div class="-group">
	<a class="-btn"><i class="fa fa-align-left"></i></a>
	<a class="-btn _active_"><i class="fa fa-align-center"></i></a>
	<a class="-btn"><i class="fa fa-align-right"></i></a>
	<a class="-btn"><i class="fa fa-align-justify"></i></a>
</div>
<div class="-group">
	<a class="-btn"><i class="fa fa-font"></i></a>
	<a class="-btn"><i class="fa fa-bold"></i></a>
	<a class="-btn"><i class="fa fa-italic"></i></a>
</div>
<div class="-group">
	<a class="-btn -primary-"><i class="fa fa-thumbs-up"></i></a>
</div>
<div class="-group">
	<a class="-btn -warning-"><i class="fa fa-star"></i></a>
</div>


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

<div class="-group">
	<a class="-btn">Dropdown <i class="fa fa-caret-down"></i></a>
</div>
<div class="-group -primary-">
	<a class="-btn">Dropdown</a><a class="-btn"><i class="fa fa-caret-down"></i></a>
</div><br>
<div class="-group">
	<a class="-btn">Like</a><a class="-btn -primary-"><i class="fa fa-thumbs-o-up"></i></a>
</div>
<div class="-group">
	<a class="-btn">You liked it</a><a class="-btn -primary- _active_"><i class="fa fa-thumbs-o-up"></i></a>
</div>


Элементы формы внутри группы

Добавьте элементы формы внутрь группы.

<div class="-group -primary-">
	<form>
		<a class="-btn">Button</a>
		<div class="-field"><input type="text"></div>
		<a class="-btn">Button</a>
		<div class="-field">
			<select>
				<option>Option 1</option>
				<option>Option 2</option>
			</select>
		</div>
	</form>
</div>
<div class="-group -primary-">
	<form>
		<a class="-btn">Button</a>
		<input type="text">
		<a class="-btn">Button</a>
		<select>
			<option>Option 1</option>
			<option>Option 2</option>
		</select>
	</form>
</div>


Addon внутри группы

Используйте класс -addon внутри группы.


<div class="-group">
	<form>
		<span class="-addon">e-mail</span><div class="-field"><input type="text"></div>
	</form>
</div>
<div class="-group -primary-">
	<form>
		<span class="-addon">e-mail</span><div class="-field"><input type="text"></div>
	</form>
</div>
<div class="-group -error-">
	<form>
		<span class="-addon">e-mail</span><div class="-field"><input type="text"></div>
	</form>
</div>
<div class="-group -warning-">
	<form>
		<span class="-addon">e-mail</span><div class="-field"><input type="text"></div>
	</form>
</div>
<div class="-group">
	<form>
		<span class="-addon">Addon</span><a class="-btn">Button</a>
	</form>
</div>
<div class="-group">
	<form>
		<span class="-addon">Addon</span><a class="-btn -warning-">Button</a>
	</form>
</div>


Комбинируйте.

<div class="-group">
	<form>
		<span class="-addon">@</span>
		<a class="-btn">me@maxmert.com</a>
		<a class="-btn"><i class="fa fa-caret-down"></i></a>
		<div class="-field"><input type="text"></div>
	</form>
</div>


Drops

Блоки с выпадающей информацией (dropdown) – -drop.

<div class="-drop">
	Drop without content block.<br>
	Great with menus and other navigation stuff.
</div>

<div class="-drop">
	<div class="-content">
		Drop with content block.<br>
		Great with text, information, pictures and other stuff.
	</div>
</div>


Задаем позицию и добавляем стрелки.

Добавляем -arrow в dropdown.

<div class="-drop -primary- _top_">
	<i class="-arrow"></i>
	<div class="-header">
		Header
	</div>
	<div class="-content">
		Dropdown Top
	</div>
	<div class="-content">
		Footer
	</div>
</div>

<div class="-drop _bottom_">
	<i class="-arrow"></i>
	<div class="-header">
		Header
	</div>
	<div class="-content">
		Dropdown Bottom
	</div>
	<div class="-content">
		Footer
	</div>
</div>

<div class="-drop -error- _right_">
	<i class="-arrow"></i>
	<div class="-header">
		Header
	</div>
	<div class="-content">
		Dropdown Right
	</div>
</div>

<div class="-drop -warning- _left_">
	<i class="-arrow"></i>
	<div class="-header">
		Header
	</div>
	<div class="-content">
		Dropdown Left
	</div>
</div>


Navigation


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

Menu

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

<ul class="-menu -primary-">
	<li><a>Menu 1</a></li>
	<li><a>Menu 2</a></li>
	<li><a>Menu 3</a></li>
</ul>


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

<ul class="-menu -primary-">
	<li><a>Menu 1 <i class="-addon fa fa-caret-down"></i></a></li>
	<li><a>Menu 2 <i class="-addon">⌘M</i></a></li>
	<li class="_active_"><a>Menu 3 <i class="-addon fa fa-star"></i></a></li>
</ul>


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

<ul class="-menu -primary-">
	<li><a>No hovered</a></li>
	<li><a>Menu 2</a></li>
	<li>
		<a>Menu 3 <i class="-addon fa fa-caret-down"></i></a>
		<div class="-drop">
			<ul class="-menu _vertical_">
				<li><a>Menu with long name <i class="-addon">⌘M</i></a></li>
				<li>
					<a>Menu 2 <i class="-addon fa fa-caret-right"></i></a>
					<div class="-drop _right_">
						<ul class="-menu _vertical_">
							<li><a>Menu 1</a></li>
							<li><a>Menu 2</a></li>
							<li>
								<a>Menu 3</a>
							</li>
						</ul>
					</div>
				</li>
				<li><a>Menu 3</a></li>
			</ul>
		</div>
	</li>
</ul>

<ul class="-menu -primary- _hovered_">
	<li><a>With hovered</a></li>
	<li><a>Menu 2</a></li>
	<li>
		<a>Menu 3 <i class="-addon fa fa-caret-down"></i></a>
		<div class="-drop">
			<ul class="-menu _vertical_">
				<li><a>Menu with long name <i class="-addon">⌘M</i></a></li>
				<li>
					<a>Menu 2 <i class="-addon fa fa-caret-right"></i></a>
					<div class="-drop _right_">
						<ul class="-menu _vertical_">
							<li><a>Menu 1</a></li>
							<li><a>Menu 2</a></li>
							<li>
								<a>Menu 3</a>
							</li>
						</ul>
					</div>
				</li>
				<li><a>Menu 3</a></li>
			</ul>
		</div>
	</li>
</ul>


Tabs

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

<ul class="-tabs">
	<li><a>Tab 1</a></li>
	<li class="_active_ -error-"><a>Tab 2</a></li>
	<li><a>Tab 3</a></li>
	<li disabled=""><a>Tab 4</a></li>
</ul>

<ul class="-tabs -primary-">
	<li><a>Tab 1</a></li>
	<li class="-warning-"><a>Tab 2</a></li>
	<li class="_active_"><a>Tab 3</a></li>
	<li disabled=""><a>Tab 4</a></li>
</ul>


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

<div class="-row">
	<div class="-col2">
		<ul class="-tabs _vertical_">
			<li><a>Tab 1</a></li>
			<li class="_active_"><a>Tab 2</a></li>
			<li><a>Tab 3</a></li>
			<li disabled=""><a>Tab 4</a></li>
		</ul>
	</div>
	<div class="-col4">
		Content of the second tab.
	</div>
</div>

<div class="-row">
	<div class="-col2">
		<ul class="-tabs _vertical_ -primary-">
			<li><a>Tab 1</a></li>
			<li><a>Tab 2</a></li>
			<li class="_active_"><a>Tab 3</a></li>
			<li disabled=""><a>Tab 4</a></li>
		</ul>
	</div>
	<div class="-col4">
		Content of the third tab.
	</div>
</div>

<div class="-row">
	<div class="-col4">
		Content of the second tab.
	</div>
	<div class="-col2">
		<ul class="-tabs _right_ _vertical_">
			<li><a>Tab 1</a></li>
			<li class="_active_"><a>Tab 2</a></li>
			<li><a>Tab 3</a></li>
			<li disabled=""><a>Tab 4</a></li>
		</ul>
	</div>
</div>

<div class="-row">
	<div class="-col4">
		Content of the third tab.
	</div>
	<div class="-col2">
		<ul class="-tabs _right_ _vertical_ -primary-">
			<li><a>Tab 1</a></li>
			<li><a>Tab 2</a></li>
			<li class="_active_"><a>Tab 3</a></li>
			<li disabled=""><a>Tab 4</a></li>
		</ul>
	</div>
</div>


Pills

Используется класс -pills.

<ul class="-pills">
	<li><a>Pill 1</a></li>
	<li class="_active_ -error-"><a>Pill 2</a></li>
	<li><a>Pill 3</a></li>
	<li disabled=""><a>Pill 4</a></li>
</ul>
<ul class="-pills -primary-">
	<li><a>Pill 1</a></li>
	<li class="-warning-"><a>Pill 2</a></li>
	<li class="_active_"><a>Pill 3</a></li>
	<li disabled=""><a>Pill 4</a></li>
</ul>


Navbar

Панель инструментов -navbar можно комбинировать со всеми виджетами. При этом если их несколько и они идут подряд, из них формируется составная панель инструментов (пример ниже).

<div class="-navbar">
	<div class="-row">
		<div class="-col3">
			<ul class="-menu">
				<li><a>Menu 1</a></li>
				<li><a>Menu 2</a></li>
			</ul>
		</div>
		<div class="-col3">
			<ul class="-pills -primary-">
				<li><a>Pill 1</a></li>
				<li><a>Pill 2</a></li>
			</ul>
		</div>
		<div class="-col2">
			<a class="-btn">Button</a>
		</div>
		<div class="-col4">
			<div class="-group">
				<form>
					<span class="-addon">@</span><div class="-field"><input type="text"></div>
				</form>
			</div>
		</div>
	</div>
</div>

<div class="-navbar">
	<div class="-group">
		<a class="-btn"><i class="fa fa-th-large"></i></a>
		<a class="-btn"><i class="fa fa-th"></i></a>
		<a class="-btn"><i class="fa fa-th-list"></i></a>
	</div>
	<div class="-group">
		<a class="-btn"><i class="fa fa-font"></i></a>
		<a class="-btn _active_"><i class="fa fa-bold"></i></a>
		<a class="-btn"><i class="fa fa-italic"></i></a>
	</div>
	<div class="-group">
		<a class="-btn"><i class="fa fa-align-left"></i></a>
		<a class="-btn"><i class="fa fa-align-center"></i></a>
		<a class="-btn"><i class="fa fa-align-right"></i></a>
		<a class="-btn _active_"><i class="fa fa-align-justify"></i></a>
	</div>
</div>


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

<div class="-navbar">
	<div class="-row">
		<div class="-col2">
			<div class="-header">Header</div>
		</div>
		<div class="-col3">
			<ul class="-menu">
				<li><a>Menu 1</a></li>
				<li><a>Menu 2</a></li>
			</ul>
		</div>
		<div class="-col2 -offset1">
			<ul class="-pills -primary-">
				<li><a>Pill 1</a></li>
				<li><a>Pill 2</a></li>
			</ul>
		</div>
		<div class="-col2">
			<a class="-btn">Button</a>
		</div>
	</div>
</div>


List group

Используйте класс -list-group. Конечно можно делать вложенные списки. Не забывайте про темы и размеры.

<ul class="-list-group">
	<li><a>Menu 1</a></li>
	<li><a>Menu 2</a></li>
	<li><a>Menu 3</a></li>
</ul>
<ul class="-list-group -primary-">
	<li><a>Menu 1</a></li>
	<li><a>Menu 2</a></li>
	<li><a>Menu 3</a></li>
</ul>


Bullets

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

<ul class="-bullets">
	<li><a href="#navBullets"><small>Name 1</small></a></li>
	<li><a href="#navBullets"><small>Name 2</small></a></li>
</ul>

<ul class="-bullets -primary- _invert_ _huge">
	<li><a href="#navBullets"><small>Name 1</small></a></li>
	<li><a href="#navBullets"><small>Name 2</small></a></li>
</ul>

<ul class="-bullets -error- _invert_">
	<li class="_active_"><a href="#navBullets"><small>Name 1</small></a></li>
	<li><a href="#navBullets"><small>Name 2</small></a></li>
</ul>


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

<ul class="-bullets _vertical_ _fixed_ _left_ _middle_">
	<li class="_active_"><a href="#navBullets"><small>Name 1</small></a></li>
	<li><a href="#navBullets"><small>Name 2</small></a></li>
</ul>

<ul class="-bullets _vertical_ _fixed_ _right_ _middle_">
	<li class="_active_"><a href="#navBullets"><small>Name 1</small></a></li>
	<li><a href="#navBullets"><small>Name 2</small></a></li>
</ul>

<ul class="-bullets _fixed_ _center_ _top_">
	<li class="_active_"><a href="#navBullets"><small>Name 1</small></a></li>
	<li><a href="#navBullets"><small>Name 2</small></a></li>
</ul>

<ul class="-bullets _fixed_ _center_ _bottom_">
	<li class="_active_"><a href="#navBullets"><small>Name 1</small></a></li>
	<li><a href="#navBullets"><small>Name 2</small></a></li>
</ul>


Labels

Используйте класс -label.

<span class="-label">default</span>
<span class="-label -primary-">primary</span>
<span class="-label -error-">error</span>
<span class="-label -warning-">warning</span>

<span class="-label">normal</span>
<span class="-label _major">major</span>
<span class="-label _big -primary-">big</span>
<span class="-label _huge -error-">huge</span>
<span class="-label _divine -warning-">divine</span>


Badges

Класс -badge.

<span class="-badge">default</span>
<span class="-badge -primary-">primary</span>
<span class="-badge -error-">error</span>
<span class="-badge -warning-">warning</span>

<span class="-badge">normal</span>
<span class="-badge _major">major</span>
<span class="-badge _big -primary-">big</span>
<span class="-badge _huge -error-">huge</span>
<span class="-badge _divine -warning-">divine</span>


Используйте виджеты -label и -badge внутри других виджетов.

<a class="-btn">Inbox <span class="-badge -primary-">12</span></a>
<a class="-btn -primary-">Inbox <span class="-badge">12</span></a>
<a class="-btn -error-">Inbox <span class="-badge">12</span></a>
<a class="-btn -warning-">Empty badge is here <span class="-badge"></span></a>

<ul class="-tabs _big">
	<li><a>Tab <span class="-badge -primary-">12</span></a></li>
	<li><a>Tab</a></li>
	<li><a>Tab</a></li>
</ul>

<ul class="-pills">
	<li><a>Pill <span class="-badge -primary-">12</span></a></li>
	<li><a>Pill</a></li>
	<li><a>Pill</a></li>
</ul>

<div class="-group">
	<a class="-btn _active_">Inbox <span class="-badge -primary-">12</span></a>
	<a class="-btn">Sent <span class="-badge -primary-">2</span></a>
	<a class="-btn">Drafts <span class="-badge -primary-"></span></a>
</div>


Progress

Класс -progress.

<div class="-progress -primary-">
	<div class="-bar" style="width: 12%">12 %</div>
	<div class="-bar -warning-" style="width: 25%">25 %</div>
	<div class="-bar -error-" style="width: 5%">Something goes wrong</div>
</div>

<div class="-progress _divine -primary-">
	<div class="-bar" style="width: 12%">12 %</div>
</div>


Slim progress

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

<div class="-progress-slim _tiny -primary-">
	<div class="-bar" style="width: 12%"></div><div class="-bar -warning-" style="width: 25%"></div><div class="-bar -error-" style="width: 5%"></div>
</div>

<div class="-progress-slim _small -primary-">
	<div class="-bar" style="width: 12%"></div><div class="-bar -warning-" style="width: 25%"></div><div class="-bar -error-" style="width: 5%"></div>
</div>

<div class="-progress-slim _minor -primary-">
	<div class="-bar" style="width: 12%"></div><div class="-bar -warning-" style="width: 25%"></div><div class="-bar -error-" style="width: 5%"></div>
</div>

<div class="-progress-slim -primary-">
	<div class="-bar" style="width: 12%"></div><div class="-bar -warning-" style="width: 25%"></div><div class="-bar -error-" style="width: 5%"></div>
</div>

<div class="-progress-slim _major -primary-">
	<div class="-bar" style="width: 12%"></div><div class="-bar -warning-" style="width: 25%"></div><div class="-bar -error-" style="width: 5%"></div>
</div>

<div class="-progress-slim _big -primary-">
	<div class="-bar" style="width: 12%"></div><div class="-bar -warning-" style="width: 25%"></div><div class="-bar -error-" style="width: 5%"></div>
</div>


Alert

Информационная табличка создается классом -alert.

<div class="-alert -shadow-curve-">
	<a class="-close -btn _unstyled_"><i class="fa fa-times"></i></a>
	Nothing important here.
</div>
<div class="-alert -primary- -shadow-lifted-">
	<a class="-close -btn _unstyled_"><i class="fa fa-times"></i></a>
	Heads up! This alert needs your attention, but it's not super important.
</div>
<div class="-alert -error- -shadow-curve-">
	<a class="-close -btn _unstyled_"><i class="fa fa-times"></i></a>
	Oh snap! Change a few things up and try submitting again.
</div>
<div class="-alert -warning- -shadow-lifted-">
	<a class="-close -btn _unstyled_"><i class="fa fa-times"></i></a>
	Warning! Better check yourself, you're not looking too good.
</div>


Thumbnails

Можно создать, используя класс -thumbnail.

<div class="-thumbnail -shadow-lifted-">
	<img src="http://farm4.staticflickr.com/3237/3131037596_d889aa0320_z.jpg">
</div>


Добавим grid. Теперь при изменении размеров окна все миниатюры будут изменяться в размерах, адаптируясь под размеры сетки.

<div class="-row">

	<div class="-col4">
		<div class="-thumbnail -shadow-lifted-">
			<img src="1450828831843434742855">
		</div>
		<h4>Geisha <small>Kyoto, Japan</small></h4>
	</div>

	<div class="-col4">
		<div class="-thumbnail -shadow-lifted-">
			<img src="1450828831432835568827">
		</div>
		<h4>Geisha <small>Kyoto, Japan</small></h4>
	</div>

	<div class="-col4">
		<div class="-thumbnail -shadow-lifted-">
			<img src="1450828831997471071098">
		</div>
		<h4>Geisha <small>Kyoto, Japan</small></h4>
	</div>

</div>


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

<div class="-row">
			
	<div class="-col4">
		<figure class="-thumbnail">
			<div class="-shadow-lifted-">
				<img src="1450828831843434742855">
			</div>
			<figcaption class="-thumbnail-caption">
				<h4>Geisha <small>Kyoto, Japan</small></h4>
				<p>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.</p>
			</figcaption>
		</figure>
	</div>
	<div class="-col4">
		<figure class="-thumbnail">
			<div class="-shadow-lifted-">
				<img src="1450828831432835568827">
			</div>
			<figcaption class="-thumbnail-caption -primary-">
				<h4>Geisha <small>Kyoto, Japan</small></h4>
				<p>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.</p>
			</figcaption>
		</figure>
	</div>
	<div class="-col4">
		<figure class="-thumbnail">
			<div class="-shadow-lifted-">
				<img src="1450828831997471071098">
			</div>
			<figcaption class="-thumbnail-caption -error-">
				<h4>Geisha <small>Kyoto, Japan</small></h4>
				<p>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.</p>
			</figcaption>
		</figure>
	</div>

</div>


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

<div class="-row">
			
	<div class="-col8 -offset4" style="position: relative">
		<figure class="-thumbnail">
			<div class="-shadow-curve-">
				<img src="1450828831843434742855">
			</div>
			<figcaption class="-thumbnail-caption _left_">
				<h4>Geisha <small>Kyoto, Japan</small></h4>
				<p>Geisha (芸者?), geiko (芸子) or geigi (芸妓) are traditional Japanese female entertainers.</p>
			</figcaption>
		</figure>
	</div>

</div>

<div class="-row">
	
	<div class="-col8" style="position: relative">
		<figure class="-thumbnail">
			<div class="-shadow-curve-">
				<img src="1450828831432835568827">
			</div>
			<figcaption class="-thumbnail-caption _right_ -error-">
				<h4>Geisha <small>Kyoto, Japan</small></h4>
				<p>Geisha (芸者?), geiko (芸子) or geigi (芸妓) are traditional Japanese female entertainers.</p>
			</figcaption>
		</figure>
	</div>

</div>


Avatars

Используйте класс -avatar.

<a href="#" class="-avatar">
	<figure class="-thumbnail">
		<img src="1450828831383683582603" alt="Krystalfister">
	</figure>@Krystalfister
</a>


Модификатор _round_ для скругления.

<a href="#" class="-avatar _round_">
	<figure class="-thumbnail">
		<img src="1450828831383683582603" alt="Krystalfister">
	</figure>@Krystalfister
</a>


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

<a href="#" class="-avatar _round_ _bordered_ -primary-">
	<figure class="-thumbnail">
		<img src="1450828831383683582603" alt="Krystalfister">
	</figure>@Krystalfister
</a>


Коментарии

Необходимо использовать класс -comments, и для каждого коментария класс -item. Я решил что будет неверно привязываться к тегу , так как можно использовать, например, дивы. Если внутри коментария есть блок с модификатором _hidden_, то изначально этот блок будет скрыт и появится только при наведении указателя мыши на коментарий.

<ul class="-comments">
	<li class="-item">
		<a href="#" class="-avatar -content">
			<div class="-thumbnail">
				<img src="https://s3.amazonaws.com/uifaces/faces/twitter/soffes/128.jpg" alt="soffes">
			</div>
		</a>
		<div class="-content">
			<div><a class="-avatar">Soffes</a><span class="-badge -error- _hidden_">12</span></div>
			Comment text here
			<div class="_hidden_">
				Buttons here
			</div>
		</div>
	</li>

	<li class="-item -offset1">
		<a href="#" class="-avatar -content">
			<div class="-thumbnail">
				<img src="https://s3.amazonaws.com/uifaces/faces/twitter/markgamzy/128.jpg" alt="markgamzy">
			</div>
		</a>
		<div class="-content">
			<div><a class="-avatar">Markgamzy</a><span class="-badge -primary- _hidden_">165</span></div>
			Comment text here
			<div class="_hidden_">
				Buttons here
			</div>
		</div>
	</li>

	<li class="-item -offset1">
		<a href="#" class="-avatar -content">
			<div class="-thumbnail">
				<img src="https://s3.amazonaws.com/uifaces/faces/twitter/teclaro/128.jpg" alt="Teclaro">
			</div>
		</a>
		<div class="-content">
			<div><a class="-avatar">Teclaro</a><span class="-badge -dark- _hidden_">67</span></div>
			Comment text here
			<div class="_hidden_">
				Buttons here
			</div>
		</div>
	</li>

	<li class="-item -offset2">
		<a href="#" class="-avatar -content">
			<div class="-thumbnail">
				<img src="https://s3.amazonaws.com/uifaces/faces/twitter/edwellbrook/128.jpg" alt="Edwellbrook">
			</div>
		</a>
		<div class="-content">
			<div><a class="-avatar">Edwellbrook</a><span class="-badge -dark- _hidden_">67</span></div>
			Comment text here
			<div class="_hidden_">
				Buttons here
			</div>
		</div>
	</li>

	<li class="-item">
		<a href="#" class="-avatar -content">
			<div class="-thumbnail">
				<img src="1450828831383683582603" alt="Krystalfister">
			</div>
		</a>
		<div class="-content">
			<div><a class="-avatar">Krystalfister</a><span class="-badge -primary- _hidden_">167</span></div>
			Comment text here
			<div class="_hidden_">
				Buttons here
			</div>
		</div>
	</li>
	</ul>


Spinners

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

Square spinner

Класс -square-spinner.

<div class="-spinner-square -primary-"></div>
<div class="-spinner-square -warning-"></div>
<div class="-spinner-square -info-"></div>
<div class="-spinner-square -dark-"></div>
<div class="-spinner-square -error-"></div>


Ring spinner

Класс -ring-spinner.

<div class="-spinner-ring -primary-"></div>
<div class="-spinner-ring -warning-"></div>
<div class="-spinner-ring -info-"></div>
<div class="-spinner-ring -dark-"></div>
<div class="-spinner-ring -error-"></div>


FB spinner

Класс -fb-spinner. Вы можете добавлять до 10 -addon.

<div class="-spinner-fb -primary-">
<span class="-addon"></span>
<span class="-addon"></span>
<span class="-addon"></span>
</div>

<div class="-spinner-fb -error-">
<span class="-addon"></span>
<span class="-addon"></span>
<span class="-addon"></span>
<span class="-addon"></span>
<span class="-addon"></span>
</div>

<div class="-spinner-fb -warning-">
<span class="-addon"></span>
<span class="-addon"></span>
<span class="-addon"></span>
<span class="-addon"></span>
<span class="-addon"></span>
<span class="-addon"></span>
<span class="-addon"></span>
</div>

<a class="-btn -primary-">With spinner
<span class="-spinner-fb _small">
<span class="-addon"></span>
<span class="-addon"></span>
<span class="-addon"></span>
<span class="-addon"></span>
<span class="-addon"></span>
<span class="-addon"></span>
<span class="-addon"></span>
</span>
</a>


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-элемент (с анимацией, которая задается классом), если он оказывается в области видимости на экране.



В ближайших планах:
  1. tilt – следит за наклоном мобильного устройства для показа увеличенного изображения (аналогично facebook paper). Я напишу про него отдельную статью.
  2. carousel – для видео и изображений. Конечно с возможностью использовать ее внутри wall с parallax-эффектом.
  3. notify – агрегатор уведомлений и сообщений (аналогичный jgrowl).



Хочу локально!


Для того чтобы развернуть maxmertkit локально, необходимо:
  1. Скачать исходники
  2. В терминале распаковать и войти в папку с проектом.
  3. $ npm install
  4. $ bower install
  5. Зайдите в папку docs: $ cd docs
  6. $ bower install
  7. Вернитесь в папку проекта: cd ..
  8. $ gulp
  9. В браузере запустите 127.0.0.1:3333/




Как изменить или добавить тему?

  1. Зайдите в sass/themes.
  2. Откройте нужный файл темы.
  3. Исправьте переменную $theme.



Чтобы добавить тему необходимо:
  1. Зайдите в sass/themes.
  2. Сделайте дубликат существующей темы или воспользуйтесь этим gist maxmertkitTheme. Помните, что название файлов должно начинаться с подчеркивания "_".
  3. Исправьте переменную $theme.
  4. Добавьте импорт темы в файл sass/main.sass.
  5. Добавьте тему к необходимым виджетам в файле mkit.json.




Как изменить или добавить размер?

Все аналогично теме, только изменился гист для размера и название переменной – $size.



Ссылки на ресурсы:


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

Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (97)

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

    p.s. Не все так любят Coffeescript, хоть бы примеры на обычном JS писали.
    • +1
      Написал уже. Что ж поделаешь? Сильно разочаровались?
      • +3
        Скажем так, я не вдохновился ни примерами ни реализацией. Интересно конечно, но использовать в своих проектах пожалуй я бы не хотел.
        • 0
          А чем, если не секрет, вдохновились бы?
          • +1
            Чем-то принципиально новым, отличающимся от имеющихся фреймворков. Пока же я просто вижу очередной фреймворк под задачи автора.

            Не поймите меня не правильно, вы проделали огномную работу и в отличии от большинства пытавшихся добили свою идею до юзабельного состояния, что уже похвально.
            • +3
              Понимаю. Спасибо.
            • +2
              Не сочтите за сарказм, реально интересуюсь — вам нужное новое ради нового или есть ряд задач, которые существующие фреймворки ну никак не в состоянии решить?
              • +1
                Новое ради нового. Не факт что я буду этот новый инструмент применять, но новые идеи (по настоящему новые и свежие) это всегда здорово.
            • +6
              Я бы сказал: «Пока я вижу очередной Bootstrap».
              • +1
                То есть бутстрап так же умеет подключать/отключать темы и размеры к любому виджету? Он же не модульный и не логичный.
                • 0
                  Ну на счет кастомизации… в 2,3,* версиях все было очень грустно с этим. В 3-ей они уже сделали все более гибко. Что до логичности — почему же нет?
                  • +4
                    Ну, можно начать с организации файлов. Для каждого элемента должен быть отдельный файл с переменными. Темы вообще никак не должны быть связаны с элементом. Еще много-много чего.

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

                    @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%);
                    
      • НЛО прилетело и опубликовало эту надпись здесь
    • +3
      Да, особенно, когда пишет автор.

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

      Хотя может быть тупо позиционирование.
      • 0
        Согласен, конечно не бывает. Это скорее поиск идеального решения, чем готовое идеальное.
  • +4
    А зачем все эти — _ — перед классами? Во всех остальных фрейморках и так понятно что происходит, а у вас придется лишний раз вспоминать какой же символ поставить перед классом
    • +2
      С такими названиями вы можете спокойно писать классы без префиксов и не бояться нечаяно переопределить класс фреймворка. А запоминаются префиксы за 3-4 минуты использования. Пользы от неймспейсов во фореймворке в разы больше.
      • –5
        Трудно согласиться, ведь если «нечаянно переопределил класс фреймворка», то скорее всего ты сам себе злобный Буратино. Мое мнение — без префиксов ваш фреймворк выглядел бы чище и семантичнее.
        • +5
          Может быть и чище, но спустя полгода, когда вы вернетесь к своему проекту, взлянув на код, вы будете однозначно знать, что это вот мой класс, а это – класс фреймворка. Плюсов больше.
          • 0
            Префиксы/неймспейсы это действительно полезная штука. Ну можно было бы префиксы сделать симпатишнее, код читался бы лучше. А если вы беспокоитесь за длину селекторов или лишние символы в классах — всегда можно прогнать через сборщик и минифицировать все.
          • 0
            Вы знаете, мне тоже первое, что бросилось в глаза — --__--__ — не очень понравилось.
            Сейчас же, после вашего комментария, я скорее нейтрально буду к этому относиться.

            Но «btn-small» смотрится симпатичней, чем "-bht _small_"
            • +2
              Спасибо. Но тогда вы не сможете добавить свой размер. Сейчас же вы просто кидаете файлик в папку с размерами, даете ему любое название и можете использовать с любым виджетом. А при «btn-small» вам надо в каждом виджете прописать размер.
    • –1
      class="-tabs _right_ _vertical_ -primary-" вообще круть, в следующей мажорной версии автор вообще переименует все классы в символы unicode.

      Меня вообще сомнения берут, что правильно имена классов начинать не с буквы.
      • 0
        С цифры нельзя, это я точно знаю. На счет тире и подчеркиваний тоже не знаю, не пробовал даже.
        • 0
          Можно. Два тире – нельзя.
      • 0
        Причины сего описаны чуть выше. Виджет, два модификатора, тема. Вроде все понятно.
        • +8
          Почему было не назвать их w- t- s- m- a-? Гораздо более очевидно.
          • 0
            Вы имеете ввиду w-tabs? Возможно. Но фреймворк давно стартовал, поэтому я решил поддерживать старые названия.
            • 0
              а почему бы просто не оставить обратную совместимость в новых версиях?
  • +2
    Я конечно не frontend разработчик и может что-то недопонимаю, но почему вы переняли у bootstrap float: left для grid? float автоматически блокирует центрирование grid-а, которое очень часто необходимо.
    • 0
      Центрировать можно отступами -offset#.
      • 0
        Это подходит только для части случаев. В большинстве же приходится извращаться с контейнерами.
      • 0
        Могу ли я вас попросить немного кода на вашем фреймворке, чтобы было понятнее? Например div.container, который содержит 3 колонки шириной 25%, которые выровнены по центру относительно div.container.
        • 0
          Да, с 25% по-центру с 12-ти колонками не выйдет. Это подходит для большей части задач. Приблизительно так:
          <div class="-container">
          
          <div class="-row">
          <div class="-col3 -offset2"></div>
          <div class="-col3"></div>
          <div class="-col3"></div>
          </div>
          
          </div>
          
          • +15
            Забавно, у меня всегда были другие представления о центрировании:

  • +6
    А мне нравится. Спасибо — Вы сделали большую работу.
    • +1
      Спасибо что оценили. Было, откровенно говоря, не просто.
  • +1
    У меня дежавю или вчера этот пост уже был?
    • 0
      Был-был. Извините. Я видимо в процессе правки нажал какое-то сочетание клавиш и он без предупреждения был опубликован незаконченный. :(
  • 0
    Достаточно просто пройтись по примерами на сайте, дабы увидеть как где-то что-то ползет или не так появляется.
    Стоит последняя на данный момент версия Google Chrome 35.0.1916.114 m. Разрешение экрана 1440x900.
    Само по себе такое немного настораживает, но не критично.
    • +1
      Ого. Где? Если не сложно, скрин на гитхаб. Я исправлю.
  • 0
    Виджеты -> Inputs inside group. У меня в хроме кривой.

    s7.hostingkartinok.com/uploads/images/2014/06/b6d45d68aa7eb9000d26cedf16119388.gif
    • 0
      Спасибо. Добавляю на гитхаб.
  • +2
    Неплохо, но, к сожалению, не очень красиво :( жаль, что из «дизайнерских» css фреймворков есть только semantic-ui
  • 0
    А какие ограничения по версиям браузеров?
    • 0
      IE 9+
  • +2
    А может быть вам стоит сделать фреймворк для веб-дизайнеров? Которые хотят делать прототипы в коде. Для разработчиков и так уже много всего. Надо что-то с низким порогом входа. Без всяких там наворотов, чтобы как конструктор собирался. Думаю, займете нишу.
    • 0
      Спасибо за совет. На самом деле это в плане. )
  • 0
    По-моему, хороший инструмент, вполне может заменить bootstrap в многих use case'ах, хотя не спорю, что инструменты разные.
    За coffeescript отдельный бонус в карму.
    • 0
      Спасибо! Но почему-то абсолютную модульность sass с динамически подключаемыми к виджетам темами и размерами никто не отметил. Эх. :)
      • 0
        SASS — это замечательно, но это язык, а не библиотека компонентов. В данном случае я вижу для себя смысл попробовать вашу библиотеку там, где раньше я задумывался о bootstrap.
        • 0
          Еще раз спасибо. :) Я имел ввиду возможность, в отличие от бутстрапа, быстро кастомизировать (менять/удалять/добавлять) темы для виджетов. Даже без правки sass.
  • +3
    Извините за занудство, но читать maxmertkit язык ломается и никакой ассоциации не возникает. Т.е. спустя день-два. я вряд ли смогу воспроизвести это название, даже если захочу.

    p.s. А ваш сайт оказался уже в закладках (: видите, я и сейчас не смог вспомнить, что уже пробовал его.
    • 0
      Простите, я не умею названия придумывать :( Честно пытался, никак.
      • +1
        Ну а как насчет взять заголовок статьи и назвать Ideal или как-то так.
  • –2
    не дай бох, чтобы однажды заехал проект на этом «чуде».
    • 0
      Не хочу вести себя как драгдиллер, но вы попробуйте. Вам понравится :)
  • +6
    Колоссальная работа, но не взлетит. Потому что ничего принципиально нового по сравнению с bootstrap вы не предлагаете. Пусть даже у вас лучше, но за bootstrap стоит комьюнити и экосистема готовых плагинов.
    И второй мелкий момент. Лично мне не нравится стандарт именования классов, который начинается со слеша и дефиса. Читается плохо.
    В любом случае, спасибо.
    • 0
      Я задумался над тем, чтобы дать возможность менять префиксы или убирать их совсем. Добавлю-ка я в гитхаб фичу.
  • +6
    _синтаксис_ -уебищен- -имхо
    • 0
      Если честно, не знаю что вам ответить. Разве что тег sarcasm забыли. Если вас действительно интересуют причины, почитайте комментарии выше. Или используйте-твиттер-бутстрап-его-легче-кастомизировать.
      • 0
        причины понятны, к ним вопросов нет. вопросы к реализации) есть такой фреймворк например, uikit. они используют префикс ui- в своих классах, и выглядит это и красиво, и лаконично. из названия и так должно быть понятно, виджет это или модификатор. я сам foundation использую, если что. там вообще префиксов нет и проблем это никогда не создавало для меня.
        • +1
          У меня был печальный опыт с огромным приложением, где страшно было править css. Я уже добавл фичу в гитхаб. В следующей версии сможете поменять любые префиксы и постфиксы на нужные вам. Или убрать совсем. Тут, к счастью, это не сложно сделать.
  • +1
    Проделана большая работа, пусть вы изобрели новый велосипед, спасибо вам.
    • 0
      Спасибо.
  • +3
    Дорогой Автор! Вы — два раза большой молодец!

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

    Будьте уверены — это нужно. Не согласны обычно те, кто сам ничего такого не создает ;)
    Спасибо.
    • 0
      Спасибо! Останавливаться не собираюсь, сам использую во всех проектах. Надеюсь привнести что-нибудь полезное в opensource сообщество.
  • 0
    Кто-то может сказать почему так популярна эта палитра у разработчиков? Встречаю уже не первый раз. Она ведь жутковато смотрится, цвета слишком насыщенны что-ли.

    За сам фреймворк спасибо, всегда вызывает уважение доведенный до релиза продукт. Возможно попробую версию с изменяемыми/нормальными префиксами. Сейчас как раз переписываю один проект с бутстрапом 2, подумывал о более простой и удобной замене.
    • 0
      Думаю, что pure вам понравится.
    • 0
      Вы можете легко добавить свои или поменять эти. Здесь есть видео – http://maxmert.com/start.
      Префиксы вместе с багфиксами и carousel.js появятся в 1.0.5
  • +4
    Автор, вы проделали большую работу и вы — молодец!

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

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

    Я, кстати, не фанатик css валидатора, div/табличной верстки (или на что там еще сейчас тру-верстальщики кипятком писают?). Всему свое место. Но вот семантика должна быть и это не обсуждается. Иначе, если в проекте больше пары страничек, то изменения стилей или добавления новых страниц/элементов превращается в ад.
  • –6
    <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 фреймворк. Но всем же пох***
    • 0
      Хотя бы один из минусующих отписал в чём я не прав, особенно тот, что в карму плюнул.

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

        Успехов!
        • –2
          Про label знаем.

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

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

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

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

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

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

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

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

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

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

          Я комментировал код из статьи, но люди видимо привыкли к такому говнокоду.
          • –3
            В общей сложности это выглядит примерно так:

            Автор: Гаспада, я написал кнегу в каторой есть маи стихи и росказы
            Комментарий 1: Аффта пишы исчо (+6)
            Комментарий 2: Спасибо аффтар (+11)
            Комментарий 3: Автор, вы бы писать сначала научились (-10)
            \- Автор: Ты бы прачитал сночало кнегу
          • 0
            Ох не люблю я спорить с неправыми в интернете, но так и быть. Будьте добры, покажите сначала ваши работы, чтобы я смог оценить ваши знания и уровень не только по двум вашим замечаниям о тегах.
            • –2
              Ну начинается. Мы разве где-то обсуждаем мои работы? Нет!
              Я где-то публиковал свои фреймворки в этой статье и хвалился на весь белый свет? Нет!
              Я разве указал на ошибки, которых нет или это не ошибки? Опять нет!
              Тогда при чем мои работы?
              Или вы считаете такие детские ошибки, для человека, который пишет свои фреймворки — мелочь?

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

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

                Тема себя исчерпала. Боюсь, вынужден повториться: успехов! ;)
                • –4
                  Ну допустим у меня и базовые знания. Но я смог найти ошибки у мастера, значит я превзошел мастера Йоду!

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

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

                  Автор: Гаспада, я написал кнегу в каторой есть маи стихи и росказы
                  Комментарий 1: Аффта пишы исчо (+6)
                  Комментарий 2: Спасибо аффтар (+11)
                  Комментарий 3: Автор, вы бы писать сначала научились (-10)
                  \- Автор: Ты бы прачитал сночало кнегу
                  \-- Комментарий 3: Зачем мне читать книгу, если тут речь неграмотная?
                  \--- Автор: Ты чо самый умный? Пакажи сваи кнеги для ночала
                  \---- Комментарий 3: Я не буду показывать свои книги, ибо разговор не о них.
                  \----- Автор: «Комментатор 3» не самнивайся я писать умею а то что я сделал несколько ошыбок так это потому чта сложно держать всю кнегу в поле зрения когда ты пишышь ее один
                  • 0
                    Ник у вас говорящий.
      • 0
        Постскриптум: был бы очень благодарен (и не только я), если бы вместо язвительных коментариев вы кидали issues в гитхаб. Опенсорс сообщество же! :)
        • –3
          1) Меня там нет. Я есть в других местах
          2) Зачем мне писать issues где-то там, если я комментировал статью и примеры из неё? Мне надо пойти и поискать эти примеры на гихабе? А они там точно есть?
          3) Я лишь сделал замечание, пусть и в грубой форме, на основы HTML (выше я уже писал про это)
  • +1
    За класс для комментариев спс, вот этого не хватало в бутстрапе.
    Как куда-нибудь вставлю ваш фреймворк, скину ссылку ))
    • 0
      Спасибо.
  • 0
    Спасибо. Огромный труд. Принципиально попробую.
    Но цветовая гамма смущает. Выглядит аляповато и проект от этого проигрывает. Дизайнер необходим.

    • 0
      Спасибо. Если встретите недочеты, пожалуйста, пишите на гитхаб, я быстро исправлю.
  • –1
    Вот нафига опять свой велосипед изобретать? Нет, чтобы написать файл шаблона для Бутстраба + расширяющие классы для отсутствующих элементов. Нет, нужно все переделать, Бутстрап же лохи писали…
    • +1
      Выше в коментариях я писал почему и зачем. Бутстрап писали не лохи, но сделали они его нелогичным и дубовым. Добавьте туда, скажем, новую тему night для всех элементов, поймете о чем я говорю. Бутстрап – не панацея.
      • +1
        Ну давайте на чистоту, бутстрап и не предполагалось использовать как CSS фреймворк полноценный. Это коллекция готовых стилей, с помощью которых можно не особо заморачиваясь набросать сносные интерфейсики, админки и т.д. Если у вас кастомный дизайн — то явно что-то другое нужно.
        • +1
          Вроде как то же самое, набор стилей (он всегда будет кастомный). Даже версию 3.0 не предполагалось использовать как полноценный фреймворк? Дубовость даже в 3.0 никуда не исчезла.
          • +2
            Да, его позиционируют как фреймворк, но никто не говорил о универсальности. Эта штука очень полезна, когда нету денег на начальный дизайн и только.
  • 0
    Планируется ли делать грид вариативным под размер, как в бутстрап 3? Т.е. когда есть разные классы для разных экранов (col-xs-12 col-md-6 col-lg-3) — очень удобная штука.
    • 0
      Да, я сделаю! Добавил feature в гитхабе.
  • 0
    Использовать это не буду, но это заставило меня вновь задуматься о пространствах имён. И добавлять к классам темы её название с помощью переменных Sass/Slim/Jade/… – например, имя проекта.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.