Basel;ne is a typographic experiment focused on vertical rythm and real baseline grid for modern browsers.

For the Impatient, check this simple page or download sample.

Typography

The baseline grid is 24 pixels.
Body font-size is based on the leading 24 × 2/3 = 16.
Typographic scale for heading is 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
*/

Each text element needs a class to snap to the baseline.

triple or double for h1, h2, h3 and h4
simple for h5, h6 and p
you can adjust with up/down to move on up or 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.

table

Table needs another setting

Vertical centering of text with line-height
Top position, border and height adjustement

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

form

Textarea and input have adjustement like table

Top position and height
In this form, I used half line-height for the margin-bottom

video

Vimeo iframe is 552 × 310, I fixed a margin-top:-1px and margin-bottom:2px
Math.ceil(310/24)*24-310 = 2