Documentation

 

Directory tree

Folders in red are system folders and should not be changed. These are the folders you should update when a new version comes out.

↓ app (input)
	↓ data
		countries.json
		map-config.json
		search.json
		titles.json

	↓ img
		> favicon
		> icons
		↓ markers
			default.png
		> pictures
		loader.gif
		logo-white.png
		logo.png
		pixel-black.png
		pixel-white.png
		share.jpg

	↓ markup
		↓ partials
			↓ head
				_assets.html
				_data.html
				_html.html
				_meta.html
			↓ foot
				_data.html
			_footer.html
			_header.html
			_overlays.html

	↓ scripts
		> debug
		> matter
		> standalone
		↓ user
			global.js

	↓ styles
		> debug
		> matter
		↓ user
			_global.scss
		build.scss

> dist (output)
> gulp
> node_modules

.editorconfig
.gitattributes
.gitignore
.jshintignore
gulpfile.js
LICENSE
package.json
README.md

Files changed in app/markup will be output to www's root.
Files changed in app/styles and app/scripts will be compiled to their respetive folders in www.
Refer to Grunfile.js for system setup.

The folders .git, node_modules and .tmp are automatically generated by git, grunt, and grunt-ssi respectively. All are added to .gitignore.

 

Grid system

Usage:

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

Demo:

Word
Word

Example:

<div class="row">
	<div class="column" data-span="4">
		<div class="cell">Word</div>
	</div>
	<div class="column" data-span="8">
		<div class="cell">Word</div>
	</div>
</div>

Note: In order to keep cross-browser consistency, .column must be inside a .row. .cell is optional.
If a column has no data-span declared, it will automatically set to maximum width.


Full grid

col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
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.

 

Block level elements

p class="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

Iconography

Matter has automatic svg injection from img class="svg" elements. You can find the icon names at /app/img/icons.

Demo:

CTA icon

Example:

<img class="svg icon icon-{{name}}" src="/img/icons/icon-{{name}}.svg">

Headings

h1

Sample heading

h2

Sample heading

h3

Sample heading

h4

Sample heading

h5
Sample heading
h6
Sample heading

Typography

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
X1 and H2O
sup
Mlle, 1st, ex, sin2 x, ex2 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.

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>

Hyphenation

Use the &shy; 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 re­cently the great ma­jor­ity of nat­u­ral­ists be­lieved that species were im­mutable pro­duc­tions, and had been sep­a­rately cre­ated. This view has been ably main­tained by many au­thors.

Heavy hyphenation - explicit hyphenation hints (soft hyphens)

Un­til re­cent­ly the great ma­jor­i­ty of nat­u­ral­ists be­lieved that spe­cies were im­mu­ta­ble pro­duc­tions, and had been sep­a­rate­ly cre­at­ed. This view has been ably main­tain­ed by many au­thors.


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)
  1. List item.
  2. List item.
  3. 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.
  4. List item. Lorem ipsum Irure enim anim aliqua deserunt Excepteur sint exercitation commodo laborum proident id.
menu
  • List item.
  • 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.
  • 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 (Responsive)

    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 &ecirc; &#234; Latin 1 character
    em dash &mdash; &#8212; Windows Latin 1 character
    Ā A with macron (line above) &Amacr; &#256; Latin Extended-A character
    Ω capital omega &Omega; &#937; Greek letter
    minus sign &minus; &#8722; Unicode minus
    Ø diameter sign &Oslash; &#216; Relatively rare
     

    Form elements

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

    Fields marked with are required.
    repeat
    repeat
    Dropdown group
    Checkboxes
    Toggle checkboxes

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

    Radio buttons
    Toggle radio buttons

    Note: Change the number of possible uploads on config.js


    Validation states

    Valid Invalid Readonly/Disabled

    Progress bar

     

    UI widgets

    Test paragraph


    Notifications

    matter.notification.call(title, message, delay, tone);

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

    Demo:

    ?
    0
    CTA icon
    CTA icon
    CTA icon
    Defaults:
    active: true
    title: "System notification"
    delay: 5000
    tone: "default"  default | success | warning | failure

    Example:

    <div class="button primary" data-notification="true" data-{{message|delay|tone}}="{{value}}">
    	Delay 3000
    </div>

    Note: If any the data attributes are ommitted, they will fallback to their defaults. data-notification and data-message are obligatory.


    Slider

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

    Demo:

    Defaults:
    nav: true
    arrows: true
    thumbnails: false
    animation: "slide"  slide | fade
    slideshow: true
    duration: 500
    interval: 5000
    threshold: 0

    Exmaples:

    <div class="slider" data-slider="true" data-{{nav|arrows|thumbnails|display|slideshow|animation}}="{{value}}">
    	<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="true" data-thumbnails="true">
    	<div class="slide" data-thumb="image/path/here.jpg"></div>
    	<div class="slide" data-thumb="image/path/here.jpg"></div>
    	<div class="slide" data-thumb="image/path/here.jpg"></div>
    </div>

    Overlays

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

    Demo:

    Example:

    <button class="primary" data-overlay="example">Call id="example" overlay</button>
    
    <div class="overlay" id="example">
    	<div class="bg"> </div>
    	<div class="modal">
    		<img class="svg icon icon-close" src="/img/icons/icon-close.svg" />
    	</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


    Tooltips

    Mouse-following tooltips for any element, on hover using attribute data-tooltip.

    Note: Tooltips are disabled on touch devices as it depends on :hover pseudo-selector.

    Demo:

    Defaults:
    position: "center"  left | center | right
    bound: true

    Example:

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

    Map wrapper

    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:
    styles: theme.Mapbox  gmaps.js

    Example:

    <div class="map-wrapper">
    	<div id="map-canvas" class="map-canvas" data-feed="/data/map-config.json"></div>
    </div>

    Video embeds

    Supports youtube and vimeo.

    Demo:

    Youtube iframe

    Youtube video

    Vimeo iframe

    Vimeo video

    Example:

    Youtube video

    <div class="video-frame" data-video-id="lS5HyAFwLAU" data-video-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-video-id="122325664" data-video-service="vimeo"></div>

    Vimeo iframe

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

    Interactive fields

    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>

    Tag cloud

    Usage:

    Apply data-tagcloud="true" to an input element.

    Demo:

    Example:

    <input type="text" placeholder="Type and press Enter to add to the tag cloud" data-tagcloud="true">
    <select data-tagcloud="true"></select>

    Unified search

    Usage:

    Apply data-search="true" and data-feed="PATH-TO-JSON.json" to a parent of a group of input or select elements. This will automatically create a tag cloud after it.

    Example:

    <div class="search-wrapper" data-search="true" data-feed="/data/search.json" data-template="/templates/search.html">
    	<div class="row">
    		<div class="column">
    			<input type="text" placeholder="Search..." data-lookup="title, summary">
    		</div>
    	</div>
    
    	<div class="row">
    		<div class="column" data-span="4">
    			<select class="keep" data-lookup="type"></select>
    		</div>
    		<div class="column" data-span="4">
    			<select class="keep" data-lookup="categories"></select>
    		</div>
    		<div class="column" data-span="4">
    			<select class="keep" data-lookup="tags"></select>
    		</div>
    	</div>
    
    	<div class="search-container"></div>
    </div>