Pew Pew Laser Blog

Code. Glass art. Games. Baking. Cats. From Seattle, Washington and various sundry satellite locations.

Past Blogs

Quick Notes from Cascadia JS 2013.

12.27.2013

Last month, I went to Cascadia JS 2013, and here are some interesting pages from the conference:

Thank Yous

A lot of folks did a lot work to put this all together - thank you to each and every one of the organizers, sponsors and volunteers! Here are a few things that I particularly appreciated:

CSS for Variable Height Elements in a Grid.

12.16.2013

Assume that you need to build a grid with multiple elements using CSS and HTML, where the height of each element varies due to different lengths of content. I think of this as "The CD Problem", displaying a list of CD covers with wildly different album titles. If you just float each element left, then the taller elements will break the grid and your whole layout: Broken grid of HTML elements

This is the solution to the breaking grid:

li:nth-child(4n+1) { clear:left; } That CSS says to clear: left; every 4th li (after the 1st one). clear: left; causes the element to force a new grid row to start.

Here is some example HTML:

<ul>
  <li>
    <h4>Bacon ipsum dolor</h4>
    <img src="http://placekitten.com/100/100?image=1" />
    <p>Sit amet short ribs pork chop sandwhich pork belly</p>
  </li>
  <li>
    <h4>Pastrami andouille</h4>
    <img src="http://placekitten.com/100/100?image=2" />
    <p>Boudin chuck ground round</p>
  </li>
  ...
</ul>

And the CSS:

li:nth-child(4n+1) {
    clear:left;
}

li {
  width: 20%;
  margin: 0 .5rem .5rem 0;
  padding: 1%;
  float: left;
  border: solid black 1px;
  text-align: center;
}

ul {
  list-style: none;
  padding: 0;
  font-size: small;
}

img {
  max-width: 100%;
}

h4 {
  margin: .5rem;
  text-transform: capitalize;
}

p {
  margin: .5rem;
  text-align: left;
}

You can fiddle with a live example on CodePen.

File Generators.

12.6.2013

Here is a handy collection of websites that will generate new files and improved versions of your files:

Last Month

Next Month