Rail

A rail is used to show accompanying content outside the boundaries of the main view of a site

Introduction

When to Use

Rails display optional accompanying content outside of the main viewport of your website. Sites often use rails with sticky content to fix additional—often optional—content to your viewport as you scroll through the page.

Semantic's default rail is 300px wide, just large enough to fit many common ad unit sizes, and just wide enough for a sub-navigation menu or a prominent call-to-action.

Adjusting Sizes

Railed content will most likely require arbitrary breakpoints that are specific to your site's content, to ensure they do not exceed the horizontal width of a user's browser.

Rails are generally used beside long, single-column containers with long-form content like blog posts, articles, or user profiles. Generally your main text container width should be set between around 600-800px depending on your font size to optimize line length for readability.

This set-up means most tablet browsers can only accomodate a single rail. Ultrabooks and lower resolution computers two small rails, and larger monitors, usually two full-sized rails. The specifics of this implementation is left up to you in your project.