Skip to content

Instantly share code, notes, and snippets.

@ungoldman

ungoldman/.block

Last active May 10, 2017 00:24
Show Gist options
  • Save ungoldman/a95e3a9554a23b3163939c13c78d8c86 to your computer and use it in GitHub Desktop.
Save ungoldman/a95e3a9554a23b3163939c13c78d8c86 to your computer and use it in GitHub Desktop.
Download ZIP
basic grid layout with pure CSS and no classes
Raw
.block
license: mit
height: 100%
scrolling: yes
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment