Comments

This post exists solely to demonstrate Flatiron’s comment styling.
Flatiron is free to use, and can be downloaded here.

Continue reading...

Changing the Logo & Header

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 [...]

Continue reading...

Images

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 [...]

Continue reading...

HTML Tags

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 [...]

Continue reading...

Paragraphs & Headings

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 [...]

Continue reading...

Keeping Images on the Baseline Grid

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, [...]

Continue reading...

Vertical Rhythm and the Baseline Grid

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, [...]

Continue reading...

Notes & Alerts

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 [...]

Continue reading...