MinnPost Styles

Welcome to MinnPost Styles, a super-fly, style guide focused on interactive and news applications made by the MinnData team. A work in progress.

About

MinnPost Styles is a CSS and JS framework. The CSS source is written in SASS and is extendable if you want to include the framework via SASS.

Lots of inspiration and some code was taken from such amazing projects such as Bootstrap, Mapbox.js, and more. The source code can be found on Github.

Browser support

MinnPost Styles aims to support all modern browsers and Internet Explorer 8 (IE8). See the browser note section for common notes to users that do not run a supported browser.

IE8 does not support many newer CSS(3) features and so some styles will not be the exact same as other browsers, but the difference should be minor style differences. IE8 does not support media queries in CSS, so we have to include a library to force it. Need to figure out.

Usage

It is suggested that you install MinnPost Styles with Bower. Otherwise, get the code from Github.

bower install minnpost-styles 

CSS

Include the CSS as you would for any other library by putting the folling in the head section of your HTML document.

<link rel="stylesheet" href="bower_components/minnpost-styles/dist/minnpost-styles.min.css"> 

Wrapper class

Since these styles were made for projects that will get embedded in existing sites, all styles are prefixed with the mp class. This means you should wrap your markup like so:

<div class="mp"> ... </div> 

Or, if you are not embedding, simply add the class to the body:

<body class="mp"> ... </body> 

Javascript

There are Javascript parts for common interactions and interactive parts. See sections below that give examples of usage of the different components. Include the relevant JS files by adding the following near the end of your HTML document:

<script src="bower_components/minnpost-styles/dist/minnpost-styles.nav.min.js"></script> 

Dependencies

MinnPost Styles depends on underscore and jQuery globally, but depending on what part you want to use, you will need to include other dependencies.

ComponentDependencies
Config(default)
DatatablesDatatables
Formatters(default)
HighchartsHighcharts
MapsLeaflet
Nav(default)

Use a module loader

The JS parts of MinnPost styles will all go into a global variable by default, for example MP.nav, but it is suggested to use a module loader like RequireJS or Browserify. The following is a sample usage with RequireJS:


require.config({
  paths: {
    'underscore': 'bower_components/underscore/underscore-min',
    'jquery': 'bower_components/jquery/dist/jquery.min',
    'nav': 'bower_components/minnpost-styles/minnpost-styles.nav.min'
  }
});

require(['underscore', 'jquery', 'nav'], function(_, $, nav) {
  // Nav creates some jQuery plugins
  $(document).ready(function() {
    // Scoll spy it all
    $('body').mpScrollSpy();
  });
});
          

Colors

Interface

These colors are used in the interface and already set to the appropriate components. Though you should not need to often, you can use these as text or background colors with classes like .color-{color-name} or .bg-color-{color-name}. After including the minnpost-styles.config.js, the colors are available under MP.config['colors-interface'].

Political

These colors are used for political parties. You can use these as text or background colors with classes like .color-political-{color-name} or .bg-color-political-{color-name}. After including the minnpost-styles.config.js, the colors are available under MP.config['colors-political']. Full names of political parties can be found in MP.config.politicalParties and can be seen if you hover over the swatches below.

Data

These colors are used for data visualizations. These are colors to start from, and the set as whole should not necessarily be used to represent categories or groups in one dataset.

You can use these as text or background colors with classes like .color-data-{color-name} or .bg-color-data-{color-name}. After including the minnpost-styles.config.js, the colors are available under MP.config['colors-data'].

Grouping data

When grouping data, there are few important things to consider.

The following are sequential examples to white and diverging examples to the opposite ordered hue. Use the buttons below to switch the color spaces. Also, the hexadecimal values for the colors are actually in each block and copyable.

Sequential examples
Diverging examples

This is programatically achieved wtih Chroma.js and code similar to:

chroma.scale(['white', '#F55F29']).mode('lab').domain([0,1], 5).colors()

Browser notes

We aim to support down to IE8, but we still want other browsers to have some direction on how to upgrade, or that though the piece may work, some parts may be missing.

Javascript is not enabled

Though this is highly unlikely these days and given our audience, it's still important to note if the interface is based heavily on Javascript.

This application requires Javascript which is used to make your web browser more interactive. If this message does not go away, please consider enabling Javascript. Here are instructions on how to enable JavaScript in your web browser.

<noscript>
  <p class="noscript-note">This application requires Javascript which is used to make your web browser more interactive.  If this message does not go away, please consider enabling Javascript.  Here are <a href="http://www.enable-javascript.com/" target="_blank">instructions on how to enable JavaScript in your web browser</a>.</p>
</noscript> 

Browser is not fully supported

Depending on what browser is supported, you should change the IE conditional.

Consider upgrading your browser

Your Internet Browser is the application you use to navigate webpages on the internet. You are currently using an older version of Internet Explorer. This application may not be full-featured because you are using such an old browser.

Click here to find out about upgrading to a newer browser.

<!--[if lte IE 8]>
<div class="browser-upgrade-note">
  <h4>Consider upgrading your browser</h4>
  <p>Your <strong>Internet Browser</strong> is the application you use to navigate webpages on the internet.  You are currently using an older version of Internet Explorer.  This application may not be full-featured because you are using such an old browser.</p>

  <p><a href="http://browsehappy.com/" target="_blank">Click here to find out about upgrading to a newer browsers</a>.</p>
</div>
<![endif]--> 

Grid

A really, really basic, mobile-first, fluid grid is provided. There are 5 provided groups of breakpoints, all, small, medium, large, xlarge, and widths are provided in 5% intervals as well as 33% and 66%. This makes combinations such as .column-small-50, which means that any width greater than or equal to 420px will be 50% wide.

25% m+

25% m+

50% m+

33% s+

66% s+

15% l+

10% l+

5% l+

20% l+

20% l+

30% l+

33% s+ 50% m+

66% s+ 50% m+

<div class="row">
  <div class="column-small-33 column-medium-50">
    <p>33% s+ 50% m+</p>
  </div>
  <div class="column-small-66 column-medium-50">
    <p>66% s+ 50% m+</p>
  </div>
</div> 

Breakpoints

Predefined breakpoints are silly. Breakpoints should be defined when content or style no longer makes sense. That said, MinnPost Styles provides some defaults that we use often on our projects.

If you are using SASS, it is very simple to update the breakpoints and the size names. Simply update the following variable with something similar to the following. Each sub list consists of the class suffix and breakpoint.

$responsive-points: (
  ("all", 0px),
  ("small", 420px),
  ("medium", 640px),
  ("large", 960px),
  ("xlarge", 1200px)
) 

Note that 0px has a special meaning in that it will not be wrapped in a media query and will apply to all browsers. This means you could turn off the responsive bits by doing the following:

$responsive-points: ( ("all", 0px) );

Typography

Font

Our overall guideline is to use Montserrat for headings and Open Sans for other typograhy. Use .font-heading and .font-text to override and set a specific font.

Headings

The following are the styling of the headings, h1, h2, etc.

h1 Example heading

Thinks heart prince cat birdwatching chase the red dot kitty honey shenanigans slept sleepy cat, kitten face little cat her life found fuzzy. Cat kitten sunbathe cat crosseyed cat little kitty photobomb looks curls, happy my she boy. Give me fish cats, cat terrified lived catnip comfortable.

h2 Example heading

Thinks heart prince cat birdwatching chase the red dot kitty honey shenanigans slept sleepy cat, kitten face little cat her life found fuzzy. Cat kitten sunbathe cat crosseyed cat little kitty photobomb looks curls, happy my she boy. Give me fish cats, cat terrified lived catnip comfortable.

h3 Example heading

Thinks heart prince cat birdwatching chase the red dot kitty honey shenanigans slept sleepy cat, kitten face little cat her life found fuzzy. Cat kitten sunbathe cat crosseyed cat little kitty photobomb looks curls, happy my she boy. Give me fish cats, cat terrified lived catnip comfortable.

h4 Example heading

Thinks heart prince cat birdwatching chase the red dot kitty honey shenanigans slept sleepy cat, kitten face little cat her life found fuzzy. Cat kitten sunbathe cat crosseyed cat little kitty photobomb looks curls, happy my she boy. Give me fish cats, cat terrified lived catnip comfortable.

h5 Example heading

Thinks heart prince cat birdwatching chase the red dot kitty honey shenanigans slept sleepy cat, kitten face little cat her life found fuzzy. Cat kitten sunbathe cat crosseyed cat little kitty photobomb looks curls, happy my she boy. Give me fish cats, cat terrified lived catnip comfortable.

h6 Example heading

Thinks heart prince cat birdwatching chase the red dot kitty honey shenanigans slept sleepy cat, kitten face little cat her life found fuzzy. Cat kitten sunbathe cat crosseyed cat little kitty photobomb looks curls, happy my she boy. Give me fish cats, cat terrified lived catnip comfortable.

<h1>h1 Example heading</h1>
  ... 

Component labels

The following are styling for non-heading labels for components like charts or tables.

Component label
<div class="component-label">Component label</div> 

Paragraph

Thinks heart prince cat birdwatching chase the red dot kitty honey shenanigans slept sleepy cat, kitten face little cat her life found fuzzy. Cat kitten sunbathe cat crosseyed cat little kitty photobomb looks curls, happy my she boy. Give me fish cats, cat terrified lived catnip comfortable nina fearless eat the grass friend his zzz home impressed kitten house loves sneak snuggliest mom cat happy! Waffles, her cat classy happy! Bed here years, whisker awesomeness kitties sucked oh shenanigans yoda friend backyard girlfriend kitty. Belly, knock over the lamp rescuing he persian impressed purses gf's.

<p>Some text...</p> 

Text block

For optimal readablity, large blocks of text should not necessarily fill the whole container. This is using em's which means the container is based on the font size.

Thinks heart prince cat birdwatching chase the red dot kitty honey shenanigans slept sleepy cat, kitten face little cat her life found fuzzy. Cat kitten sunbathe cat crosseyed cat little kitty photobomb looks curls, happy my she boy. Give me fish cats, cat terrified lived catnip comfortable nina fearless eat the grass friend his zzz home impressed kitten house loves sneak snuggliest mom cat happy! Waffles, her cat classy happy! Bed here years, whisker awesomeness kitties sucked oh shenanigans yoda friend backyard girlfriend kitty. Belly, knock over the lamp rescuing he persian impressed purses gf's.

Thinks heart prince cat birdwatching chase the red dot kitty honey shenanigans slept sleepy cat, kitten face little cat her life found fuzzy. Cat kitten sunbathe cat crosseyed cat little kitty photobomb looks curls, happy my she boy. Give me fish cats, cat terrified lived catnip comfortable nina fearless eat the grass friend his zzz home impressed kitten house loves sneak snuggliest mom cat happy! Waffles, her cat classy happy! Bed here years, whisker awesomeness kitties sucked oh shenanigans yoda friend backyard girlfriend kitty. Belly, knock over the lamp rescuing he persian impressed purses gf's.

<div class="text-block">
  <p> ... </p>
</div>

<div class="text-block large left text-justify">
  <p> ... </p>
</div> 

Links

Links are used for inline navigation. For external links, it is often a good idea to use the target="_blank" attribute as it will open the link in a new tab.

This is a link.

<a href="#">link</a> 

Text modifiers

This is small text. This is bold text. This is emphasizes text.

Some text Super script then some Sub script

<small>This is small text.</small>
<strong>This is bold text.</strong>
<em>This is emphasizes text.</em>
<sup>Super-script text.</sup>
<sub>Subscript text.</sub> 

Abbreviations

HTML is an abbreviation of HyperText Markup Language.

<abbr title="HyperText Markup Language">HTML</abbr> 

Blockquotes

Use a <small> element for the attribution of the quote.

Someone said something really awesome and important once.

Someone famous
<blockquote>
  <p>Someone said something really awesome and important once.</p>
  <small>Someone famous</small>
</blockquote> 

Lists

  • unordered list example
  • another thing
  • nested items
    • nested item 1
    • nested item 2
  • Another item
<ul>
  <li>Unordered list example</li>
</ul> 
  1. ordered list example
  2. another thing
  3. nested items
    1. nested item 1
    2. nested item 2
  4. Another item
<ol>
  <li>Ordered list example</li>
</ol> 

Code

Inline code example.

<code>code</code> 
['Code block',
'example here.']; 
<pre><code>code</code></pre> 

Footnote

Footnotes are for footnotes, attribution, and other notes that are not needed to be specifically with its related content.

This is a footnote example.

<div class="footnote">
  <p>This is a footnote example</p>
</div> 

Credit

Credits are specifically for components like images, or charts, most likely within a full article context.

This is a credit example.

<p class="credit">This is a credit example</p> 

Caption

Captions are small, simple bits of information giving a specific component context, such as for an image or chart.

This is a caption example. Happy my she boy. Give me fish cats, cat terrified lived catnip comfortable nina fearless eat the grass friend his zzz home impressed kitten house loves sneak snuggliest mom cat happy! Waffles, her cat classy happy!

<p class="caption"> This is a caption example </p> 

Tables

Wrap tables in a .table-responsive-* class so that it will become scrollable on smaller devices. Breakpoint suffixes from $responsive-classes SASS variable and determine the max-width to begin making the table responsive.

Use a striped or striped-even class on the table to add stripes to every other row.

Table example
First columnsecondthirdfourthfifth
data2

longer paragraph text is over here

42,000,424,242.00MORE!
somre more data here42

longer paragraph text is over here

42,000,424,242.00MORE!
<div class="table-responsive-medium">
  <table>
    <thead>
      <tr>
        <th>First column</th><th>second</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>data</td><td>2</td>
      </tr>
      <tr>
        <td>somre more data here</td><td>42</td>
      </tr>
    </tbody>
  </table>
</div> 

Buttons

Different types of buttons. The <button> is the preferred element to use, but you can use other elements if needed.

Link Span

<button class="button">Button</button>
<a href="#" class="button">Link</a>
<span class="button">Span</span>
<button class="button button-link">Button link</button>
<button class="button disabled">Disabled</button>
<button class="button active">Active</button> 

There are different types of buttons with different colors as well.

<button class="button primary">primary</button>
<button class="button success">success</button>
<button class="button info">info</button>
<button class="button warning">warning</button>
<button class="button danger">danger</button>

You can use the helper classes to make different sized buttons as well.

<button class="button xxsmall">xxSmall</button>
<button class="button xsmall">xsmall</button>
<button class="button small">small</button>
<button class="button large">large</button>
<button class="button xlarge">xlarge</button>
<button class="button xxlarge">xxlarge</button> 

Button groups

Buttons next to each other.

 

Button toolbar

Buttons groups next to each other in a toolbar.

 

Forms

Regular form

The following is a basic input form.

Example block-level help text here.

Example block-level help text here.

Field group with legend
<form role="form">
  <div class="form-item">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" id="exampleInputEmail1" placeholder="Enter email">
  </div>

  ...

  <div class="checkbox">
    <label>
      <input type="checkbox" name="checkboxes" value="2"> Check, check
    </label>
  </div>

  <button type="submit" class="button primary">Submit</button>
</form> 

Inline form

The following is a basic inline form. Inline forms are for multiple, but few inputs.

<form role="form" class="form-inline">
  ...
</form> 

Input group

For single input forms, use an input group.

Currently broke in IE8.

<form role="form" class="large">
  <div class="form-input-group">
    <label for="address" class="sr-only">Email address</label>
    <input type="text" id="address" placeholder="Search by address">

    <div class="button-group">
      <button type="submit" class="button primary" title="Search an address">Search</button>
      <button type="submit" class="button info" title="Use your current location"><i class="fa fa-location-arrow"></i></button>
    </div>
  </div>
</form> 

Media

Images

Make sure to use the alt attribute to provide a descriptive version of the image. Note that IE8 does not support rounded corners.

Grey placeholder Grey placeholder Kitten placeholder Kitten placeholder
 

Thumbnails

Grey placeholder Grey placeholder
Grey placeholder

This is a caption

 

Icons

Icons provided by Font Awesome; see the site for the full list of icons. Kept independent so that MinnPost Styles stays small if you don't need them. Use the Bootstrap CDN to include the CSS.

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> 
<i class="fa fa-compass"></i>
<i class="fa fa-compass fa-spin"></i>
<i class="fa fa-compass fa-flip-horizontal"></i>
<i class="fa fa-compass xlarge"></i> 

Loading

Often, there is a need to represent that processing or data loading is happening, use the following to provide that message. Note that IE8 and IE9 does not support CSS animations so the icon will not spin.

Loading...
<div class="loading-container">
  <i class="loading"></i> Loading...
</div> 

For quick loading of a specific element, you can use the loading-block class for a simple representation of loading.

<div class="loading-block"></div> 

Preferred icons

NameClassIcon
Locationfa-location-arrow
External linkfa-external-link
Down expandfa-angle-down
Up minimizefa-angle-up
Forward or nextfa-long-arrow-right
Back or previousfa-long-arrow-left
Checkfa-check
Alertfa-bell
Permalink??

Labels

Labels are basic ways to make distinctions to key words.

label

2x

<span class="label">label</span> 

Alerts

Messages to the users, specifically concerning actions they have taken.

Success! This is a warning; watch out.
Info! This is a warning; watch out.
Warning! This is a warning; watch out.
Danger! This is a warning; watch out.
<div class="alert success">
  <strong>Success!</strong> This is a warning; watch out.
</div>

<div class="alert info">
  <strong>Info!</strong> This is a warning; watch out.
</div>

<div class="alert warning">
  <strong>Warning!</strong> This is a warning; watch out.
</div>

<div class="alert danger">
  <strong>Danger!</strong> This is a warning; watch out.
</div> 

Progress bars

Either for interactive loading or a simple data visualization. This is a starting point for specific needs.

60% Complete
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div> 

Helpers

The following helper classes have a SASS @mixin counter part that you can use in your SASS files.

Class (or mixin)Description
inline-blockCross-browser inline-block.
clearfix or cfCross-browser clearfix hack.
tab-focusProvides a consistent WebKit-style focus.
center-blockMakes a block that is center and should be given a width.
text-overflowCuts content off and adds ellipses. Requires inline-block or block for proper styling.
text-hideHides text, but still read by screen reader.
screen-reader-only or sr-onlyScreen reader only.
hidden or hideHidden from view and screen readers.
print-visibleVisible on print only.
print-hiddenNot visible on print.

The following are simply helpful classes (no SASS counter parts).

ClassDescription
xsmall, small, large, xlarge, xxlarge, or xxxlargeUps the font size, and given that almost all measurements are in em's then it will also increase the overall spacing.
float-rightFloat right.
float-leftFloat left.
showDoes a display block.
show-inlineDoes a display inline.
invisibleDoes a visibility hidden.

Overall, data or interactive pieces should guide people through the story or visuals, but sometimes you just need some simple navigation to allow readers to explore.

Horizontal navigation

<div class="navigation horizontal">
  <ul>
    <li><a href="#" class="active">Sec 1</a></li>
    <li><a href="#">Sec 2</a></li>
    <li><a href="#">Sec 3</a></li>
    <li><a href="#">Sec 4</a></li>
  </ul>
</div>

Sticky horizontal navigation

The following is an example of horizontal navigation that remains stuck at the top of the window when scrolling past it, but this only happens within a parent container. Also, this is an example of the simple "scoll-spying" mechanism that automatically activates the navigation link if that section is in view.

Section 01

Kitty ipsum dolor sit amet, consectetur purr pharetra iaculis tail flick tail flick, adipiscing tortor rutrum lick suscipit catnip. Iaculis I don't like that food tortor shed everywhere tristique, hairball I don't like that food fluffy fur dolor tempus puking nunc. Accumsan stretching libero neque chase the red dot, faucibus sniff stretching libero vulputate chase the red dot. Suspendisse stuck in a tree suspendisse shed everywhere tail flick suspendisse, sollicitudin etiam rip the couch shed everywhere eat the grass orci turpis. Vestibulum tempus accumsan claw rip the couch, egestas rutrum dolor nam scratched. Give me fish bat tortor tincidunt a meow suspendisse, claw justo kittens shed everywhere. Vehicula sagittis quis nunc vel sleep in the sink, eat the grass feed me feed me toss the mousie elit orci turpis.

Section 02

Vestibulum litter box climb the curtains attack, nam suscipit enim ut jump on the table amet libero sleep on your keyboard. Climb the curtains meow quis vehicula consectetur, accumsan knock over the lamp lick etiam jump tempus. Sleep on your keyboard shed everywhere neque lay down in your way run, feed me suspendisse libero quis nunc quis attack your ankles climb the curtains. Dolor attack aliquam attack, chase the red dot catnip cras nec sunbathe sleep in the sink chase the red dot et. Tempus nullam chase the red dot pharetra aliquam, eat catnip sleep on your face amet claw. Sollicitudin nullam hairball neque sleep in the sink, pellentesque orci turpis adipiscing vel hairball. Sniff tail flick et tempus, iaculis stuck in a tree knock over the lamp rip the couch stretching dolor attack.

Section 03

Cras nec pharetra purr enim ut justo run, hairball nam elit neque. Ac sleep in the sink I don't like that food iaculis, sniff egestas sleep on your face nam sagittis biting hairball. Lick biting run iaculis et, nunc tail flick etiam vulputate tincidunt a biting. Chase the red dot non toss the mousie orci turpis, claw amet leap neque adipiscing et. Judging you catnip scratched etiam tincidunt a, fluffy fur fluffy fur vel iaculis I don't like that food ac justo. Eat the grass biting vehicula enim nam nam, kittens attack your ankles sunbathe sagittis judging you libero. Mauris a rip the couch pharetra adipiscing shed everywhere pellentesque, chuf enim ut tincidunt a vehicula nullam give me fish.

Section 04

Cras nec pharetra purr enim ut justo run, hairball nam elit neque. Ac sleep in the sink I don't like that food iaculis, sniff egestas sleep on your face nam sagittis biting hairball. Lick biting run iaculis et, nunc tail flick etiam vulputate tincidunt a biting. Chase the red dot non toss the mousie orci turpis, claw amet leap neque adipiscing et. Judging you catnip scratched etiam tincidunt a, fluffy fur fluffy fur vel iaculis I don't like that food ac justo. Eat the grass biting vehicula enim nam nam, kittens attack your ankles sunbathe sagittis judging you libero. Mauris a rip the couch pharetra adipiscing shed everywhere pellentesque, chuf enim ut tincidunt a vehicula nullam give me fish.

Vestibulum litter box climb the curtains attack, nam suscipit enim ut jump on the table amet libero sleep on your keyboard. Climb the curtains meow quis vehicula consectetur, accumsan knock over the lamp lick etiam jump tempus. Sleep on your keyboard shed everywhere neque lay down in your way run, feed me suspendisse libero quis nunc quis attack your ankles climb the curtains. Dolor attack aliquam attack, chase the red dot catnip cras nec sunbathe sleep in the sink chase the red dot et. Tempus nullam chase the red dot pharetra aliquam, eat catnip sleep on your face amet claw. Sollicitudin nullam hairball neque sleep in the sink, pellentesque orci turpis adipiscing vel hairball. Sniff tail flick et tempus, iaculis stuck in a tree knock over the lamp rip the couch stretching dolor attack.

<div>
  <div class="navigation horizontal example-stick-top">
    <ul>
      <li><a href="#" class="active" data-spy-on="section01">Sec 1</a></li>
      <li><a href="#" data-spy-on="section02">Sec 2</a></li>
      <li><a href="#" data-spy-on="section03">Sec 3</a></li>
      <li><a href="#" data-spy-on="section04">Sec 4</a></li>
    </ul>
  </div>

  <h4 data-spy-me="section01">Section 01</h4>

  <p>Kitty ipsum dolor s ... </p>

  ...
</div>

<script>
// Scroll spy will look for elements that have matching attibutes
$('body').mpScrollSpy();

// mpStick will use sensible defaults
$('.example-stick-top').mpStick();
</script>

Sticky vertical navigation

Navigation is actually vertical by default. This examples shows the use options in mpStick().

Note that on screens smaller than "medium", this does not work well, but should just need some responsive styling to make work fine.

Section 01

Kitty ipsum dolor sit amet, consectetur purr pharetra iaculis tail flick tail flick, adipiscing tortor rutrum lick suscipit catnip. Iaculis I don't like that food tortor shed everywhere tristique, hairball I don't like that food fluffy fur dolor tempus puking nunc. Accumsan stretching libero neque chase the red dot, faucibus sniff stretching libero vulputate chase the red dot. Suspendisse stuck in a tree suspendisse shed everywhere tail flick suspendisse, sollicitudin etiam rip the couch shed everywhere eat the grass orci turpis. Vestibulum tempus accumsan claw rip the couch, egestas rutrum dolor nam scratched. Give me fish bat tortor tincidunt a meow suspendisse, claw justo kittens shed everywhere. Vehicula sagittis quis nunc vel sleep in the sink, eat the grass feed me feed me toss the mousie elit orci turpis.

Vestibulum litter box climb the curtains attack, nam suscipit enim ut jump on the table amet libero sleep on your keyboard. Climb the curtains meow quis vehicula consectetur, accumsan knock over the lamp lick etiam jump tempus. Sleep on your keyboard shed everywhere neque lay down in your way run, feed me suspendisse libero quis nunc quis attack your ankles climb the curtains. Dolor attack aliquam attack, chase the red dot catnip cras nec sunbathe sleep in the sink chase the red dot et. Tempus nullam chase the red dot pharetra aliquam, eat catnip sleep on your face amet claw. Sollicitudin nullam hairball neque sleep in the sink, pellentesque orci turpis adipiscing vel hairball. Sniff tail flick et tempus, iaculis stuck in a tree knock over the lamp rip the couch stretching dolor attack.

Cras nec pharetra purr enim ut justo run, hairball nam elit neque. Ac sleep in the sink I don't like that food iaculis, sniff egestas sleep on your face nam sagittis biting hairball. Lick biting run iaculis et, nunc tail flick etiam vulputate tincidunt a biting. Chase the red dot non toss the mousie orci turpis, claw amet leap neque adipiscing et. Judging you catnip scratched etiam tincidunt a, fluffy fur fluffy fur vel iaculis I don't like that food ac justo. Eat the grass biting vehicula enim nam nam, kittens attack your ankles sunbathe sagittis judging you libero. Mauris a rip the couch pharetra adipiscing shed everywhere pellentesque, chuf enim ut tincidunt a vehicula nullam give me fish.

Section 02

Nunc hairball hairball adipiscing ac, I don't like that food rhoncus quis nunc justo I don't like that food. Tail flick biting rip the couch jump on the table, sleep in the sink libero feed me eat the grass neque chase the red dot. Rhoncus rutrum climb the curtains faucibus sleep on your keyboard, scratched orci turpis hairball sollicitudin run run non. In viverra suspendisse rip the couch sagittis, claw tincidunt a vulputate chuf judging you climb the curtains. Tristique sleep in the sink quis hiss, catnip nibh tail flick sagittis leap nam scratched. Lick tincidunt a in viverra suscipit litter box, iaculis sagittis sleep on your keyboard egestas stretching. Chuf enim ut aliquam et nunc, vehicula jump on the table eat chuf scratched. Eat leap knock over the lamp iaculis stretching sleep on your keyboard, give me fish iaculis rhoncus suspendisse sollicitudin.

Tristique rutrum scratched vehicula, shed everywhere nibh tincidunt a climb the curtains orci turpis amet rutrum. Faucibus shed everywhere enim quis sleep on your face, shed everywhere sagittis lay down in your way et nibh. Accumsan biting faucibus sagittis, justo sunbathe tortor sleep in the sink bibendum stretching. Sagittis sniff meow vel amet cras nec, sollicitudin enim sleep in the sink rip the couch rhoncus suspendisse. Pellentesque bibendum iaculis feed me I don't like that food biting, scratched enim ut lay down in your way iaculis etiam. Sniff pellentesque toss the mousie scratched iaculis quis, hairball rip the couch faucibus toss the mousie nibh eat the grass. Jump on the table toss the mousie judging you feed me, climb the curtains iaculis non cras nec catnip ac chase the red dot. Fluffy fur nullam hairball sniff feed me, sagittis iaculis tail flick quis nunc elit justo sniff.

Zzz justo nullam jump bat adipiscing, rutrum tortor in viverra attack. Accumsan sunbathe judging you elit vehicula enim ut, eat the grass quis nunc fluffy fur sleep in the sink sagittis adipiscing. Sleep in the sink purr jump faucibus nam, et judging you shed everywhere consectetur tortor. Suscipit iaculis rutrum enim ut judging you chuf, climb the curtains I don't like that food judging you vel sleep in the sink enim ut. Non tortor sagittis rhoncus, litter box rhoncus tail flick elit nullam enim suspendisse jump on the table. Chuf attack your ankles sollicitudin sagittis, bat attack sagittis pharetra quis nunc adipiscing tristique attack. Lick fluffy fur nam nullam attack your ankles, vestibulum pharetra in viverra attack stuck in a tree. Chuf hairball dolor tristique, chuf rhoncus biting rip the couch tristique stuck in a tree.

Eat the grass climb the curtains rhoncus nam, amet neque tincidunt a vehicula hairball stuck in a tree. Climb the curtains lick enim ut non quis, libero jump litter box feed me jump. Chase the red dot lick sollicitudin etiam, sleep on your keyboard jump rip the couch elit vel vel. Enim etiam rutrum neque, faucibus rhoncus sniff zzz vel egestas iaculis. Attack your ankles jump on the table sleep on your keyboard knock over the lamp pellentesque, mauris a mauris a lick tortor lick jump on the table purr. Iaculis nullam stuck in a tree dolor etiam biting, aliquam amet et nam enim libero. Rhoncus leap egestas kittens ac, kittens nibh vestibulum sunbathe egestas attack.

Section 03

Lick ac attack your ankles jump on the table rutrum nunc, pharetra zzz quis vehicula fluffy fur sniff. Leap iaculis orci turpis nullam eat the grass rip the couch, nunc neque sagittis sleep in the sink. Tail flick consectetur iaculis tempus bibendum adipiscing, etiam faucibus lick biting I don't like that food. Tail flick lick claw zzz vehicula quis, sunbathe hiss tincidunt a eat faucibus zzz. Sleep in the sink sleep in the sink sollicitudin sleep in the sink non, sleep in the sink catnip judging you vel toss the mousie. Enim orci turpis sleep in the sink biting purr neque, pellentesque rip the couch biting orci turpis kittens tempus.

Puking purr non rip the couch nibh, consectetur sniff suscipit chase the red dot enim ut jump. Feed me eat vehicula suspendisse nam attack your ankles, nibh attack your ankles faucibus dolor. Etiam elit suspendisse adipiscing chase the red dot tail flick, catnip elit stuck in a tree run quis nunc. Sagittis sniff sunbathe jump on the table, chuf climb the curtains ac run sniff sleep on your face iaculis. Lick enim ut tortor iaculis, nibh eat the grass puking egestas suspendisse pharetra neque nullam. Feed me jump on the table litter box puking, vel adipiscing chuf sleep on your keyboard libero sleep in the sink. Elit chuf attack scratched give me fish, tristique tristique neque hiss sniff. Judging you enim nam attack your ankles, suspendisse vestibulum sleep in the sink ac adipiscing jump biting.

Section 04

Iaculis rhoncus puking nunc fluffy fur meow, stretching lick bat puking vestibulum vestibulum. Nunc suspendisse rip the couch bat judging you, feed me scratched climb the curtains eat sleep on your face. Libero vel vulputate aliquam, sniff bat hiss enim non suspendisse in viverra. Sagittis chase the red dot fluffy fur nullam egestas justo, suspendisse I don't like that food lick feed me give me fish etiam. Enim vestibulum jump leap orci turpis feed me, enim jump enim ut tristique puking. Attack your ankles enim ut chuf jump on the table lick tempus, eat tortor aliquam toss the mousie. Quis nunc iaculis enim ut vel, tincidunt a egestas feed me cras nec stretching faucibus.

<div class="row">
  <div class="column-medium-33">
    <div class="example-stick-container">
      <div class="navigation">
        <ul>
          <li><a href="#" class="active" data-spy-on="section01b">Sec 1</a></li>
          <li><a href="#" data-spy-on="section02b">Sec 2</a></li>
          <li><a href="#" data-spy-on="section03b">Sec 3</a></li>
          <li><a href="#" data-spy-on="section04b">Sec 4</a></li>
        </ul>
      </div>
    </div>
  </div>

  <div class="column-medium-66">

    <h4 data-spy-me="section01b">Section 01</h4>

    <p>Kitt .... </p>

    ...

  </div>
</div>

<script>
// Scroll spy will look for elements that have matching attibutes
$('body').mpScrollSpy();

// mpStick with custom options
$('.example-stick-container').mpStick({
  activeClass: 'stuck container',
  wrapperClass: '',
  container: $('.example-stick-container').parent().parent(),
  topPadding: 20,
  throttle: 100
});
</script>

Stick plugin

Use the $().mpStick() jQuery plugin to make a navigation or other item sticky within a container. Best use is on the navigation container.

OptionDescriptionDefault
containerThe container element or selector to stick within.The parent of the item being stuck.
activeClassA class or set of classes to add when the stickiness is applied.stuck top
wrapperClassA class or set of classes to add to the wrapper element that is wrapped around the original elements when stuck. Leave blank to not add a wrapper element.minnpost-full-container
topPaddingThe padding in pixels from the top of the container to where the stickiness should start.0
throttleThe amount of time in milliseconds to wiat when listening to scoll events.90

Scoll-spy plugin

Use the $().mpScrollSpy() jQuery plugin to connect elements, like navigation, to other sections of the page. The plugin also creates go-to events, like click, for the connected elements for smooth scrolling.

Use the attributes data-spy-on and data-spy-me to connect elements; the values should be unique and matching. This plugin should be used on an element that contains both connected sets of elements, for example $('body').mpScrollSpy().

OptionDescriptionDefault
activeClassThe class to add to the element that is spying when the connected element is in view.active
offsetThe amount in pixels to offset when an item is in view and where to scroll to.80
gotoEventThe DOM event to use to trigger the go-to event. Leave blank to not listen to anything.click
gotoPreventDefaultWhether or not to prevent the default event action for the go-to event.true
gotoSpeedThe amount in milliseconds that the scroll animation will take.600
throttleThe amount of time in milliseconds to wiat when listening to scoll events.200

Highcharts

Default styling is provided for some basic types of Highchart charts. All charts use the class chart to standardize the size. Use the MP.highcharts.makeChart(selector, options) function to easily make charts and get back the Highcharts object to manipulate later if needed.

Line chart

Example line chart
Your awesome, concise caption goes here. If you can adequately describe your x-axis units and labels, leave them and the legend off.

<div class="component-label">Example line chart</div>
<div class="caption">Your awesome, concise caption goes here.  If you can adequately describe your x-axis units and labels, leave them and the legend off.</div>
<div class="chart chart-line-example"></div>

// Use the default options, turn off the legend, add some data
MP.highcharts.makeChart('.chart-line-example', $.extend(true, {}, MP.highcharts.lineOptions, {
  legend: { enabled: false },
  yAxis: {
    title: { enabled: false },
    labels: { format: '${value:,.0f}' }
  },
  series: [{
    name: 'Example data',
    data: [1, 2, 3]
  }]
})); 

Column chart

Example column chart
Your awesome, concise caption goes here.
// Use the default options, turn off legend, and add some data
MP.highcharts.makeChart('.chart-line-example', $.extend(true, {}, MP.highcharts.columnOptions, {
  legend: { enabled: false },
  series: [{
    name: 'Example data',
    data: [1, 2, 3]
  }]
})); 

Bar chart

// This examples uses categorical data
MP.highcharts.makeChart('.chart-bar-example', $.extend(true, {}, MP.highcharts.barOptions, {
  xAxis: {
    categories: ['A', 'B', 'C', 'D']
  },
  series: [{
    name: 'Example',
    data: [24826, 12144, 27342, 24401]
  },
  {
    name: 'Example 2',
    data: [640, 765, 999, 123]
  }]
}));

Scatterplot


MP.highcharts.makeChart('.chart-scatter-example', $.extend(true, {}, MP.highcharts.scatterOptions, {
  series: [{
    name: 'Example',
    data: [[11, 23], [12, 22], [13, 28], [14, 30], [14.01, 30], [15, 30], [16, 33],
      [11.2, 22], [12.7, 21], [13.2, 27], [14.1, 34], [15.8, 33], [16.3, 30]]
  },
  {
    name: 'Example 2',
    data: [[11, 13], [12, 10], [13, 9], [14, 6], [15, 8], [16, 7]]
  }]
}));

Maps

Styling for maps provided through Leaflet or Mapbox.js. Note that Mapbox.js is a superset of Leaflet. We use the Mapbox.js styling because it is a nice style and provides consistency across maps that may or may not use the Mapbox.js styles. Include the CSS before MinnPost styles.

<link rel="stylesheet" href="//api.tiles.mapbox.com/mapbox.js/v1.6.0/mapbox.css"> 

Javascript

The following are available in the MP.maps object.

Property or functionDescription
minneapolisPointLeaflet point object for center of Minneapolis.
stPaulPointLeaflet point object for center of St. Paul.
minnesotaPointLeaflet point object for center of Minnesota.
mapboxSatelliteStreetsMapbox ID for base layer of satellite with streets.
mapboxStreetsDarkLabelsMapbox ID for base layer of dark themed streets with labels.
mapboxStreetsLightLabelsMapbox ID for base layer of light themed streets with labels.
mapboxTerrainLightMapbox ID for base layer of dark themed terrain and streets without labels.
mapboxTerrainDarkMapbox ID for base layer of light themed terrain and streets without labels.
mapOptionsObject of common options for a Leaflet map.
mapStyleObject of default vector (i.e. GeoJSON layer) style.
mapboxAttributionHTML for Mapbox attribution.
openstreetmapAttributionHTML for OSM attribution.
makeLeafletMapA function taking (domID, mapboxBaseName, centerPoint) that creates a Leaflet map. Returns the map object.
makeMakiIconA function taking (iconName, sizeName, color) that generates a Leaflet marker icon that uses a Maki icon.
TooltipControlA basic Leaflet control class for an updatable tooltip. Use methods update, show, hide to control content and show or hide the tooltip.

Attribution

With most map services like OpenStreetMap and Mapbox, their terms of use require attribution of some sort. The requirement is usually to have a link on the page, not necessarily on the map. By default, the attribution control is added to a Leaflet map. This should remove for style consistency. Using MP.maps.makeLeafletMap() will automatically remove the attribution.

// Remove attribute
map.removeControl(map.attributionControl);
// Handy attribution to add to a footnote
MP.maps.mapboxAttribution;
MP.maps.openstreetmapAttribution; 

Map attribution.

 

Basic leaflet map

You can switch the different base maps that we have created through Mapbox. If you are not making a MinnPost project, please use your own base layers as their use costs us money.

Map attribution.

Markers and features

The Maki icon set provided by Mapbox is a basic icon set focused on points of interests. Mapbox provides a static API for the icons that can be used to make markers pretty easily. There is a simple icon factory method in MP.maps.

var icon = MP.maps.makeMakiIcon('cinema', 'm', '232323'); 

For non-marker feature, like polygons, there is a default style provided under MP.maps.mapStyle. Also, for simple tooltip static hovers, there is a MP.maps.TooltipControl Leaflet control to easily manage tooltips.

Map attribution.


// Marker map
var markerMap = MP.maps.makeLeafletMap('example-markers-features-map');
var tooltipControl = new MP.maps.TooltipControl();
markerMap.setZoom(9);
markerMap.addControl(tooltipControl);

// Markers
var iconCinema = MP.maps.makeMakiIcon('cinema', 'm');
var iconBlank = MP.maps.makeMakiIcon('', 's', '222222');
L.marker(MP.maps.minneapolisPoint, { icon: iconCinema })
  .addTo(markerMap).bindPopup('Minneapolis', {
    closeButton: false
  });
L.marker(MP.maps.stPaulPoint, { icon: iconBlank })
  .addTo(markerMap).bindPopup('St. Paul', {
    closeButton: false
  });

// GeoJSON example
$.getJSON('http://boundaries.minnpost.com/1.0/boundary/27-county-2010/?callback=?', function(data) {
  if (data.simple_shape) {
    L.geoJson(data.simple_shape, {
      style: MP.maps.mapStyle,
      onEachFeature: function(feature, layer) {
        layer.on('mouseover', function(e) {
          tooltipControl.update('Hennepin County');
        });
        layer.on('mouseout', function(e) {
          tooltipControl.hide();
        });
      }
    }).addTo(markerMap);
  }
});

Datatables

Datatables is a plugin that makes tables searchable, filterable, paged, and more. It is useful for providing lots of tabular data. The MinnPost styling of DataTables requires FontAwesome icons; please see the appropriate section on how to include it.

Table data attribution.


// Define specific about how the columns work.
var tableColumns = $.extend(true, {}, {
  0: { sTitle: 'Thing' },
  1: { sTitle: 'Date' },
  // Makes it so that the last name column sorts on
  // both last and first name
  4: {
    sTitle: 'Last',
    aDataSort: [4, 5]
  },
  5: {
    sTitle: 'First',
    bSortable: false
  },
  3: {
    sTitle: 'Number',
    bSearchable: false,
    mRender: function(data, type, full) {
      return MP.formatters.integer(parseFloat(data));
    }
  },
  2: {
    sTitle: 'Money',
    sClass: 'money',
    bSearchable: false,
    mRender: function(data, type, full) {
      return MP.formatters.currency(parseFloat(data));
    }
  }
});
var options = $.extend(true, {}, {
  aaData: yourDataHere,
  aoColumns: _.values(tableColumns)
}, options);

MP.datatables.makeTable($('.datatable-example'), options);

StoryMap

See the StoryMap preview on this page.

MinnPost specific

There are just a few classes that are specific to MinnPost's workflow.

ClassDescription
minnpost-page-containerMimics the page container on the MinnPost site.
minnpost-article-containerProvides a container that is the same size as a normal article page (with a sidebar).
minnpost-full-containerProvides a container that is the same size as a full page article (without a sidebar).