Framework

Structure

.
├── index.html
├── Gruntfile.js
├── package.json
├── _ui
│   ├── style.css
│   ├── fonts
│   ├── img
│   └── js
│      ├── jquery.js
│      ├── modernizr.js
│      ├── plugins.js
│      └── main.js
├── _assets
└── _media

index.html

Contains basic structure.

Gruntfile.js

Grunt configuration file.

package.json

File used by Grunt. Contains basic info about project and dependencies.

_ui

This folder contains all UI related files.

style.css

This is where we write all those cool css stuff. It also contains normalize.css, some helpers, objects and media queries. Please see my snippets repo for basic structure of elements included in style.css, I’ve put there structure of comments, post, blockquotes, tags and many more elements.

plugins.js

This file contains Respond.js polyfill to add min/max-width and media query support. It also contains development tools and some other plugins.

script.js

This file is where you work on JS stuff. There’s already a basic structure.

__assets

In this folder you can put not converted fonts, PSD’s including sprite.psd, documentations from client, etc.

__media

This is where you hold videos, placeholder images for articles, user avatars and other elements not directly connected with UI.

Development Tools

Developments Tools is a custom set of tools that can help you during development. Currently this set is rather small but it will be expanded in future.

Tools

cssRefresher

Simple css refresh script with no UI. Options:

• `interval` - Time between checking if file was modified.
• `idle` - Number of checks after which file is beign checked less frequently. Counter is reseted when file was modified.

windowSize

This tool displays window size on bottom right side of screen. It’s useful during creating responsive websites.

Loading tools

DevTools should be loaded only in development stage, that’s why there’s a special area in script.js at the beginning of file which helps you to do that.

To load DevTool, use this command:

DevTools.loadModule('toolName', options);

Grunt

Grunt is JavaScript task runner. Esuna uses it to compress and concat css, js files.

Please follow Grunt documentation for more info.

Base

Separators

<hr>
<hr class="separator--dashed">
<hr class="separator--subtle">

Modifiers

• .separator--dashed
• .separator--subtle

Forms

Vertical mode

<form action="" class="form--aligned">
	<div class="input-wrap">
		<label for="username">Username: </label>
		<input type="text" id="username" name="username">
	</div>
	<div class="input-wrap">
		<label for="password">Password: </label>
		<input type="password" id="password" name="password">
	</div>
	<div class="form-actions text--left">
		<input type="submit" name="submit" value="Send" class="btn btn--primary">
	</div>
</form>

Horizontal mode

<form action="">
	<div class="input-row">
		<div class="input-wrap">
			<label for="name">Name: </label>
			<input type="text" id="name" name="name">
		</div>
		<div class="input-wrap">
			<label for="email">Email: </label>
			<input type="email" id="email" name="email">
		</div>
		<div class="input-wrap">
			<label for="url">URL: </label>
			<input type="url" id="url" name="url">
		</div>
	</div>
	<div class="input-wrap">
		<label for="message">Message</label>
		<textarea name="message" class="full" id="message" rows="5"></textarea>
	</div>
	<div class="form-actions">
		<input type="submit" name="submit" value="Send" class="btn btn--primary">
	</div>
</form>

Classes

.input-row

Force 100% width of parent and display inner inputs inline.

.input-wrap

Basic input wrapper, used to add margins and manipulate flow of elements.

.form-actions

Contains form submission buttons, cancel, submit, etc.

Modifiers

.form--aligned

Align labels to left and make them equal width.

Objects

Rows

<div class="row">
	<div class="cell cell-4of12">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis asperiores porro dolor quos eos animi non rem laborum magni natus alias temporibus quas explicabo fuga ipsam beatae qui. Quam rem.
	</div>
	<div class="cell cell-8of12">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt pariatur harum dicta aperiam delectus modi qui vitae sit eos saepe ratione eaque sint error sapiente omnis quis aspernatur voluptas architecto!
	</div>
</div>

<div class="row">
	<div class="cell cell-8of12">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis asperiores porro dolor quos eos animi non rem laborum magni natus alias temporibus quas explicabo fuga ipsam beatae qui. Quam rem.
	</div>
	<div class="cell cell-4of12">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt pariatur harum dicta aperiam delectus modi qui vitae sit eos saepe ratione eaque sint error sapiente omnis quis aspernatur voluptas architecto!
	</div>
</div>

.row

Main wrapper of columns.

.cell

Single column.

.cell-XofY

Size of column. X is number between 1 and 11 and Y is number between 1 and 12 except 7 and 11. Example: .cell-5of12, .cell-4of6.

Sprites

Sprites default file is _ui/img/sprite.png. Default single sprite size is 16x16px.

Don’t forget to update background-size property in retina media query.

Usage

<i class="s s--email"></i>

Navigations

Usage

<ul class="nav">
	<li><a href="" class="active"></a></li>
	<li><a href=""></a></li>
</ul>

Modifiers

.nav--stacked

Throw list into vertical mode.

.nav--fluid

Force navigation to fill 100% of its parent width.

Buttons

Usage

<p>
	<a href="#" class="btn btn--primary">Primary button</a>
	<a href="#" class="btn btn--secondary">Secondary button</a>
	<a href="#" class="btn btn--tertiary">Tertiary button</a>
</p>
<p>
	<a href="#" class="btn btn--positive">Positive button</a>
	<a href="#" class="btn btn--negative">Negative button</a>
	<a href="#" class="btn btn--inactive">Inactive button</a>
</p>

Button size

Use left and right paddings to manipulate button size.

• .btn--small
• .btn--large
• .btn--huge
• .btn--wide
• .btn--full

Button font size

Use font size to manipulate button size.

• .btn--alpha
• .btn--beta
• .btn--gamma
• .btn--delta
• .btn--epsilon
• .btn--zeta

Natural button

.btn--natural

It inherits parent font and line height.

Button functions

• .btn--primary
• .btn--secondary
• .btn--tertiary
• .btn--positive
• .btn--negative
• .btn--inactive

Button border radius

.btn--soft

Rounded button.

.btn--hard

No border radius.

Groups

<p class="group--horizontal">
	<a href="#" class="btn btn--primary">Button 1</a>
	<a href="#" class="btn btn--secondary">Button 2</a>
	<a href="#" class="btn btn--tertiary">Button 3</a>
</p>

<p class="group--vertical">
	<a href="#" class="btn btn--primary">Button 1</a>
	<a href="#" class="btn btn--secondary">Button 2</a>
	<a href="#" class="btn btn--tertiary">Button 3</a>
</p>

<form action="">
	<div class="input-wrap group--horizontal group--full">
		<input type="text" id="username" name="username" placeholder="Name" class="cell cell-4of12">
		<input type="email" id="email" name="email" placeholder="Email" class="cell cell-4of12">
		<input type="url" id="url" name="url" placeholder="URL" class="cell cell-4of12">
	</div>
</form>

<form action="">
	<div class="input-wrap group--vertical">
		<input type="text" id="username" name="username" placeholder="Name">
		<input type="email" id="email" name="email" placeholder="Email">
		<input type="url" id="url" name="url" placeholder="URL">
	</div>
</form>

.group--horizontal

Throws list into horizontal mode. You can change width of elements using row.

.group--vertical

Throws list into vertical mode.

Media object

You can use this object in many cases, e.g. separate user avatar from comment text, separate post date from post content, etc.

Please see this article for more info about this object.

Usage

<div class="media">
	<div class="media__img"></div>
	<div class="media__body"></div>
</div>

Modifiers

.media__img--rev

Align img object to right.

Notifications

Usage

<div class="notification notification--info">Sample informational notification.</div>

Modifiers

• .notification--success
• .notification--warning
• .notification--error
• .notification--info

Bar

Bar is an object which allow you to manipulate bottom margin.

Usage

<div class="bar bar--huge">After this content we have a lot of free space.</div>

Modifiers

• .bar--small
• .bar--large
• .bar--huge

Navicon

It’s an icon based on font size . You can use it in responsive navigations.

Usage

<i class="navicon"></i>

Arrows

You can use those arrows in dropdowns, ‘read more’ links, etc. Arrow size is based on font-size.

Usage

<i class="arrow arrow--up"></i>
<i class="arrow arrow--right"></i>
<i class="arrow arrow--down"></i>
<i class="arrow arrow--left"></i>

Modifiers

• .arrow--up
• .arrow--right
• .arrow--down
• .arrow--left

Pagination

Usage

<div class="pagination">
	<ul>
		<li class="pagination__prev"><a href="#">&lt; Previous</a></li>
		<li><span class="current">1</span></li>
		<li><a href="">2</a></li>
		<li><a href="">3</a></li>
		<li><a href="">4</a></li>
		<li class="pagination__next"><a href="#">Next &gt;</a></li>
	</ul>
</div>

Dropdown

Usage

<div class="dropdown">
	<div class="dropdown__toggle"></div>
	<ul class="dropdown__content">
		<li><a href=""></a></li>
		<li><a href=""></a></li>
	</ul>
</div>

Tags

Usage

<div class="tags">
	<a href="#">tag 1</a>
	<a href="#">tag 2</a>
	<a href="#">tag 3</a>
</div>

Modifiers

.tags--separated

Throws tags into comma separated mode.

Comments area

Basic structure of comments area you can use in most of wordpress projects.

Usage

<div class="comments-area">
	<div class="comments-area__inner">
		<h2 class="comments-area__title">Comments</h2>
		<ul class="comments">
			<li class="comment">
				<img class="comment__photo" src="_media/avatar.png" alt="Avatar of user">
				<div class="comment__content">
					<div class="comment__meta">
						Posted by: <a href="">Name</a>, April 25, 2013, 5:03pm
					</div>
					<div class="comment__text">
						<p></p>
					</div>
				</div>
			</li>
		</ul>
		<!-- /.comments -->

		<h2 class="comments-area__title">Add Comment</h2>
		<form action="/" class="comments-form">
			<div class="input-wrap">
				<label for="name">Name:</label>
				<input id="name" type="text" name="name" placeholder="required">
			</div>
			<div class="input-wrap">
				<label for="email">Email:</label>
				<input id="email" type="text" name="email" placeholder="optional">
			</div>
			<div class="input-wrap">
				<label for="message">Message:</label>
				<textarea id="message" name="message" rows="5" placeholder="required"></textarea>
			</div>
			<div class="form-actions">
				<input type="submit" name="submit" value="Submit" class="btn btn--primary">
			</div>
		</form>
		<!-- /.comments-form -->
	</div>
	<!-- /.comments-area__inner -->
</div>
<!-- /.comments-area -->

Helpers

Size

.half

50% width of parent.

.full

100% width of parent, also applies border-box box-sizing mode.

Display

.hidden

Hide from both screen readers and browsers.

.invisible

Hide visually and from screen readers, but maintain layout.

.visuallyhidden

Hide only visually, but it available for screen reader.

Clearfix

.cf

Clear floats.

Text

Alignment

.text--left

Align text to left.

.text--center

Align text to center.

.text--right

Align text to right.

Special modifiers

.text--reverse

Reverse text. Mostly used to obfuscate emails.

.text--truncate

Truncate text by adding ….

.text--break

Break words longer than container width.

.text--nowrap

Display text in one line - prevents from wrapping.

Font sizes

.text--smaller

Smaller font size.

.text--larger

Larger font size.

Font weights

.text--lighter

Lighter font weight.

.text--bolder

Bolder font weight.

.text--light

Light(300) font weight.

.text--normal

Normal(400) font weight.

.text--semi

Semi(600) font weight.

.text--bold

Bold(700) font weight.

.text--extra

Extra bold(800) font weight.

Colors

.color--primary

Primary color used on website.

.color--secondary

Secondary color used on website.

.color--tertiary

Tertiary color used on website.