Flatiron

Comments

jkoschei — Thu, 11 Mar 2010 22:01:45 +0000

This post exists solely to demonstrate Flatiron’s comment styling.

Flatiron is free to use, and can be downloaded here.

Changing the Logo & Header

jkoschei — Thu, 11 Mar 2010 19:16:15 +0000

The logo and header image used on this site are placeholders; when you use Flatiron on your site, you’ll probably want to change both.

Both images are located in themes/flatiron/images
The logo image should be 96px high, and should be flush with the side edges (Flatiron will insert its own padding)
The header image should be 96px high and at least 1600px wide, to account for widescreen monitors

Flatiron is free to use, and can be downloaded here.

Images

jkoschei — Wed, 10 Mar 2010 19:18:09 +0000

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam elit urna, ultrices in vestibulum eget, viverra eu libero. Cras rutrum tincidunt nibh in vestibulum. Proin accumsan adipiscing nulla in dapibus. Nullam ornare porttitor posuere. Suspendisse pulvinar rutrum odio, sit amet auctor purus pharetra id. Pellentesque faucibus tincidunt luctus. Ut dictum lobortis iaculis. Vestibulum auctor neque a tortor porttitor laoreet ut sed velit. Suspendisse varius laoreet varius. Fusce quam lacus, tempus sit amet placerat venenatis, volutpat at mauris. Vivamus quam metus, lacinia eu rhoncus sit amet, vehicula nec mauris. Vivamus ac dolor lectus. In tincidunt, enim at feugiat tincidunt, augue mi elementum augue, ut mattis lorem mauris sed sapien. Nullam et mi eros. Phasellus et felis purus. Morbi quis diam eu eros lobortis bibendum ut in mi. Nullam sed venenatis turpis.

Flatiron Building by Canuckistan, available under Creative Commons Share Alike Generic 2.0

Flatiron Building at Dawn by joiseyshowaa, available under Creative Commons Attirbution-Share Alike 2.0 Generic

Nulla sodales suscipit ligula quis iaculis. Curabitur euismod placerat tortor at blandit. Fusce at nibh ut diam feugiat feugiat consequat vitae nibh. In suscipit tempor interdum. Nam aliquet massa vitae ipsum aliquet ac volutpat est rhoncus. Etiam luctus diam sed nunc gravida semper. Etiam interdum sollicitudin nibh id commodo. Cras nec lectus ipsum, ac rutrum nunc. In fermentum, est eget egestas malesuada, ligula nibh congue neque, at tempor ipsum turpis quis massa. Nulla facilisi. Aenean malesuada aliquam lacus, vel volutpat turpis consequat ac. Vivamus quam lorem, malesuada in vehicula at, lacinia nec nulla. Vestibulum luctus ante sit amet ligula sodales in viverra urna gravida.

Pellentesque sed tincidunt velit. Proin eu nisi ante, aliquam egestas est. Phasellus vitae elit sapien. Aliquam euismod, dui id varius vehicula, sapien dolor scelerisque nunc, sed cursus est diam id quam. Curabitur facilisis sapien at felis fermentum posuere. Etiam volutpat nibh a purus ultrices ac tempus orci adipiscing. Nullam eget ultrices est. Vivamus luctus diam at mi euismod aliquet. Nam consectetur vestibulum congue. Donec id ante ac quam auctor hendrerit. Sed malesuada congue justo malesuada ullamcorper. Aliquam erat volutpat. Duis non odio urna. Nulla eget mauris justo. Sed semper sodales venenatis. Duis vitae enim vel ante molestie porta. Vestibulum faucibus, nisl nec varius consequat, massa nunc sagittis felis, volutpat dapibus nisl erat sed nibh. Nulla vel felis urna. Maecenas eu augue quis nisl tincidunt rhoncus at at urna. Proin in nisl leo, sit amet elementum tellus.

Sed fringilla pulvinar accumsan. Duis vitae nunc purus, vitae ullamcorper libero. Pellentesque nec convallis mauris. Suspendisse ut mauris quis arcu sollicitudin vehicula. Nulla rhoncus sem vitae lacus sagittis euismod. Sed ullamcorper rutrum rhoncus. Maecenas ullamcorper risus at libero varius bibendum. Mauris dignissim mauris nec neque lobortis sit amet congue tortor porta. Suspendisse potenti. Sed sapien elit, elementum id gravida a, volutpat ac massa. Nam porta nisi quis elit gravida porta. Donec in dolor libero. Quisque eu condimentum risus. Nam ante purus, scelerisque laoreet vehicula eget, rutrum eu mi. Nulla in sem ligula, ac euismod justo. Nam at erat erat. Nunc tristique mauris ac quam tristique vehicula. Morbi vel lectus ante, a mattis odio. Proin ac lacinia ante.

Phasellus sit amet urna dolor, eu congue risus. Praesent ut est sem. Donec sit amet eros non lacus fringilla bibendum. Nullam tincidunt tellus ut lorem bibendum dictum. Fusce ac tortor id dolor luctus tempor ac vel dolor. Praesent eu aliquam odio. Integer turpis massa, semper eget facilisis vel, tincidunt vitae purus. Nullam tristique, arcu eget luctus posuere, purus turpis dapibus magna, ut lacinia felis eros a mi. Nunc risus lacus, interdum ac vestibulum sed, tristique nec tortor. Ut congue, velit ut lobortis aliquet, est urna aliquam felis, sit amet lobortis nunc justo quis urna.

Flatiron is free to use, and can be downloaded here.

HTML Tags

jkoschei — Wed, 10 Mar 2010 18:32:45 +0000

This site can handle acronyms and abbreviations with ease.

This is a blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut nulla arcu, ut aliquet erat. Vestibulum vel lacus at erat pulvinar feugiat. Donec nec nulla ut neque consequat dignissim quis scelerisque augue.

Definition Term 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut nulla arcu, ut aliquet erat. Vestibulum vel lacus at erat pulvinar feugiat. Donec nec nulla ut neque consequat dignissim quis scelerisque augue.
Definition Term 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut nulla arcu, ut aliquet erat. Vestibulum vel lacus at erat pulvinar feugiat. Donec nec nulla ut neque consequat dignissim quis scelerisque augue.
Definition Term 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut nulla arcu, ut aliquet erat. Vestibulum vel lacus at erat pulvinar feugiat. Donec nec nulla ut neque consequat dignissim quis scelerisque augue.

Sometimes, you have to ~~change~~ edit content in your blog. Luckily, there are ~~del~~ ins styles already defined! Also, you can place things in ^superscript or _subscript.

Flatiron is free to use, and can be downloaded here.

Paragraphs & Headings

jkoschei — Wed, 10 Mar 2010 18:23:09 +0000

This is a standard paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in congue libero. Nulla facilisi. Vivamus non lectus in ipsum vestibulum suscipit scelerisque sed nisl. Curabitur est nulla, rutrum non vestibulum at, sodales sed diam. Maecenas bibendum lobortis vestibulum. Pellentesque pretium dolor eget odio tempor id venenatis nisi lacinia. Etiam molestie purus in sapien facilisis ac bibendum libero dictum. Nam eu.

This is a level 1 heading.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in congue libero. Nulla facilisi. Vivamus non lectus in ipsum vestibulum suscipit scelerisque sed nisl. Curabitur est nulla, rutrum non vestibulum at, sodales sed diam. Maecenas bibendum lobortis vestibulum. Pellentesque pretium dolor eget odio tempor id venenatis nisi lacinia. Etiam molestie purus in sapien facilisis ac bibendum libero dictum. Nam eu.

This is a level 2 heading.

This is a level 3 heading.

This is a level 4 heading.

This is a level 5 heading.

This is a level 6 heading.

Flatiron is free to use, and can be downloaded here.

Keeping Images on the Baseline Grid

jkoschei — Wed, 10 Mar 2010 16:35:30 +0000

A big deal has been made of Flatiron’s impeccable baseline grid, which keeps text precisely aligned. But what happens when an image is added to the mix? Since images can be any height, it’s difficult to ensure the text stays on the grid when a picture is added.

To keep images aligned with the baseline grid, make sure their height is a multiple of 21, and they don’t have any borders or padding.

Alternatively, you can make an image’s height whatever you want, as long as the height + padding + borders add up to a multiple of 21.

It’s as easy as that!

Flatiron is free to use, and can be downloaded here.

Vertical Rhythm and the Baseline Grid

jkoschei — Wed, 10 Mar 2010 16:31:14 +0000

Content should always be composed to a baseline grid — a ladder of lines determining where each line of text starts. The baseline grid is crucial for maintaining your site’s vertical rhythm, allowing for ease of reading and a pleasing composition.

Surprisingly, many websites do not have any sort of baseline grid. Content is spaced arbitrarily, making it difficult to read, even if the user does not know why.

Flatiron is composed on a rigorous baseline grid, to ensure your content looks its best wherever it’s placed. The baseline grid even applies across sidebars and content, as well as inline asides such as blockquotes and code.

Not sold on the importance of vertical rhythm? Here are some articles from respected publications that explain the concept better than I can:

Flatiron is free to use, and can be downloaded here.

Notes & Alerts

jkoschei — Wed, 10 Mar 2010 16:15:03 +0000

In addition to the standard HTML tags, Flatiron includes some methods of its own for styling content attractively and effectively.

Notes

Often, its helpful to highlight a specific portion of your content, such as a download link or a key point. To facilitate this, Flatiron provides the “alert” class, which should be applied to a div.

This is an example of a note.

Notes do not break the vertical rhythm of your content, and can be applied very easily. The code for the above line is:

This is an example of a note.

Alerts

Alerts are similar to notes, but project a sense of greater urgency. An alert is best used for important information such as an error message or a breaking news alert.

This is an example of an alert.

Like notes, alerts do not break the vertical rhythm of your content, and can be applied very easily. The code for the above line is:

This is an example of an alert.

Flatiron is free to use, and can be downloaded here.