Checkbox and radio button

Checkbox and radio button with custom design.

Markup

Checkbox:

<div class="checkbox">
	<input class="checkbox__input" id="my_checkbox" type="checkbox" name="my_checkbox" value="yes" checked="checked">
	<label class="checkbox__label" for="my_checkbox">
		<span class="checkbox__button"></span>
		<span class="checkbox__text">My checkbox</span>
	</label>
</div>

Radio button:

<div class="radiobutton">
	<input class="radiobutton__input" id="my_radio" type="checkbox" name="my_radio" value="dog" checked="checked">
	<label class="radiobutton__label" for="my_radio">
		<span class="radiobutton__button"></span>
		<span class="radiobutton__text">My radio button</span>
	</label>
</div>

Skin

Set checkbox_default_skin or modules_default_skin to true to enable default skin.

Examples

Code blocks

Nice code examples with highlighting.

Markup

<pre class="code"><code class="language-coffescript">alert 'Hello world!'</code></pre>
<div class="text">
	<pre><code class="language-coffescript">alert 'Hello world!'</code></pre>
</div>

Skin

Set code_default_skin or modules_default_skin to true to enable default skin.

Configuration

code_class_prefix

Type: String. Default: hljs-.

Prefix for color scheme classes.

Tools

Examples

alert('Hello world!');

Fade

Fading text.

Markup

<div class="fade" title="Very long text">Very long text</div>

Caveats

Works best in Webkits (via mask-image). Works acceptable in Firefox (via SVG mask): fade width is fixed. Fades with ellipsis in any IE.

Examples

Alice was beginning to get very tired of sitting by her sister on the bank...

Fire

Fire an event to a specified element on click on the element.

Markup

<span data-fire="slider-next" data-target=".js-portfolio" data-attrs="1,2,3">Next</span>

This is the same as:

triggerEvent($$('.js-portfolio', 'slider-next', [1, 2, 3]);

HTML attributes

data-fire

Event name.

data-target

Target element selector. Required if data-closest is not specified.

data-closest

Target element selector: search only through element ancestors. Required if data-target is not specified.

data-attrs

Comma separated attributes list: any data you want to pass to an event handler.

Examples

Click!

Form

Basic form controls: inputs, textareas, buttons, form layouts and helpers.

Markup

Controls:

<input type="text" class="field" name="name">
<textarea type="text" class="field field_area" name="message"></textarea>
<input type="submit" class="button" value="Send!">

Block controls:

<input type="text" class="field field_block" name="name">
<input type="submit" class="button button_block" value="Send!">

Field with unit:

<div class="field-with-unit field-with-unit_left">
	<input id="summ" type="text" pattern="\d*" class="field field-with-unit__field">
	<label for="summ" class="field-with-unit__unit"></label>
</div>

Layout:

<form class="form form_block">
	<div class="form__group">
		<div class="form__row">
			<label for="field1" class="form__label">Name</label>
			<div class="form__widget"><input id="field1" type="text" class="field"></div>
		</div>
		<div class="form__row">
			<label for="field2" class="form__label">Email</label>
			<div class="form__widget"><input id="field2" type="email" class="field"></div>
		</div>
	</div>
	<div class="form__row">
		<input type="submit" class="button js-button-1" value="Boom!">
	</div>
</form>

Messages:

<div class="alert">Thank you!</div>
<div class="alert alert_warning">Are you sure?</div>
<div class="alert alert_error">Out of cheese</div>

States

.field.is-disabled / .button.is-disabled / .disablable.is-disabled

Disabled state of a control. Should be combined with disabled attribute where appropriate.

.form.is-success / .form.is-error

Shows/hides success/error messages:

<form class="form is-success">
	<div class="form__success alert">Thank you!</div>
	<div class="form__error alert alert_error">Go away!</div>
</form>

HTML attributes

data-autolock

Disable submit button on form submit:

<form class="form" data-autolock>

Skin

Set form_default_skin or modules_default_skin to true to enable default skin.

Configuration

form_focus_color

Type: CSS color value.

Color of focus outline.

Examples

Thank you!
Are you sure?
Out of cheese

Lists

Unordered list with dashes (—) as bullets and basic ordered list.

Markup

<ul class="list">
	<li>Dog</li>
	<li>Cat</li>
	<li>Mouse</li>
	<li>Moose</li>
</ul>
<ol class="list-num">
	<li>Dog</li>
	<li>Cat</li>
	<li>Mouse</li>
	<li>Moose</li>
</ol>

Modifiers

.list.list_inside / .list-num.list-num_inside

Places bullets inside container.

Configuration

list_inside

Type: Boolean, default: false.

If true places bullets inside container (by default bullets are outside).

Caveats

  1. If list_inside is false (default) automatically places bullets inside container (like list_inside = true does) when window width is less than max_width or content_max_width global variable.

  2. ULs inside .text class are treated as .list. OLs inside .text class are treated as .list-num.

Examples

Media object

Media object from OOCSS.

Markup

<div class="media">
	<img src="http://placedog.com/200/200" alt="" class="media__img">
	<p class="media__body">Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, “and what is the use of a book,” thought Alice “without pictures or conversation?”</p>
</div>

Modifiers

.media\__img.media\__img_rev

Reversed image location (right instead of left).

<img src="http://placedog.com/200/200" alt="" class="media__img media__img_rev">

Examples

Modal

Modal popup.

Markup

<t-modal class="modal is-hidden">
	<header class="modal__header">
		<h3 class="modal__title">Hello world</h3>
		<button class="close js-modal-dismiss"></button>
	</header>
	<div class="modal__body">
		...
	</div>
	<footer class="modal__footer">
		<div class="button js-modal-dismiss">Cancel</div>
		<div class="button js-modal-commit">Save</div>
	</footer>
</t-modal>

Events

tamia.modal.open

Fire this event on t-modal DOM element to open popup.

<t-modal class="modal pony is-hidden">...</t-modal>

From JavaScript:

triggerEvent($('.pony'), 'tamia.modal.open');

Or via link:

<a href="#" class="" data-fire="tamia.modal.open" data-target=".js-popup">Open</a>

tamia.modal.close

Fire this event on t-modal DOM element to close popup.

tamia.modal.commit

Fires when user clicks Save button.

You can prevent popup from closing:

onEvent($('.js-popup', 'tamia.modal.commit', () => {
	return false;
}));

tamia.modal.dismiss

Fires when user click Cancel button.

HTML attributes

data-modal-close-on-shade

Disable modal closing by clicking on a shade.

<t-modal class="modal is-hidden" data-modal-close-on-shade="no">

data-modal-open

Automatically open modal on page load.

<t-modal class="modal is-hidden" data-modal-open="yes">...</t-modal>

Skin

Set modal_default_skin or modules_default_skin to true to enable default skin.

Configuration

Type: CSS color value.

Color of popup shade layer.

Examples

Open popup

Password field

Password field with toggle to show characters.

Markup

<t-password class="password">
	<input type="password">
</t-password>

States

.password.is-ok

Browser is supported.

.password.is-unlocked

Password characters are visible.

Skin

Set password_default_skin or modules_default_skin to true to enable default skin.

Examples

Print

Print stylesheet.

Configuration

site_domain

Type: String.

Site domain (for example, example.com) that will be printed.

Caveats

Use .no-print class to hide elements in print version and .print to show (hidden on screen).

Rich typograhy

Classes and tweaks for better typography.

Markup

Abbreviations with spacing

<div class="text">
	<p><abbr>PNG</abbr>, <abbr>GIF</abbr> (animated or not) and <abbr>JPEG</abbr> formats.</p>
</div>

The best ampersand

Nuts <span class="amp">&amp;</span> Bolts.

Hanging punctuation

Awesome Web Typography with <span class="slaquo"> </span> <span class="hlaquo"></span>Richtypo”'

Configuration

richtypo_global_ligatures

Type: Boolean. Default: true.

Enables ligatures on body (just headers otherwise).

richtypo_extra_features

Type: Boolean or List. Default: false.

Extra OpenType features, eg. "ss01", "ss03", "salt" (richtypo_global_ligatures should be enabled).

richtypo_figures

Type: String. Default: proportional.

Figures type: proportional, oldstyle (richtypo_global_ligatures should be enabled).

richtypo_proper_abbr

Type: Boolean. Default: true.

Enables small caps in abbreviations (if your font supports them).

Tools

Rouble

Russian Rouble sign.

Markup

<p>100 <span class="rub">Р</span></p>

Caveats

  • Only one font (Arial) is available.

Examples

499 Р

Select

Select with custom design

Markup

<t-select class="select">
	<select>
		<option selected>Please select an option</option>
		<option>Dog</option>
		<option>Cat</option>
		<option>Mouse</option>
		<option>Moose</option>
	</select>
</t-select>

Skin

Set select_default_skin or modules_default_skin to true to enable default skin.

Examples

Spinner

Loading indicator (spinner) with animation.

Markup

<div class="spinner"></div>

<div class="is-loading">
	<div class="loader"></div>
</div>

.loader is the same as .spinner but it’s hidden by default. It’s visible only when .is-loading state is set on ancestor element.

Modifiers

.spinner.spinner_big

Bigger size.

More sizes

You can set any spinner size changing font-size property.

.spinner_huge {
	font-size: 64px
}
<div class="spinner spinner_huge"></div>

Component loading indicator

import attachSpinner from 'tamia/src/modules/spinner';
// Show loader
let hideSpinner = attachSpinner($('.pony'));
// Hide loader
hideSpinner();

That will blocks all container’s content with a semi-transparent layer and shows spinner in the middle.

To change shade layer’s color set loader_shade_color variable.

Examples

Switcher

Nice looking radio buttons group.

Markup

<div class="switcher">
	<input class="switcher__input" id="type_first" type="radio" name="type" value="first" checked="checked">
	<label class="switcher__label" for="type_first">First</label>
	<input class="switcher__input" id="type_second" type="radio" name="type" value="second">
	<label class="switcher__label" for="type_second">Second</label>
	<input class="switcher__input" id="type_third" type="radio" name="type" value="third">
	<label class="switcher__label" for="type_third">Third</label>
</div>

Skin

Set switcher_default_skin or modules_default_skin to true to enable default skin.

Examples

Tables

Basic tables styles.

Markup

<table class="table">
	<thead>
		<tr>
			<th>Header</th>
			...
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Data</td>
			...
		</tr>
		...
	</tbody>
</table>

Examples

Basic text styles

Headings, paragraphs, etc.

Markup

<div class="text">
	<h1>Down the Rabbit-Hole</h1>
	<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, “and what is the use of a book,” thought Alice “without pictures or conversation?”</p>
	<p>So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.</p>
</div>

Configuration

text_default_headings

Type: Boolean. Default: true.

Enables default headings (H1—H5) styles.

Examples

Tooltip

Simple tooltips.

Markup

<div class="tooltip">I’m tooltip!</div>
<a href="#" class="has-tooltip" data-tooltip="Call us!">+7 495 212-85-06</a>

Skin

Set tooltip_default_skin or modules_default_skin to true to enable default skin.

Examples

+7 495 212-85-06

Track

Google Analytics or Mixpanel events tracking.

Markup

<a href="http://github.com/" data-track>GitHub</span>
<span class="js-slider-next" data-track="slider" data-track-extra="next">Next</span>

HTML attributes

data-track

Enable tracking on an element. Optional value changes an event name (link by default).

data-track-extra

Extra data.