Documentation

Global

Below is an example of all available and non-deprecated HTML elements, typography, iconography and tables, with their styles reset and normalised using Matter's defaults.

Elements

p.lead: Lorem ipsum Magna dolore adipisicing consectetur Ut voluptate consequat minim sunt laborum in mollit nulla aute fugiat Excepteur nulla fugiat Duis ut officia velit aute sit in id nostrud pariatur exercitation ut quis nulla amet nostrud dolore in commodo culpa Excepteur Duis deserunt ea reprehenderit sit laborum enim irure dolore fugiat dolor dolore dolor Ut amet labore ullamco aute elit in tempor Ut in nulla aliqua officia consequat.
p: Lorem ipsum Magna dolore adipisicing consectetur Ut voluptate consequat minim sunt laborum in mollit nulla aute fugiat Excepteur nulla fugiat Duis ut officia velit aute sit in id nostrud pariatur exercitation ut quis nulla amet nostrud dolore in commodo culpa Excepteur Duis deserunt ea reprehenderit sit laborum enim irure dolore fugiat dolor dolore dolor Ut amet labore ullamco aute elit in tempor Ut in nulla aliqua officia consequat.
a: Lorem ipsum Duis eu laboris veniam sed anim.
a target="_blank": Lorem ipsum Duis eu laboris veniam sed anim.
a data-explicit="true": Lorem ipsum Duis eu laboris veniam sed anim.
blockquote and cite: Lorem ipsum Culpa sit dolor nostrud nulla minim elit consequat occaecat exercitation dolor et anim enim amet id veniam amet ea reprehenderit commodo in sunt tempor adipisicing velit minim irure ea ea nisi cillum ea pariatur in ad aliquip consectetur aliquip Duis.
4.51 the Cite element , Berjon et al. 2013
address: Company name test@test.com 100, Street Name, City, Postcode
abbr (:hover): CSS
acronym (:hover): radar
b: Bold text.
big: Bigger text.
cite: Citation used here
code: a[i] = b[i] + c[i];
del: ~~Deleted text~~.
dfn: Defintion content.
em: Italic text.
i: Homo sapiens (supports lang attribute, "la" for Latin in this case).
ins: Inserted text.
kbd: a[i] = b[i] + c[i];
q: Hello!
q in q: She said Hello!.
samp: a[i] = b[i] + c[i];
small: Small text.
strike or s: ~~Strikethrough text~~.
strong: Strong text.
sub: X₁ and H₂O
sup: M^lle, 1^st, e^x, sin² x, e^x² and f(x)^{g(x)^a+b+c}
tt: Monospace text.
u: Underlined text.
var: variable used.

Some of the elements tested above are typically displayed in a monospace font, often using the same presentation for all of them.

This is sample text inside code markup
This is sample text inside kbd markup
This is sample text inside samp markup
This is sample text inside tt markup

pre is the only element that preserves whitespace, space characters, tabs, and carriage returns.

Example:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head>

Headings

h1: Sample heading
h2: Sample heading
h3: Sample heading
h4: Sample heading
h5: Sample heading
h6: Sample heading

Lists

All lists are styled as list-style-position: outside; as it allows a better separation of content and visual hierarchy of elements.

menu and dir have list-style-position: inside; and cannot be overridden.

ul (Unordered List)

List item.
List item.
List item. Lorem ipsum Dolore sunt elit ad proident aliqua magna non labore sed quis irure cillum cillum enim ullamco tempor enim dolore Duis ea elit et et magna consequat ut cillum esse occaecat.
List item. Lorem ipsum Ad laborum nulla cillum non ullamco reprehenderit aute Duis eu tempor quis Excepteur sit mollit adipisicing irure in.

ol (Unordered List)

List item.
List item.
List item. Lorem ipsum Et consectetur adipisicing Duis eiusmod adipisicing incididunt cupidatat officia aute consectetur ut mollit pariatur voluptate incididunt sit in ad et officia veniam.
List item. Lorem ipsum Irure enim anim aliqua deserunt Excepteur sint exercitation commodo laborum proident id.

menu

List item.

List item. Lorem ipsum Incididunt fugiat ex ex aliquip Excepteur in sint aute dolor qui qui deserunt voluptate enim esse ad proident exercitation quis in non anim dolor Duis ad irure velit.

List item. Lorem ipsum Dolore cupidatat Ut veniam aliqua commodo cupidatat esse quis ut velit mollit id fugiat exercitation cillum.

dir (Directory List)

List item.

List item. Lorem ipsum Fugiat minim in in ullamco amet ut esse aliqua et culpa labore et consequat cupidatat eu ad in nulla irure ut eiusmod id nostrud proident.

List item. Lorem ipsum Anim magna sed et ad officia sunt et esse deserunt non consectetur in sunt ea aute labore qui.

Definition List

Such a list should consist of terms and associated definitions.

Recursion: See recursion.
Recursion, indirect: See indirect recursion.
Indirect recursion: See recursion, indirect.
Term: A word or other expression taken into specific use in a well-defined meaning.

Example:

<dl>
  <dt>Recursion</dt>
  <dd>
    See recursion.
  </dd>

  <dt>Recursion, indirect</dt>
  <dd>
    See indirect recursion.
  </dd>

  <dt>Indirect recursion</dt>
  <dd>
    See recursion, indirect.
  </dd>

  <dt>Term</dt>
  <dd>
    A word or other expression taken into specific use in a well-defined meaning.
  </dd>
</dl>

Tables

The following table has a caption. The first row contains header cells (th) only. Other cells are data cells (td).

Sample table: Areas of the Nordic countries, in sq km
Country	Total area	Land area
Denmark	43,070	42,370
Finland	337,030	305,470
Iceland	103,000	100,250
Norway	324,220	307,860
Sweden	449,964	410,928

Character Test

The following table has no caption, and has some sample characters with annotations. If the browser's default font does notcontain all of them, they may get displayed using backup fonts. This may cause stylistic differences, but it should not prevent the characters from being displayed at all.

Char.	Explanation	HTML Entity	Unicode	Notes
ê	e with circumflex	`ê`	`ê`	Latin 1 character
—	em dash	`—`	`—`	Windows Latin 1 character
Ā	A with macron (line above)	`&Amacr;`	`Ā`	Latin Extended-A character
Ω	capital omega	`Ω`	`Ω`	Greek letter
−	minus sign	`−`	`−`	Unicode minus
Ø	diameter sign	`Ø`	`Ø`	Relatively rare

Iconography

Matter already initialises and uses Feather icons. See their documentation for a full icon list, below is a sample list. See the example section on how to call each icon, hover/tap to see their name.

Demo:

Example:

<i data-feather="{{name}}"></i>

Hyphenation

Use the  HTML entity for hyphens. this entity does not show up unless it's the last character on the line, thus providing hyphenation.

Note: Resize to see the hyphenation in action.

No hyphenation

Until recently the great majority of naturalists believed that species were immutable productions, and had been separately created. This view has been ably maintained by many authors.

Moderate hyphenation

Until recently the great majority of naturalists believed that species were immutable productions, and had been separately created. This view has been ably maintained by many authors.

Heavy hyphenation - explicit hyphenation hints (soft hyphens)

Until recently the great majority of naturalists believed that species were immutable productions, and had been separately created. This view has been ably maintained by many authors.

Grid

The grid is simple. .column inside .row, data-span attribute on column from 1 to 12.

Under 768px: columns 1 and 2 become 33.333% width. Columns 3 become 50%. All others become 100%.

Under 480px: columns 1 and 2 become 50% width. All others become 100%.

Usage:

Set the number of columns on _config.scss, then use data-span attribute to set the width of a column.

Demo:

Content

Example:

<div class="row">
	<div class="column"> <!-- Automatic 100% -->
		<div class="cell">Content</div> <!-- .cell is optional -->
	</div>
	<div class="column" data-span="4">
		<div class="cell">Content</div>
	</div>
	<div class="column" data-span="8">
		<div class="cell">Content</div>
	</div>
</div>

Full grid

col

Push grid

Demo:

col

Example:

<div class="row">
	<div class="column" data-span="8" data-push="3">
		<div class="cell">col</div>
	</div>
</div>

Use data-push to specify how many columns you want a certain column to move.

Form

Below is an example of all available and non-deprecated form elements and a few new custom fields such as card, autocomplete and tagcloud, with built-in validation.

Elements

Note: You can switch validation on or off at config.js.

Fields marked with are required.

Text Number

Email w/ confirmation

repeat

Date Card

Password w/ confirmation

repeat

Textarea Dropdown

Dropdown group

Dropdown list

Checkboxes I accept the following lipsum Terms & lipsum Uncheck if you don't want to lipsum

Toggle checkboxes I accept the following lipsum Terms & lipsum Check if you don't want to lipsum

Note: Radio buttons need one required option to be selected.

Radio buttons Select this to choose the following lipsum Select this to choose the Terms & lipsum Select this to choose lipsum

Toggle radio buttons Select this to choose the following lipsum Select this to choose the Terms & lipsum Select this to choose lipsum

File upload

Autocompletion

Usage:

Insert the example code below anywhere in your page, then define the URL for each autocomplete input on data-autocomplete. You can instantiate multiple autocomplete fields with different target URLs.

Demo:

Example:

<div class="autocomplete-wrapper" data-autocomplete="/data/autocomplete.json">
  <input type="text" placeholder="Type to search..." data-lookup="title">
</div>

Validation

Valid	Invalid	Readonly/Disabled



Checkbox	Checkbox	Checkbox
Checkbox	Checkbox	Checkbox
Radio	Radio	Radio
Radio	Radio	Radio

Widgets

A collection of widgets that cover the most common web functionalities, built from the ground up.

Maps

Credit: Google Mapbuildr.

This map requires a data-feed attribute that calls a json config file. Currently located at /app/data/map-config.json.

Demo:

Defaults:

feed: '/data/map-config.json', // STR: Path for config file
theme: 'MapBox' // STR: 'Grayscale' 'LightOnDarkGray' 'PastelTones' 'Bentley' 'MapBox'

Example:

<div class="map-wrapper">
  <div class="map-canvas" data-map="{'feed': '/data/map-config.json'}"></div>
</div>

Notifications

They are responsive and cross-browser compliant. They can be used for cookie messages, form validation, progress updates, user information, etc...

Demo:

•

Defaults:

title: 'System notification', // STR: default title
message: 'Default notification message', // STR: default message
delay: 5000, // INT: miliseconds for disappearance.
tone: 'default' // STR: 'default', success', 'warning', 'failure', 'cookie'.

Example:

<div class="button primary" data-notification="{'message': 'Success message.', 'tone': 'success'}">
	Delay 3000
</div>

Note: If any of the default attributes are ommitted, they will use their original values.

Overlays

Overlay elements, centered vertically and horizontally, that support any type of content.

Demo:

Defaults:

id: 'overlay-example-1' // STR: ID of the overlay you wish to call

Example:

<!-- Trigger -->
<button class="primary" data-overlay="{'id': 'example'}">Call id="example" overlay</button>

<!-- Overlay -->
<div class="overlay" id="example">
	<div class="bg"></div>
	<div class="modal">
		<i data-feather="x"></i>
	</div>
</div>

Note: The button can go anywhere on the page. The overlay element must go right after the opening of the body tag. See /app/markup/partials/_overlays.html and their includes on the HTML templates.

Progress bars

Progress bar element,

Demo:

Defaults:

id: 'progress-example-1', // STR: ID of the progress bar you wish to call
limit: 100 // INT: How much progress percentage you wish to display, from 0 to 100

Example:

<!-- Trigger -->
<button class="primary" data-progress="{'id': 'progress-example-1', 'limit': '75'}">To 75%</button>

<!-- Progress bar -->
<div class="progress-bar" id="progress-example-1"></div>

Pure javascript sharing for the main 5 social networks

Demo:

Example:

<a href="share:facebook">
  <img class="svg icon icon-facebook" src="/img/icons/icon-facebook.svg" alt="facebook icon">
</a>
<a href="share:twitter">
  <img class="svg icon icon-twitter" src="/img/icons/icon-twitter.svg" alt="twitter icon">
</a>
<a href="share:linkedin">
  <img class="svg icon icon-linkedin" src="/img/icons/icon-linkedin.svg" alt="linkedin icon">
</a>
<a href="share:gplus">
  <img class="svg icon icon-gplus" src="/img/icons/icon-gplus.svg" alt="gplus icon">
</a>
<a href="share:pinterest">
  <img class="svg icon icon-pinterest" src="/img/icons/icon-pinterest.svg" alt="pinterest icon">
</a>

Sliders

Hand coded image slider with horizontal slide transitions. Supports multiple instances and infinite slides.

Demo:

Defaults:: bullets: true; arrows: true; thumbs: false; slideshow: false; duration: 500; interval: 5000; threshold: 20

Exmaples:

<div class="slider" data-slider="{'bullets': 'true', 'arrows': 'true', 'thumbs': 'true', 'slideshow': 'true', 'interval': '3000', 'threshold': '50'}">
  <div class="slide">
    <img src="http://placehold.it/959x350" />
  </div>
  <div class="slide">
    <img src="http://placehold.it/960x350" />
  </div>
  <div class="slide">
    <img src="http://placehold.it/961x350" />
  </div>
</div>

<div class="slider" data-slider="{'thumbs': 'true'}">
  <div class="slide" data-thumb="image/path/here.jpg">
    <img src="http://placehold.it/959x350" />
  </div>
  <div class="slide" data-thumb="image/path/here.jpg">
    <img src="http://placehold.it/959x350" />
  </div>
  <div class="slide" data-thumb="image/path/here.jpg">
    <img src="http://placehold.it/959x350" />
  </div>
</div>

Tooltips

Tooltips for any element, using attribute data-tooltip.

Note: Tooltips use click or tap event on touch devices as there's no :hover pseudo-selector.

Demo:

Defaults:

bound: {
  active: true, // BOOL: Turn on boundaries
  element: window // STR: Sets boundaries to element ie. '.wrapper'
},
trigger: 'move', // STR: 'click/move'
position: { // From mouse cursor
  x: 'center', // STR: 'left/center/right'
  y: 'top' // STR: 'top/bottom'
},
content: 'Lorem ipsum' // STR: Default tooltip content

Example:

<img src="http://placehold.it/1280x400&text=Image,%20hover%20me" data-tooltip="{'content': 'Tooltip Text'}" />

Video embeds

Supports youtube and vimeo.

Demo:

Youtube iframe

Youtube video

Vimeo iframe

Vimeo video

Example:

Youtube video

<div class="video-frame" data-id="lS5HyAFwLAU" data-service="youtube"></div>

Youtube iframe

<iframe width="1280" height="600" src="https://www.youtube.com/embed/uxfuuvjT1OY" frameborder="0" allowfullscreen></iframe>

Vimeo video

<div class="video-frame" data-id="122325664" data-service="vimeo"></div>

Vimeo iframe

<iframe src="//player.vimeo.com/video/47911018" frameborder="0" allowfullscreen></iframe>

Matter v4

Documentation

Global

Elements

Headings

Sample heading

Sample heading

Sample heading

Sample heading

Sample heading

Sample heading

Lists

Definition List

Tables

Character Test

Iconography

Hyphenation

No hyphenation

Moderate hyphenation

Heavy hyphenation - explicit hyphenation hints (soft hyphens)

Grid

Full grid

Push grid

Form

Elements

Autocompletion

Tag cloud

Validation

Widgets

Maps

Notifications

Overlays

Progress bars

Share

Sliders

Tooltips

Video embeds

Overlay Title 1

Overlay Title 2

Overlay Title 3

Matter v4

Documentation

Global

Elements

Headings

Sample heading

Sample heading

Sample heading

Sample heading

Sample heading

Sample heading

Lists

Definition List

Tables

Character Test

Iconography

Hyphenation

No hyphenation

Moderate hyphenation

Heavy hyphenation - explicit hyphenation hints (soft hyphens)

Grid

Full grid

Push grid

Form

Elements

Autocompletion

Tag cloud

Validation

Widgets

Maps

Notifications

Overlays

Progress bars

Share

Sliders

Tooltips

Video embeds