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.
| Component | Dependencies |
|---|---|
| Config | (default) |
| Datatables | Datatables |
| Formatters | (default) |
| Highcharts | Highcharts |
| Maps | Leaflet |
| 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 number of groups: This is dependent on the data and the story. More groups mean more information for your reader to parse (both colors and data groups). It is suggested to break things down to no more than 7 colors.
The set of colors: Choosing colors to represent the different groups is very difficult. Make sure to read the Colorbrewer's scheme documentation and determine if you are representing sequential, diverging, or qualitative data. From there it best to pick colors that are the most visually distinct; this is more easily achieved by using the the HCL or Lab. Try using tools like I want hue or this HCL picker.
Colorblind consideration: When picking colors for data visualization, it is very important to ensure that the groups can be distinguished from each other for people with different color blindness. Use tools like Color Oracle to check this.
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.
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.
<!--[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.
<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> - ordered list example
- another thing
- nested items
- nested item 1
- nested item 2
- 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.
| First column | second | third | fourth | fifth |
|---|---|---|---|---|
| data | 2 | longer paragraph text is over here | 42,000,424,242.00 | MORE! |
| somre more data here | 42 | longer paragraph text is over here | 42,000,424,242.00 | MORE! |
<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.
<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.
<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.
Thumbnails
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.
<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
| Name | Class | Icon |
|---|---|---|
| Location | fa-location-arrow | |
| External link | fa-external-link | |
| Down expand | fa-angle-down | |
| Up minimize | fa-angle-up | |
| Forward or next | fa-long-arrow-right | |
| Back or previous | fa-long-arrow-left | |
| Check | fa-check | |
| Alert | fa-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.
<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.
<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-block | Cross-browser inline-block. |
clearfix or cf | Cross-browser clearfix hack. |
tab-focus | Provides a consistent WebKit-style focus. |
center-block | Makes a block that is center and should be given a width. |
text-overflow | Cuts content off and adds ellipses. Requires inline-block or block for proper styling. |
text-hide | Hides text, but still read by screen reader. |
screen-reader-only or sr-only | Screen reader only. |
hidden or hide | Hidden from view and screen readers. |
print-visible | Visible on print only. |
print-hidden | Not visible on print. |
The following are simply helpful classes (no SASS counter parts).
| Class | Description |
|---|---|
xsmall, small, large, xlarge, xxlarge, or xxxlarge | Ups the font size, and given that almost all measurements are in em's then it will also increase the overall spacing. |
float-right | Float right. |
float-left | Float left. |
show | Does a display block. |
show-inline | Does a display inline. |
invisible | Does a visibility hidden. |
Navigation
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.
| Option | Description | Default |
|---|---|---|
container | The container element or selector to stick within. | The parent of the item being stuck. |
activeClass | A class or set of classes to add when the stickiness is applied. | stuck top |
wrapperClass | A 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 |
topPadding | The padding in pixels from the top of the container to where the stickiness should start. | 0 |
throttle | The 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().
| Option | Description | Default |
|---|---|---|
activeClass | The class to add to the element that is spying when the connected element is in view. | active |
offset | The amount in pixels to offset when an item is in view and where to scroll to. | 80 |
gotoEvent | The DOM event to use to trigger the go-to event. Leave blank to not listen to anything. | click |
gotoPreventDefault | Whether or not to prevent the default event action for the go-to event. | true |
gotoSpeed | The amount in milliseconds that the scroll animation will take. | 600 |
throttle | The 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
<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
// 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 function | Description |
|---|---|
minneapolisPoint | Leaflet point object for center of Minneapolis. |
stPaulPoint | Leaflet point object for center of St. Paul. |
minnesotaPoint | Leaflet point object for center of Minnesota. |
mapboxSatelliteStreets | Mapbox ID for base layer of satellite with streets. |
mapboxStreetsDarkLabels | Mapbox ID for base layer of dark themed streets with labels. |
mapboxStreetsLightLabels | Mapbox ID for base layer of light themed streets with labels. |
mapboxTerrainLight | Mapbox ID for base layer of dark themed terrain and streets without labels. |
mapboxTerrainDark | Mapbox ID for base layer of light themed terrain and streets without labels. |
mapOptions | Object of common options for a Leaflet map. |
mapStyle | Object of default vector (i.e. GeoJSON layer) style. |
mapboxAttribution | HTML for Mapbox attribution. |
openstreetmapAttribution | HTML for OSM attribution. |
makeLeafletMap | A function taking (domID, mapboxBaseName, centerPoint) that creates a Leaflet map. Returns the map object. |
makeMakiIcon | A function taking (iconName, sizeName, color) that generates a Leaflet marker icon that uses a Maki icon. |
TooltipControl | A 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('https://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.
| Class | Description |
|---|---|
minnpost-page-container | Mimics the page container on the MinnPost site. |
minnpost-article-container | Provides a container that is the same size as a normal article page (with a sidebar). |
minnpost-full-container | Provides a container that is the same size as a full page article (without a sidebar). |