Thematic 5 Typography

form styling

by helgatheviking

HTML

<link rel="stylesheet" href="https://raw.github.com/necolas/normalize.css/master/normalize.css">
<form>
<fieldset><legend>Sample Inputs</legend><label for="input01">Text input</label><input id="input01" type="text" />
<label for="optionsCheckbox">Checkbox</label>Option<input id="optionsCheckbox" type="checkbox" value="option1" />
<label for="select01">Select list</label>
<select> <option>something</option>
<select> <option>2</option>
<select> <option>3</option>
<select> <option>4</option>
<select> <option>5</option></select>
<label for="multiSelect">Multicon-select</label>
<select multiple="multiple"> <option>1</option>
<select multiple="multiple"> <option>2</option>
<select multiple="multiple"> <option>3</option>
<select multiple="multiple"> <option>4</option>
<select multiple="multiple"> <option>5</option></select>
<label for="fileInput">File input</label><input id="fileInput" class="input-file" type="file" />
<label for="textarea">Textarea</label><textarea id="textarea" rows="3"></textarea>
<div class="form-actions"><button class="btn btn-primary" type="submit">Save changes</button>
<button class="btn">Cancel</button></div></fieldset>
</form>

CSS

/* temporary */
body { background: url(https://github.com/helgatheviking/Thematic5/raw/typography/library/grids/26px_grid_bg.gif); background-position: 0 0px }

/*
 * Typography Styles
 */

 /* default font */
 /* 16px base font size with 162.5% (26px) golden-ish, unitless line height and margin for vertical rhythm 
 /* Font-size unit is based on 16px browser default size */

body, button, input, select, textarea {font: 1em/1.625em Georgia,Palatino,"Palatino Linotype",Times,"Times New Roman",serif; color: #262626} 
body {-webkit-font-smoothing:antialiased; font-smoothing:antialiased; text-rendering:optimizeLegibility;}

/* headings */
/* Composed to a scale of 12px, 14px, 16px, 18px, 21px, 24px, 36px, 48px, 60px and 72px */
h1, h2, h3, h4, h5, h6 {font-family:Futura, "Century Gothic", AppleGothic, sans-serif; color:#0f0f0f;text-shadow:1px 1px 1px rgba(0,0,0,.10)}

h1  {
    margin: 0 0 0.433em;
    font-size: 3.75em; /* 60px */
    line-height: 1.3em; /* 78px */
} 
h2 {
    margin: 0 0 0.5417em;
    font-size: 3em;  /* 48px */
    line-height: 1.0833em; /* 52px */
} 
h3 {
    margin: 0 0 0.7222em;
    font-size: 2.25em; /* 36px */
    line-height: 1.4444em; /* 52px */
} 
h4 {
    margin: 0 0 1.0833em;
    font-size: 1.5em; /* 24px */
    line-height: 1.0833em; /* 26px */
} 
h5 {
    margin: 0 0 1.2381em;
    font-size: 1.3125em; /* 21px */
    line-height: 1.2381em; /* 26px */
} 
h6 {
    margin: 0 0 1.4444em;
    font-size: 1.125em; /* 18px */
    line-height: 1.4444em; /* 26px */
} 

/* vertical rhythm on elements */
p, ul, ol, dl, pre, table, form {margin: 0 0 1.625em; }

/* quotes */
blockquote { margin:0 3em; font-style:italic; padding-left: 1.625em; border-left: .25em solid #c2ced6}
blockquote em, blockquote i, blockquote cite { font-style:normal; }
blockquote.left { text-align:right; }
blockquote.right { text-align:left; }

/*lists*/
ul { list-style:disc; }
ol { list-style-type:decimal; }
ol ol { list-style:upper-alpha; }
ol ol ol { list-style:lower-roman;...