show / ctrl+G

basel;ne

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.

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.

Mix

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.

h3. Heading 3

0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz

low gut
cmd + P

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
Who
Address

video

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

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.