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>
. Тег
<small>
можна використовувати для підписів, якщо вони передбачені.
 
 
<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="http://farm9.staticflickr.com/8238/8517415655_ac223034a7_b.jpg">
		</div>
		<h4>Geisha <small>Kyoto, Japan</small></h4>
	</div>

	<div class="-col4">
		<div class="-thumbnail -shadow-lifted-">
			<img src="http://farm4.staticflickr.com/3279/2824620279_4efda6b8cf_b.jpg">
		</div>
		<h4>Geisha <small>Kyoto, Japan</small></h4>
	</div>

	<div class="-col4">
		<div class="-thumbnail -shadow-lifted-">
			<img src="http://farm3.staticflickr.com/2651/3743922119_f7140f01c8_z.jpg">
		</div>
		<h4>Geisha <small>Kyoto, Japan</small></h4>
	</div>

</div>

 
Краще використовувати семантично вірні теги
<figure>
для віджету
-thumbnail
. Крім того можна додати
<caption>
.
 
 
<div class="-row">
			
	<div class="-col4">
		<figure class="-thumbnail">
			<div class="-shadow-lifted-">
				<img src="http://farm9.staticflickr.com/8238/8517415655_ac223034a7_b.jpg">
			</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="http://farm4.staticflickr.com/3279/2824620279_4efda6b8cf_b.jpg">
			</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="http://farm3.staticflickr.com/2651/3743922119_f7140f01c8_z.jpg">
			</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>

 
Міняйте розташування
<caption>
, додаючи модифікатори _left_ і _right_ .
 
 
<div class="-row">
			
	<div class="-col8 -offset4" style="position: relative">
		<figure class="-thumbnail">
			<div class="-shadow-curve-">
				<img src="http://farm9.staticflickr.com/8238/8517415655_ac223034a7_b.jpg">
			</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="http://farm4.staticflickr.com/3279/2824620279_4efda6b8cf_b.jpg">
			</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="https://s3.amazonaws.com/uifaces/faces/twitter/krystalfister/128.jpg" alt="Krystalfister">
	</figure>@Krystalfister
</a>

 
Модифікатор _round_ для заокруглення.
 
 
<a href="#" class="-avatar _round_">
	<figure class="-thumbnail">
		<img src="https://s3.amazonaws.com/uifaces/faces/twitter/krystalfister/128.jpg" alt="Krystalfister">
	</figure>@Krystalfister
</a>

 
Модифікатор _border_ для кордону.
 
 
<a href="#" class="-avatar _round_ _bordered_ -primary-">
	<figure class="-thumbnail">
		<img src="https://s3.amazonaws.com/uifaces/faces/twitter/krystalfister/128.jpg" alt="Krystalfister">
	</figure>@Krystalfister
</a>

 
 
Коментарі
Необхідно використовувати клас -comments , і для кожного комментария клас -item . Я вирішив що буде невірно прив'язуватися до тегу
<li>
, так як можна використовувати, наприклад, діви. Якщо всередині комментария є блок з модифікатором _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="https://s3.amazonaws.com/uifaces/faces/twitter/krystalfister/128.jpg" 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.  
  3. carousel — для відео та зображень. Звичайно з можливістю використовувати її всередині wall з parallax-ефектом.
  4.  
  5. notify — агрегатор повідомлень і повідомлень (аналогічний jgrowl).
  6.  
 
 
 

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

Для того щоб розгорнути maxmertkit локально, необхідно:
 
     
  1. Завантажити вихідні коди
  2.  
  3. У терміналі розпакувати і увійти в папку з проектом.
  4.  
  5. $ npm install
  6.  
  7. $ bower install
  8.  
  9. Зайдіть в папку docs :
    $ cd docs
  10.  
  11. $ bower install
  12.  
  13. Поверніться в папку проекту:
    cd ..
  14.  
  15. $ gulp
  16.  
  17. У браузері запустіть
    http://127.0.0.1:3333/
  18.  
  
 
 
Як змінити або додати тему?
 
     
  1. Зайдіть в sass / themes .
  2.  
  3. Відкрийте потрібний файл теми.
  4.  
  5. Виправте змінну $ theme .
  6.  
 
 
Щоб додати тему необхідно:
 
     
  1. Зайдіть в sass / themes .
  2.  
  3. Зробіть дублікат існуючої теми або скористайтеся цим gist maxmertkitTheme . Пам'ятайте, що назва файлів має починатися з підкреслення "_".
  4.  
  5. Виправте змінну
    $theme
    .
  6.  
  7. Додайте імпорт теми в файл sass / main.sass .
  8.  
  9. Додайте тему до необхідних віджетів у файлі mkit.json .
  10.  
  
 
 
Як змінити або додати розмір?
Все аналогічно темі, тільки змінився ГИСТ для розміру і назва змінної —
$size
.
 
  
 

Посилання на ресурси:

 
     
  • maxmert.com — документація, приклади.
  •  
  • github — исходники; дуже прошу робити Форк і виправляти помилки, якщо ви знаєте як і є трохи часу.
  •  
  • issues — повідомити про ощибки і багах.
  •  
  • me@maxmert.com — якщо у вас щось не виходить або ви хочете розібратися, пишіть!
  •  
 
    
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.