text: <!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>
  