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.
Hey, cool! Can see a lot of potential uses for this. Would like to see how it treats images; can they be “100% of the width of the column” without JS interventions?
Awesome. Dig the typography and use of Hound of the Baskervilles. Oh and all that CSS-trickery. :D
Really good post, Thanks
This is nice, and one of the hidden advantages of CSS columns. As much as I’d love to use them in my projects, they just don’t cover enough of the requirements for a more complicated layout, especially with pagination (e.g. a different value for ‘page’ margins and column gutters) and headers/images spanning multiple columns (CSS supports only
column-span: none
andcolumn-span: all
). So I ended up writing my own JavaScript library to extend what can be done with pure CSS, and it’s in production in a number of large-scale apps such as http://app.economist.com. Check out https://github.com/ftlabs/ftcolumnflow.In the 2nd demo, once you flip a page and then resize the browser window, the columns don’t align properly anymore. Still awesome, though!
Very cool! I like how it’s still usable with shape-outside too
So cool,
I had some experiments with that :
http://codepen.io/long-lazuli/pen/raeLyd
but I did focus on mousewheel.
I’m sure we could both improve a bit but that’s definitely a nice ‘ux’ idea, to me !
To be continued :-)
You’ve just recreated Generated Content for Paged Media CSS module. Previously there was something similar called Opera Reader, implemented in old Opera Presto, see video.
A classic CSS Trick. Nice.
2nd that…A nice good old CSS-Trick … nice to see that…Thanks for sharing…
Michael
Experimented with horizontal paging two years ago: http://codepen.io/Merri/pen/DEktJ/
I think now it would be quite safe to use this trick, two years ago it would’ve been too early on a production site.
Back when I was doing mobile app development, we used this technique for columned layouts in a number of magazines and newspapers. For us the paging was managed by a native wrapper app rather than Javascript, but the actual content was just HTML and CSS.
The tricky part comes when you need columning-spanning images, as George Crawford mentioned above. Our solution for that was pure CSS rather Javascript, but it was something of a hack – semantic purists would no doubt be horrified.
I wrote about this in a blog post a few years ago if anyone is interested in more details:
Advanced Columned Layouts with CSS