Home > Web Design | Web Development > iBooks-like Layout with Light CSS/JS

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.


iBooks-like Layout with Light CSS/JS is a post from CSS-Tricks

TOP
Visit Us On TwitterVisit Us On FacebookVisit Us On Google PlusVisit Us On Linkedin