MediaWiki talk:Common.css
{{#css:MediaWiki:Typogridphy.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.