ungoldman/.block

## .block
license: mit
height: 100%
scrolling: yes

## index.html
<!DOCTYPE html>
<html lang="en" class="element">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>grid elements?</title>
  <link rel="stylesheet" href="https://elementcss.neocities.org/dist/element-0.0.1.min.css">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/styles/sunburst.min.css">
  <script src="https://elementcss.neocities.org/dist/element-0.0.1.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/highlight.min.js"></script>
  <style>
    gridrow { display: block }
    gridcol { display: inline }
    @media (min-width: 50em) {
      gridrow {
        width: 100%;
        display: table;
        table-layout: fixed;
      }
      gridcol {
        display: table-cell;
        padding-right: 2%;
      }
      gridcol:last-child {
        padding-left: 2%;
        padding-right: 0;
      }
    }
  </style>
</head>
<body>
  <h1>DIY classless grids</h1>
  <h2>Kyle's way</h2>
  <p>
    This is fine, but Nate thinks messing with baseline style of fundamental elements like
    <code>div</code> and <code>span</code> is generally a bad idea.
    Webpage authors will inevitably work with divs and spans and will need to override
    a grid hack that uses them.
  </p>
  <div>
    <span>
      <h3>Column</h3>
      <p>I'm the first column!</p>
    </span>
    <span>
      <h3>Another Column</h3>
      <p>I'm the second column!</p>
    </span>
    <span style="width: 20%">
      <h3>Smaller</h3>
      <p>I'm grid 3, but a lot smaller than the others.</p>
    </span>
  </div>

  <xmp>
    <div>
      <span>
        <h3>Column</h3>
        <p>I'm the first column!</p>
      </span>
      <span>
        <h3>Another Column</h3>
        <p>I'm the second column!</p>
      </span>
      <span style="width: 20%">
        <h3>Smaller</h3>
        <p>I'm grid 3, but a lot smaller than the others.</p>
      </span>
    </div>
  </xmp>

  <h2>Nate's way</h2>
  <p>
    If the goal is to avoid classes for the most basic possible layout, and you don't mind
    getting a little hacky, there's nothing stopping you from defining custom xml elements with
    just CSS. So, for example, you could define two elements, <code>gridrow</code> and <code>gridcol</code>,
    like so (I liked <code>row</code> and <code>col</code>, but apparently
    <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col">col</a> is already a thing).
  </p>

  <xmp>
    <style>
      gridrow { display: block }
      gridcol { display: inline }
      @media (min-width: 50em) {
        gridrow {
          width: 100%;
          display: table;
          table-layout: fixed;
        }
        gridcol {
          display: table-cell;
          padding-right: 2%;
        }
        gridcol:last-child {
          padding-left: 2%;
          padding-right: 0;
        }
      }
    </style>
  </xmp>

  <p>
    This would end up looking <em>exactly the same</em> as the div/span hack,
    without messing with the default behavior of some of the most basic elements.
  </p>

  <gridrow>
    <gridcol>
      <h3>Column</h3>
      <p>I'm the first column!</p>
    </gridcol>
    <gridcol>
      <h3>Another Column</h3>
      <p>I'm the second column!</p>
    </gridcol>
    <gridcol style="width: 20%">
      <h3>Smaller</h3>
      <p>I'm grid 3, but a lot smaller than the others.</p>
    </gridcol>
  </gridrow>

  <xmp>
    <gridrow>
      <gridcol>
        <h3>Column</h3>
        <p>I'm the first column!</p>
      </gridcol>
      <gridcol>
        <h3>Another Column</h3>
        <p>I'm the second column!</p>
      </gridcol>
      <gridcol style="width: 20%">
        <h3>Smaller</h3>
        <p>I'm grid 3, but a lot smaller than the others.</p>
      </gridcol>
    </gridrow>
  </xmp>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en" class="element">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>grid elements?</title>
	<link rel="stylesheet" href="https://elementcss.neocities.org/dist/element-0.0.1.min.css">
	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/styles/sunburst.min.css">
	<script src="https://elementcss.neocities.org/dist/element-0.0.1.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/highlight.min.js"></script>
	<style>
	gridrow { display: block }
	gridcol { display: inline }
	@media (min-width: 50em) {
	gridrow {
	width: 100%;
	display: table;
	table-layout: fixed;
	}
	gridcol {
	display: table-cell;
	padding-right: 2%;
	}
	gridcol:last-child {
	padding-left: 2%;
	padding-right: 0;
	}
	}
	</style>
	</head>
	<body>
	<h1>DIY classless grids</h1>
	<h2>Kyle's way</h2>
	<p>
	This is fine, but Nate thinks messing with baseline style of fundamental elements like
	<code>div</code> and <code>span</code> is generally a bad idea.
	Webpage authors will inevitably work with divs and spans and will need to override
	a grid hack that uses them.
	</p>
	<div>
	<span>
	<h3>Column</h3>
	<p>I'm the first column!</p>
	</span>
	<span>
	<h3>Another Column</h3>
	<p>I'm the second column!</p>
	</span>
	<span style="width: 20%">
	<h3>Smaller</h3>
	<p>I'm grid 3, but a lot smaller than the others.</p>
	</span>
	</div>

	<xmp>
	<div>
	<span>
	<h3>Column</h3>
	<p>I'm the first column!</p>
	</span>
	<span>
	<h3>Another Column</h3>
	<p>I'm the second column!</p>
	</span>
	<span style="width: 20%">
	<h3>Smaller</h3>
	<p>I'm grid 3, but a lot smaller than the others.</p>
	</span>
	</div>
	</xmp>

	<h2>Nate's way</h2>
	<p>
	If the goal is to avoid classes for the most basic possible layout, and you don't mind
	getting a little hacky, there's nothing stopping you from defining custom xml elements with
	just CSS. So, for example, you could define two elements, <code>gridrow</code> and <code>gridcol</code>,
	like so (I liked <code>row</code> and <code>col</code>, but apparently
	<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col">col</a> is already a thing).
	</p>

	<xmp>
	<style>
	gridrow { display: block }
	gridcol { display: inline }
	@media (min-width: 50em) {
	gridrow {
	width: 100%;
	display: table;
	table-layout: fixed;
	}
	gridcol {
	display: table-cell;
	padding-right: 2%;
	}
	gridcol:last-child {
	padding-left: 2%;
	padding-right: 0;
	}
	}
	</style>
	</xmp>

	<p>
	This would end up looking <em>exactly the same</em> as the div/span hack,
	without messing with the default behavior of some of the most basic elements.
	</p>

	<gridrow>
	<gridcol>
	<h3>Column</h3>
	<p>I'm the first column!</p>
	</gridcol>
	<gridcol>
	<h3>Another Column</h3>
	<p>I'm the second column!</p>
	</gridcol>
	<gridcol style="width: 20%">
	<h3>Smaller</h3>
	<p>I'm grid 3, but a lot smaller than the others.</p>
	</gridcol>
	</gridrow>

	<xmp>
	<gridrow>
	<gridcol>
	<h3>Column</h3>
	<p>I'm the first column!</p>
	</gridcol>
	<gridcol>
	<h3>Another Column</h3>
	<p>I'm the second column!</p>
	</gridcol>
	<gridcol style="width: 20%">
	<h3>Smaller</h3>
	<p>I'm grid 3, but a lot smaller than the others.</p>
	</gridcol>
	</gridrow>
	</xmp>
	</body>
	</html>