Basel;ne est un projet typographique concentré sur le rythme vertical et la ligne de base pour les navigateurs modernes.

Pour les impatients, voici un exemple didactique et un exemple à emporter.

Typographie

La ligne de base est de 24 pixels.
le corps typographique principal est basé sur l’interlignage 24 × 2/3 = 16.
L’échelle typographique est de 18, 21, 24, 36, 48, 60 pixels.

h1 — h6

H1 H2 H3 H4 H5 H6

/* USING LESS
@font-size:16px;
@baseline:24px;

@h1:@baseline*2.5; // 60
@h2:@baseline*2; // 48
@h3:@baseline*1.5; // 36
@h4:@baseline*1.25; // 24
@h5:@font-size*1.3125; // 21
@h6:@font-size*1.125; // 18
@small:@baseline*0.5; // 12
*/

Chaque élément a besoin d'une class css pour « accrocher » à la ligne de base :

triple ou double pour h1, h2, h3 et h4
simple pour h5, h6 et p
vous pouvez ajuster d'une ligne vers le haut ou le bas en utilisant les class up et down.

/* the trick  */
.simple:before{
	content:'';
	display: inline-block;
	vertical-align: baseline;
	height:@baseline;
}
.simple:after{
	content:'';
	display: inline-block;
	vertical-align: -@baseline;
	height:@baseline;
}
.double:before{
	content:'';
	display: inline-block;
	vertical-align: baseline;
	height:@baseline*2;
}
.double:after{
	content:'';
	display: inline-block;
	vertical-align: -@baseline;
	height:@baseline*2;
}
.triple:before{
	content:'';
	display: inline-block;
	vertical-align: baseline;
	height:@baseline*3;
}
.triple:after{
	content:'';
	display: inline-block;
	vertical-align: -@baseline;
	height:@baseline*3;
}
.up{
	margin-top: -@baseline;
}
.down{
	margin-top: @baseline;
}


<!--
emmet/zen coding : 
h1.triple+div.col-4.clearfix>p.simple.grid-3
h2.double+div.clearfix.col-4>p.simple.grid-2+p.simple.grid-2
-->
<h1 class="triple"></h1>
<div class="col-4 clearfix">
	<p class="simple grid-3"></p>
	<p class="simple up grid-3"></p>
</div>

<-- h3.double
+div.clearfix.col-4>p.simple.grid-3
+div.grid-2+h3.double+p.simple+figure>img+caption
^div.grid-1>h4.simple+p.simple^p.simple.grid-1
+div.grid-2>p.simple -->
<h3 class="double"></h3>
<div class="clearfix col-4">
	<p class="simple grid-3"></p>
	<div class="grid-2"></div>
	<h3 class="double"></h3>
	<p class="simple"></p>
	<figure>
		<img src="" alt="" />
		<caption></caption>
	</figure>
	<div class="grid-1">
		<h4 class="simple"></h4>
		<p class="simple"></p>
	</div>
	<p class="simple grid-1"></p>
	<div class="grid-2">
		<p class="simple"></p>
	</div>
</div>

h1. Heading 1

Brendan Eich est un informaticien américain, né en 1961, créateur du langage JavaScript et membre du bureau de la fondation Mozilla. Brendan Eich a commencé sa carrière chez Silicon Graphics : pendant sept ans, il travaille sur du code de système d'exploitation et réseau. Il rejoint ensuite pour trois ans l'entreprise MicroUnity Systems Engineering.

Il contribue ensuite à la fondation de mozilla.org au début de 1998, en tant qu'architecte du projet. Lorsque AOL stoppe le développement du navigateur Netscape en juillet 2003, il contribue au développement de la Fondation Mozilla.

h2. Heading 2

Eich est surtout connu pour ses activités chez Netscape Communications Corporation et le projet Mozilla. Il commence chez Netscape en avril 1995, où il prend part au développement du langage JavaScript (appelé à l'origine Mocha, puis LiveScript) pour le navigateur web Netscape Navigator.

Mix

h3. Heading 3

0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz

sample

Eich est surtout connu pour ses activités chez Netscape Communications Corporation et le projet Mozilla.

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Tableau

Les tableaux utilisent un réglage spécifique

Le texte ne s'aligne pas sur la grille
Quelques ajustements pour les bordures (selon le modèles de boîtes)

table{
    border-collapse: collapse;
    margin-top:-1px;
    margin-bottom: @baseline;
    text-align: left;
    font-size: (@font-size)-2;
    text-indent: @baseline;
}
td, th {
    border: 1px solid @second-color-light;
    width: (8*@baseline);
    height:(2*@baseline)-1;
    line-height: (2*@baseline)-1;
}

Name	Age	Country
John	of Empire	France
Guenter	40	Kinder

Formulaire

Textarea et input s'ajustent comme les tableaux

Top position et height
Dans cette exemple, J'ai utilisé des demi marges.

Vidéo

L’iframe de Vimeo est de 552 × 310, la margin-top à -1px et la margin-bottom à 2px.
formule : Math.ceil(310/24)*24-310 = 2px