Post Inline Elements

readme.md

All of the following assumes you are creating/editing a post in WordPress and have switched over to the text view in the editor.

In general, all inline elements will be wrapped in a <section> tag with the .grid and .inline-element classes:

<section class="grid inline-element">

Additionally, to get some styles specific to a given type of inline element, you'll typically add one additional class, for example:

<section class="grid inline-element image-grid">

The .grid class makes available a number of additional classes from the reflex grid framework (http://reflexgrid.com/docs/) and will typically require additional <div> tags with the correct classes to take full advantage of the grid system.

For example, if you want a two up display of photos at larger screen sizes that display in a single column on smaller screens, you can do the following:

<section class="grid inline-element image-grid">
  <div class="col-md-6 col-sm-12">
    [your photo]
  </div>
  
  <div class="col-md-6 col-sm-12">
    [your photo]
  </div>
</section>

As a reference, here are the current breakpoints defined for our site:

$reflex-xs: 576px
$reflex-sm: 768px
$reflex-md: 992px
$reflex-lg: 1200px
$reflex-xlg: 1600px

Typically using a .col-md-X class is equivalent to all "desktop" sizes and a .col-sm-X class would apply to all "mobile" sizes.

chart-styles.md

Styles exist to add headlines, credits and captions to charts.

To use these you'll need to wrap the entire chart in a <section> tag with the .inline-element and .chart classes:

<section class="inline-element chart">

Then you can use:

• <h3> tags for chart headlines
• <h4> tags for chart deks/captions
• <h5> tags for chart credits

For example:

<section class="inline-element chart">
  <h3>Chart headline!</h3>
  <h4>Chart dek. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non tristique leo. Sed maximus urna non odio porta, nec congue ex tristique.</h4>
  [inline_image id="attachment_572285" align="none" width="990"]<img src="https://practice.motherjones.com/wp-content/uploads/2018/01/prison.jpg" alt="" width="990" height="556" class="size-full wp-image-572285" />[/inline_image]
  <h5>Chart credit. Lorem ipsum dolor sit amet, consectetur adipiscing elit</h5>
</section>

This will work with images uploaded to WordPress or with embedded charts from a third-party service like chartbuilder:

<section class="inline-element chart">
  <h3>Chart headline!</h3>
  <h4>Chart dek. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non tristique leo. Sed maximus urna non odio porta, nec congue ex tristique.</h4>
  <iframe id="datawrapper-chart-EoP7b" style="width: 0; min-width: 100% !important;" src="//datawrapper.dwcdn.net/EoP7b/1/" width="300" height="440" frameborder="0" scrolling="no"></iframe><script type="text/javascript">if("undefined"==typeof window.datawrapper)window.datawrapper={};window.datawrapper["EoP7b"]={},window.datawrapper["EoP7b"].embedDeltas={"100":514.0078120000001,"200":464.007812,"300":464.007812,"400":439.007812,"500":439.007812,"700":439.007812,"800":439.007812,"900":439.007812,"1000":439.007812},window.datawrapper["EoP7b"].iframe=document.getElementById("datawrapper-chart-EoP7b"),window.datawrapper["EoP7b"].iframe.style.height=window.datawrapper["EoP7b"].embedDeltas[Math.min(1e3,Math.max(100*Math.floor(window.datawrapper["EoP7b"].iframe.offsetWidth/100),100))]+"px",window.addEventListener("message",function(a){if("undefined"!=typeof a.data["datawrapper-height"])for(var b in a.data["datawrapper-height"])if("EoP7b"==b)window.datawrapper["EoP7b"].iframe.style.height=a.data["datawrapper-height"][b]+"px"});</script>
  <h5>Chart credit. Lorem ipsum dolor sit amet, consectetur adipiscing elit</h5>
</section>

image-grid.md

Four photos, two-up on desktop (.col-md-6), stacked on mobile (.col-sm-12).

<section class="grid inline-element image-grid">
  <div class="col-md-6 col-sm-12">
    [inline_image id="attachment_572285" align="none" width="990"]<img src="https://practice.motherjones.com/wp-content/uploads/2018/01/prison.jpg" alt="" width="990" height="556" class="size-full wp-image-572285" />[figcap][credit]josefkubes/iStock[/credit][/figcap][/inline_image]
  </div>

  <div class="col-md-6 col-sm-12">
    [inline_image id="attachment_572285" align="none" width="990"]<img src="https://practice.motherjones.com/wp-content/uploads/2018/01/prison.jpg" alt="" width="990" height="556" class="size-full wp-image-572285" />[figcap][credit]josefkubes/iStock[/credit][/figcap][/inline_image]
  </div>

  <div class="col-md-6 col-sm-12">
    [inline_image id="attachment_572285" align="none" width="990"]<img src="https://practice.motherjones.com/wp-content/uploads/2018/01/prison.jpg" alt="" width="990" height="556" class="size-full wp-image-572285" />[figcap][credit]josefkubes/iStock[/credit][/figcap][/inline_image]
  </div>

  <div class="col-md-6 col-sm-12">
    [inline_image id="attachment_572285" align="none" width="990"]<img src="https://practice.motherjones.com/wp-content/uploads/2018/01/prison.jpg" alt="" width="990" height="556" class="size-full wp-image-572285" />[figcap][credit]josefkubes/iStock[/credit][/figcap][/inline_image]
  </div>
</section>

Six photos, three-up on desktop (.col-md-4), stacked on mobile (.col-sm-12).

<section class="grid inline-element image-grid">
  <div class="col-md-4 col-sm-12">
    [inline_image id="attachment_572285" align="none" width="990"]<img src="https://practice.motherjones.com/wp-content/uploads/2018/01/prison.jpg" alt="" width="990" height="556" class="size-full wp-image-572285" />[figcap][credit]credit only[/credit][/figcap][/inline_image]
  </div>

  <div class="col-md-4 col-sm-12">
    [inline_image id="attachment_572285" align="none" width="990"]<img src="https://practice.motherjones.com/wp-content/uploads/2018/01/prison.jpg" alt="" width="990" height="556" class="size-full wp-image-572285" />[figcap][credit]josefkubes/iStock[/credit][/figcap][/inline_image]
  </div>

  <div class="col-md-4 col-sm-12">
    [inline_image id="attachment_572285" align="none" width="990"]<img src="https://practice.motherjones.com/wp-content/uploads/2018/01/prison.jpg" alt="" width="990" height="556" class="size-full wp-image-572285" />[figcap][credit]josefkubes/iStock[/credit][/figcap][/inline_image]
  </div>
  
  <div class="col-md-4 col-sm-12">
    [inline_image id="attachment_572285" align="none" width="990"]<img src="https://practice.motherjones.com/wp-content/uploads/2018/01/prison.jpg" alt="" width="990" height="556" class="size-full wp-image-572285" />[figcap][credit]credit only[/credit][/figcap][/inline_image]
  </div>

  <div class="col-md-4 col-sm-12">
    [inline_image id="attachment_572285" align="none" width="990"]<img src="https://practice.motherjones.com/wp-content/uploads/2018/01/prison.jpg" alt="" width="990" height="556" class="size-full wp-image-572285" />[figcap][credit]josefkubes/iStock[/credit][/figcap][/inline_image]
  </div>

  <div class="col-md-4 col-sm-12">
    [inline_image id="attachment_572285" align="none" width="990"]<img src="https://practice.motherjones.com/wp-content/uploads/2018/01/prison.jpg" alt="" width="990" height="556" class="size-full wp-image-572285" />[figcap][credit]josefkubes/iStock[/credit][/figcap][/inline_image]
  </div>
</section>

Combining two-up (.col-md-6) and three-up (.col-md-4) to make a grid of five photos.

First row is two photos two-up, second is three photos three-up, all stack on mobile.

<section class="grid inline-element image-grid">
  <div class="col-md-6 col-sm-12">
    [inline_image id="attachment_572285" align="none" width="990"]<img src="https://practice.motherjones.com/wp-content/uploads/2018/01/prison.jpg" alt="" width="990" height="556" class="size-full wp-image-572285" />[figcap][credit]josefkubes/iStock[/credit][/figcap][/inline_image]
  </div>

  <div class="col-md-6 col-sm-12">
    [inline_image id="attachment_572285" align="none" width="990"]<img src="https://practice.motherjones.com/wp-content/uploads/2018/01/prison.jpg" alt="" width="990" height="556" class="size-full wp-image-572285" />[figcap]
    [caption]caption only[/caption]
    [/figcap][/inline_image]
  </div>
</section>

<section class="grid inline-element image-grid">
  <div class="col-md-4 col-sm-12">
    [inline_image id="attachment_572285" align="none" width="990"]<img src="https://practice.motherjones.com/wp-content/uploads/2018/01/prison.jpg" alt="" width="990" height="556" class="size-full wp-image-572285" />[figcap][credit]credit only[/credit][/figcap][/inline_image]
  </div>

  <div class="col-md-4 col-sm-12">
    [inline_image id="attachment_572285" align="none" width="990"]<img src="https://practice.motherjones.com/wp-content/uploads/2018/01/prison.jpg" alt="" width="990" height="556" class="size-full wp-image-572285" />[figcap][credit]josefkubes/iStock[/credit][/figcap][/inline_image]
  </div>

  <div class="col-md-4 col-sm-12">
    [inline_image id="attachment_572285" align="none" width="990"]<img src="https://practice.motherjones.com/wp-content/uploads/2018/01/prison.jpg" alt="" width="990" height="556" class="size-full wp-image-572285" />[figcap][credit]josefkubes/iStock[/credit][/figcap][/inline_image]
  </div>
</section>

timelines.md

NOTE: timelines are a work in progress.

The general idea here is that adding the .grid class will allow you to use the various grid classes available.

Here's a timeline-esque format where a 4/8 grid stacks to a single column on smaller screens:

<section class="grid inline-element timeline">
  <div class="col-md-4 col-sm-12">
    <h3>September 1, 2018</h3>
  </div>
  <div class="col-md-8 col-sm-12">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non tristique leo. Sed maximus urna non odio porta, nec congue ex tristique. Nulla facilisi. Fusce ligula augue, iaculis in ultrices ut, mollis ac ante. Cras id fermentum nibh. Cras sed facilisis orci, pretium semper est. Morbi scelerisque euismod neque. Sed aliquam laoreet mi, commodo sodales lectus pellentesque et. Proin sagittis magna non lectus rutrum, eu sodales tellus maximus. Fusce pretium mauris vitae est faucibus, et pulvinar lectus dignissim. Aliquam quis libero eu orci tincidunt hendrerit. Vestibulum vulputate quam faucibus erat tempus tempor.
  </div>
</section>

In theory, this should work with whatever you'd want to put in the .col-md-8 column, be it text, a photo, video, etc. but this will likely require a bit of refinement as we go along.

Note also that this will eventually take the place of the legacy timeline format but those still work the old way and do not use these new styles.