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.