Straight & Narrow

Cravats for the Modern Adventurist

If you're going to hang a piece of cloth around your neck, why not make it one of ours?

Did you know that the modern necktie originates from the cravats worn by Croation mercenaries during the Thirty Years War almost four centuries ago? From that kick-ass origin, ties have become the sartorial choice of dandies, fops, and Organisation Men of all stripes.

Here at Straight & Narrow we believe that ties should return to that are capable of staunching aortal bleeding from a musket-ball wound, lashing bamboo together to raft down the Mekong Delta, or acting as a garrotte.

To accomplish this, we make our ties from modern materials: no silk or plain cotton! We use tactical ballistic nylon or military spec canvas for our creations, which include hidden pockets. Skinny, fashion-forward ties to complement the modern adventurist.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima corrupti odio, officiis debitis culpa ratione illum. Similique voluptate dolores quaerat cumque quas quibusdam eveniet at repudiandae culpa, assumenda, eum absurdum veniam.

Part of the Page Layout Reading List

Creating a newspaper or magazine-style layout, in which text flows between multiple columns, has not been seriously approached in web design until very recently. Currently, the technique remains a draft proposal for CSS3.

Continuous multiple-column text design for the web is also somewhat controversial: there is an argument to be made that users have been habituated into reading most web sites like a book, from one edge of the page to the other, and that forcing text into a magazine-style layout is actually a step backwards. However, with a little bit of cleverness, we can actually have the best of both worlds.

First, the text to be divided into columns must be in a single container - most likely, but not exclusively, a div:

<div id="columns">
	<p>Hey, did you know that the modern necktie originates in the cravats worn by Croatian mercenaries during the Thirty Years War almost four hundred years ago? From that kick-ass origin, ties have become the sartorial choice of dandies, fops, and Organization Men of all stripes. Boring!
	<p>While we don’t make ties that are capable of staunching aortal bleeding from a musket-ball wound, our extra-skinny, super-strong ties could be used as a garrotte – or a tourniquet, if you wished.
	<p>Lorem ipsum dolor sit amet...
</div>

Second, our CSS divides this div up into a series of columns. I'll demonstrate the technique without vendor prefixes: 

div#columns {
	column-count: 2;
	column-gap: 2em;
	column-rule: 5px solid black;
}

This declaration divides the <div> into two equal width columns, automatically balancing the text between both. The columns are separated by 2em and a black rule five pixels wide. It is a fluid design: the height of the columns changes as text is added or removed, or if the overall width of the container changes, but there are always two columns.

This layout also gracefully degrades rather neatly: if a browser does not understand the properties, the text is simply displayed normally in the container <div>.

A solution with greater fluidity is to set column-width rather than column-count, allowing the browser to determine just how many columns there should be, based on the width of the container: 

div#columns {
	column-width: 15em;
	column-gap: 2em;
	column-rule: 5px solid black;
}

Fluid Column Text ScreenshotNow the number of columns created is determined by the overall width of our wrapper <div> – so long the <div> can be wholly divided with columns that are 15em wide with appropriate gaps and rules, the browser will add columns. If the <div> is less than 34em wide ((2 × 15em) + 4em for the gap) the text will fall into a single column.

Text is automatically balanced between columns, by default; if you want to fill the columns from left-to-right, use column-fill: auto.

Newspaper-style columnar layout on the web remains controversial and cutting-edge. On the other hand, it does gracefully degrade. Going forward, columnar text layout will likely become a strong visual component in web pages, if used carefully and appropriately.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/aOqjYP