Difference between revisions of "Talk:Organized Power/Test"

From TeleCafeWiki
Jump to navigation Jump to search
m (Test grids.)
Line 7: Line 7:
 
* [[wikipedia: http://www.mediawiki.org/wiki/Manual:$wgForeignFileRepos#Using_files_from_a_database_that_you_can_access_:_ForeignDBRepo|Using files from a database that you can access : ForeignDBRepo]]
 
* [[wikipedia: http://www.mediawiki.org/wiki/Manual:$wgForeignFileRepos#Using_files_from_a_database_that_you_can_access_:_ForeignDBRepo|Using files from a database that you can access : ForeignDBRepo]]
 
: -[[User:Kotra|Kotra]] 20:26, 13 September 2011 (PDT)
 
: -[[User:Kotra|Kotra]] 20:26, 13 September 2011 (PDT)
 +
 +
<css>
 +
 +
 +
/*-------------------------------------------+
 +
|                                            |
 +
|            MAIN STRUCTURE STYLES          |
 +
|                                            |
 +
+-------------------------------------------*/
 +
 +
.wrapper{
 +
width:94em;
 +
margin:0 auto;
 +
}
 +
.header{
 +
width:94em;
 +
padding-top:1.5em;
 +
margin-bottom:2em;
 +
}
 +
/*GRIDS
 +
-------------------------------------------------------- */
 +
/* Set styles common among all grids - all grid divs must be assigned this class */
 +
.generic{
 +
border-top:0.5em solid #666; /* The border at the top of each grid */
 +
float:left;
 +
padding-top:1em;
 +
margin-bottom:2em;
 +
}
 +
/* Sets styles for any 'start' grids - this class MUST be given to a grid that is the first in a horizontal series */
 +
.clear{
 +
clear:both;
 +
}
 +
/* Sets styles for any 'end' grids - this class MUST be given to a grid that is the last in a horizontal series */
 +
.end{
 +
margin-left:0 !important;
 +
margin-right:0 !important;
 +
}
 +
/* 220px */
 +
.twotwenty{
 +
width:22em;
 +
margin-right:2em;
 +
}
 +
/* 280px */
 +
.twoeighty{
 +
width:28em;
 +
margin-right:2em;
 +
}
 +
/* 340px */
 +
.threeforty{
 +
width:34em;
 +
margin-right:2em;
 +
}
 +
/* 400px */
 +
.fourhun{
 +
width:40em;
 +
margin-right:2em;
 +
}
 +
/* 460px */
 +
.foursixty{
 +
width:46em;
 +
margin-right:2em;
 +
}
 +
/* 520px */
 +
.fivetwenty{
 +
width:52em;
 +
margin-right:2em;
 +
}
 +
/* 580px */
 +
.fiveeighty{
 +
width:58em;
 +
margin-right:2em;
 +
}
 +
/* 640px */
 +
.sixforty{
 +
width:64em;
 +
margin-right:2em;
 +
}
 +
/* 700px */
 +
.sevenhun{
 +
width:70em;
 +
margin-right:2em;
 +
}
 +
/* 760px */
 +
.sevensixty{
 +
width:76em;
 +
margin-right:2em;
 +
}
 +
/* 820px */
 +
.eighttwenty{
 +
width:82em;
 +
margin-right:2em;
 +
}
 +
/* 880px */
 +
.eighteighty{
 +
width:88em;
 +
margin-right:2em;
 +
}
 +
/* 940px */
 +
.nineforty{
 +
width:94em;
 +
}
 +
/*-------------------------------------------+
 +
|                                            |
 +
|                FONT STYLES                |
 +
|                                            |
 +
+-------------------------------------------*/
 +
/*PARAGRAPHS
 +
-------------------------------------------------------- */
 +
.generic p{
 +
font-size:1.2em;
 +
line-height:1.5em;
 +
margin-bottom:1.5em;
 +
}
 +
/* Styles an introductory paragraph, similar to newspapers. Assign this class to the first paragraph in an article */
 +
p.intro:first-line{
 +
font-variant:small-caps;
 +
}
 +
/* Styles a drop cap on each paragraph with this class */
 +
p.drop:first-letter{
 +
float:left;
 +
font-size:3em;
 +
margin-top:-0.05em;
 +
margin-right:0.1em;
 +
margin-bottom:-0.5em;
 +
}
 +
/*HEADINGS
 +
-------------------------------------------------------- */
 +
h1{
 +
color:#000;
 +
font-size:3em;
 +
margin-bottom:0.6em;
 +
font-style:italic;
 +
line-height:1.2em;
 +
}
 +
h2{
 +
color:#000;
 +
font-size:2em;
 +
margin-bottom:0.9em;
 +
line-height:0.9em;
 +
}
 +
h3{
 +
color:#000;
 +
font-size:1.5em;
 +
margin-bottom:1.2em;
 +
line-height:1.2em;
 +
font-variant:small-caps;
 +
}
 +
h4{
 +
color:#000;
 +
font-size:1.2em;
 +
margin-bottom:1.5em;
 +
line-height:1.5em;
 +
font-variant:small-caps;
 +
}
 +
h5{
 +
color:#000;
 +
font-size:1em;
 +
margin-bottom:1.8em;
 +
line-height:1.8em;
 +
font-variant:small-caps;
 +
}
 +
h6{
 +
color:#000;
 +
font-size:1em;
 +
margin-bottom:1.8em;
 +
line-height:1.8em;
 +
}
 +
/*LINKS
 +
-------------------------------------------------------- */
 +
p a{
 +
color:#000;
 +
}
 +
p a:hover{
 +
text-decoration:none;
 +
}
 +
h1 a{
 +
color:#000;
 +
}
 +
h1 a:hover{
 +
text-decoration:none;
 +
}
 +
li a{
 +
color:#000;
 +
}
 +
li a:hover{
 +
text-decoration:none;
 +
}
 +
/*ALL THE TRIMMINGS
 +
-------------------------------------------------------- */
 +
blockquote p{
 +
font-size:1.2em!important;
 +
line-height:1.5em!important;
 +
margin-bottom:1.5em!important;
 +
font-style:italic;
 +
font-weight:bold;
 +
}
 +
blockquote p cite{
 +
font-style:normal;
 +
}
 +
.generic strong{
 +
font-variant:small-caps;
 +
}
 +
.generic em{
 +
font-style:italic;
 +
font-weight:inherit;
 +
}
 +
.amp{ /* Give those ampersands a right sexy look */
 +
font-family:Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif;
 +
font-style:italic;
 +
font-weight:normal;
 +
line-height:inherit;
 +
}
 +
abbr{
 +
border-bottom:1px dotted #666;
 +
border-color:inherit;
 +
cursor:help;
 +
}
 +
.clear{
 +
clear:both;
 +
}
 +
.right-float{ /* Float any item to the right */
 +
float:right;
 +
margin-left:2em;
 +
margin-right:0;
 +
}
 +
.left-float{ /* Float any item to the left */
 +
float:left;
 +
margin-right:2em;
 +
margin-left:0;
 +
}
 +
.code{ /* Styling for and code type items */
 +
font-family:Courier, "Courier New", monospace;
 +
background:#ddd;
 +
font-size:1em;
 +
}
 +
/*-------------------------------------------+
 +
|                                            |
 +
|              IMAGE STYLES                |
 +
|                                            |
 +
+-------------------------------------------*/
 +
img{
 +
font-size:1em;
 +
}
 +
img.left-img{ /* Float any image to the LEFT and give it some margin */
 +
font-size:1em;
 +
float:left;
 +
padding:4px;
 +
border:1px solid #ccc;
 +
margin-bottom:1.8em;
 +
margin-right:2em;
 +
margin-top:0.3em;
 +
}
 +
img.right-img{ /* Float any image to the RIGHT and give it some margin */
 +
font-size:1em;
 +
float:right;
 +
padding:4px;
 +
border:1px solid #ccc;
 +
margin-bottom:1.8em;
 +
margin-left:2em;
 +
margin-top:0.3em;
 +
}
 +
/*CONTACT FORM STYLES
 +
-------------------------------------------------------- */
 +
.contact-form{
 +
}
 +
.contact-form label{
 +
width:10em;
 +
float:left;
 +
margin-top:0.6em;
 +
}
 +
.name, .form-email, .url, .location{
 +
width:42.7em;
 +
height:20px;
 +
padding:3px;
 +
padding-top:5px;
 +
border:2px solid #666;
 +
margin-bottom:18px;
 +
background:#fff !important;
 +
}
 +
.comments{
 +
width:43.8em;
 +
height:10em;
 +
padding:3px;
 +
border:2px solid #666;
 +
margin-bottom:18px;
 +
overflow:auto;
 +
background:#fff !important;
 +
}
 +
.name:active, .form-email:active, .url:active, .location:active, .comments:active, .submit:active, .name:focus, .form-email:focus, .url:focus, .location:focus, .comments:focus, .submit:focus{
 +
border:2px solid #000;
 +
}
 +
.submit{
 +
clear:both;
 +
padding:5px;
 +
border:2px solid #666;
 +
background:#fff !important;
 +
cursor:pointer;
 +
margin-left:9em;
 +
}
 +
.reset{
 +
clear:both;
 +
padding:3px;
 +
border:none;
 +
background:#f00 !important;
 +
cursor:pointer;
 +
float:right;
 +
color:#fff;
 +
margin-top:-28px;
 +
}
 +
/*-------------------------------------------+
 +
|                                            |
 +
|                LIST STYLES                |
 +
|                                            |
 +
+-------------------------------------------*/
 +
ul{
 +
margin-bottom:1.8em;
 +
list-style:square inside;
 +
}
 +
ul li{
 +
font-size:1.2em;
 +
line-height:1.5em;
 +
}
 +
ul li.caption{ /* Apply this class to the first list item in a list to give it a caption */
 +
font-variant:small-caps;
 +
list-style:none;
 +
color:#000;
 +
}
 +
li > ul, li > ol{
 +
margin-bottom:0;
 +
margin-left:5em;
 +
}
 +
li > ul li, li > ol li{
 +
font-size:1em;
 +
}
 +
ol{
 +
margin-bottom:1.8em;
 +
list-style:decimal inside;
 +
}
 +
ol li{
 +
font-size:1.2em;
 +
line-height:1.5em;
 +
}
 +
/*-------------------------------------------+
 +
|                                            |
 +
|              MISC. STYLES                |
 +
|                                            |
 +
+-------------------------------------------*/
 +
 +
 +
/*
 +
 +
"I could eat a knob at night"
 +
- Karl Pilkington
 +
 +
*/
 +
</css>
 +
 +
 +
<div class="wrapper">
 +
 +
<div class="generic nineforty">
 +
<h1>Typogridphy Demo Page &mdash; Use this page <span class="amp">&amp;</span> its grids as a basis for your typographical front-end development.</h1>
 +
</div>
 +
<div class="generic nineforty">
 +
<h2>940px</h2>
 +
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan diam vitae velit. Aliquam vehicula, turpis sed egestas porttitor, est ligula egestas leo, at interdum leo ante ut risus. Cras ut nunc. Phasellus imperdiet, urna in volutpat venenatis, mauris pede euismod pede, malesuada euismod turpis enim at arcu. Sed placerat accumsan mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam suscipit, quam at placerat interdum, quam turpis placerat pede, eget sagittis arcu sapien vel mauris. Nulla faucibus turpis eget tellus. Integer mattis dapibus lorem. Donec pretium lorem vel ligula. Fusce semper consequat dui. Integer ac mi. Cras faucibus nulla quis ipsum. Nunc augue turpis, tristique et, hendrerit id, hendrerit eu, lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur vulputate. Proin et erat id ipsum accumsan porttitor. Suspendisse tellus arcu, scelerisque vel, feugiat sit amet, aliquet sed, velit.</p>
 +
</div>
 +
<div class="generic twotwenty">
 +
<h2>220px</h2>
 +
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan diam vitae velit. Aliquam vehicula, turpis sed egestas porttitor, est ligula egestas leo, at interdum leo ante ut risus. Cras ut nunc. Phasellus imperdiet, urna in volutpat venenatis, mauris pede euismod pede, malesuada euismod turpis enim at.</p>
 +
</div>
 +
<div class="generic sevenhun end">
 +
<h2>700px</h2>
 +
<blockquote class="twoeighty right-float"><p>&ldquo;This is a blockquote, with a right float and a width of 280px. Even <em>this</em> maintains typographical flow!&rdquo; &mdash; <cite>Harry Roberts</cite></p></blockquote>
 +
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan diam vitae velit. Aliquam vehicula, turpis sed egestas porttitor, <strong>est ligula egestas leo</strong>, at interdum leo ante ut risus. Cras ut nunc. Phasellus imperdiet, urna in volutpat venenatis, mauris pede euismod pede, malesuada euismod turpis enim at arcu. Sed placerat accumsan mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam suscipit, quam at placerat interdum, quam turpis placerat pede, eget sagittis arcu sapien vel mauris. Nulla faucibus turpis eget tellus. Integer mattis dapibus lorem. Donec pretium lorem vel ligula. Fusce semper consequat dui. Integer ac mi. Cras faucibus nulla quis ipsum. Nunc augue turpis, tristique et, hendrerit id, hendrerit eu, lacus.</p>
 +
</div>
 +
<div class="generic twoeighty break">
 +
<h2>280px</h2>
 +
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan diam vitae velit. Aliquam vehicula, turpis sed egestas porttitor, est ligula egestas leo, at interdum leo ante ut risus. Cras ut nunc. Phasellus imperdiet, urna in volutpat venenatis, mauris pede euismod pede, malesuada euismod turpis enim at arcu. Sed placerat accumsan mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
 +
</div>
 +
<div class="generic sixforty end">
 +
<h2>640px</h2>
 +
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan diam vitae velit. Aliquam vehicula, turpis sed egestas porttitor, est ligula egestas leo, at interdum leo ante ut risus. Cras ut nunc. Phasellus imperdiet, urna in volutpat venenatis, mauris pede euismod pede, <em>malesuada euismod turpis enim at arcu</em>. Sed placerat accumsan mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam suscipit, quam at placerat interdum, quam turpis placerat pede, eget sagittis arcu sapien vel mauris. Nulla faucibus turpis eget tellus. Integer mattis dapibus lorem. Donec pretium lorem vel ligula. Fusce semper consequat dui. Integer ac mi. Cras faucibus nulla quis ipsum. Nunc augue turpis, tristique et, hendrerit id, hendrerit eu, lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur vulputate. Proin et erat id ipsum accumsan porttitor. Suspendisse tellus arcu, scelerisque vel, feugiat sit amet, aliquet sed, velit.</p>
 +
</div>
 +
<div class="generic threeforty break">
 +
<h2>340px</h2>
 +
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan diam vitae velit. Aliquam vehicula, turpis sed egestas porttitor, est ligula egestas leo, at interdum leo ante ut risus. Cras ut nunc. Phasellus imperdiet, urna in volutpat venenatis, mauris pede euismod pede, malesuada euismod turpis enim at arcu. Sed placerat accumsan mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam suscipit, quam at placerat interdum, quam turpis placerat pede, eget sagittis arcu sapien vel mauris. Nulla faucibus turpis eget tellus. Integer mattis dapibus lorem.</p>
 +
</div>
 +
<div class="generic fiveeighty end">
 +
<h2>580px</h2>
 +
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan diam vitae velit. Aliquam vehicula, turpis sed egestas porttitor, est ligula egestas leo, at interdum leo ante ut risus. Cras ut nunc. Phasellus imperdiet, urna in volutpat venenatis, mauris pede euismod pede, malesuada euismod turpis enim at arcu. Sed placerat accumsan mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam suscipit, quam at placerat interdum, quam turpis placerat pede, eget sagittis arcu sapien vel mauris. Nulla faucibus turpis eget tellus. Integer mattis dapibus lorem. Donec pretium lorem vel ligula. Fusce semper consequat dui. Integer ac mi. Cras faucibus nulla quis ipsum. Nunc augue turpis, tristique et, hendrerit id, hendrerit eu, lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur vulputate. Proin et erat id ipsum accumsan porttitor. Suspendisse tellus arcu, scelerisque vel, feugiat sit amet, aliquet sed, velit.</p>
 +
</div>
 +
<div class="generic fourhun break">
 +
<h2>400px</h2>
 +
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan diam vitae velit. Aliquam vehicula, turpis sed egestas porttitor, est ligula egestas leo, at interdum leo ante ut risus. Cras ut nunc. Phasellus imperdiet, urna in volutpat venenatis, mauris pede euismod pede, malesuada euismod turpis enim at arcu. Sed placerat accumsan mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
 +
</div>
 +
<div class="generic fivetwenty end">
 +
<h2>520px</h2>
 +
<img src="images/holder-01.gif" alt="A Placeholder Image" class="right-img" />
 +
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan diam vitae velit. Aliquam vehicula, turpis sed egestas porttitor, est ligula egestas leo, at interdum leo ante ut risus. Cras ut nunc. Phasellus imperdiet, urna in volutpat venenatis, mauris pede euismod pede, malesuada euismod turpis enim at arcu. Sed placerat accumsan mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam suscipit, quam at placerat interdum, quam turpis placerat pede, eget sagittis arcu sapien vel mauris.</p>
 +
</div>
 +
<div class="generic foursixty break">
 +
<h2>460px</h2>
 +
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan diam vitae velit. Aliquam vehicula, turpis sed egestas porttitor, est ligula egestas leo, at interdum leo ante ut risus. Cras ut nunc. Phasellus imperdiet, urna in volutpat venenatis, mauris pede euismod pede, malesuada euismod turpis enim at arcu. Sed placerat accumsan mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam suscipit, quam at placerat interdum, quam turpis placerat pede, eget sagittis arcu sapien vel mauris.</p>
 +
</div>
 +
<div class="generic foursixty end">
 +
<h2>460px</h2>
 +
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan diam vitae velit. Aliquam vehicula, turpis sed egestas porttitor, est ligula egestas leo, at interdum leo ante ut risus. Cras ut nunc. Phasellus imperdiet, urna in volutpat venenatis, mauris pede euismod pede, malesuada euismod turpis enim at arcu. Sed placerat accumsan mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam suscipit, quam at placerat interdum, quam turpis placerat pede, eget sagittis arcu sapien vel mauris.</p>
 +
</div>
 +
<div class="generic nineforty">
 +
<h2>Lists&hellip;</h2>
 +
<ol class="twotwenty left-float">
 +
<li>This is an ordered list&hellip;</li>
 +
<li>&hellip;which has been floated left.</li>
 +
<li>It is also 22em wide&hellip;</li>
 +
<li>Nested Lists:
 +
<ul>
 +
<li>This is a nested <span class="code">&lt;ul&gt;</span></li>
 +
</ul>
 +
</li>
 +
<li>Nested Lists:
 +
<ol>
 +
<li>This is a nested <span class="code">&lt;ol&gt;</span></li>
 +
</ol>
 +
</li>
 +
<li>&hellip;which equates to 220px when not zoomed.</li>
 +
</ol>
 +
<p><strong>Lorem</strong> ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan diam vitae velit. Aliquam vehicula, turpis sed egestas porttitor, est ligula egestas leo, at interdum leo ante ut risus. Cras ut nunc. Phasellus imperdiet, urna in volutpat venenatis, mauris pede euismod pede, malesuada euismod turpis enim at arcu. Sed placerat accumsan mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam suscipit, quam at placerat interdum, quam turpis placerat pede, eget sagittis arcu sapien vel mauris. Nulla faucibus turpis eget tellus. Integer mattis dapibus lorem. Donec pretium lorem vel ligula. Fusce semper consequat dui. Integer ac mi. Cras faucibus nulla quis ipsum. Nunc augue turpis, tristique et, hendrerit id, hendrerit eu, lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur vulputate. Proin et erat id ipsum accumsan porttitor. Suspendisse tellus arcu, scelerisque vel, feugiat sit amet, aliquet sed, velit. Cras ut nunc. Phasellus imperdiet, urna in volutpat venenatis, mauris pede euismod pede, malesuada euismod turpis enim at arcu. Sed placerat accumsan mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
 +
<ul class="foursixty left-float">
 +
<li>This is an unordered list&hellip;</li>
 +
<li>&hellip;which has been floated left.</li>
 +
<li>It is also 46em wide&hellip;</li>
 +
<li>&hellip;which equates to 460px when not zoomed.</li>
 +
<li>Nested Lists:
 +
<ul>
 +
<li>This is a nested <span class="code">&lt;ul&gt;</span></li>
 +
</ul>
 +
</li>
 +
<li>Nested Lists:
 +
<ol>
 +
<li>This is a nested <span class="code">&lt;ol&gt;</span></li>
 +
</ol>
 +
</li>
 +
<li>The wider the class assigned, the wider the list will be &mdash; pretty nifty eh?.</li>
 +
</ul>
 +
<p><strong>Lorem</strong> ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan diam vitae velit. Aliquam vehicula, turpis sed egestas porttitor, est ligula egestas leo, at interdum leo ante ut risus. Cras ut nunc. Phasellus imperdiet, urna in volutpat venenatis, mauris pede <a href="#" title="Always try and give links a title attribute">euismod pede</a>, malesuada euismod turpis enim at arcu. Sed placerat accumsan mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam suscipit, quam at placerat interdum, quam turpis placerat pede, eget sagittis arcu sapien vel mauris. Nulla faucibus turpis eget tellus. Integer mattis dapibus lorem. Donec pretium lorem vel ligula. Fusce semper consequat dui. Integer ac mi. Cras faucibus nulla quis ipsum. Nunc augue turpis, tristique et, hendrerit id, hendrerit eu, lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur vulputate. Proin et erat id ipsum accumsan porttitor. Suspendisse tellus arcu, scelerisque vel, feugiat sit amet, aliquet sed, velit.</p>
 +
</div>
 +
<div class="generic threeforty">
 +
<h3>Images</h3>
 +
<img src="images/holder-01.gif" alt="A Placeholder Image" class="left-img" />
 +
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan diam vitae velit. Aliquam vehicula, turpis sed egestas porttitor, est ligula egestas leo, at interdum leo ante ut risus. Cras ut nunc. Phasellus imperdiet, urna in volutpat venenatis, mauris pede euismod pede, malesuada euismod turpis enim at arcu. Sed placerat accumsan mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
 +
</div>
 +
<div class="generic twotwenty">
 +
<h3>Glyphs</h3>
 +
<p class="intro drop"><strong>Typogridphy</strong> is also designed to use glyphs, as opposed to the normal text used in web design. For example, use &lsquo;&aelig;&rsquo; in place of &lsquo;ae&rsquo;, &lsquo;&mdash;&rsquo; instead of &lsquo;-&rsquo; and &lsquo;&hellip;&rsquo; as opposed to &lsquo;...&rsquo;.</p>
 +
<p>A good way of finding out about different glyphs is through Dreamweaver&rsquo;s design view. Wow, I never thought I&rsquo;d be singing the praises of a <abbr title="What You See Is What You Get">WYSIWYG</abbr> application!</p>
 +
</div>
 +
<div class="generic threeforty end">
 +
<h3>Headings</h3>
 +
<h1>Heading 1</h1>
 +
<h2>Heading 2</h2>
 +
<h3>Heading 3</h3>
 +
<h4>Heading 4</h4>
 +
<h5>Heading 5</h5>
 +
<h6>Heading 6</h6>
 +
</div>
 +
<div class="generic nineforty">
 +
</div>
 +
</div>
 +
__NOTOC__

Revision as of 15:38, 15 September 2011

toccolours (CSS class used in main page's navigation.)

Also see: Wikipedia:Useful styles
-- Dave 12:33, 14 September 2011 (PDT)

Using files from other wikis you have database access to

-Kotra 20:26, 13 September 2011 (PDT)

<css>


/*-------------------------------------------+ | | | MAIN STRUCTURE STYLES | | | +-------------------------------------------*/

.wrapper{ width:94em; margin:0 auto; } .header{ width:94em; padding-top:1.5em; margin-bottom:2em; } /*GRIDS

*/

/* Set styles common among all grids - all grid divs must be assigned this class */ .generic{ border-top:0.5em solid #666; /* The border at the top of each grid */ float:left; padding-top:1em; margin-bottom:2em; } /* Sets styles for any 'start' grids - this class MUST be given to a grid that is the first in a horizontal series */ .clear{ clear:both; } /* Sets styles for any 'end' grids - this class MUST be given to a grid that is the last in a horizontal series */ .end{ margin-left:0 !important; margin-right:0 !important; } /* 220px */ .twotwenty{ width:22em; margin-right:2em; } /* 280px */ .twoeighty{ width:28em; margin-right:2em; } /* 340px */ .threeforty{ width:34em; margin-right:2em; } /* 400px */ .fourhun{ width:40em; margin-right:2em; } /* 460px */ .foursixty{ width:46em; margin-right:2em; } /* 520px */ .fivetwenty{ width:52em; margin-right:2em; } /* 580px */ .fiveeighty{ width:58em; margin-right:2em; } /* 640px */ .sixforty{ width:64em; margin-right:2em; } /* 700px */ .sevenhun{ width:70em; margin-right:2em; } /* 760px */ .sevensixty{ width:76em; margin-right:2em; } /* 820px */ .eighttwenty{ width:82em; margin-right:2em; } /* 880px */ .eighteighty{ width:88em; margin-right:2em; } /* 940px */ .nineforty{ width:94em; } /*-------------------------------------------+ | | | FONT STYLES | | | +-------------------------------------------*/ /*PARAGRAPHS

*/

.generic p{ font-size:1.2em; line-height:1.5em; margin-bottom:1.5em; } /* Styles an introductory paragraph, similar to newspapers. Assign this class to the first paragraph in an article */ p.intro:first-line{ font-variant:small-caps; } /* Styles a drop cap on each paragraph with this class */ p.drop:first-letter{ float:left; font-size:3em; margin-top:-0.05em; margin-right:0.1em; margin-bottom:-0.5em; } /*HEADINGS

*/

h1{ color:#000; font-size:3em; margin-bottom:0.6em; font-style:italic; line-height:1.2em; } h2{ color:#000; font-size:2em; margin-bottom:0.9em; line-height:0.9em; } h3{ color:#000; font-size:1.5em; margin-bottom:1.2em; line-height:1.2em; font-variant:small-caps; } h4{ color:#000; font-size:1.2em; margin-bottom:1.5em; line-height:1.5em; font-variant:small-caps; } h5{ color:#000; font-size:1em; margin-bottom:1.8em; line-height:1.8em; font-variant:small-caps; } h6{ color:#000; font-size:1em; margin-bottom:1.8em; line-height:1.8em; } /*LINKS

*/

p a{ color:#000; } p a:hover{ text-decoration:none; } h1 a{ color:#000; } h1 a:hover{ text-decoration:none; } li a{ color:#000; } li a:hover{ text-decoration:none; } /*ALL THE TRIMMINGS

*/

blockquote p{ font-size:1.2em!important; line-height:1.5em!important; margin-bottom:1.5em!important; font-style:italic; font-weight:bold; } blockquote p cite{ font-style:normal; } .generic strong{ font-variant:small-caps; } .generic em{ font-style:italic; font-weight:inherit; } .amp{ /* Give those ampersands a right sexy look */ font-family:Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif; font-style:italic; font-weight:normal; line-height:inherit; } abbr{ border-bottom:1px dotted #666; border-color:inherit; cursor:help; } .clear{ clear:both; } .right-float{ /* Float any item to the right */ float:right; margin-left:2em; margin-right:0; } .left-float{ /* Float any item to the left */ float:left; margin-right:2em; margin-left:0; } .code{ /* Styling for and code type items */ font-family:Courier, "Courier New", monospace; background:#ddd; font-size:1em; } /*-------------------------------------------+ | | | IMAGE STYLES | | | +-------------------------------------------*/ img{ font-size:1em; } img.left-img{ /* Float any image to the LEFT and give it some margin */ font-size:1em; float:left; padding:4px; border:1px solid #ccc; margin-bottom:1.8em; margin-right:2em; margin-top:0.3em; } img.right-img{ /* Float any image to the RIGHT and give it some margin */ font-size:1em; float:right; padding:4px; border:1px solid #ccc; margin-bottom:1.8em; margin-left:2em; margin-top:0.3em; } /*CONTACT FORM STYLES

*/

.contact-form{ } .contact-form label{ width:10em; float:left; margin-top:0.6em; } .name, .form-email, .url, .location{ width:42.7em; height:20px; padding:3px; padding-top:5px; border:2px solid #666; margin-bottom:18px; background:#fff !important; } .comments{ width:43.8em; height:10em; padding:3px; border:2px solid #666; margin-bottom:18px; overflow:auto; background:#fff !important; } .name:active, .form-email:active, .url:active, .location:active, .comments:active, .submit:active, .name:focus, .form-email:focus, .url:focus, .location:focus, .comments:focus, .submit:focus{ border:2px solid #000; } .submit{ clear:both; padding:5px; border:2px solid #666; background:#fff !important; cursor:pointer; margin-left:9em; } .reset{ clear:both; padding:3px; border:none; background:#f00 !important; cursor:pointer; float:right; color:#fff; margin-top:-28px; } /*-------------------------------------------+ | | | LIST STYLES | | | +-------------------------------------------*/ ul{ margin-bottom:1.8em; list-style:square inside; } ul li{ font-size:1.2em; line-height:1.5em; } ul li.caption{ /* Apply this class to the first list item in a list to give it a caption */ font-variant:small-caps; list-style:none; color:#000; } li > ul, li > ol{ margin-bottom:0; margin-left:5em; } li > ul li, li > ol li{ font-size:1em; } ol{ margin-bottom:1.8em; list-style:decimal inside; } ol li{ font-size:1.2em; line-height:1.5em; } /*-------------------------------------------+ | | | MISC. STYLES | | | +-------------------------------------------*/


/*

"I could eat a knob at night" - Karl Pilkington

  • /

</css>


Typogridphy Demo Page — Use this page & its grids as a basis for your typographical front-end development.

940px

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan diam vitae velit. Aliquam vehicula, turpis sed egestas porttitor, est ligula egestas leo, at interdum leo ante ut risus. Cras ut nunc. Phasellus imperdiet, urna in volutpat venenatis, mauris pede euismod pede, malesuada euismod turpis enim at arcu. Sed placerat accumsan mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam suscipit, quam at placerat interdum, quam turpis placerat pede, eget sagittis arcu sapien vel mauris. Nulla faucibus turpis eget tellus. Integer mattis dapibus lorem. Donec pretium lorem vel ligula. Fusce semper consequat dui. Integer ac mi. Cras faucibus nulla quis ipsum. Nunc augue turpis, tristique et, hendrerit id, hendrerit eu, lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur vulputate. Proin et erat id ipsum accumsan porttitor. Suspendisse tellus arcu, scelerisque vel, feugiat sit amet, aliquet sed, velit.

220px

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan diam vitae velit. Aliquam vehicula, turpis sed egestas porttitor, est ligula egestas leo, at interdum leo ante ut risus. Cras ut nunc. Phasellus imperdiet, urna in volutpat venenatis, mauris pede euismod pede, malesuada euismod turpis enim at.

700px

“This is a blockquote, with a right float and a width of 280px. Even this maintains typographical flow!” — Harry Roberts

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan diam vitae velit. Aliquam vehicula, turpis sed egestas porttitor, est ligula egestas leo, at interdum leo ante ut risus. Cras ut nunc. Phasellus imperdiet, urna in volutpat venenatis, mauris pede euismod pede, malesuada euismod turpis enim at arcu. Sed placerat accumsan mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam suscipit, quam at placerat interdum, quam turpis placerat pede, eget sagittis arcu sapien vel mauris. Nulla faucibus turpis eget tellus. Integer mattis dapibus lorem. Donec pretium lorem vel ligula. Fusce semper consequat dui. Integer ac mi. Cras faucibus nulla quis ipsum. Nunc augue turpis, tristique et, hendrerit id, hendrerit eu, lacus.

280px

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan diam vitae velit. Aliquam vehicula, turpis sed egestas porttitor, est ligula egestas leo, at interdum leo ante ut risus. Cras ut nunc. Phasellus imperdiet, urna in volutpat venenatis, mauris pede euismod pede, malesuada euismod turpis enim at arcu. Sed placerat accumsan mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

640px

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan diam vitae velit. Aliquam vehicula, turpis sed egestas porttitor, est ligula egestas leo, at interdum leo ante ut risus. Cras ut nunc. Phasellus imperdiet, urna in volutpat venenatis, mauris pede euismod pede, malesuada euismod turpis enim at arcu. Sed placerat accumsan mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam suscipit, quam at placerat interdum, quam turpis placerat pede, eget sagittis arcu sapien vel mauris. Nulla faucibus turpis eget tellus. Integer mattis dapibus lorem. Donec pretium lorem vel ligula. Fusce semper consequat dui. Integer ac mi. Cras faucibus nulla quis ipsum. Nunc augue turpis, tristique et, hendrerit id, hendrerit eu, lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur vulputate. Proin et erat id ipsum accumsan porttitor. Suspendisse tellus arcu, scelerisque vel, feugiat sit amet, aliquet sed, velit.

340px

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan diam vitae velit. Aliquam vehicula, turpis sed egestas porttitor, est ligula egestas leo, at interdum leo ante ut risus. Cras ut nunc. Phasellus imperdiet, urna in volutpat venenatis, mauris pede euismod pede, malesuada euismod turpis enim at arcu. Sed placerat accumsan mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam suscipit, quam at placerat interdum, quam turpis placerat pede, eget sagittis arcu sapien vel mauris. Nulla faucibus turpis eget tellus. Integer mattis dapibus lorem.

580px

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan diam vitae velit. Aliquam vehicula, turpis sed egestas porttitor, est ligula egestas leo, at interdum leo ante ut risus. Cras ut nunc. Phasellus imperdiet, urna in volutpat venenatis, mauris pede euismod pede, malesuada euismod turpis enim at arcu. Sed placerat accumsan mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam suscipit, quam at placerat interdum, quam turpis placerat pede, eget sagittis arcu sapien vel mauris. Nulla faucibus turpis eget tellus. Integer mattis dapibus lorem. Donec pretium lorem vel ligula. Fusce semper consequat dui. Integer ac mi. Cras faucibus nulla quis ipsum. Nunc augue turpis, tristique et, hendrerit id, hendrerit eu, lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur vulputate. Proin et erat id ipsum accumsan porttitor. Suspendisse tellus arcu, scelerisque vel, feugiat sit amet, aliquet sed, velit.

400px

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan diam vitae velit. Aliquam vehicula, turpis sed egestas porttitor, est ligula egestas leo, at interdum leo ante ut risus. Cras ut nunc. Phasellus imperdiet, urna in volutpat venenatis, mauris pede euismod pede, malesuada euismod turpis enim at arcu. Sed placerat accumsan mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

520px

<img src="images/holder-01.gif" alt="A Placeholder Image" class="right-img" />

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan diam vitae velit. Aliquam vehicula, turpis sed egestas porttitor, est ligula egestas leo, at interdum leo ante ut risus. Cras ut nunc. Phasellus imperdiet, urna in volutpat venenatis, mauris pede euismod pede, malesuada euismod turpis enim at arcu. Sed placerat accumsan mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam suscipit, quam at placerat interdum, quam turpis placerat pede, eget sagittis arcu sapien vel mauris.

460px

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan diam vitae velit. Aliquam vehicula, turpis sed egestas porttitor, est ligula egestas leo, at interdum leo ante ut risus. Cras ut nunc. Phasellus imperdiet, urna in volutpat venenatis, mauris pede euismod pede, malesuada euismod turpis enim at arcu. Sed placerat accumsan mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam suscipit, quam at placerat interdum, quam turpis placerat pede, eget sagittis arcu sapien vel mauris.

460px

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan diam vitae velit. Aliquam vehicula, turpis sed egestas porttitor, est ligula egestas leo, at interdum leo ante ut risus. Cras ut nunc. Phasellus imperdiet, urna in volutpat venenatis, mauris pede euismod pede, malesuada euismod turpis enim at arcu. Sed placerat accumsan mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam suscipit, quam at placerat interdum, quam turpis placerat pede, eget sagittis arcu sapien vel mauris.

Lists…

  1. This is an ordered list…
  2. …which has been floated left.
  3. It is also 22em wide…
  4. Nested Lists:
    • This is a nested <ul>
  5. Nested Lists:
    1. This is a nested <ol>
  6. …which equates to 220px when not zoomed.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan diam vitae velit. Aliquam vehicula, turpis sed egestas porttitor, est ligula egestas leo, at interdum leo ante ut risus. Cras ut nunc. Phasellus imperdiet, urna in volutpat venenatis, mauris pede euismod pede, malesuada euismod turpis enim at arcu. Sed placerat accumsan mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam suscipit, quam at placerat interdum, quam turpis placerat pede, eget sagittis arcu sapien vel mauris. Nulla faucibus turpis eget tellus. Integer mattis dapibus lorem. Donec pretium lorem vel ligula. Fusce semper consequat dui. Integer ac mi. Cras faucibus nulla quis ipsum. Nunc augue turpis, tristique et, hendrerit id, hendrerit eu, lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur vulputate. Proin et erat id ipsum accumsan porttitor. Suspendisse tellus arcu, scelerisque vel, feugiat sit amet, aliquet sed, velit. Cras ut nunc. Phasellus imperdiet, urna in volutpat venenatis, mauris pede euismod pede, malesuada euismod turpis enim at arcu. Sed placerat accumsan mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

  • This is an unordered list…
  • …which has been floated left.
  • It is also 46em wide…
  • …which equates to 460px when not zoomed.
  • Nested Lists:
    • This is a nested <ul>
  • Nested Lists:
    1. This is a nested <ol>
  • The wider the class assigned, the wider the list will be — pretty nifty eh?.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan diam vitae velit. Aliquam vehicula, turpis sed egestas porttitor, est ligula egestas leo, at interdum leo ante ut risus. Cras ut nunc. Phasellus imperdiet, urna in volutpat venenatis, mauris pede <a href="#" title="Always try and give links a title attribute">euismod pede</a>, malesuada euismod turpis enim at arcu. Sed placerat accumsan mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam suscipit, quam at placerat interdum, quam turpis placerat pede, eget sagittis arcu sapien vel mauris. Nulla faucibus turpis eget tellus. Integer mattis dapibus lorem. Donec pretium lorem vel ligula. Fusce semper consequat dui. Integer ac mi. Cras faucibus nulla quis ipsum. Nunc augue turpis, tristique et, hendrerit id, hendrerit eu, lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur vulputate. Proin et erat id ipsum accumsan porttitor. Suspendisse tellus arcu, scelerisque vel, feugiat sit amet, aliquet sed, velit.

Images

<img src="images/holder-01.gif" alt="A Placeholder Image" class="left-img" />

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan diam vitae velit. Aliquam vehicula, turpis sed egestas porttitor, est ligula egestas leo, at interdum leo ante ut risus. Cras ut nunc. Phasellus imperdiet, urna in volutpat venenatis, mauris pede euismod pede, malesuada euismod turpis enim at arcu. Sed placerat accumsan mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Glyphs

Typogridphy is also designed to use glyphs, as opposed to the normal text used in web design. For example, use ‘æ’ in place of ‘ae’, ‘—’ instead of ‘-’ and ‘…’ as opposed to ‘...’.

A good way of finding out about different glyphs is through Dreamweaver’s design view. Wow, I never thought I’d be singing the praises of a WYSIWYG application!

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Retrieved from "https://www.telecafe.org/smw/index.php?title=Talk:Organized_Power/Test&oldid=126"