Skip to content

Instantly share code, notes, and snippets.

@ramnathv

ramnathv/index.Rmd

Last active April 24, 2019 00:46
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ramnathv/8171521 to your computer and use it in GitHub Desktop.
Save ramnathv/8171521 to your computer and use it in GitHub Desktop.
Download ZIP
Two Column Layout
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Two Column Layout</title>
<meta charset="utf-8">
<meta name="description" content="Two Column Layout">
<meta name="author" content="Ramnath Vaidyanathan">
<meta name="generator" content="slidify" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<link rel="stylesheet" href="http://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/io2012/css/default.css" media="all" >
<link rel="stylesheet" href="http://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/io2012/css/phone.css"
media="only screen and (max-device-width: 480px)" >
<link rel="stylesheet" href="http://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/io2012/css/slidify.css" >
<link rel="stylesheet" href="http://slidifylibraries2.googlecode.com/git/inst/libraries/highlighters/highlight.js/css/solarized_light.css" />
<base target="_blank"> <!-- This amazingness opens all links in a new tab. --> <link rel=stylesheet href="./assets/css/ribbons.css"></link>
<!-- Grab CDN jQuery, fall back to local if offline -->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js"></script>
<script>window.jQuery || document.write('<script src="http://slidifylibraries2.googlecode.com/git/inst/libraries/widgets/quiz/js/jquery.js"><\/script>')</script>
<script data-main="http://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/io2012/js/slides"
src="http://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/io2012/js/require-1.0.8.min.js">
</script>
</head>
<body style="opacity: 0">
<slides class="layout-widescreen">
<!-- LOGO SLIDE -->
<slide class="title-slide segue nobackground">
<hgroup class="auto-fadein">
<h1>Two Column Layout</h1>
<h2></h2>
<p>Ramnath Vaidyanathan<br/></p>
</hgroup>
<article></article>
</slide>
<!-- SLIDES -->
<slide class="RAW" id="slide-1" style="background:;">
<hgroup>
<h2>Two Column Layout</h2>
</hgroup>
<article data-timings="">
<p>This is the default two column layout that ships with <code>io2012</code>.</p>
<pre><code>---
layout: slide
---
{{{ slide.content }}}
&lt;div style=&#39;float:left;width:48%;&#39; class=&#39;centered&#39;&gt;
{{{ slide.left.html }}}
&lt;/div&gt;
&lt;div style=&#39;float:right;width:48%;&#39;&gt;
{{{ slide.right.html }}}
&lt;/div&gt;
</code></pre>
</article>
<!-- Presenter Notes -->
</slide>
<slide class="" id="slide-2" style="background:;">
<hgroup>
<h2>Two Columns</h2>
</hgroup>
<article data-timings="">
<p>This text should span the entire slide.</p>
<div style='float:left;width:48%;' class='centered'>
<h2>Left</h2>
<p>This text should float to the left.</p>
</div>
<div style='float:right;width:48%;'>
<h2>Right</h2>
<p>This text should float to the right.</p>
</div>
</article>
<!-- Presenter Notes -->
</slide>
<slide class="backdrop"></slide>
</slides>
<div class="pagination pagination-small" id='io2012-ptoc' style="display:none;">
<ul>
<li>
<a href="#" target="_self" rel='tooltip'
data-slide=1 title='Two Column Layout'>
1
</a>
</li>
<li>
<a href="#" target="_self" rel='tooltip'
data-slide=2 title='Two Columns'>
2
</a>
</li>
</ul>
</div> <!--[if IE]>
<script
src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js">
</script>
<script>CFInstall.check({mode: 'overlay'});</script>
<![endif]-->
</body>
<!-- Load Javascripts for Widgets -->
<!-- LOAD HIGHLIGHTER JS FILES -->
<script src="http://slidifylibraries2.googlecode.com/git/inst/libraries/highlighters/highlight.js/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!-- DONE LOADING HIGHLIGHTER JS FILES -->
</html>
Raw
index.md

title : Two Column Layout author : Ramnath Vaidyanathan framework : io2012 # {io2012, html5slides, shower, dzslides, ...} highlighter : highlight.js # {highlight.js, prettify, highlight} hitheme : solarized_light # --- .RAW

Two Column Layout

This is the default two column layout that ships with io2012.

---
layout: slide
---
{{{ slide.content }}}
<div style='float:left;width:48%;' class='centered'>
  {{{ slide.left.html }}}
</div>
<div style='float:right;width:48%;'>
  {{{ slide.right.html }}}
</div>

--- &twocol

Two Columns

This text should span the entire slide.

*** =left

Left

This text should float to the left.

*** =right

Right

This text should float to the right.

Raw
index.Rmd
---
title : Two Column Layout
author : Ramnath Vaidyanathan
framework : io2012 # {io2012, html5slides, shower, dzslides, ...}
highlighter : highlight.js # {highlight.js, prettify, highlight}
hitheme : solarized_light #
--- .RAW
## Two Column Layout
This is the default two column layout that ships with `io2012`.
---
layout: slide
---
{{{ slide.content }}}
<div style='float:left;width:48%;' class='centered'>
{{{ slide.left.html }}}
</div>
<div style='float:right;width:48%;'>
{{{ slide.right.html }}}
</div>
--- &twocol
## Two Columns
This text should span the entire slide.
*** =left
## Left
This text should float to the left.
*** =right
## Right
This text should float to the right.
Raw
twocol_with_width.html
---
layout: slide
---
{{{ slide.content }}}
<div style='float:left;width:{{{ slide.left.width }}};' class='centered'>
{{{ slide.left.html }}}
</div>
<div style='float:right;width:{{{ slide.right.width }}};'>
{{{ slide.right.html }}}
</div>
Raw
twocol_with_width.Rmd
--- &twocol_with_width
## Two Columns
This line should span both columns
*** =left width:66%
## Left Column
This line should span 2/3rds of the slide.
*** =right width:33%
This line should span 1/3rds of the slide.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment