Grid System Typography

and more...

Download on Github

L

An intuitive, easy-to-learn, 12 column grid system with tons of options for all your styling needs.

R

Fluid & responsive, adapting to device sizes from smartphones to desktops.

T

3 fonts 7 weights chosen from Google Fonts and an iconfont from Icomoon.

M

Meticulously calculated for pixel-perfect precision.


F

Lightweight - less than 4kb when gzipped inc. normalize

I

Works in all modern browsers, even works in IE7!

C

Typographic styles for all types of elements from abbr to quotes.

A

Add-ons - Buttons, Forms, Tables, Maps and more coming soon!


Getting Started

At Articlr's core is the Grid System Typography, after that
Articlr employs a "uncomment as needed" policy, allowing you to add Style and Scripts for Buttons, Maps, Tables, Forms, Image-Sliders, Twitter Feeds and so on, as you require them.

The <head> of Articlr looks something like this...

<!DOCTYPE html>
<html lang="en" class="no-js">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">

    <!-- Place favicon.ico and apple-touch-icon(s) in the root directory -->

    <link rel="stylesheet" href="css/articlr.core.min.css">
    <!-- <link rel="stylesheet" href="css/articlr.buttons.min.css"> -->
    <!-- <link rel="stylesheet" href="css/articlr.tables.min.css"> -->
    <!-- <link rel="stylesheet" href="css/articlr.slider.min.css"> -->
    ...
    <link rel="stylesheet" href="css/main.css">

    <link href="http://fonts.googleapis.com/css?family=Roboto:300,300italic,400,700|Roboto+Slab:400,700|Droid+Serif:400italic|Ubuntu+Mono' rel='stylesheet" type="text/css">

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.3.0/respond.js"></script>
    <!-- <script src="js/stupidtable.min.js"></script> -->
    <!-- <script src="//cdnjs.cloudflare.com/ajax/libs/ResponsiveSlides.js/1.53/responsiveslides.min.js"></script> -->
    ...
    <script src="//cdnjs.cloudflare.com/ajax/libs/retina.js/1.0.1/retina.js"></script>
    <script src="js/helper.js"></script>

    <title>the title goes here</title>
  </head>

Grid System

Two column example

Columns come in widths (1-12) written like <div class="col-7">.

Columns, as in this example, are placed within a <div class="row"> container and should add up to a total of 12.

If the columns only added up to a total of 10, then there would be a 2 column gap on the right side, since columns are floated to the left.

If no mobile style is added then all columns revert to a default width of 100% for the mobile layout. more later

If all the content is placed within a <div class="wrap"> (recommended) then the maximum width is 96% on mobiles (giving a nice margin at the edges of the screen), with a max-width of 1140px (you can change this if you wish) for desktops, laptops, tablets, basically any device with a screen width of 768px or greater.


Desktop

Mobile

Elvis Lives!

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn Blokkfont

Elvis Lives!

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes


Mobile

Mark-up

<row>
    <col-8>
        <h1>
        <p>
    </>
    <col-4>
        <h1>
        <p>
    </>
</>

This markup is simply just my own shorthand. <col-8> would actually be written as <div class="col-8">


Two column example with mobile styling

All columns will become 100% wide by default on screen widths less than 768px wide.

However You can add mobile styles easily by adding a class such as <div class="m-col-7">.

Mobile and Desktop column widths are independant from each other. Meaning the same column can have a different width for mobile and desktop layouts.

Mobile columns, within a <div class="row"> should also add up to 12.


Desktop

Mobile

Elvis Lives!

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn

Elvis Lives!

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes


Mobile

Mark-up

<row>
    <col-8 m-col-6>
        <h1>
        <p>
    </>
    <col-4 m-col-6>
        <h1>
        <p>
    </>
</>

Centering columns

Centered columns are... well, columns that are centered.

Typical html would be; <div class="col-9 center">.

Since centered columns do not need to add up to 12, they do not need to be contained within a <div class="row">, but there is no harm in containing a centered column within a <div class="row">.

To center text use the class "center-text"


Desktop

Mobile

Benita

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn


Mobile

Mark-up

<col-7 center>
    <h1>
    <p>
</>

Centering columns for mobiles

Centering columns for the mobile layout is just as simple as for the desktop view. Simply add an "m-" to the class.

Typical html would be; <div class="col-8 center m-col-10 m-center">.

A <div class="m-col-11 m-center"> column adds a nice thin margin for mobile layouts.


Desktop

Mobile

Duuuude

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn


Mobile

Mark-up

<col-7 center m-col-8 m-center>
    <h1>
    <p>
</>

Mixing column styles

You can use centered columns for the mobile layout, even if the desktop layout doesn't, and vice-versa.

Desktop

Mobile

Duuuude

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn

Duuuude

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn


Duuuude

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn

Duuuude

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn


Mobile

Mark-up

<row>
    <col-7 m-col-8 m-center>
        <h1>
        <p>
    </>
    <col-5 m-col-8 m-center>
        <h1>
        <p>
    </>
</>
<br>
<row> 
    <col-9 center m-col-5>
        <h1>
        <p>
    </>
    <col-8 center m-col-7>
        <h1>
        <p>
    </>
</>

Could also use <div class="m-row"> instead of <div class="row"> see later


How to offset a column

To offset a column to the right, simply add the class, for example "offset-3" to the column you wish to move to the right.

The html for an offset column should be something like; <div class="col-8 offset-2">.

The width of the columns and the width of the offset should add up to 12.

The offset is not inherited by the mobile layout, but you can add offsets for mobile. see next section


Desktop

Mobile

Hi there

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esne es es es es esesesesesses ese s ese s


Hi there

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esne es es es es esesesesesses ese s ese s

Hi there

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esne es es es es esesesesesses ese s ese s


Mobile

Mark-up

<row>
    <col-9 offset-3>
        <h1>
        <p>
    </>
</>
<br>
<row>
    <col-4>
        <h1>
        <p>
    </>
    <col-4 offset-4>
        <h1>
        <p>
    </>    
</>

How to offset a column for mobiles

As you've probably guessed to offset a column to the right on mobiles, simply add the class, for example "m-offset-3" to the column you wish to offset


Desktop

Mobile

Hi there

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esne es es es es esesesesesses ese s ese s


Hi there

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esne es es es es esesesesesses ese s ese s

Hi there

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esne es es es es esesesesesses ese s ese s


Mobile

Mark-up

<row>
    <col-9 offset-3 m-col-10 m-offset-2>
        <h1>
        <p>
    </>
</>
<br>
<row>
    <col-4 m-col-5>
        <h1>
        <p>
    </>
    <col-4 offset-4 m-col-5 m-offset-2>
        <h1>
        <p>
    </>    
</>

Displaced columns

Displaced columns are columns that are moved to the left or right in order to allow text to flow around it.

Typical html would be; <div class="col-6 left-0"> for a column that is 6 wide (width is relative to the parent) and is aligned to the left margin of it's parent. <div class="col-8 right-0"> for a column that is 8 wide and is aligned to the right margin of it's parent.

The "zero" in "right-0" simply means that the right margin of the column is aligned to right margin of it's parent.


Desktop

Mobile

Cooool

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn esnes esn esnesn esnesn esnesn esnesn

q ycl cc

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd quc u uc quc ucucu cqucq ucquc quc uc cqu cqu cu c ucuqc jkpj jkpk pkpjkp kpkpk pkjpkj jkp kpk p

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn


Mobile

Mark-up

<col-8 center>
    <h1>
    <p>
    <col-6 left-0>
        <h3>
        <p>
    </>
    <p>
    <p>
</>

Breaking through the Parent's margin

Displaced columns can also be used to "break" through the margin of it's parent, to give an offset feel.

Typical html would be; <div class="col-6 left-1">.

The amount which a column is displacd is relative to the parent column, through which the displaced column is breaking.

For example, In a layout whose main column is 8 columns wide and centered (like the below example) there are 2 empty columns on either side (2+8+2=12), which means that you can displace a column, either left or right by a maximun of 2. ie. <div class="col-6 right-2">

Make sure that the parent column of the displaced column has room (empty space) on the side that the displaced column is breaking through.


Desktop

Mobile

Yellow

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn esnes esn esnesn esnesn esnesn esnesn

q ycl cc

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd quc u uc

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn

q ycl cc

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd quc u uc quc ucucu cqucq ucquc quc uc cqu cqu cu c ucuqc

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn


Mobile

Mark-up

<col-8 center>
    <h1>
    <p>
    <col-6 left-1>
        <h3>
        <p>
    </>
    <p>
    <p>
    <col-8 right-2>
        <h3>
        <p>
    </>
    <p>
    <p>
</>

Displaced columns for mobiles

You can displace columns for the mobile layout just as simply. Add the class, for example <div class="m-col-7 m-left">.

You can only displace columns through the parent's margin on the desktop layout, hence the reason why there is no number after the "m-left" class.


Desktop

Mobile

Yellow green blue

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn esnes esn esnesn esnesn esnesn esnesn

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss

ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd quc u uc

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn

q ycl cc

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd quc u uc quc ucucu cqucq ucquc quc uc cqu cqu cu c ucuqc

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn


Mobile

Mark-up

<col-8 center>
    <h1>
    <p>
    <col-11 center m-col-6 m-left>
        <h3>
        <p>
    </>
    <p>
    <p>
    <col-10 center  m-col-8 m-right>
        <h3>
        <p>
    </>
    <p>
    <p>
</>

None breaking text

By using the class "no-break" on the parent column, the text in the paragraphs will continue wrapping around displaced elements above and below.

To make the layout look like that of a newspaper use "justified" styled text on the main column.


Desktop

Mobile

ZZTop

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn esnes esn esnesn esnesn esnesn esnesn

q ycl cc

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd quc u uc

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn

q ycl cc

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd quc u uc quc ucucu cqucq ucquc quc uc cqu cqu cu c ucuqc

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn


Mobile

Mark-up

<col-9 center no-break>
    <h1>
    <p>
    <col-6 left-1>
        <h3>
        <p>
    </>
    <p>
    <p>
    <col-8 right-2>
        <h3>
        <p>
    </>
    <p>
    <p>
</>

Nesting columns

Infinite nesting of columns is possible, but the more levels you nest, the smaller the columns become.

All combinations of nesting are possible ie. You can nest 3 "col-4" columns inside a "col-10 center" column, inside a "col-9 left-1" column, and so on...


Desktop

Mobile

Abc 123 xyz

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn

Elvis Lives!

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes


Mobile

Mark-up

<row>
    <col-9>
        <h1>
        <p>
        <row>
            <col-10 offset-2>
                <p>
                <col-9 left-1>
                    <p>
                    <col-7 center>
                        <p>
                    </>
                    <p>
                    </>
                <p>
                <p>
            </>
        </>
        <p>
        <p>
    </>
    <col-3>
        <h1>
        <p>
        <p>
        <p>
        <p>
    </>
</>

Hiding columns

You can hide columns on either mobile or desktop, with the addition of "hide-col" or "hide-m-col" classes.

Eg. <div class="col-8 left-0 hide-m-col"> to hide for mobiles or <div class="m-col-8 m-center hide-col"> to hide on desktop.

You can also hide other elements, for example <h1 class="center-text hide-m-col"> to hide a heading on the mobile layout.


Desktop

Mobile

Now What?

And as someone who watched my mother argue with insurance companies while she lay in bed dying of cancer, I will make certain those companies stop discriminating against those who are sick and need care the most.

head line!

And as someone who watched my mother argue with insurance companies while she lay in bed dying of cancer

And as someone who watched my mother argue with insurance companies while she lay in bed dying of cancer, I will make certain those companies stop discriminating against those who are sick and need care the most. succ nn quuccuuuq ssufc ssquus

head line!

And as someone who watched my mother argue with insurance companies while she lay in bed dying of cancer, I will make certain those companies stop discriminating against those who are sick and need care the most.

head line!

And as someone who watched my mother argue with insurance companies while she lay in bed dying of cancer, I will make certain those companies stop discriminating against those who are sick and need care the most.


Mobile

Mark-up

<row>
    <col-8>
        <h1>
        <p>
        <col-7 left-0 hide-m-col>
            <col-10 center>
                <h3>
                <p>
            </>
        </>
        <p>
    </>
    <col-4>
        <h3>
        <p>
        <hide-col m-col-11 m-center>
            <h3>
            <p>
        </>
    </>
</>

Another displaced column example

In this example the green column, and its contents are displaced left allowing for text in the following paragraph(s) to flow around it.

displaced columns only have a margin on the side opposite to the direction they were displaced, eg. a "left" column has a margin on the right. So to add more internal padding add a centered container, like the yellow one in the example.

Elements which are usually styled with left margins such as <blockquote> and lists are left margin-less giving you the option as to how much margin you want to add.


Desktop

Mobile

Qwer ty

And as someone who watched my mother argue with insurance companies while she lay in bed dying of cancer, I will make certain those companies stop discriminating against those who are sick and need care the most.

head line!

And as someone who watched my mother argue with insurance companies while she lay in bed dying of cancer

And as someone who watched my mother argue with insurance companies while she lay in bed dying of cancer, I will make certain those companies stop discriminating against those who are sick and need care the most. succ nn quuccuuuq ssufc ssquus

head line!

And as someone who watched my mother argue with insurance companies while she lay in bed dying of cancer, I will make certain those companies stop discriminating against those who are sick and need care the most.

head line!

And as someone who watched my mother argue with insurance companies while she lay in bed dying of cancer, I will make certain those companies stop discriminating against those who are sick and need care the most.


Mobile

Mark-up

<row>
    <col-8>
        <h1>
        <p>
        <col-7 left-0>
            <col-10 center>
                <h3>
                <p>
            </>
        </>
        <p>
    </>
    <col-4>
        <h3>
        <p>
        <col-11 center>
            <h3>
            <p>
        </>
    </>
</>

Using m-row to add more rows for mobile layout

A simple 4 column equal width layout completely changes for mobile. This is achieved with the addition of the "m-row" container, which has no effect on the desktop layout, but allows for the addition of more rows on the mobile layout.

The <div class="m-row"> container is only needed if the mobile layout has a different number of columns than the desktop layout. In normal circumstances the <div class="row"> container is inherited, as in the 2nd example


Desktop

Mobile

Anssd as meone wn ho watse esed my moer arngue with insua nce

And as someonnne who wnnatched my mother argue with insurance

Afnfffnd as somenesnone who wa tch ed my mother arg uesn esne with ins urance

And as some ssone who wamtched my mother armssgue with insu rmm mmm ance


Mobile

Mark-up

<row>
    <m-row>
        <col-3 m-col-10 m-offset-2>
            <p>
        </>
    </>
    <m-row>
        <col-3 m-col-7>
            <p>
        </>
        <col-3 m-col-5>
            <p>
        </>
    </>
    <col-3 m-col-9 m-center>
        <p>
    </>
</>

Another example using m-row

In this example the desktop view has all 6 pictures in one row, but with the additions of <div class="m-row"> the 1 row breaks into 3 rows for the mobile layout.

Remember that all "m-col" columns within a <div class="m-row"> should add up to 12.


Desktop

Mobile


Mobile

Mark-up

<row>
    <m-row>
        <col-2 m-col-12> 
            <img>
        </>
    </>
    <m-row>
        <col-2 m-col-6>
            <img>
        </>
        <col-2 m-col-6>
            <img>
        </>
    </>
    <m-row>
        <col-2 m-col-4>
            <img>
        </>
        <col-2 m-col-4>
            <img>
        </>
        <col-2 m-col-4>
            <img>
        </>
    </>
</>

You can also use <div class="col-2 m-col-12 m-center"> since this would avoid the need for the <div class="m-row"> wrapping this element


Nice layout example

This simple layout has two columns (main content and sidebar) which each contain a centered column that adds a little margin to let the layout "breathe"

The mobile view loses its 2 column look and the main content is stacked above the sidebar, both main and sidebar columns retain the centered column.


Desktop

Mobile

Main

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn

Sidebar

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes

pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes nesn esnsen esnsn esn esn esnesn pnsss ntcd nn nscd nncdsee nse s sn sen esnesn esnes


Mobile

Mark-up

<row>
    <col-8>
        <col-11 center m-col-11 m-center>
            <h2>
            <p>
            <p>
        </>
    </>
    <col-4 m-col-11 m-center>
        <col-11 center>
            <h2>
            <p>
            <p>
        </>
    </>
</>

Different paragraph styling

Articlr comes with two choices for seperating paragraphs, either by line break (default) or by indent.

To choose indent style add the class "indent" to the column whose text you wish to indent ie. <div class="col-6 indent">

The indent style will be inherited by the mobile layout. If you don't want to indent paragraphs on the mobile layout add the class "m-no-indent" to the column whose text you do not wish to indent for mobiles. ie. <div class="col-6 indent m-no-indent">

If, on the other hand you only want to indent paragraphs on the mobile layout, add the class "m-indent". ie. <div class="col-6 m-col-8 m-indent">


Desktop

Mobile

And as someonnne who wnnatched my mother argue with insurance aes aes aes ae s aesaesaes

And as someonnne who wnnatched my mother argue with insurance aes aes aes ae s aesaesaes

And as someonnne who wnnatched my mother argue with insurance aes aes aes ae s aesaesaes

And as someonnne who wnnatched my mother argue with insurance aes aes aes ae s aesaesaes

And as someonnne who wnnatched my mother argue with insurance aes aes aes ae s aesaesaes

And as someonnne who wnnatched my mother argue with insurance aes aes aes ae s aesaesaes

And as someonnne who wnnatched my mother argue with insurance aes aes aes ae s aesaesaes

And as someonnne who wnnatched my mother argue with insurance aes aes aes ae s aesaesaes

And as someonnne who wnnatched my mother argue with insurance aes aes aes ae s aesaesaes

And as someonnne who wnnatched my mother argue with insurance aes aes aes ae s aesaesaes


Mobile

Mark-up

<row>
 <col-6 m-indent>
        <p>
        <p>
        <p>
        <p>
        <p>
    </>
    <col-6 indent m-no-indent>
        <p>
        <p>
        <p>
        <p>
        <p>
    <p>
</>

Many columns, one line-height

The line-heights of elements containing text <p>, <h1>, <h2>, <h3>,... are calculated to keep text aligned from column to column

The heading class <h2> is an exception in that it has a line height 1.5 times that of text in a <p>
but you can correct this, if you like, by adding a <p class="halfgap"><br></p> above or below the <h2>

You could also use the <p class="halfgap"><br></p> to explicitally misalign text, if you so want.


Desktop

Mobile

Donec sed quam pretium, interdum est eu, adipiscing nibh. Nam dui nunc, vulputate et lectus sed, convallis accumsan dolor. Proin semper sollicitudin nulla sed convallis. Suspendisse elit orci, sodales a nulla nec, tincidunt feugiat ligula. Nullam vulputate commodo urna a tempus. Donec quis purus arcu. Nulla eleifend urna at nunc luctus, id venenatis quam

Hello World

Donec sed quam pretium, interdum est eu, adipiscing nibh. Nam dui nunc, vulputate et lectus sed, convallis accumsan dolor. Proin semper sollicitudin nulla sed convallis. Suspendisse elit orci, sodales a nulla nec, tincidunt feugiat ligula. Nullam vulputate commodo urna a tempus. Donec quis purus arcu.

Hello World

Donec sed quam pretium, interdum est eu, adipiscing nibh. Nam dui nunc, vulputate et lectus sed, convallis accumsan dolor. Proin semper sollicitudin nulla sed convallis. Suspendisse elit orci, sodales a nulla nec,


hi bob

Donec sed quam pretium, interdum est eu, adipiscing nibh. Nam dui nunc, vulputate et lectus sed, convallis accumsan dolor. Proin semper sollicitudin nulla sed convallis. Suspendisse elit orci, sodales a nulla nec, tincidunt feugiat ligula. Nullam vulputate commodo urna a tempus. Donec quis purus arcu. Nulla eleifend urna at nunc luctus, id venenatis quam placerat. Nulla nec dui consequat urna interdum aliquet. Phasellus metus velit, posuere eu lorem accumsan, mattis congue tellus. Integer enim velit, sollicitudin sed sem eget, imperdiet semper massa. Donec ultricies, mauris eget faucibus elementum, justo ante gravida nisl, a venenatis magna libero id elit. Aliquam tincidunt ipsum nisl, eget blandit lacus sollicitudin at. Integer velit velit, auctor nec arcu nec, blandit faucibus nisl. Pellentesque non dictum sapien.


Mobile

Mark-up

<col-12 center>
    <p>
    <col-4 left-0>
        <h1>
        <p>
    </>
    <col-4 right-0>
        <h3>
        <p>
    </>
    <p halfgap hide-m-col><br></>
    <h1>
    <p>
</>

Column width guide


Desktop

Mobile

12
11
10
9
8
7
6
5
4
3
2
1

Mobile

Mark-up

<col-12 center m-col-12 m-center>
<col-11 center m-col-11 m-center>
<col-10 center m-col-10 m-center>
<col-9 center m-col-9 m-center>
<col-8 center m-col-8 m-center>
<col-7 center m-col-7 m-center>
<col-6 center m-col-6 m-center>
<col-5 center m-col-5 m-center>
<col-4 center m-col-4 m-center>
<col-3 center m-col-3 m-center>
<col-2 center m-col-2 m-center>
<col-1 center m-col-1 m-center>

Classes Cheat sheet

All of Articlr's classes


Class Description
row Used as a container for 2 or more <col-X>'s that add up to 12 (or 1 column with an <offset>.)
Also acts as a clearfix.
If you need 1 full width column, use <col-12 center> as this avoids the need for a <row> container.
col-X X is a number from 1 to 12. Specifies the width of the column
center Centers the column in the middle of it's parent, is accompanied with a <col-X> class which specifies the width, doesn't need to be contained in a <row>.
offset-X X is a number from 1 to 11. Adds X amount of empty columns to the left of that column, is accompanied with a <col-X> class which specifies the width.
left-0, right-0 Aligns a column with the left, or right margin of it's parent, is accompanied with a <col-X> class which specifies the width.
left-X, right-X X is a number from 1 to 3. Displaces a column through the left, or right margin of it's parent by a relative width of X, is accompanied with a <col-X> class which specifies the width.
hide-col Hides the column on the desktop layout (browser width ≥ 768px.)
m-row Used as a container for 2 or more <m-col-X>'s that add up to 12 (or 1 column with an <m-offset>.)
You only need to use <m-row> if the amount of contained <m-col-X>'s is different to the amount of (not the size of) <col-X>'s since the <row> container class inherits for mobile.
m-col-X X is a number from 1 to 12. Specifies the width of the column
m-center Centers the column in the middle of it's parent, is accompanied with a <m-col-X> class which specifies the width, doesn't need to be contained in a <row> or <m-row>.
m-offset-X X is a number from 1 to 11. Adds X amount of empty columns to the left of that column, is accompanied with a <m-col-X> class which specifies the width.
m-left, m-right Aligns a column with the left, or right margin of it's parent, is accompanied with a <m-col-X> class which specifies the width.
hide-m-col Hides the column on the mobile layout (browser width < 768px.)
center-text Centers the text within that column. Is inherited by the mobile layout.
indent Indents the text within that column (but not sub/nested columns), instead of using line-breaks to seperate paragraphs. Is inherited by the mobile layout.
no-break Runs all the text together within that column (but not sub/nested columns), as if it had all been written within one paragraph. Is inherited by the mobile layout.
m-indent Same as <indent> but only applied to the mobile layout.
m-no-break Same as <no-break> but only applied to the mobile layout.
m-no-indent When used with <indent> stops text being indented on the mobile layout.
m-break When used with <no-break> stops text not being broken on the mobile layout.
halfgap Used like <p class="halfgap"><br></p> above or below a <h2> to line up text in adjacent paragraphs, also could be used to misalign text in adjacent paragraphs.

Typography

Typical Type Elements

Here is a table displaying the most typical flow content containing text.
The most noteable differences/additions are;

  • Different fonts for <i>italic</i> and <em>emphasized</em> text.
  • Different fonts for <b>bold</b> and <strong>strong</strong> text.
  • The addition of a .fineprint class for very small text.
  • Better styled and automatically inserted quotation marks for quotes and blockquotes

Typical elements containing text

Tag / Class Font Size Line-height Style Weight Sample
<h1> .h1 Roboto Slab 42px 52px Normal 400

Hello World

<h2> .h2 Roboto Slab 36px 39px Normal 400

Hello World

<h3> .h3 Roboto 24px 26px Normal 400

Hello World

<h4> .h4 Roboto 20px 26px Normal 400

Hello World

<h5> .h5 Roboto 14px 26px Uppercase 400
Hello World
<h6> .h6 Verdana 12px 13px Uppercase 400
Hello World
.fineprint Verdana 9px 13px Normal 400 Hello World
<body> Roboto 17px 26px Normal 300 Hello World
<small> .small Roboto 75% 1em Normal 300 Hello World
<b> Roboto no value 1em Bold 700 Hello World
<strong> Roboto Slab no value 1em Bold 700

Hello World

<i>, <dfn>, <var> Roboto no value 1em Italic 300 Hello World
<em>, <cite> Droid Serif no value 1em Italic 400 Hello World
<pre>, <code>, <kbd>, <samp> Monospace no value 1em Monospace 400 Hello World
<mark> .mark1 Roboto no value 1em Normal 300 Hello World
<u>, <ins> Roboto no value 1em Normal 300 Hello World
<s>, <strike>, <del> Roboto no value 1em Normal 300 Hello World
<abbr> Roboto no value 1em Normal 300 Hello World
<sub> Roboto 65% 02 Normal 400 HelloWorld
<sup> Roboto 65% 02 Normal 400 HelloWorld
<a> Roboto no value 1em Normal 400 Hello World
<a> :hover Roboto no value 1em Normal 400 Hello World
<aside>8 Roboto no value no value Normal 300
<blockquote>3 Droid Serif no value no value Italic 400

Hello World Hello World Hello World Hello World Hello World Hello World

<blockquote> .source4 Roboto no value no value Normal 400 Hello World
<q>5 Roboto no value 1em Normal 300 Hello World
<address> Droid Serif no value no value Italic 400
Mr. Hello World
Hello World Street 15 E 88
00210 Hello
WORLD
span.initialx2 Roboto 54px 48px Normal 400 Hello World Hello World Hello World Hello World Hello World Hello World Hello World
span.initialx3 Roboto 84px 74px Normal 400 Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World
span.initialx2 <strong> Roboto Slab 54px 48px Bold 700 Hello World Hello World Hello World Hello World Hello World Hello World Hello World
span.initialx3 <strong> Roboto Slab 84px 74px Bold 700 Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World
<dl> <dt> <dd> Roboto no value no value Normal 400 300
Hello
World
<dl> .inline <dt> <dd>7 Roboto no value no value Normal 400 300
Hello
World
<ul> <li> Roboto no value no value Normal 300
  • Hello
    • World
      • Again
<ol> <li> Roboto no value no value Normal 300
  1. Hello
    1. World
      1. Again
<figure> <figcaption>8 Roboto 14px no value Normal 300
Hello World
  1. IE8 and earlier do not support the <mark> tag, so a class is available
  2. both <sub> and <sup> have position:relative; vertical-align:baseline; bottom:-0.3em and bottom:0.7em respectively
  3. The quotation mark is added automatically
  4. The horizontal line and space is add automatically
  5. The quotation marks are added automatically
  6. The Semi-colon and full-stop are added automatically
  7. The Camera and space are added automatically
  8. The border is added to the left or right depending on which class .left-X or -right-X is used

A to Z examples of fonts

Regular
XENOPHOBIC QUIZMASTER VILIFIED JAYWALKING
amplifying overwatched quartz jukeboxes
Italic
XENOPHOBIC QUIZMASTER VILIFIED JAYWALKING
amplifying overwatched quartz jukeboxes
Emphasized
XENOPHOBIC QUIZMASTER VILIFIED JAYWALKING
amplifying overwatched quartz jukeboxes
Bold
XENOPHOBIC QUIZMASTER VILIFIED JAYWALKING
amplifying overwatched quartz jukeboxes
Strong
XENOPHOBIC QUIZMASTER VILIFIED JAYWALKING
amplifying overwatched quartz jukeboxes

Icon Font

Icon font - Generated using the fantastic service over at Icomoon.

I tried to include as many "typical" icons as possible without going overboard

To add an icon simply write <span class="icon-[name]"></span>


            

 icon-number-0

 icon-number-1

 icon-number-2

 icon-number-3

 icon-number-4

 icon-number-5

 icon-number-6

 icon-number-7

 icon-number-8

 icon-number-9

 icon-arrow-left

 icon-arrow-right

 icon-arrow-up

 icon-arrow-down

 icon-left

 icon-right

 icon-up

 icon-down

 icon-sort

 icon-sort-up

 icon-sort-down

 icon-plus

 icon-minus

 icon-share

 icon-facebook

 icon-twitter

 icon-google-plus

 icon-github

 icon-dribbble

 icon-picasa

 icon-linkedin

 icon-pinterest

 icon-vimeo

 icon-flickr

 icon-youtube

 icon-mail

 icon-feed

 icon-reply

 icon-foward

 icon-retweet

 icon-comment

 icon-heart

 icon-star

 icon-thumbs-up

 icon-thumbs-down

 icon-verified

 icon-cog

 icon-tools

 icon-home

 icon-user

 icon-login

 icon-logout

 icon-search

 icon-menu

 icon-cross

 icon-play

 icon-remove

 icon-ok

 icon-plane

 icon-calendar

 icon-download

 icon-upload

 icon-earth

 icon-tag

 icon-pencil

 icon-paperclip

 icon-paypal

 icon-credit

 icon-cart

 icon-warning

 icon-help

 icon-info

 icon-quote

 icon-open-quote

 icon-repeat

 icon-ampersand

 icon-file

 icon-bookmark

 icon-clock

 icon-picture

 icon-key

 icon-phone

 icon-disk

 icon-link

 icon-map-marker

 icon-print

 icon-camera

 icon-spinner

 icon-music

 icon-bar

 icon-at

 icon-alarm

Add-ons

Buttons

Shape & Type

by adding the class btn You can turn a <a>, <button> or <input> into a styled button.

Link
<a class="btn regular" href="#">Link</a>
<button class="btn regular" type="submit">Button</button>
<input class="btn regular" type="submit" value="Input">

By adding the class rounded or pill You can change the shape of the button

Link
<a class="btn regular" href="#">Link</a>
<button class="btn regular rounded" type="submit">Button</button>
<input class="btn regular pill" type="submit" value="Input">

You can also add symbols from the icon font like so...

Send
<a class="btn regular rounded" href="#"><span class="icon-paperplane"></span> Send</a>
<button class="btn regular pill" type="submit"><span class="icon-download"></span> Download</button>

Sizes

The size of the button is controlle by the font size, so simply add the class "h1", "h2", "h3", "regular" or "small" to get the desired button size.

Download
<a class="btn h1 rounded" href="#"><span class="icon-download"></span> Download</a>
Download
<a class="btn h2 rounded" href="#"><span class="icon-download"></span> Download</a>
Download
<a class="btn h3 rounded" href="#"><span class="icon-download"></span> Download</a>
Download
<a class="btn small rounded" href="#"><span class="icon-download"></span> Download</a>

You can also make a responsive button by adding column sizes to it, like below...

Download
<a class="btn regular rounded col-4 center m-col-8 m-center" href="#"><span class="icon-download"></span> Download</a>

Image Slider

Setup

To enable an image slider, like the one below, uncomment the <link rel="stylesheet" href="css/articlr.slider.min.css"> and the
<script src="//cdnjs.cloudflare.com/ajax/libs/ResponsiveSlides.js/1.53/responsiveslides.min.js"></script> in the <head>.

Add your images that you want in the slider in an unsorted list, the html for the slider below is...

<div class="col-8 center m-col-10 m-center">
  <ul id="slider-1" class="slider">
    <li>
      <img src="images/1.jpg" alt="">
    </li>
    <li>
      <img src="images/2.jpg" alt="">
    </li>
    <li>
      <img src="images/3.jpg" alt="">
    </li>
    <li>
      <img src="images/4.jpg" alt="">
    </li>
    <li>
      <img src="images/5.jpg" alt="">
    </li>
    <li>
      <img src="images/6.jpg" alt="">
    </li>
  </ul>
</div>

And finally call the plugin before the closing </body> tag.

    ...
    <script>
      $("#slider-1").responsiveSlides();
    </script>        
  </body>
</html>

The ResponsiveSlides Plugin is created by Viljami Salminen, and distributed under the MIT license.
For more information about this fantastic lightweight plugin - including more advanced options - head over to the ResponsiveSlides homepage.

Captions

You can add individual captions - a short description of the picture - easily to either the top or bottom (default) of the picture, captions can also contain links.

Simply add the caption after the image you want to add a caption to, like so...

<li>
  <img src="images/5.jpg" alt="">
  <p class="caption">This image has a caption with a <a href="#">link</a></p>
</li>
<li>
  <img src="images/4.jpg" alt="">
  <p class="caption top">This image has a caption at the top</p>
</li>
  • This image has a caption with a link

  • This image has a caption at the top

Overlays

Overlays are similar to captions, except they are larger in size, and take a more central position over the picture

Simply add the overlay after the image you want to add an overlay to, like so...

<li>
  <img src="images/5.jpg" alt="">
  <h1 class="overlay top">Visit The Bahamas</h1>
</li>
<li>
  <img src="images/4.jpg" alt="">
  <h2 class="overlay top">Save</h2>
  <h3 class="overlay middle">Save</h3>
  <h1 class="overlay bottom">Save</h1>
</li>
  • Visit The Bahamas

  • Save

    the

    Parrots!

Thumbnail Navigation

Tables

Unsortable Table

To add some style to tables uncomment the <link rel="stylesheet" href="css/articlr.table.min.css"> in the <head>.

Add the class="table" to the <table> element, so it looks like <table class="table">

# Name Age Country Amount Year Fruit Sex
1 Mike 21 England 0.59 2012 Apple male
2 Laura 24 USA 4.73 1999 Pear alien
3 Sophia 21 Russia -4.73 1996 Banana female
4 Bob 67 Scotland 29 1990 Plum robot
5 Anna 20 Finland 0.99 2013 Peach female
6 Paul 30 England -0.88 2000 Avacado male
7 Benita 21 Germany 33 2007 Mellon female
8 Mike 31 Belgium 100 2011 Banana male
9 Andrew 35 France 100.33492 2008 Banana male

Sortable Table

To enable table sorting uncomment the <script src="js/stupidtable.min.js"></script> in the <head>.

Add, for example, an id="table-1" to the <table> element, so it looks like <table id="table-1" class="table">

In the <thead> add the data-sort attribute to each <th> whose data you want to be sortable. The <thead> of the below table looks like this

<table id="table-1" class="table">
  <thead>
    <tr>
      <th data-sort="int">#</th>
      <th data-sort="string">Name</th>
      <th data-sort="int">Age</th>
      <th data-sort="string">Country</th>
      <th data-sort="float">Amount</th>
      <th data-sort="int">Year</th>
      <th>Fruit</th>
      <th data-sort="string">Sex</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mike</td>
      ...

And finally call the plugin before the closing </body> tag.

    ...
    <script>
      $("#table-1").stupidtable();
    </script>        
  </body>
</html>

The Stupid jQuery Plugin is created by Joseph McCullough, and distributed under the MIT license.
For more information about this plugin - including more advanced sorting options - head over to the Github page.

# Name Age Country Amount Year Fruit Sex
1 Mike 21 England 0.59 2012 Apple male
2 Laura 24 USA 4.73 1999 Pear alien
3 Sophia 21 Russia -4.73 1996 Banana female
4 Bob 67 Scotland 29 1990 Plum robot
5 Anna 20 Finland 0.99 2013 Peach female
6 Paul 30 England -0.88 2000 Avacado male
7 Benita 21 Germany 33 2007 Mellon female
8 Mike 31 Belgium 100 2011 Banana male
9 Andrew 35 France 100.33492 2008 Banana male

Twitter Feeds

Setup

Twitter is the most popular micro-blogging service on the web, and deserves its own category. BUT, as of Twitter API(1.1) displaying tweets on your web page has become a laborious process, fortunately Jason Mayes has created the TwitterFetcher - A JavaScript Solution for displaying tweets, which makes twitter intergration a breeze.

To enable twitter intergration, uncomment the <link rel="stylesheet" href="css/articlr.twitter.min.css"> and the
<script src="js/twitterFetcher_v10_min.js"></script> in the <head>.

Then You need to head over to Twitter > Settings > Widgets and create a new widget.
Here are 5 examples of different widgets you can create.

feed

This is the setup required to display the tweets from your/someone elses user timeline.

add the class "twitter-feed" to the element that contains the twitter feed

favorites

This is the setup required to display the tweets you/someone else has favorited. This example shows all the tweets that Ricky Gervais has favorited.

p>add the class "twitter-favorites" to the element that contains the favorited tweets

lists

This is the setup required to display the tweets from a list that you are either subscribed to or are a member of.

add the class "twitter-list" to the element that contains the list of tweets.

searches

This is the setup required to display the tweets that match a seach query, you can search for tweets with the word(s) eg. "Nokia" and "Microsoft", the hashtags "#Nokia" and "#Microsoft" or mentions "@obama" and "@mandela" Seach queries are not case sensative.

add the class "twitter-search" to the element that contains the twitter search results.

custom timeline

This is the setup required to display the tweets from a custom timeline that you have created. To create a custom timeline, you will have to sign-in to tweetdeck and create one from there. Here is a Mashable article guiding you through the steps.

add the class "twitter-custom" to the element that contains the custom twitter timeline.

once you have the number from the URL eg. https://twitter.com/settings/widgets/411057835875651584/edit copy and paste it into the script, which you call before the closing </body> tag, like so...

    ...
    <script>
    twitterFetcher.fetch('411057835875651584', 'MyFeed', 6, true, true);
    </script>        
  </body>
</html>

Finally create an empty <div id="MyFeed" class="col-6 center m-col-10 m-center twitter-feed"></div> container in your HTML to display the tweets!

Options

There are several options available to this plugin

twitterFetcher.fetch('A','B',C,D,E,F,'G',H,'I',J);
A 18-digit widget id
B The ID of the DOM element you want to write results to.
C Number of tweets to display (1-20)
D set true if you want urls and hashtags to be hyperlinked (Optional, default - false)
E Set false if you dont want user photo & name for tweet to show (Optional, default - true)
F Set false if you dont want time of tweet to show (Optional, default - true)
G A function you can specify to format tweet date/time (Optional, default - 'default')
H Show retweets or not. Set false to not show (Optional, default - true)
I A function to call when data is ready (Optional, default - undefined)
J Show links for reply, retweet & favourite. Set false to not show. (Optional, default - true)