Layout Guide v1.0

Design rationale and usage details for layout modules.

Cascade's modular layouts adapt to your content. Simply pick a module that matches each section of your content, and stack them in order.

For example, to create a new page layout, first copy the boilerplate HTML from starter-base-html.html into a new file. Then, I could choose 3 modules from the example layouts and place them inside that new HTML file:

  <html>
  <head>...</head>
  <body>

  <div class="header-simple">...</div>
  <div class="staggers">...</div>
  <div class="banner-action">...</div>

  </body>
  </html>
        

Some modules have variations. For example, the banner module can include a form or a button. These variations of the module are called .banner-form and .banner-action, respectively.

Layout Examples

starter-base-html.html

Boilerplate HTML file for creating your own layouts from scratch. Start here, then paste markup for modules from the other layouts or this documentation, 1 at a time.

starter-landing-page-a.html

A simple landing page suitable for any online business. Puts your headline and brand front and center. Very flexible layout modules will accommodate varied content and are easy to duplicate and reuse in multiple places.

starter-landing-page-b.html

Landing page with varied modules that support all kinds of content, from longer text to short snippets and quotes. Includes the header-book module that has a book cover graphic and the pricing module.

starter-blog-a.html

A simple blog layout that focuses on the content, instead of distracting blogging software features like archives.

starter-blog-b.html

A two-column blog with a sidebar and photo header. Also includes comments block you can copy and paste into starter-blog-a if you'd like.

starter-web-app-a.html

A deep and flexible navigation scheme for a web app. Features fancy responsive layout so your web-based software can work on mobile devices too.


Modular Layout System

Cascade's layouts work by dividing the page into vertical sections. Each section is a layout module. Modules are designed to fit a specific kind of content and stack in any order.

So you can quickly assemble a custom layout by picking a module for each section of your content, then pasting the HTML into the page in the order you need.


Merging Modules

If you use two consecutive layout modules with the same background color and pattern, consider collapsing the margins.

For an example of this, look at starter-landing-page-a.html and note the .headline-summary and .logo-graphicbox modules. See how they both use .inverse and the same background pattern? I merged the margins together to avoid awkward-looking extra space.

Simply add the .merge-bottom class to all the modules you want to merge, except for the last. So if you are merging 2 modules, just add .merge-bottom to the first. If merging 3 modules, add the class to the first two. And so on.

This won't be useful for all modules, but it's here if you notice extra space where you don't want it. When in doubt, give it a try.


A Note on Responsiveness

Cascade and Bootstrap are responsive by default. If you want to support IE8, you need to include respond.min.js because of Bootstrap's (and thus Cascade's) reliance upon media queries. You also need to host bootstrap.min.css and respond.min.js yourself because respond.min.js reloads the CSS, and it runs into cross-domain issues if you use a CDN.

The layout examples and base HTML reflect this. bootstrap.min.css and respond.min.js are in /assets.


articles-narrow

Purpose

Simple one-column text for a blog or news site with focus on sophisticated typography. Draws attention to your content. Use for long form content with titles and metadata.

Content Supported

Can be used to view multiple articles, such as on a blog homepage or archive page, or a single article view.

Inside the .article element, a .header provides spacing for an .article-title and a p.article-meta. The .article-title can be H1-H6 and defaults to a light font weight if one is available.

Markup & Example Content

<div class="articles-narrow pattern-noise">
  <div class="container">
    <div class="row">
      <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1">

        <div class="article">

          <div class="header">
            <h2 class="article-title"><a href="#">4 Ways to Spend Less Time Answering Customer Email.</a></h2>
            <p class="article-meta">By <span class="author"><a href="#">Jarrod</a></span> on <span class="date"><em>August 14th, 2013</em></span> / <span class="comments"><a href="#">3 Comments</a></span></p>
          </div>

          <div class="article-content">
            <p class="lead">You start the day by sitting down at your desk, ready to write code for a new feature. Then you open your email client and notice a dozen support tickets waiting for you. <em>"I can knock these out quickly,</em>" you think.</p>
            <p>Then you look up and <strong>it's 2pm</strong>.</p>
            <p><em>Where did the day go?</em> What happened to building out that new feature? Email has struck again.</p>
            <p>There's a way to spend less time answering email. You've probably already guessed it starts with using Postal App. But, it's about more than just switching email clients. It's about a state of mind.</p>
            <p class="continue"><a href="#">Continue Reading...</a></p>
          </div>

        </div>

        <div class="article">

          <div class="header">
            <h2 class="article-title"><a href="#">How To Set Up Postal's Email Filtering Algorithms.</a></h2>
            <p class="article-meta">By <span class="author"><a href="#">Jarrod</a></span> on <span class="date"><em>August 15th, 2013</em></span> / <span class="comments"><a href="#">12 Comments</a></span></p>
          </div>

          <div class="article-content">
            <p class="lead">Email filtering algorithms sound really cool. Like, <em>lightsaber</em> cool. But the concept is actually really simple: Postal learns from your habits of reading, ignoring, and replying to email to figure out <strong>which new email you need to see first.</strong></p>
            <p>But it gets even cooler when you realize <strong>you can customize Postal's algorithms.</strong> And you don't even need to be a math whiz.</p>
            <p>You can force Postal to obey your preferences. With just <em>5 minutes</em> of work, you'll be saving countless minutes because you won't have to sift through all the junk email to find the important stuff.</p>
            <p class="continue"><a href="#">Continue Reading...</a></p>
          </div>

        </div>

      </div> <!-- /.col-x -->
    </div> <!-- /.row -->
  </div> <!-- /.container -->
</div>   <!-- /.articles-narrow -->
        

articles-sidebar

Purpose

Two-column text layout. The wide column is for long-form text, such as a blog post or news article. The narrow column contains groups of example content inside .aside elements, such as a search form, links, and lists.

Includes a comments section you can copy and paste into .articles-narrow module if you'd like.

Content Supported

Example content demonstrates a single article view. Module can also be used to view multiple articles, such as on a blog homepage or archive page, if you remove the comments section.

Markup & Example Content

<div class="articles-sidebar">
  <div class="container">
    <div class="row">

      <div class="col-sm-8 articles">

        <div class="article">

          <div class="header">
            <h2 class="article-title"><a href="#">4 Ways to Spend Less Time Answering Customer Email.</a></h2>
            <p class="article-meta">By <span class="author"><a href="#">Jarrod</a></span> on <span class="date"><em>August 14th, 2013</em></span> / <span class="comments"><a href="#">3 Comments</a></span></p>
          </div>

          <div class="article-content">
            <p class="lead">You start the day by sitting down at your desk, ready to write code for a new feature. Then you open your email client and notice a dozen support tickets waiting for you. <em>"I can knock these out quickly,</em>" you think.</p>
            <p>Then you look up and <strong>it's 2pm</strong>.</p>
            <p><em>Where did the day go?</em> What happened to building out that new feature? Email has struck again.</p>
            <p>There's a way to spend less time answering email. You've probably already guessed it starts with using Postal App. But, it's about more than just switching email clients. It's about a state of mind.</p>
          </div>

        </div>

        <div class="comments">

          <div class="add-comment">
            <h3>Leave a Comment</h3>  
            <form class="form" role="form">
              <div class="form-group">
                <label for="commentor-name">Name*</label>
                <input type="email" class="form-control" id="commentor-name">
              </div>
              <div class="form-group">
                <label for="commentor-name">Email*</label>
                <input type="text" class="form-control" id="commentor-email">
              </div>
              <div class="form-group">
                <label for="commentor-name">Website URL</label>
                <input type="url" class="form-control" id="commentor-website">
              </div>
              <div class="form-group">
                <label for="comment-body" class="control-label">Comment*</label>
                <textarea class="form-control" id="comment-body" rows="3"></textarea>
              </div>
              <div class="form-group">
                <button class="btn">Submit</button>
              </div>
            </form>
          </div>

          <div class="comments-header">
            <h3>Comments</h3>
            <p><a href="#"><i class="fa fa-fw fa-rss"></i> Subscribe to Comments RSS</a></p>
          </div>

          <div class="comments-list">
            <!-- comment #1 -->
            <div class="media">
              <img class="media-object" src="" alt="" src="" width="75" height="75">
              <div class="media-body">
                <h4 class="media-heading">Jon Doe <small>At 3:05pm Jan 1, 2014</small></h4>
                <p>Donec tempus nisl diam, nec commodo urna pulvinar ut. Curabitur ac sem tempor, hendrerit urna a, condimentum turpis. <a href="#">Reply</a></p>
      
                <!-- nested comment -->
                <div class="media">
                  <img class="media-object" src="" alt="" src="" width="75" height="75">
                  <div class="media-body">
                    <h4 class="media-heading">Jane Smith <small>At 3:10pm Jan 1, 2014</small></h4>
                    <p>Morbi blandit risus ipsum, ut commodo purus pharetra in. Suspendisse faucibus ligula sed ante dapibus pellentesque nec quis odio. <a href="#">Reply</a></p>
                  </div> <!-- /.media #2 .media-body -->
                </div> <!-- /.media #2 -->
                <!-- end nested comment -->
      
              </div> <!-- /.media #1 .media-body -->
            </div> <!-- /.media #1 -->
            <!-- end comment #1 -->
  
            <!-- comment #2 -->
            <div class="media">
              <img class="media-object" src="" alt="" src="" width="75" height="75">
              <div class="media-body">
                <h4 class="media-heading">Joe Jones <small>At 3:35pm Jan 1, 2014</small></h4>
                <p>Morbi blandit risus ipsum, ut commodo purus pharetra in. Suspendisse faucibus ligula sed ante dapibus pellentesque nec quis odio. <a href="#">Reply</a></p>
      
                <!-- #2 nested comment -->
                <div class="media">
                  <img class="media-object" src="" alt="" src="" width="75" height="75">
                  <div class="media-body">
                    <h4 class="media-heading">Jane Smith <small>At 3:37pm Jan 1, 2014</small></h4>
                    <p>Morbi blandit risus ipsum, ut commodo purus pharetra in. Suspendisse faucibus ligula sed ante dapibus pellentesque nec quis odio. <a href="#">Reply</a></p>
          
                    <!-- double nested comment -->
                    <div class="media">
                      <img class="media-object" src="" alt="" src="" width="75" height="75">
                      <div class="media-body">
                        <h4 class="media-heading">Jon Doe <small>At 3:41pm Jan 1, 2014</small></h4>
                        <p>Morbi blandit risus ipsum, ut commodo purus pharetra in. Suspendisse faucibus ligula sed ante dapibus pellentesque nec quis odio. <a href="#">Reply</a></p>
                      </div>
                    </div>
                    <!-- end double nested comment -->
          
                  </div>
                </div>
                <!-- end #2 nested comment -->
      
              </div>
            </div>
            <!-- end comment #2 -->
  
          </div> <!-- /.comments-list -->

        </div> <!-- /.comments -->

      </div> <!-- /.col-x -->

      <div class="col-md-3 col-md-push-1 col-sm-4 sidebar">

        <div class="aside">
          <h4>Search</h4>
          <form class="form-inline" role="form">
            <div class="form-group">
              <label for="search" class="control-label sr-only">Search</label>
              <input type="text" class="form-control input-search input-sm" id="search" placeholder="Enter Keywords">
            </div>
            <div class="form-group">
              <button type="submit" class="btn btn-sm btn-search">Search</button>
            </div>
          </form>
        </div>

        <div class="aside">
          <h4>
            Subscribe for Updates
          </h4>
          <ul class="list-unstyled">
            <li><a href="#"><i class="fa fa-fw fa-twitter"></i> Follow @fake-handle</a></li>
            <li><a href="#"><i class="fa fa-fw fa-facebook"></i> Like on Facebook</a></li>
            <li><a href="#"><i class="fa fa-fw fa-rss"></i> RSS</a></li>
            <li><a href="#"><i class="fa fa-fw fa-envelope"></i> Newsletter</a></li>
          </ul>
        </div>

        <div class="aside">
          <h4>
            <small>New Here?</small><br> 
            Start with our best hits:
          </h4>
          <ul>
            <li><a href="#">Free yourself from email distraction. Introducing Postal App.</a></li>
            <li><a href="#">Dear Startup Nerds, Let's Stop Disrupting and Start Building.</a></li>
            <li><a href="#">Recover 1 Billable Hour Every Day With A Simple Email Habit.</a></li>
          </ul>
        </div>

      </div> <!-- /.col-x -->

    </div>
  </div>
</div> <!-- /.articles-sidebar -->
        

Purpose

Provides a contrasting background color to call attention to a headline and call to action button, such as a buy button.

Content Supported

Supports H1-H6 headlines plus button. Keep the headline fairly short so all content fits on one line. Otherwise the alignment of the elements will break on larger screens.

The button can be a.btn or button.btn. Just make sure to use the .btn class.

Change the background colors by switching between .inverse-major, .inverse-minor, and .inverse.

Markup & Example Content

<div class="banner-action inverse-major pattern-noise">
  <div class="container">

    <h3>Stop letting email ruin your productivity.</h3>
    <a class="btn" href="#">See Plans &amp; Pricing</a>

  </div> <!-- /.container -->
</div> <!-- /.banner-action -->
        

Purpose

Provides a contrasting background color to call attention to a headline and single-field form, such as for a newsletter sign up.

Content Supported

Supports H1-H6 headlines plus a single-field form with a button. Keep the headline fairly short so all content fits on one line. Otherwise the alignment of the elements will break on larger screens.

These classes shown in the example content are required in the form for correct alignment and spacing: .form-group, .form-control, .input-group.

Change the background colors by switching between .inverse-major, .inverse-minor, and .inverse.

Markup & Example Content

<div class="banner-form inverse-major pattern-noise">
  <div class="container">

    <h4 class="">Get <em>discounts</em> and articles about <em>email &amp; productivity</em>.</h4>
    <form class="form-inline" role="form">
      <div class="form-group">
        <label class="sr-only" for="email">Email address</label>
        <input class="form-control" type="email" value="" placeholder="Enter Email" name="EMAIL" id="email">
      </div>
      <div class="form-group">
        <button type="submit" class="btn">Subscribe</button>
      </div>
    </form>

  </div> <!-- /.container -->
</div> <!-- /.banner-form -->
        

faq

Purpose

Basic two-column grid text module for pairs of headlines and paragraphs.

Content Supported

Supports H2-H4 plus paragraphs. If you want to use a different element for the header, use the .title class.

Ensure that each pair of header/paragraphs has a similar height. Otherwise, the effect of the grid organization might look unbalanced.

Markup & Example Content

<div class="faq inverse pattern-noise">
  <div class="container">

    <h2>Answers all your questions about Postal.</h2>

    <div class="row">
      <div class="col-sm-6">
        <h4>Does Postal integrate with bug trackers?</h4>
        <p>No, but we're working on it! (So it's not in the book.) Send us an email if you have a preference of which bug tracker we integrate with Postal.</p>
      </div>
      <div class="col-sm-6">
        <h4>How do I import my Gmail account?</h4>
        <p>Chapter 1 gives you step-by-step instructions. Postal also supports Gmail Labs features, which is covered in the appendix.</p>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-6">
        <h4>How do I set up the sorting algorithm?</h4>
        <p>Chapter 8 is all about the algorithms. You'll be autonomously sorting email in no time. It's like having a pet robot.</p>
      </div>
      <div class="col-sm-6">
        <h4>Can I send email newsletters using Postal?</h4>
        <p>Yes! In chapter 5, learn how to integrate postal with Mailchimp, aWeber, or Campaign Monitor to send email campaigns to your list straight from your email client.</p>
      </div>
    </div>

  </div> <!-- /.container -->
</div> <!-- /.faq -->
        

Purpose

A short footer that includes the logo and legal text. Useful for visually reinforcing your brand at the bottom of the page.

Content Supported

Logo and one line of text wrapped in p, small or any element with the .legal class.

Try to keep the content in this module short.

If your logo text and legal text don't fit on one line, change the module's class to .footer-simple-long.

Markup & Example Content

<div class="footer-simple inverse pattern-noise">
  <div class="container">

    <h2 class="logo logo-small">Postal</h2>
    <p class="legal">&copy; 2013 Studio Fellow, LLC. Postal is a fake app created to demonstrate <a href="http://cascade.io">http://cascade.io</a>.</p>

  </div> <!-- /.container -->
</div> <!-- /.footer-simple -->
        

Purpose

A more substantial footer with more room for content. Includes two columns for headers and lists, and a column for logo and legal text.

Content Supported

Supports H2-H6 and any kind of list.

Try to match the heights of the lists content with the combined height of the logo and legal text. This will keep the alignment and spacing looking nice.

Markup & Example Content

<div class="footer-list">
  <div class="container">

    <div class="col-sm-4">
      <h4>Knowledgebase</h4>
      <ul>
        <li><a href="#">How To Set Up Gmail</a></li>
        <li><a href="#">Filtering Algorithms</a></li>
        <li><a href="#">Enable Trigger Lock</a></li>
        <li><a href="#">Browse Knowledgebase</a></li>
      </ul>
    </div>
    <div class="col-sm-4">
      <h4>Support</h4>
      <ul>
        <li><a href="#">Email Support</a></li>
        <li><a href="#">Bugtracker</a></li>
        <li><a href="#">Status</a></li>
        <li><a href="#">Feature Requests</a></li>
      </ul>
    </div>
    <div class="col-sm-4">
      <h2 class="logo logo-small">Postal</h2>
      <p class="legal">&copy; 2013 Studio Fellow, LLC. Postal is a fake app created to demonstrate <a href="http://cascade.io">http://cascade.io</a>.</p>
    </div>

  </div>
</div>
        

header-book

Purpose

Book cover graphic with summary content and button next to it. Great for ebook landing pages.

Content Supported

Uses the .logo with an enlarged @logo-icon and a .tagline. Responsive styles reposition and realign the content.

Try to keep the book title and any text beneath short, or it might flow outside the book graphic.

The default cover design is all beneath the .cover-default class. If you want to change the cover design, just remove that class and create your own.

Markup & Example Content

<div class="header-book pattern-noise">
  <div class="container">

    <div class="row">
      <div class="book col-sm-12 col-md-7 inverse">
        <div class="cover cover-default">
          <h1 class="logo hidden-xs hidden-sm">Going Postal</h1>
          <h1 class="logo logo-medium visible-sm">Going Postal</h1>
          <h1 class="logo logo-small visible-xs">Going Postal</h1>
          <h4 class="tagline">The complete guide to business email.</h4>
        </div>
      </div>
      <div class="header col-sm-12 col-md-5">
        <h2 class="headline">You'll never use email the same way again.</h2>
        <p class="lead">Learn all the ins and outs of the Postal email client, built for tech startups, support teams, and bootstrappers.</p>
        <a class="btn btn-lg" href="#">Buy Now</a>
      </div>
    </div>

  </div> <!-- /.container -->
</div> <!-- /.book-cover -->
        

header-nav

Purpose

Useful for robust and deep navigation needs, as the nav supports dropdown menus.

Content Supported

Supports a .logo and Bootstrap .nav block. Recommend using .nav-pills.

Try to limit the nav items so they fit on one line. On smaller screens, they will start to stack vertically.

Markup & Example Content

<div class="header-nav">
  <div class="container">

    <h2 class="logo logo-small"><a href="#">Postal</a></h2>

    <ul class="nav nav-pills">
      <li><a href="#">Inbox</a></li>
      <li class="active"><a href="#">Settings</a></li>
      <li><a href="#">Documentation</a></li>
      <li><a href="#">Help &amp; Support</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
          <i class="fa fa-fw fa-user"></i>
          Your Account <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li class="dropdown-header">Dropdown header</li>
          <li><a href="#">Settings</a></li>
          <li><a href="#">Manage Subscription</a></li>
        </ul>
      </li>
    </ul>

  </div>
</div> <!-- /.header-nav -->
        

header-photo

Purpose

Visually prominent header with a photo background. Great for blogs or text-heavy pages that need more visual interest.

Content Supported

A .logo plus either a .btn or Bootstrap .btn-group.

If you use a .btn-group, it must also have the additional .btn-nav class for positioning.

The background photo is duplicated and reflected using .header-photo:before to create an invisible seam in the background, rather than using a standard repeating background image. This is to reduce the number of image assets needed on the page.

The background photo is determined by the @box-bg variable.

Markup & Example Content

<div class="header-photo inverse">
  <div class="container ">

    <h2 class="logo logo-small"><a href="#">Postal <span>blog</span></a></h2>
    <div class="btn-nav btn-group btn-group-sm">
      <a class="btn" href="#">Subscribe</a>
      <a class="btn" href="#">Guest Posts</a>
      <a class="btn" href="#">Contact</a>
    </div>

  </div> <!-- /.container -->
</div> <!-- /.header-photo -->
        

header-simple

Purpose

Simple, short header with a logo, tagline, and navigation. Useful for any kind of site.

Content Supported

Supports .logo, any element with .tagline class (recommend a paragraph), and either a .btn or Bootstrap .btn-group.

If you use a .btn-group, it must also have the additional .btn-nav class for positioning.

Markup & Example Content

<div class="header-simple">
  <div class="container">

    <h2 class="logo logo-small"><a href="#">Postal</a></h2>
    <p class="tagline">The official blog of <a href="#">Postal app</a>.</p>
    <div class="btn-nav btn-group btn-group-sm">
      <a class="btn" href="#">Subscribe</a>
      <a class="btn" href="#">Guest Posts</a>
      <a class="btn" href="#">Contact</a>
    </div>

  </div> <!-- /.container -->
</div> <!-- /.header-simple -->
        

headline-summary

Purpose

A large headline and short, large paragraph. Great for starting off long-form landing pages or sales letters. Can also be used lower down on a page to introduce a new section of content.

Content Supported

Recommend H1, but you can use any of H2-H6 if you add the .headline class.

The .summary can be any element, but recommend a paragraph or H4-H6 to keep the size on the small side.

Markup & Example Content

<div class="headline-summary inverse pattern-noise">
  <div class="container">
    <div class="row">
      <div class="col-sm-8 col-sm-offset-2 ">

        <h1 class="headline">
          Free yourself from<br>
          <em>email distraction.</em>
        </h1>
        <h4 class="summary">
          Email frequently interrupts your work, but if you close your email client, you could miss something important. <em class="matching-color">What if you could rely on your email app to limit those distractions?</em>
        </h4>

      </div> <!-- /.col-x -->
    </div> <!-- /.row -->
  </div> <!-- /.container -->
</div> <!-- /.headline-summary -->
        

icon-grid

Purpose

Use visual metaphors for features and benefits. Icons draw interest to short snippets of text.

Content Supported

H2-H5 with an i.fa Font Awesome icon element and paragraph.

Change the icon by editing the icon's class, .fa-[icon-name]. See the icon reference.

Change icon size using .fa-2x, .fa-3x, or .fa-4x.

Change the icon color by using .major-color, .minor-color classes.

Markup & Example Content

<div class="icon-grid pattern-noise">
  <div class="container">

    <div class="row">
      <div class="icon-item col-md-4 col-sm-4">
          <i class="fa major-color fa-4x fa-thumbs-up"></i>
          <h4>Easy email account setup</h4>
          <p>You'll wish every app was this easy.</p>
      </div>
      <div class="icon-item col-md-4 col-sm-4">
          <i class="fa major-color fa-4x fa-folder"></i>
          <h4>Automagical tagging and archiving</h4>
          <p>Never sort thousands of emails again.</p>
      </div>
      <div class="icon-item col-md-4 col-sm-4">
          <i class="fa major-color fa-4x fa-eye"></i>
          <h4>Intelligent filtering algorithms</h4>
          <p>Jedi mind tricks for email.</p>
      </div>
    </div>

    <div class="row">
      <div class="icon-item col-md-4 col-sm-4">
          <i class="fa major-color fa-4x fa-shield"></i>
          <h4>Trigger Lock</h4>
          <p>Prevents accidental sending of incomplete email.</p>
      </div>
      <div class="icon-item col-md-4 col-sm-4">
          <i class="fa major-color fa-4x fa-magic"></i>
          <h4>Automatic &amp; Unobtrusive</h4>
          <p>Tasks and reminders that don't get in your way.</p>
      </div>
      <div class="icon-item col-md-4 col-sm-4">
          <i class="fa major-color fa-4x fa-cogs"></i>
          <h4>Low CPU &amp; RAM Usage</h4>
          <p>Your email client shouldn't slow down your work.</p>
      </div>
    </div>

  </div> <!-- /.container -->
</div> <!-- /.icon-grid -->
        

icon-passage

Purpose

Add a large icon next to long sections of content to break up walls of text. Adds a visual metaphor so content is easier to scan.

Content Supported

Any Font Awesome icon, plus blocks of text, such as H1-H6 and paragraphs, inside .passage.

Markup & Example Content

<div class="icon-passage">
  <div class="container">

    <div class="row">
      <div class="icon col-md-4 col-sm-4">
        <i class="fa fa-5x fa-tachometer"></i>
      </div>
      <div class="passage col-md-8 col-sm-8">
        <h3>Learn to free up system resources.</h3>
        <p>Tired of your email app chewing through your RAM? Postal keeps a low profile until you need it.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nisl quam, scelerisque in urna eget, accumsan ullamcorper arcu. Integer egestas nisl a turpis aliquet, in cursus nisi tristique.</p>
        <p>Curabitur eu diam pulvinar, consectetur magna a, ultricies eros. Curabitur volutpat sapien orci. Praesent elementum nunc eget lobortis aliquet. Donec varius condimentum neque non imperdiet. Nunc ornare nec elit et gravida. Fusce vel metus viverra, lobortis augue quis, consectetur libero. Curabitur turpis purus, sollicitudin vel diam ac, accumsan dapibus urna. Nam lacinia sem mollis lacus commodo, ut porta mi bibendum.</p>
      </div>
    </div> <!-- /.row -->

    <div class="row">
      <div class="icon col-md-4 col-sm-4">
        <i class="fa fa-5x fa-tags"></i>
      </div>
      <div class="passage col-md-8 col-sm-8">
        <h3>Set up automatic tagging and archiving.</h3>
        <p>Who wants to sort through every single email and attach a label? What a waste of time. Postal does it for you, because you have real work to do.</p>
        <p>Mauris ornare ultricies aliquam. Nulla sem velit, viverra eget purus quis, tincidunt vehicula purus. Ut massa urna, commodo eu dictum at, cursus in elit. Nullam feugiat ligula id rhoncus interdum. Suspendisse orci lacus, malesuada in nulla dictum, vestibulum dapibus leo. Quisque consectetur, neque eget vehicula lobortis, risus enim bibendum turpis, at euismod nunc enim at felis.</p>
        <h4>Proin felis ipsum</h4>
        <p>Aenean mollis risus molestie, elementum turpis sit amet, ornare ipsum. Integer ultrices enim massa, ut dictum mi aliquet aliquet. Nulla facilisis congue justo posuere fermentum. Ut et pharetra felis, porttitor blandit massa. Ut ullamcorper sem id nunc cursus pretium. Vivamus vestibulum orci ut tellus ornare, ullamcorper eleifend erat sagittis. Integer ut tempor est, sed ornare neque. Donec quis quam iaculis, tincidunt massa vitae, vehicula mauris.</p>
      </div>
    </div> <!-- /.row -->

  </div> <!-- /.container -->
</div> <!-- /.icon-passage -->
        

list-spread-narrow

Purpose

A two-column list module for showing features or benefits. Collapses to single column on small screens.

Content Supported

H2-H4 plus unordered lists.

Try to keep the total height of the two lists similar for best appearance.

Markup & Example Content

<div class="list-spread-narrow">
  <div class="container">
    <div class="row">

      <div class="panel1 col-sm-4 col-sm-offset-1">
        <h4 class="matching-color">Postal does everything.</h4>
        <ul>
          <li><strong>Easy</strong> email account setup</li>
          <li>Automagical <strong>tagging and archiving</strong></li>
          <li>Intelligent <strong>filtering algorithms</strong></li>
          <li>Trigger Lock <strong>prevents sending incomplete email</strong></li>
          <li>Automatic, <strong>unobtrusive</strong> tasks and reminders</li>
        </ul>
      </div> <!-- /.panel1 -->

      <div class="panel2 col-sm-4 col-sm-offset-2">
        <h4 class="matching-color">Email that works for you.</h4>
        <ul>
          <li><strong>Reduce your time spent</strong> in email</li>
          <li><strong>Write email faster</strong></li>
          <li><strong>Stop confusing contacts</strong> with similar names</li>
          <li>Focus on <strong>your work</strong> instead of your email</li>
          <li><strong>Remember</strong> the important stuff</li>
        </ul>
      </div> <!-- /.panel2 -->

    </div> <!-- /.row -->
  </div> <!-- /.container -->
</div> <!-- /.list-spread-narrow -->
        

logo-graphicbox

Purpose

Visually dominant way to present your brand and a call to action.

Content Supported

A .graphicbox element that has a photo background as determined by @box-bg.

Inside the graphicbox, a logo, tagline, and button. All are optional. Try using all 3, or just logo & tagline, tagline & button.

Keep the content inside the graphicbox short and sweet. Adding too much will make the design look busy and crowded.

Markup & Example Content

<div class="logo-graphicbox inverse pattern-noise">
  <div class="container">
    <div class="row">

      <div class="graphicbox inverse col-sm-8 col-sm-offset-2">
        <h1 class="logo">Postal</h1>
        <h4 class="tagline"><em>Make your email work for you.</em></h4>
        <p><a class="btn btn-biline" href="#"><i class="fa fa-check-square-o"></i> See Plans &amp; Pricing<span class="biline">Free 30 Day Trial</span></a></p>
      </div> <!-- /.graphicbox -->

    </div> <!-- /.row -->
  </div> <!-- /.container -->
</div> <!-- /.logo-graphicbox -->
        

Purpose

Navigation design for a web app or settings page. Includes navigation column with icons for each link, but the icons are optional.

Content Supported

Always use a Bootstrap .nav block with the .nav-pills and .nav-stacked classes.

Can change the color of .title-bar by using .inverse-major, .inverse-minor, and .inverse.

You can swap or remove the icons in front of each link.

Make sure to use the Font Awesome fixed-width (.fa.fa-fw) class on the icons to ensure proper left alignment.

Gradient in .title-bar dependent upon @flat.

The example content inside .app-view can all be removed. You could use a form here, or a chart, etc. There's enough space for any kind of content, and it's okay if that content is taller than the navigation.

This module requires JavaScript (bootstrap.min.js) for the responsive layout.

Markup & Example Content

<div class="nav-app-icon pattern-noise">
  <div class="container">

    <div class="row title-bar inverse-major">
      <h4 class="title">Settings</h4>

      <div class="navbar-header">
        <!-- visible only at mobile size -->
        <a class="btn btn-sm navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <i class="fa fa-fw fa-bars"></i>
        </a>
      </div>
    </div>


    <div class="row">

      <div class="col-sm-3 nav-icon">
        <!-- wrapper div required to avoid breaking grid -->
        <div class="collapse navbar-collapse">
          <ul class="navbar nav nav-pills nav-stacked">
            <li><h4 class="group-title">Filtering Rules</h4></li>
            <li class="active"><a href="#"><i class="fa fa-fw fa-folder"></i> Newsletters</a></li>
            <li><a href="#"><i class="fa fa-fw fa-folder"></i> Projects</a></li>
            <li><a href="#"><i class="fa fa-fw fa-archive"></i> Auto Archive</a></li>
            <li class="hilight"><a href="#"><i class="fa fa-fw fa-plus-square"></i> Create Rule</a></li>

            <li><h4 class="group-title">Tools</h4></li>
            <li><a href="#"><i class="fa fa-fw fa-lock"></i> Trigger Lock</a></li>
            <li><a href="#"><i class="fa fa-fw fa-exclamation"></i> Reminders</a></li>
            <li><a href="#"><i class="fa fa-fw fa-check-circle-o"></i> Tasks</a></li>

            <li><h4 class="group-title">Accounts</h4></li>
            <li><a href="#"><i class="fa fa-fw fa-google-plus"></i> Gmail</a></li>
            <li><a href="#"><i class="fa fa-fw fa-envelope"></i> Studio Fellow LLC</a></li>
            <li class="hilight"><a href="#"><i class="fa fa-fw fa-plus-square"></i> Add Account</a></li>
          </ul>
        </div>
      </div> <!-- /.nav-icon -->

      <div class="col-sm-9 app-view">

        <!-- This form is only example content. -->

        <form class="form">
          <div class="form-group">
            <label for="RuleTitle" class="control-label">Rule Title</label>
            <input type="text" class="form-control" id="RuleTitle" placeholder="" value="Newsletters">
          </div>
          <div class="form-group">
            <label for="keywords" class="control-label">Email Subject Keywords</label>
            <small class="help-block">Select any emails with subject lines that include these keywords. Separate with commas.</small>
            <input type="text" class="form-control" id="keywords" placeholder="" value="Ruby Weekly, FontShop, Freelancers Weekly">
          </div>
          <div class="form-group">
            <label for="domains" class="control-label">Email Sender Domains</label>
            <small class="help-block">Select any emails that match these sender domains. Separate with commas.</small>
            <input type="text" class="form-control" id="domains" placeholder="" value="list-manage.com">
          </div>
          <div class="form-group">
            <div class="checkbox">
              <label>
                <input type="checkbox" name="" id="" value="" checked>
                Add Tag
              </label>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox" name="" id="" value="">
                Archive
              </label>
            </div>
          </div>
          <div class="form-group">
            <label for="TagTitle" class="control-label">Tag Title</label>
            <small class="help-block">Enter a name for the tag.</small>
            <input type="text" class="form-control" id="TagTitle" placeholder="" value="Newsletters">
          </div>
          <div class="form-group">
            <button class="btn">Save</button>
          </div>
        </form>

        <!-- / example form -->

      </div> <!-- /.app-view -->

    </div> <!-- /.row -->

  </div>
</div> <!-- /.nav-app-icon -->
        

pricing

Purpose

Design for multiple packages, tiers, or bundles of a product.

Content Supported

Example content shows 3 Bootstrap .panel's, each corresponding to a product package. You can use more than 3, but the panels will get very very narrow. If you need more, than 3, consider breaking them into 2 rows.

The icons shown in the example content are optional. You can just delete them.

Change the panel background colors with these variations: .panel-default, .panel-inverse, .panel-minor, .panel-major. Limit use of .panel-minor as it is very bright in some color schemes.

Markup & Example Content

<div class="pricing pattern-noise">
  <div class="container">

    <h2>Discount prices for a limited time.</h2>

    <div class="row">

      <div class="col-sm-4">
        <div class="panel panel-default">
          <div class="panel-heading">
            <i class="fa fa-2x fa-book"></i>
            <h3>eBook</h3>
            <p>Just the ebook.</p>
          </div>
          <div class="panel-body">
            <ul>
              <li>PDF, Mobi, and ePub</li>
              <li>125 pages (in PDF)</li>
              <li>All future revisions for free</li>
              <li>Cras diam nisi</li>
              <li>Tincidunt non pretium</li>
              <li>Vel, interdum at lectus</li>
            </ul>
          </div>
          <div class="panel-footer">
            <h4 class="pull-right">$39</h4>
            <a href="#" class="btn btn-lg pull-left">Buy Now</a>
          </div>
        </div><!-- /.panel 1 -->
      </div>

      <div class="col-sm-4">
        <div class="panel panel-inverse">
          <div class="panel-heading">
            <i class="fa fa-2x fa-gift"></i>
            <h3>Bundle</h3>
            <p>The eBook plus email templates.</p>
          </div>
          <div class="panel-body">
            <ul>
              <li>The entire ebook</li>
              <li>3 email templates</li>
              <li>Email template cheatsheet</li>
              <li>Vestibulum facilisis</li>
              <li>Sapien in accumsan blandit</li>
              <li>Fusce commodo</li>
            </ul>
          </div>
          <div class="panel-footer">
            <h4 class="pull-right">$89</h4>
            <a href="#" class="btn btn-lg pull-left">Buy Now</a>
          </div>
        </div><!-- /.panel 2 -->
      </div>


      <div class="col-sm-4">
        <div class="panel panel-major">
          <div class="panel-heading">
            <i class="fa fa-2x fa-wrench"></i>
            <h3>Toolkit</h3>
            <p>ebook, templates, and videos.</p>
          </div>
          <div class="panel-body">
            <ul>
              <li>The entire ebook</li>
              <li>Templates &amp; cheatsheet</li>
              <li>5 tutorial videos</li>
              <li>Tincidunt augue</li>
              <li>Obortis scelerisque</li>
              <li>Proin felis ipsum</li>
            </ul>
          </div>
          <div class="panel-footer">
            <h4 class="pull-right">$149</h4>
            <a href="#" class="btn btn-lg pull-left">Buy Now</a>
          </div>
        </div><!-- /.panel 3 -->
      </div>

    </div> <!-- /.row -->

  </div> <!-- /.container -->
</div> <!-- /.pricing -->
        

quote-long

Purpose

A long block quote with extra visual appeal. Great for customer testimonials, reviews, or other social proof.

Content Supported

Place as many paragraphs as you'd like inside the blockquote element. Adds a quotation mark on blockquote:before.

Try wrapping any attribution in small.

Markup & Example Content

<div class="quote-long">
  <div class="container">
    <div class="row">
      <div class="col-md-7 col-md-offset-3 col-sm-7 col-sm-offset-3">
        <blockquote>
          <p>I learned so much about customer support from this ebook. Using Postal, I can accomplish support tasks so much more quickly than I used to. Now, I spend most of my day working on my product, instead of answering email. So grateful that the makers of Postal wrote this ebook guide.</p>

          <small>Jonathan Deer, Founder of MySweetStartup.com</small>
        </blockquote>
      </div>
    </div>
  </div> <!-- /.container -->
</div> <!-- /.quote-long -->
        

staggers

Purpose

Great way to add graphics to a page. Uses an icon and a photo background to alternate (or stagger!) between the left and right edges of the page.

Content Supported

If you don't want the staggers to alternate, just duplicate and reuse the stagger that has the graphicbox on the side you prefer.

The .graphicbox photo background relies upon @box-bg

Try to limit the combined height of your paragraphs and headline, so they are not taller than the graphicbox. If you need to place longer content, switch to using the .icon-passage module instead.

Markup & Example Content

<div class="staggers pattern-noise">
  <div class="container">

    <div class="stagger-graphicbox row">
      <div class="graphicbox col-sm-4">
        <i class="fa fa-envelope"></i>
      </div>
      <div class="description col-sm-7 col-sm-push-1">
        <h3 class="matching-color">Revolutionize email? Why?!</h3>
        <p>Email is awesome! It doesn't need a redesign. Email just needs to get out of the way of our work. Postal makes your email work for you, instead of the other way around. It limits distractions without missing the important stuff.</p>
      </div>
    </div> <!-- /.stagger-graphicbox -->

    <div class="stagger-graphicbox row">
      <div class="graphicbox col-sm-4 col-sm-push-8">
        <i class="fa fa-clock-o"></i>
      </div>
      <div class="description col-sm-7 col-sm-pull-4">
        <h3 class="matching-color">Cut your time spent in email.</h3>
        <p>Instead of imagining all kinds of cool features that make email fancy, but that actually make it more laborious, Postal works hard so you spend less time using email. Postal is successful if you don't notice it working.</p>
      </div>
    </div> <!-- /.stagger-graphicbox -->

    <div class="stagger-graphicbox row">
      <div class="graphicbox col-sm-4">
        <i class="fa fa-calendar"></i>
      </div>
      <div class="description col-sm-7 col-sm-push-1">
        <h3 class="matching-color">Here to stay.</h3>
        <p>Unlike all those other email apps that pursue an acquisition and then get shut down by new owners, Postal is here for the long haul. The promise: no acquisitions. If you buy, we'll maintain the software.</p>
      </div>
    </div> <!-- /.stagger-graphicbox -->

  </div> <!-- /.container -->
</div> <!-- /.staggers -->
        

Thanks for reading! Again, if you have any problems, email me at jarrod@cascade.io.