iBooks-like Layout with Light CSS/JS

I was watching ol’ Dave Rupert play around with horizontal layouts in CodePen the other day. He found something that I wasn’t aware of. A CSS trick, if you will.

When you’re using CSS columns, and you set the column-count, say, to 2. The content will be split up into 2 columns in the visible area. It doesn’t mean only two columns period. If the content overflows that element (easy to do if you have a fixed height), more columns will be created horizontally. Plus you can make that overflow scroll.

See the Pen wBpYGm by Chris Coyier (@chriscoyier) on CodePen.

When I saw that I was like woah just like iBooks! Two columns. Scrollbar along the bottom.

Just a little styling and we could make it just like that. We can even use the entire browser window to do it.

* {
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  height: 100%;
  padding: 2em;
  font-family: 'Gentium Basic', serif;
  column-count: 2;
  column-gap: 4em;
}

Dave also messed around with paginating it easily. Click the right half of screen, scroll over 2 columns (the width of the screen). Click the left half of the screen, scroll back.

var scrollLeft = function() {
  window.scrollTo(window.scrollX - window.innerWidth, 0);
};

var scrollRight = function() {
  window.scrollTo(window.scrollX + window.innerWidth, 0);
};

document.body.addEventListener('click', function(e) {
  e.preventDefault();
  if (e.clientX > (window.innerWidth / 2)) {
    scrollRight();
  } else {
    scrollLeft();
  }
});

See the Pen The Hounds of Baskerville by Chris Coyier (@chriscoyier) on CodePen.

I’m sure y’all smarties out there could make it even cooler with like snap-to-scrolling (so you don’t get in-between columns scrolling), progress indicators, localStorage saving position, @media queries for when to go up or down in column-count, all that kinda cool stuff.