Skip to content

Instantly share code, notes, and snippets.

@xasima
Created April 8, 2013 17:02
Show Gist options
  • Select an option

  • Save xasima/5338461 to your computer and use it in GitHub Desktop.

Select an option

Save xasima/5338461 to your computer and use it in GitHub Desktop.
Declare closure-stylesheet mixins (3-typography.gss) and try to use them (in 5-main.gss)
/* Typograph Vertical Rythms via http://drewish.com/tools/vertical-rhythm
Initial params:
Georgia - base font-family,
15px - base font,
22.5 - line height ,
40, 35, 30 20 15 13 - target fonts rythms
--------------------*/
@def _FNT_SIZE 15;
@def _EM _FNT_SIZE;
body {
font-size: mult(1px,_FNT_SIZE);
}
p {
font-size: 1em; /* 15px */
line-height: 1.4667em; /* 22px */
margin: 0 0 1.4667em 0;
}
@defmixin small() {
font-size: 0.8667em; /* 13px */
line-height: 1.6923em; /* 22px */
margin-top: 1.6923em;
margin-bottom: 0em;
}
.small {
@mixin small();
}
@defmixin normal() {
font-size: 1em; /* 15px */
line-height: 1.4667em; /* 22px */
margin-top: 1.4667em;
margin-bottom: 0em;
}
@defmixin big() {
font-size: 1.3333em; /* 20px */
line-height: 1.1em; /* 22px */
margin-top: 1.1em;
margin-bottom: 0em;
}
.big {
@mixin big();
}
@defmixin large() {
font-size: 2em; /* 30px */
line-height: 1.4667em; /* 44px */
margin-top: 0.7333em;
margin-bottom: 0em;
}
.large {
@mixin large();
}
@defmixin huge() {
font-size: 2.3333em; /* 35px */
line-height: 1.2571em; /* 44px */
margin-top: 0.6286em;
margin-bottom: 0em;
}
.huge{
@mixin huge();
}
@defmixin gigantic() {
font-size: 2.6667em; /* 40px */
line-height: 1.1em; /* 44px */
margin-top: 0.55em;
margin-bottom: 0em;
}
.gigantic {
@mixin gigantic();
}
h1 {
@mixin large();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment