Posts Tagged "tutorials"

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

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

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