Boko

A Layout for Reading

⚙︎

These are some options. They use JavaScript.

I don’t know if you have had the same experience, but the snag I always come up against when I’m telling a story is this dashed difficult problem of where to begin it. It’s a thing you don’t want to go wrong over, because one false step and you’re sunk. I mean, if you fool about too long at the start, trying to establish atmosphere, as they call it, and all that sort of rot, you fail to grip and the customers walk out on you.

- Bertie Wooster

About Boko

Boko is a tidy text-focused layout made for reading stories, books, or long articles. Long-form text. Navigation and options are both tucked away but fixed with scroll, to keep them accessible without distracting from the main text body. Hopefully. This layout should work on any screen size.

The Javascript options (top right corner) let readers switch the font and text size a bit for additional reading comfort.

Navigation is to the left on larger screens and on the bottom on smaller ones.

This demo is using 2 fonts from googlefonts via fonts.upset.dev; you might want to upload your fonts to your site.

The font picker code is by punkwasp!

Header Level 2

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.

This is a blockquote.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

Header Level 3


    #header h1 a {
      display: block;
      width: 300px;
      height: 80px;
    }