Add header example.
This commit is contained in:
mrmrs
parent
cf2a63b543
commit
c0ff51f435
4 changed files with 38 additions and 25 deletions
48
css/i.css
48
css/i.css
|
|
@ -123,43 +123,43 @@
|
|||
/*
|
||||
BORDER STYLES
|
||||
*/
|
||||
.ba-none { border-style: none; }
|
||||
.bs-none { border-style: none; }
|
||||
|
||||
.ba-dotted { border-style: dotted; }
|
||||
.bs-dotted { border-style: dotted; }
|
||||
|
||||
.ba-solid { border-style: solid; }
|
||||
.bs-solid { border-style: solid; }
|
||||
|
||||
@media screen and (min-width: 48em) { .ba-none-ns { border-style: none; }
|
||||
.ba-dotted-ns { border-style: dotted; }
|
||||
.ba-solid-ns { border-style: solid; } }
|
||||
@media screen and (min-width: 48em) and (max-width: 64em) { .ba-none-m { border-style: none; }
|
||||
.ba-dotted-m { border-style: dotted; }
|
||||
.ba-solid-m { border-style: solid; } }
|
||||
@media screen and (min-width: 64em) { .ba-none-l { border-style: none; }
|
||||
.ba-dotted-l { border-style: dotted; }
|
||||
.ba-solid-l { border-style: solid; } }
|
||||
@media screen and (min-width: 48em) { .bs-none-ns { border-style: none; }
|
||||
.bs-dotted-ns { border-style: dotted; }
|
||||
.bs-solid-ns { border-style: solid; } }
|
||||
@media screen and (min-width: 48em) and (max-width: 64em) { .bs-none-m { border-style: none; }
|
||||
.bs-dotted-m { border-style: dotted; }
|
||||
.bs-solid-m { border-style: solid; } }
|
||||
@media screen and (min-width: 64em) { .bs-none-l { border-style: none; }
|
||||
.bs-dotted-l { border-style: dotted; }
|
||||
.bs-solid-l { border-style: solid; } }
|
||||
/* BORDER WIDTHS
|
||||
LEGEND
|
||||
b = border
|
||||
a = all t = top b = bottom l = left r = right
|
||||
w = width
|
||||
b = border w = width
|
||||
0-5 = step in sizing scale
|
||||
|
||||
*/
|
||||
.baw0 { border-width: 0; }
|
||||
.bw0 { border-width: 0; }
|
||||
|
||||
.baw1 { border-width: .125rem; }
|
||||
.bw1 { border-width: .125rem; }
|
||||
|
||||
.baw2 { border-width: .25rem; }
|
||||
.bw2 { border-width: .25rem; }
|
||||
|
||||
.baw3 { border-width: .5rem; }
|
||||
.bw3 { border-width: .5rem; }
|
||||
|
||||
.baw4 { border-width: .75rem; }
|
||||
.bw4 { border-width: .75rem; }
|
||||
|
||||
.baw5 { border-width: 1rem; }
|
||||
.bw5 { border-width: 1rem; }
|
||||
|
||||
/*
|
||||
BORDER BASE
|
||||
Legend
|
||||
a = all t = top r = right b = bottom l = left
|
||||
|
||||
*/
|
||||
.ba { border-style: solid; border-width: 1px; }
|
||||
|
|
@ -268,7 +268,9 @@
|
|||
.dtcolg-l { display: table-column-group; } }
|
||||
/*
|
||||
FLOATS
|
||||
1. Floated elements are automatically rendered as block level elements. Setting floats to display inline will remove double margin bug in ie6. You know, just in case.
|
||||
1. Floated elements are automatically rendered as block level elements. Setting floats to display inline will fix the double margin bug in ie6. You know... just in case.
|
||||
Legend
|
||||
f = float l = left r = right n = none
|
||||
|
||||
*/
|
||||
.fl { float: left; display: inline; }
|
||||
|
|
@ -292,7 +294,7 @@
|
|||
*/
|
||||
.serif { font-family: georgia, serif; }
|
||||
|
||||
.sans-serif { font-family: avenir, 'avenir next', helvetica, arial, sans-serif; }
|
||||
.sans-serif { font-family: 'Source Sans Pro', sans-serif; }
|
||||
|
||||
.code { font-family: Consolas, monaco, monospace; }
|
||||
|
||||
|
|
|
|||
|
|
@ -8,9 +8,10 @@
|
|||
<meta name="author" content="@mrmrs">
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/i.css">
|
||||
</head>
|
||||
<body>
|
||||
<body class="sans-serif">
|
||||
<header>
|
||||
<h1>TACHYONS</h1>
|
||||
<h2>Markup examples for layouts and components</h2>
|
||||
|
|
@ -25,6 +26,15 @@
|
|||
<li>Footer with multiple columns</li>
|
||||
<li>Prose / Typography styles</li>
|
||||
</ul>
|
||||
<section>
|
||||
<h1>Headers</h1>
|
||||
<header class="bg-maroon wht pal pax-ns">
|
||||
<h1 class="fw4 fw1 ttu tc-l thin mega-l man">Tachyons</h1>
|
||||
<h2 class="fw1 uc ttu tc-l tabs small f4-ns">
|
||||
Performance-first responsive css patterns
|
||||
</h2>
|
||||
</header>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<title>
|
||||
HTML 5 PROTOTYPE
|
||||
</title>
|
||||
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet">
|
||||
<meta name="author" content="@mrmrs">
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
*/
|
||||
|
||||
.serif { font-family: georgia, serif; }
|
||||
.sans-serif { font-family: avenir, 'avenir next', helvetica, arial, sans-serif; }
|
||||
.sans-serif { font-family: 'Source Sans Pro', sans-serif; }
|
||||
|
||||
// From http://cssfontstack.com
|
||||
.code { font-family: Consolas, monaco, monospace; }
|
||||
|
|
|
|||
Loading…
Reference in a new issue