Stylesheet showcase
A well-rounded and well-thought out design require a great deal of elements to combine to a harmonious whole. This page intends to cover most bases likely to come up in my personal blog.
Images and figures
The Web would be a sad place indeed if it only allowed text. Images and figures are quite neccessary.
An inline figure.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent ac odio. Ut nisl massa, aliquet sagittis, blandit a, viverra non, nulla. Maecenas eu lacus at velit iaculis vestibulum. Fusce euismod erat lacinia augue. Aliquam at odio. In tincidunt diam ut dui. Aliquam accumsan dui sed est. Proin accumsan dui eu mauris. Proin interdum nisl. Donec convallis nibh in justo. Donec non sem. Mauris tempor egestas sapien. Morbi eget leo pretium sapien fringilla adipiscing. Proin blandit.
An inline figure with alternate styling.
Quisque condimentum, velit in imperdiet vehicula, magna nulla bibendum augue, eget vulputate massa diam eu dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec auctor venenatis urna. Nam nibh. Suspendisse fringilla auctor lectus. Cras ut purus ut dolor lacinia cursus. Praesent sed purus. Nam commodo. Etiam sed ipsum at urna varius aliquam. Ut dui. Quisque vel tellus nec mi gravida hendrerit. Fusce suscipit fringilla diam. Nulla laoreet faucibus risus. Integer interdum leo aliquet nisi. Vivamus ante nibh, ornare eget, pulvinar quis, varius eget, sem. Maecenas vitae tortor.
An inline figure with no borders or background.
Nunc eget metus eu nisl cursus aliquam. Aenean sit amet velit sed erat vestibulum scelerisque. Aliquam volutpat placerat arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin varius. Proin imperdiet mi in nunc. Integer vestibulum nunc eget augue suscipit cursus. Nam non dui. Donec rhoncus ligula eget nibh. Sed consequat. Phasellus sed arcu. Phasellus ultrices. Praesent ipsum justo, mollis auctor, commodo ultricies, consectetuer sed, risus. Quisque ut metus sit amet velit pulvinar hendrerit.
A wider inset figure.
In nec velit. Maecenas vulputate quam sit amet leo. Cras commodo dapibus odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ultricies metus ac diam. Curabitur varius arcu ut elit. Nam consectetuer nonummy diam. Aenean volutpat quam sit amet neque. Nam elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris et libero ac ligula tincidunt convallis. Quisque scelerisque gravida est. Donec consequat, dolor vitae consectetuer fringilla, enim tortor auctor risus, ut fermentum arcu ipsum vel tortor.
A wider inset figure.
Morbi orci augue, ullamcorper at, ultricies placerat, porta eget, ligula. In ac quam. Pellentesque sodales risus. Curabitur ornare feugiat diam. Morbi fermentum urna nec dolor. Proin quis turpis. Nunc in nunc. Etiam et est. In hac habitasse platea dictumst. Aliquam ultricies, nunc in accumsan tempus, nisl eros adipiscing sapien, id nonummy metus ante ut ante. In ullamcorper, orci ut adipiscing vestibulum, urna turpis aliquet mauris, dapibus mollis erat est in augue. Suspendisse iaculis enim id lectus.
Cras tempus eleifend libero. Vestibulum metus. Proin mi orci, posuere at, blandit et, feugiat sed, tellus. Fusce rhoncus ligula vitae erat. Phasellus porttitor porta diam. Suspendisse sed neque viverra velit vestibulum vehicula. Praesent dui diam, rhoncus id, lobortis laoreet, auctor eu, neque. Vivamus augue lorem, accumsan bibendum, fringilla ut, semper commodo, nulla. Suspendisse felis est, volutpat eu, eleifend quis, vulputate nec, nulla. Pellentesque ut magna. Donec dignissim lacinia nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nisl lorem, aliquet non, blandit blandit, feugiat ut, massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce fermentum libero vel purus. Vivamus sit amet est sit amet libero placerat gravida. Donec pulvinar mi.
A standalone figure.
A standalone figure with no borders or background.
Code samples
One could argue that code samples are figures as well. However, code samples require rather more text styling in many cases.
Typical code block example
.figure
{
font-size: 14px;
line-height: 24px;
font-family: verdana;
background: silver;
display: block;
}
.figure p, .figure span
{
float: none;
display: block;
text-indent: 0;
margin: -6px 12px 0;
}
A sample of the figure markup used.
Wide code block example
Narrow code block example
.figure
{
font-size: 14px;
line-height: 24px;
font-family: verdana;
background: silver;
display: block;
}
A narrow code sample.
Phasellus in turpis nec lacus facilisis luctus. In a ipsum suscipit magna tristique accumsan. Etiam sodales laoreet libero. Aenean nisl. Nulla eget arcu at metus lacinia feugiat. Quisque sed enim in magna elementum egestas. Morbi vestibulum. Sed sed nisi. Sed erat mi, lobortis a, commodo at, aliquet ac, turpis. Donec et justo a dui pulvinar adipiscing. Suspendisse ullamcorper. Aenean ante. Nam ut lacus. Donec vel nulla ut nunc dapibus euismod. Morbi nonummy. Aliquam laoreet. Aliquam tempus dictum massa.
Short code block example
display: block;
A short code sample.
Aliquam placerat velit sit amet ipsum. Proin auctor pede sit amet est. Nam fermentum pede eu nisl. Vivamus ipsum elit, malesuada id, viverra dapibus, euismod ac, dui. Praesent pretium sodales purus. Nunc a elit. Phasellus fermentum nonummy nisl. Proin dignissim adipiscing massa. Vivamus tincidunt aliquet dolor. Donec ac ipsum vitae velit accumsan fringilla. Cras id mi. Cras cursus est fringilla lacus. Nunc felis lacus, feugiat et, vestibulum non, egestas id, odio. Duis erat nibh, rutrum sed, varius ac, bibendum a, leo. Morbi nulla mauris, faucibus in, faucibus eu, accumsan id, neque. Sed tempus pede id mi. Curabitur tempus, velit vel commodo iaculis, diam orci elementum augue, vel mollis lorem mauris vel nisi. Ut sed pede id dui rhoncus iaculis.
Other computer-related Markup
A $variable. Some sample output. Some code to type at a command prompt.
Editorial Flair
Quotes, sidenotes, pullquotes and lists
Quotes
Inline Quotes
Etiam porttitor quam feugiat nunc. In vel nisl. Pellentesque euismod
nunc. Suspendisse in lacus. In varius sem vitae ligula. Aenean dictum
tempor erat. Phasellus quis purus et sem hendrerit posuere. Nulla
ullamcorper. Sed quis tortor. Quisque mattis volutpat ante.
Aenean
accumsan risus nec felis. Sed porta sem faucibus tellus.
Block-level Quotes
Nunc feugiat condimentum est. Sed pulvinar, purus at laoreet rutrum, arcu augue vehicula nisl, ut euismod dolor neque eget lacus. Etiam eu pede. Nam vulputate, nibh nec ullamcorper interdum, turpis mauris aliquet magna, quis sollicitudin eros pede sed justo. Donec dapibus orci id libero. Quisque consectetuer velit sit amet odio. Nulla sit amet mi. Pellentesque commodo nulla non elit. Integer placerat nunc id arcu. Curabitur eget ligula. Cras viverra lorem nec lacus varius commodo. Integer at odio. Aliquam erat volutpat. Mauris ullamcorper faucibus quam. Curabitur at tellus. Aliquam interdum justo eget nunc. Sed facilisis tincidunt sapien. Morbi rutrum est nec enim.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque elit odio, interdum interdum, ultricies ut, sollicitudin ac, quam. Sed ultrices. Pellentesque dolor risus, dictum et, interdum quis, tincidunt vitae, nunc. Aenean vitae sapien. Etiam libero. Fusce ante massa, ullamcorper non, luctus ut, tristique vel, risus. Praesent fringilla. Donec iaculis orci at quam. Curabitur sit amet lacus sit amet purus sodales ultricies. Donec blandit, massa eu tempus tempor, nulla lectus lacinia mi, eget pretium sem enim quis pede. Nullam diam. Nulla facilisi. Vivamus at quam sit amet enim fringilla condimentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec ante. Ut non tortor. Donec sed urna. Nullam ac metus ut massa tristique tempus. Nullam nec metus in lorem pulvinar gravida.
Ut tincidunt sagittis diam. Donec aliquam bibendum elit. Donec a ipsum id felis pretium blandit. Vivamus tortor eros, tempor commodo, fringilla nec, porta faucibus, lectus. Pellentesque sed nulla. Vivamus mauris ipsum, convallis semper, aliquet ut, ultricies at, odio. Pellentesque euismod. Fusce lacinia. Proin erat diam, iaculis et, volutpat quis, pretium non, libero. Sed pretium dolor. Proin pulvinar convallis lorem. Aenean quis purus quis arcu iaculis vulputate. Donec sollicitudin tincidunt sem. In sed pede vel nulla accumsan placerat. Proin aliquet gravida orci. Phasellus metus augue, venenatis sed, porttitor id, suscipit quis, nunc.
Pullquotes
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Duis a odio non diam fringilla semper. Nunc elementum felis id purus.
Vestibulum at risus non quam pharetra blandit. Suspendisse potenti. In
porta erat eget massa. Nullam mollis. Nam aliquam nisi eget massa. Mauris
imperdiet tortor vel quam. Cras vestibulum porttitor sapien. Donec pretium
nunc a elit. Donec tempus, mauris ut elementum placerat, odio lectus cursus
ligula, eleifend sollicitudin orci tortor ut arcu. In at eros. Pellentesque
nec nibh. Vivamus venenatis. Vivamus eu augue ut tellus gravida rutrum. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Nullam id ante.
Sidenotes
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras venenatis. Praesent faucibus fringilla orci. Curabitur sodales, eros in mollis ultrices, lectus odio gravida massa, sed euismod elit diam et lorem. Donec vitae lacus ac elit volutpat hendrerit. Duis tempor lectus ornare est. Fusce sagittis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer id tortor. Nullam consectetuer nulla in odio. Nam aliquam scelerisque eros. Vivamus id lorem. Quisque tincidunt tristique massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Duis blandit sagittis magna. Vivamus porttitor, augue pretium dignissim accumsan, quam velit iaculis justo, eu vulputate urna lectus sit amet dolor.
Aenean pulvinar. Phasellus vehicula nulla id nisl. Vestibulum dui. Nullam diam magna, porttitor eget, iaculis vitae, vulputate non, libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean lacinia, dolor sed eleifend dictum, felis nibh dapibus leo, vel tincidunt massa quam ac metus. Proin at nisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In hac habitasse platea dictumst. Maecenas blandit justo accumsan ipsum. Quisque quis felis. Aliquam ac diam. Donec id pede et arcu laoreet sodales. Mauris felis. Proin magna libero, dapibus ut, semper nec, vulputate vitae, arcu. Quisque tincidunt. Nullam faucibus. Fusce mollis interdum diam. Sed dictum euismod ipsum.
Lists
Ordered Lists
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Ut fermentum purus euismod massa.
- Donec gravida enim non erat.
- Quisque ac nulla ac dolor varius faucibus.
-
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Ut fermentum purus euismod massa.
- Morbi nonummy enim a lacus.
- Maecenas nec pede nec magna fringilla volutpat.
-
- Maecenas quis felis sit amet quam vehicula ultricies.
- Vestibulum sed tellus convallis nisi nonummy venenatis.
- Morbi nonummy enim a lacus.
- Maecenas nec pede nec magna fringilla volutpat.
Unordered Lists
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Morbi nonummy enim a lacus.
- Maecenas nec pede nec magna fringilla volutpat.
-
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Ut fermentum purus euismod massa.
- Donec gravida enim non erat.
- Quisque ac nulla ac dolor varius faucibus.
- Maecenas quis felis sit amet quam vehicula ultricies.
- Vestibulum sed tellus convallis nisi nonummy venenatis.
-
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Maecenas quis felis sit amet quam vehicula ultricies.
- Vestibulum sed tellus convallis nisi nonummy venenatis.
- Morbi nonummy enim a lacus.
- Maecenas nec pede nec magna fringilla volutpat.
Definition Lists
- A term
- A definition
- Some other definition
-
- Also nested
- A definition
- Some other definition