jackmakesthings

 <h1>Columns test</h1>
<!--[if (lte IE 9) & (!IEMobile)]>
<div class="old-ie">
<![endif]-->

<div class="l-columns">
    <div class="l-columns__item">1</div>
    <div class="l-columns__item">2</div>
    <div class="l-columns__item">3</div>
    <div class="l-columns__item">4</div>

jackmakesthings

<div class="section">
            <div class="row">
              <div class="col-xs-12">
                <header>
                  <h1 class="section__title">Manage Contacts</h1>
                  <p>Please select from saved Contacts to edit or Add a new Contact. </p>
                </header>
                <table class="table table-five table-end table-data ">
                  <thead>
                    <tr>

jackmakesthings

<div class="section">
            <div class="row">
              <div class="col-xs-12">
                <header>
                  <h1 class="section__title">Manage Contacts</h1>
                  <p>Please select from saved Contacts to edit or Add a new Contact. </p>
                </header>
                <table class="table table-five table-end table-data ">
                  <thead>
                    <tr>

jackmakesthings

<div class="site-wrap light">
  <nav class="main-nav ">
	<div class="nav-lock"></div>
	<div class="scroll-wrap">
		<a href="/" class="logo icon-logo-icon" data-analytics-button="global-header-logo"><span class="visually-hidden"></span></a>
		<ul class="sub-nav">
				<li class="first   ">
					<a href="/ideas/" data-analytics-link="global-header-main-nav-ideas" class="  ">Ideas</a>
				</li>
				<li class=" icon-down-nav  ">

jackmakesthings

<div class="site-wrap light">
  <nav class="main-nav ">
	<div class="nav-lock"></div>
	<div class="scroll-wrap">
		<a href="/" class="logo icon-logo-icon" data-analytics-button="global-header-logo"><span class="visually-hidden"></span></a>
		<ul class="sub-nav">
				<li class="first   ">
					<a href="/ideas/" data-analytics-link="global-header-main-nav-ideas" class="  ">Ideas</a>
				</li>
				<li class=" icon-down-nav  ">

jackmakesthings

<!-- /* Ways to change layout responsively for very similar element types */ -->

<div class="Routing row">
	<div class="item">
	<a class="item-title-link" href="">
		<h3 class="item-title">Title</h3>
	</a>
	<p class="item-body">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
	</p>

jackmakesthings

<!-- /* Ways to change layout responsively for very similar element types */ -->

<div class="Routing row">
	<div class="item">
	<a class="item-title-link" href="">
		<h3 class="item-title">Title</h3>
	</a>
	<p class="item-body">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
	</p>

jackmakesthings

<div>
<h2>Option 1</h2>
<header class="rulify">
  <span>Default Styles</span>
</header>
</div>

<div>
  <!--<h2>Option 2</h2>-->
  <!--<header class="special-rulify">-->

jackmakesthings

<div style="position: fixed; right: 0; font-size: 20px; font-weight: bold; font-family: sans-serif;">
  <p style="color: #0cd">tall</p>
  <p style="color:orange">long</p>
  <p style="color: #bada55">image</p>
</div>

<div class="tiles">

  <div class="tile square">
    <a class="tile-block">#</a>

jackmakesthings

<div style="position: fixed; right: 0; font-size: 20px; font-weight: bold; font-family: sans-serif;">
  <p style="color: #0cd">tall</p>
  <p style="color:orange">long</p>
  <p style="color: #bada55">image</p>
</div>

<div class="tiles">

  <div class="tile square">
    <a class="tile-block">#</a>