<!doctype html>
<html dir="ltr" lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Jen Simmons | Labs</title>
    <meta name="description" content="Experiments demonstrating CSS Grid, and what's now possible in graphic design on the web.">
    <link rel="stylesheet" href="assets/css/styles-2017.css">
</head>

  <body>
    <header>
      <h1>The Experimental Layout Lab of Jen Simmons</h1> 
      <nav><ul>
        <li><a href="2017/aeabos">AEA Boston 2017</a></li>
        <li><a href="2016">2016 demos</a></li>
      </ul></nav>
      <div class="intro">
        <p>See how these demos work by inspecting them with the <a href="https://developer.mozilla.org/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Inspector Tool</a>.</p> 
        <p><a href="http://jensimmons.com/post/feb-27-2017/learn-css-grid">Learn how to use CSS Grid</a>.</p>
      </div>    
    </header>

    <main>


      <section class="intro">
        <h2>Intro to CSS Grid</h2>
        <ul class="demo-list">
          <li><a href="2017/01-009.html">
            <h4>12 Variations of Card Layouts</h4>
            <img src="assets/screenshots/01-009.jpg" alt=""></a>
          </li>
          <li><a href="2017/01-003.html">
            <h4>5 Basic Examples of how CSS Grid Works</h4>
            <img src="assets/screenshots/01-003.jpg" alt=""></a>
          </li>
          <li><a href="2017/03-009.html">
            <h4>Example of Nesting Flexbox and Grid</h4>
            <img src="assets/screenshots/03-009.png" alt=""></a>
            <p><a href="https://codepen.io/jensimmons/pen/LyrNqJ?editors=1100">on Codepen</a></p>
          </li>
          <li><a href="2017/01-005.html">
            <h4>Monopoly on CSS Grid</h4>
            <img src="assets/screenshots/01-005.png" alt=""></a>
          </li>                
        </ul>
      </section>
      
      
      <section class="viewport">
        <h2>Study of Viewport</h2>
        <ul class="demo-list">
          <li><a href="2017/01-010.html">
            <img src="assets/screenshots/01-010.png" alt=""></a>
          </li>
          <li><a href="2017/01-006.html">
            <img src="assets/screenshots/01-006.jpg" alt=""></a>
          </li>
          <li><a href="2017/01-008.html">
            <img src="assets/screenshots/01-008.png" alt=""></a>
          </li>
          <li><a href="2016/examples/grace-hopper-page.html">
            <img src="assets/screenshots/GHcoverpage.jpg" alt=""></a>
            <p><a href="http://codepen.io/jensimmons/pen/wGXwNb?editors=1100">on Codepen</a></p>
          </li>
        </ul>
      </section>
      
      
      <section class="whitespace">
        <h2>Study of Whitespace</h2>
        <ul class="demo-list">          
          <li><a href="2017/03-008.html">
            <img src="assets/screenshots/jazzposter.jpg" alt=""></a>
            <p><a href="http://codepen.io/jensimmons/pen/PNaoqv?editors=1100">on Codepen</a></p>
          </li>     
          <li><a href="2017/01-021.html">
            <img src="assets/screenshots/01-021.png" alt=""></a>
            <p>// does not work in Firefox</p>
          </li>               
        </ul>
      </section>
            
            
      <section class="vertical">
        <h2>Study of Verticality</h2>
        <ul class="demo-list">          
          <li><a href="2017/01-020.html">
            <img src="assets/screenshots/01-020.png" alt=""></a>
          </li>          
        </ul>
      </section>


      <section class="overlap">
        <h2>Study of Overlap</h2>
        <ul class="demo-list">          
          <li><a href="2017/02-012.html">
            <img src="assets/screenshots/02-012.jpg" alt=""></a>
          </li>          
          <li><a href="2017/01-002.html">
            <img src="assets/screenshots/overlappingcircles.gif" alt=""></a>
          </li>
          <li><a href="2017/01-018.html">
            <img src="assets/screenshots/01-018.png" alt=""></a>
          </li>          
          <li><a href="2017/02-001.html">
            <img src="assets/screenshots/02-001.gif" alt=""></a>
            <p>// <a href="http://www.archiviograficaitaliana.com/project/114/nonatriennale">original</a>
          </li> 
        </ul>
      </section>


      <section class="flexibility">
        <h2>Study of Flexibility</h2>
        <ul class="demo-list">
          <li><a href="2017/01-016.html">
            <img src="assets/screenshots/01-016.png" alt=""></a>
          </li>          
          <li><a href="2017/01-011.html">
            <h4>Responsive Mondrian</h4>
            <img src="assets/screenshots/mondrian.jpg" alt=""></a>
          </li>
          <li><a href="2017/01-007.html">
            <h4>Die Neue Typographie</h4>
            <img src="assets/screenshots/01-007.png" alt=""></a>
          </li> 

          <li><a href="2017/02-004.html">
            <img src="assets/screenshots/02-004.gif" alt=""></a>
            <p>// requires display:contents</p>
            <p>// <a href="/2017/media/02-004/der Film.jpg">original</a>
          </li>                  
        </ul>
      </section>


      <section class="density">
        <h2>Study of Density</h2>
        <ul class="demo-list">
          <li><a href="2017/01-001.html">
            <h4>Circle Gallery</h4>
            <img src="assets/screenshots/circlegallery.jpg" alt=""></a>
          </li>
        </ul>
      </section>


      <section class="initial-letter">
        <h2>Study of Initial Letter</h2>
        <ul class="demo-list">
          <li><a href="2017/03-002.html">
            <img src="assets/screenshots/03-002.png" alt=""></a>
            <p>// <a href="https://codepen.io/jensimmons/pen/GEXzdV?editors=1100#0">on CodePen</a></p>
          </li> 
        </ul>
      </section>


      <section id="writing-modes"><a name="writing-modes"></a>
        <h2>Study of Writing Modes</h2>
        <ul class="demo-list">
          <li><a href="2017/03-004.html">
            <img src="assets/screenshots/03-004.png" alt=""></a>
          </li>
          <li><a href="2017/03-005.html">
            <img src="2016/assets/images/writingmode-headline.png" alt=""></a>
            <p>// <a href="http://codepen.io/jensimmons/pen/KNJgmP?editors=1100">on CodePen</a></p>
          </li>    
          <li><a href="2017/03-006.html">
            <img src="2016/assets/images/writingmode-article.png" alt=""></a>
            <p>// <a href="http://codepen.io/jensimmons/pen/ZBmwLo?editors=1100">on CodePen</a></p>
          </li>
          <li><a href="2017/03-003.html">
            <img src="assets/screenshots/03-003.png" alt=""></a>
            <p>// <a href="https://codepen.io/jensimmons/pen/NgOpYE?editors=1100">on CodePen</a></p>
          </li> 
          <li><a href="2016/workshop/writingmode-1A.html"><img src="2016/assets/images/writingmode-1a.png" alt=""></a></li>
          <li><a href="2016/workshop/writingmode-3A.html"><img src="2016/assets/images/writingmode-3a.png" alt=""></a></li>
          <li><a href="2016/workshop/writingmode-2C.html"><img src="2016/assets/images/writingmode-2c.png" alt=""></a></li>
          <li><a href="2016/workshop/writingmode-4A.html"><img src="2016/assets/images/writingmode-4a.png" alt=""></a></li>
          <li><a href="2016/workshop/writingmode-4B.html"><img src="2016/assets/images/writingmode-4b.png" alt=""></a></li>
          <li><a href="2016/workshop/writingmode-4C.html"><img src="2016/assets/images/writingmode-4c.png" alt=""></a></li>
          <li><a href="2016/workshop/writingmode-4D.html"><img src="2016/assets/images/writingmode-4d.png" alt=""></a></li>
        </ul>
      </section>
      

       <section class="flexbox">
        <h2>Study of Flexbox</h2>
        <ul class="demo-list">              
          <li><a href="2017/02-007.html">
            <img src="assets/screenshots/02-007.png" alt=""></a>
          </li> 
          <li><a href="2017/02-008.html">
            <img src="assets/screenshots/02-008.jpg" alt=""></a>
          </li> 
          <li><a href="2017/02-010.html">
            <img src="assets/screenshots/02-010.png" alt=""></a>
          </li> 
        </ul>
      </section>
      
      
      <section class="viewport">
        <h2>Return of the 1990s</h2>
        <ul class="demo-list">
          <li><a href="2017/01-004.html">
            <img src="assets/screenshots/01-004.jpg" alt=""></a>
          </li>
          <li><a href="2017/02-015.html">
            <img src="assets/screenshots/gridjam.jpg" alt=""></a>
            <p>// requires display:contents</p>
          </li>
        </ul>
      </section>
      
 
       <section class="transforms">
        <h2>Other Experiments</h2>
        <ul class="demo-list">
          <li><a href="2016/examples/futurismo-1.html">
            <h4>Futurismo Trentino</h4>
            <img src="assets/screenshots/futurismo.gif" alt=""></a>
            <p>// requires display:contents</p>
          </li>    
          <li><a href="2017/01-015.html">
            <img src="assets/screenshots/01-015.gif" alt=""></a>
          </li>        
          <li><a href="2017/02-002.html">
            <h4>Test of hr and br</h4>
            <img src="assets/screenshots/02-002.png" alt=""></a>
          </li>        
        </ul>
      </section>
      
    
       <section class="practicality">
        <h2>Study of Practicality</h2>
        <ul class="demo-list">              
          <li><a href="2017/03-010.html">
            <img src="assets/screenshots/03-010.png" alt=""></a>
            <p>// <a href="https://codepen.io/jensimmons/pen/zKgevR?editors=1100">on CodePen</a></p>
          </li> 
        </ul>
      </section>  
      
    </main>

    
  </body>

  <script type="text/javascript">var _gauges = _gauges || []; (function() {var t   = document.createElement('script'); t.type  = 'text/javascript'; t.async = true; t.id    = 'gauges-tracker'; t.setAttribute('data-site-id', '59133cdabad3a70724018023'); t.setAttribute('data-track-path', 'https://track.gaug.es/track.gif'); t.src = 'https://d36ee2fcip1434.cloudfront.net/track.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(t, s);})();</script>
</html>
