Type

Fuentes Variables vs fuentes fijas

Holygrail is a CSS and html library for building user interfaces. Learn what Holygrail is all about on our homepage .

Typography

Tipografia

Class Properties
h1 Be creative every day
h2 Be creative every day
h3 Be creative every day
h4 Be creative every day
h5 Be creative every day
h6 Be creative every day
h7 Be creative every day
h8 Be creative every day
h9 Be creative every day
h10 Be creative every day 
$headers-custom: 
/*  name:   1 ->   ,768 -> ,992 -> ,1280 ->,1500 -> ,line-height, font     */
	(h1:   (32px   ,32px   ,32px   ,32px   ,40px    ,1.2        , "medium" ))
@include types($breakpoints, $headers-custom, $fs);
Párrafos titulo 2

Creamos un nuevo array de elementos y los incluimos, p. ej:

Class Properties
p1 Be creative every day
p2 Be creative every day
p3 Be creative every day
p4 Be creative every day
p5 Be creative every day
p6 Be creative every day
p7 Be creative every day
p8 Be creative every day
p9 Be creative every day
p10 Be creative every day
Tipografias fijas

Creamos un nuevo array de elementos y los incluimos, esto nos generará sus tres versiones, -r regular , -m medium , -b bold , p. ej:

Class Properties
.text-12-r Be creative every day
.text-12-m Be creative every day
.text-12-b Be creative every day
.text-14-r Be creative every day
.text-14-m Be creative every day
.text-14-b Be creative every day
.text-16-r Be creative every day
.text-16-m Be creative every day
.text-16-b Be creative every day
.text-18-r Be creative every day
.text-18-m Be creative every day
.text-18-b Be creative every day 
$headersFixers-custom: (
/*name :  fontsize, lineheight */	
	12 : (12px    , 1.5 ) ) ;
@include typesFixers($headersFixers-custom, $fs);
Types Responsive

Tipografia cambiante mediante breakpoints

Header
mobile xs
tablet sm
tablet md
desktop lg
line-height
font-weight
Texto fluido
 @include fluid-text($min_width, $break-lg, 10px, 16px);
Header
fluid-12-[ r m b]
From
To
Line height