Difference between revisions of "Talk:Organized Power/Test"
m (Test grids.) |
m (→Using files from other wikis you have database access to: More tests 'n' tweaks.) |
||
| Line 8: | Line 8: | ||
: -[[User:Kotra|Kotra]] 20:26, 13 September 2011 (PDT) | : -[[User:Kotra|Kotra]] 20:26, 13 September 2011 (PDT) | ||
| + | == CSS Grid Test == | ||
<css> | <css> | ||
| − | |||
| − | |||
/*-------------------------------------------+ | /*-------------------------------------------+ | ||
| | | | | | ||
| Line 16: | Line 15: | ||
| | | | | | ||
+-------------------------------------------*/ | +-------------------------------------------*/ | ||
| − | + | html{ | |
| + | font-size:100%; | ||
| + | min-height:101%; | ||
| + | } | ||
| + | body{ | ||
| + | font-size:78%; | ||
| + | font-family:Georgia, "Times New Roman", serif; | ||
| + | color:#666; | ||
| + | background:/*url(images/grid.gif) top center repeat-y*/ #fff; /* Uncomment to display the grid */ | ||
| + | border-top:0.5em solid #666; | ||
| + | padding:0 1em; | ||
| + | } | ||
.wrapper{ | .wrapper{ | ||
width:94em; | width:94em; | ||
| Line 366: | Line 376: | ||
<div class="wrapper"> | <div class="wrapper"> | ||
| − | + | [[File:Portland panorama by Sam Churchill.jpg|940px]] | |
<div class="generic nineforty"> | <div class="generic nineforty"> | ||
| − | <h1>Typogridphy Demo Page — | + | <h1>Typogridphy Demo Page — <span class="plainlinks">[http://telecafe.org/typogridphy/ Typogridphy]</span> </h1> |
</div> | </div> | ||
<div class="generic nineforty"> | <div class="generic nineforty"> | ||
Revision as of 16:04, 15 September 2011
- Go to: Wikipedia:Catalogue of CSS classes and search "toccolours" to see which CSS documents this class is used.
- 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 Grid Test
<css> /*-------------------------------------------+ | | | MAIN STRUCTURE STYLES | | | +-------------------------------------------*/ html{ font-size:100%; min-height:101%; } body{ font-size:78%; font-family:Georgia, "Times New Roman", serif; color:#666; background:/*url(images/grid.gif) top center repeat-y*/ #fff; /* Uncomment to display the grid */ border-top:0.5em solid #666; padding:0 1em; } .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 — Typogridphy
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…
- This is an ordered list…
- …which has been floated left.
- It is also 22em wide…
- Nested Lists:
- This is a nested <ul>
- Nested Lists:
- This is a nested <ol>
- …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:
- 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!