tech @ Beacon Deacon

Modern Layouts

Jamie Johnson

February 10-15, 2017

I recently watched Modern Layouts: Getting Out of Our Ruts presented by Jen Simmons of The Web Ahead. It was an informative presentation where Ms. Simmons covered CSS shapes, columns, viewport units, coversheets, Flexbox and CSS grids as well as other topics. Ms. Simmons encouraged developers to play with code for these layouts. I've used some of the layouts, but here I will put some examples of some of my favorites (And no, my template is not broken; I am allowing full-width to optimize the examples). Also note that not all browsers are compatible with these. Chrome is. Yet, these examples degrade well even for browsers where there is no support.

CSS Shapes

Circle

Below, in compatible browsers (such as Chrome), the text goes around the image in a circular manner. If the browser is not compatible with CSS shapes, it degrades well to a floating image with a rectangular flow of the text around the image.

This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader. This text goes around Darth Vader.

Here's the essential code, noting that the code not in bold is just making a non-circular image circular so CSS shapes can be demonstrated:

img.circle { /* Note that the circle class is arbitrary and is only used so I can have multiple examples.  */
	float: left; 
	border: 1px solid black; 
	border-radius: 50%; 
	margin-right: 2em;
	margin-bottom: 0.5em;
	shape-outside: circle();
}

Ellipse

Here is an example with an ellipse:

Omelets. With Bacon. With Sausage. With Ham. With Cheese. Scrambled. Sunny-Side Up. Fried. Hard-boiled. Omelets. With Bacon. With Sausage. With Ham. With Cheese. Scrambled. Sunny-Side Up. Fried. Hard-boiled. Omelets. With Bacon. With Sausage. With Ham. With Cheese. Scrambled. Sunny-Side Up. Fried. Hard-boiled. Omelets. With Bacon. With Sausage. With Ham. With Cheese. Scrambled. Sunny-Side Up. Fried. Hard-boiled. Omelets. With Bacon. With Sausage. With Ham. With Cheese. Scrambled. Sunny-Side Up. Fried. Hard-boiled. Omelets. With Bacon. With Sausage. With Ham. With Cheese. Scrambled. Sunny-Side Up. Fried. Hard-boiled. Omelets. With Bacon. With Sausage. With Ham. With Cheese. Scrambled. Sunny-Side Up. Fried. Hard-boiled. Omelets. With Bacon. With Sausage. With Ham. With Cheese. Scrambled. Sunny-Side Up. Fried. Hard-boiled.

And here's the code:

img.ellipse { /* Note that the ellipse class is arbitrary and is only used so I can have multiple examples.  */
	float: left; 
	margin-right: 2em;
	margin-bottom: 0.5em;
	shape-outside: ellipse();
}

By default, the value ellipse() is the same as ellipse(50% 50%). You can change the percentages to further alter the shape of the ellipse. And yes, this means you can modify a percentage with a circle, noting that a circle uses only one percentage value.

border-box

Using border-box is useful with border-radius as the text will flow against a border of an image or other object. In this example, I use a styled letter via the span tag as the object about which the text flows:

Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. vVader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here. Vader is here.

And I simply apply this code around the span with class borderbox containing v:

span.borderbox { 
	float: left; 
	border: 1px solid black; 
	border-radius: 0 0 50% 50%; 
	shape-outside: border-box;
	text-transform: uppercase;
	font-family: courier;
	font-weight: bold; 
	font-size: 5em;
	padding: 0 10px; 
	background: black;
	color: red;
}

Polygon

Omelets. With Bacon. With Sausage. With Ham. With Cheese. Scrambled. Sunny-Side Up. Fried. Hard-boiled. Omelets. With Bacon. With Sausage. With Ham. With Cheese. Scrambled. Sunny-Side Up. Fried. Hard-boiled. Omelets. With Bacon. With Sausage. With Ham. With Cheese. Scrambled. Sunny-Side Up. Fried. Hard-boiled. Omelets. With Bacon. With Sausage. With Ham. With Cheese. Scrambled. Sunny-Side Up. Fried. Hard-boiled. Omelets. With Bacon. With Sausage. With Ham. With Cheese. Scrambled. Sunny-Side Up. Fried. Hard-boiled. Omelets. With Bacon. With Sausage. With Ham. With Cheese. Scrambled. Sunny-Side Up. Fried. Hard-boiled.

And here's the code:

img.polygon { /* Note that the ellipse class is arbitrary and is only used so I can have multiple examples.  */
	float: left; 
	shape-outside: polygon(50% 0, 20% 50%, 50% 100%, 0 50%); 
	
}

If you change the 20% to 100%, the whitespace looks more like a diamond instead of the text looking like the side of a diamond. Certainly there is room to play!

More on the CSS shapes specification: http://w3.org/TR/css-shapes-1


Columns

2 Columns

We hold these truths to be self-evident, that all men are created equal, that they are endowed, by their Creator, with certain unalienable Rights, that among these are Life, Liberty, and the pursuit of Happiness.

That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed, That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or abolish it, and to institute new Government, laying its foundation on such principles, and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness.

Prudence, indeed, will dictate that Governments long established should not be changed for light and transient causes; and accordingly all experience hath shewn, that mankind are more disposed to suffer, while evils are sufferable, than to right themselves by abolishing the forms to which they are accustomed. But when a long train of abuses and usurpations, pursuing invariably the same Object, evinces a design to reduce them under absolute Despotism, it is their right, it is their duty, to throw off such Government, and to provide new Guards for their future security.

Here is the code:

article.twocol {
	column-count: 2; 
	column-gap: 2em; 
}

Keep in mind, that there will always be two columns, even at low resolutions on mobile devices. To deal with that, we come to the next example.

Auto Columns

The way to set automatic columns is to choose a width and that takes care of it. Then the resolution of your screen/device will determine the number of columns based on that width. The example below has 200-pixel width columns with rules between columns:

We hold these truths to be self-evident, that all men are created equal, that they are endowed, by their Creator, with certain unalienable Rights, that among these are Life, Liberty, and the pursuit of Happiness.

That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed, That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or abolish it, and to institute new Government, laying its foundation on such principles, and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness.

Prudence, indeed, will dictate that Governments long established should not be changed for light and transient causes; and accordingly all experience hath shewn, that mankind are more disposed to suffer, while evils are sufferable, than to right themselves by abolishing the forms to which they are accustomed. But when a long train of abuses and usurpations, pursuing invariably the same Object, evinces a design to reduce them under absolute Despotism, it is their right, it is their duty, to throw off such Government, and to provide new Guards for their future security.

And the CSS to do it:

article.autocol { 
	column-width: 200px; 
	column-gap: 2em; 
	column-rule: 1px solid lightgray; /* This puts the line between columns without relying on borders. */ 
}

Viewport Units

Half the page with resizing text

Viewport isn't just for the meta tag specification on responsive sites. Viewport height (vh) and viewport width (vw) lend themselves to some interesting opportunities for layout. The example below shows a region, which always as high as the viewport and half as wide as the viewport while having text therein, which proportionally resizes based on viewport units (i.e. resolution):

Constructicons, merge to form Devastator!

Here is the code:

p.vp {
	background: purple;
	color: lime; 
	height: 100vh; /* 100% viewport height - good for image and doesn't prevent scrolling */
	width: 50vw; /* 50% viewport width)*/
	font-size: 6vw; 
	text-align: center;
}

Coversheet

Taking the above viewport units into consideration, one can set up a coversheet. If I don't specify a width as above, a block element will flow to 100% as expected. So, if I have a height taking up 100% of viewport (100vh), then a coversheet is easily set up. This is seen often at the top of a site similar to what splash pages did in the past:

Autobots, transform and roll out!

And the code?

div.coversheet {
	background: blue;
	color: red;
	padding: 3em 6em; 
	height: 100vh; 
	text-align: center; 
	font-size: 6vw;
}

display: flex

In her presentation, Jen Simmons mentioned that display: flex redefines what margin: auto does. It will center vertically and horizontally. Goodbye display: table-cell with vertical-align! While it is not supported in IE8, Ms. Simmons indicated that you can add a display: block rule beneath the display: flex rule so that IE8 and other browsers not supporting the display: flex rule can render something useful. So, we need a container set to display: flex and a child of that container set to margin: auto to demonstrate:

In supported browsers, this is horizontally and vertically centered.

The code:

<div style="display:flex;height:15em;border:1pxsolidblack;">
<p style="margin:auto;">In supported browsers, this is horizontally and vertically centered.</p>
</div>

Simmons indicates the following will accomplish the same thing, assuming a header parent container and h1 child element:

header { align-items: center; justify-content: center; } 
h1 { margin: 0; } 

Expanding on display: flex, Simmons indicates that as of August 2015, nearly 93% of browsers support flexbox, which allows placing containers beside one another without having to float them. A good tutorial about flexbox is at http://www.w3schools.com/css/css3_flexbox.asp.


Putting it all together

Okay, I am not going to integrate every example, but I will integrate some of them (with some tweaks and overrides) in a silly example so you can see the possibilites further:

Putting it all together


If God had intended men to smoke, He would have put chimneys in their heads. If God had intended man to smoke, He would have set him on fire. Major Premise: Sixty men can do a piece of work sixty times as quickly as one man. Minor Premise: One man can dig a post hole in sixty seconds. Conclusion: Sixty men can dig a post hole in one second. Someone came to me and told me to stop impersonating a flamingo. Well, I just had to put my foot down. I think I want a job cleaning mirrors. I could really see myself doing that. My friend was trying to mow her lawn this morning and ran over her dog's tail. Well, she grabbed the dog and wrapped his tail in a towel. I asked her what she did and she said she took him to Walmart. I said, "Why did you take him to Walmart?" She said, "Because Walmart is the nation's largest retailer." Any small object that is accidentally dropped will hide under a large object. Never hit a man with glasses; hit him with your fist. If rabbits' feet are so lucky, what happened to the rabbit? If God had intended men to smoke, He would have put chimneys in their heads. If God had intended man to smoke, He would have set him on fire. Major Premise: Sixty men can do a piece of work sixty times as quickly as one man. Minor Premise: One man can dig a post hole in sixty seconds. Conclusion: Sixty men can dig a post hole in one second. Someone came to me and told me to stop impersonating a flamingo. Well, I just had to put my foot down. I think I want a job cleaning mirrors. I could really see myself doing that. My friend was trying to mow her lawn this morning and ran over her dog's tail. Well, she grabbed the dog and wrapped his tail in a towel. I asked her what she did and she said she took him to Walmart. I said, "Why did you take him to Walmart?" She said, "Because Walmart is the nation's largest retailer." Any small object that is accidentally dropped will hide under a large object. Never hit a man with glasses; hit him with your fist. If rabbits' feet are so lucky, what happened to the rabbit?

There's a new type of broom out. It's sweeping the nation. A steak pun is a rare medium well done. You know why the guy fell down the well? He didn't see that well. The jackhammer was a groundbreaking invention. What do you call a deer with no eyes? No eye deer. Did you hear about the guy who invented the knock knock joke? He won the no bell prize. There's a new type of broom out. It's sweeping the nation. A steak pun is a rare medium well done. You know why the guy fell down the well? He didn't see that well. The jackhammer was a groundbreaking invention. What do you call a deer with no eyes? No eye deer. Did you hear about the guy who invented the knock knock joke? He won the no bell prize. There's a new type of broom out. It's sweeping the nation. A steak pun is a rare medium well done. You know why the guy fell down the well? He didn't see that well. The jackhammer was a groundbreaking invention. What do you call a deer with no eyes? No eye deer. Did you hear about the guy who invented the knock knock joke? He won the no bell prize. There's a new type of broom out. It's sweeping the nation. A steak pun is a rare medium well done. You know why the guy fell down the well? He didn't see that well. The jackhammer was a groundbreaking invention. What do you call a deer with no eyes? No eye deer. Did you hear about the guy who invented the knock knock joke? He won the no bell prize. There's a new type of broom out. It's sweeping the nation. A steak pun is a rare medium well done. You know why the guy fell down the well? He didn't see that well. The jackhammer was a groundbreaking invention. What do you call a deer with no eyes? No eye deer. Did you hear about the guy who invented the knock knock joke? He won the no bell prize. There's a new type of broom out. It's sweeping the nation. A steak pun is a rare medium well done. You know why the guy fell down the well? He didn't see that well. The jackhammer was a groundbreaking invention. What do you call a deer with no eyes? No eye deer. Did you hear about the guy who invented the knock knock joke? He won the no bell prize. There's a new type of broom out. It's sweeping the nation. A steak pun is a rare medium well done. You know why the guy fell down the well? He didn't see that well. The jackhammer was a groundbreaking invention. What do you call a deer with no eyes? No eye deer. Did you hear about the guy who invented the knock knock joke? He won the no bell prize. There's a new type of broom out. It's sweeping the nation. A steak pun is a rare medium well done. You know why the guy fell down the well? He didn't see that well. The jackhammer was a groundbreaking invention. What do you call a deer with no eyes? No eye deer. Did you hear about the guy who invented the knock knock joke? He won the no bell prize. There's a new type of broom out. It's sweeping the nation. A steak pun is a rare medium well done. You know why the guy fell down the well? He didn't see that well. The jackhammer was a groundbreaking invention. What do you call a deer with no eyes? No eye deer. Did you hear about the guy who invented the knock knock joke? He won the no bell prize.

I bet jellyfish are sad that there are no peanut butter fish. And both are sad there are no bread fish. Or is that the case? After all, the jellyfish are sad because peanut butter fish do not exist. Therefore both, cannot be sad. Rather, jellyfish are doubly sad that there are neither peanut butter fish nor bread fish. I bet jellyfish are sad that there are no peanut butter fish. And both are sad there are no bread fish. Or is that the case? After all, the jellyfish are sad because peanut butter fish do not exist. Therefore both, cannot be sad. Rather, jellyfish are doubly sad that there are neither peanut butter fish nor bread fish. I bet jellyfish are sad that there are no peanut butter fish. And both are sad there are no bread fish. Or is that the case? After all, the jellyfish are sad because peanut butter fish do not exist. Therefore both, cannot be sad. Rather, jellyfish are doubly sad that there are neither peanut butter fish nor bread fish. I bet jellyfish are sad that there are no peanut butter fish. And both are sad there are no bread fish. Or is that the case? After all, the jellyfish are sad because peanut butter fish do not exist. Therefore both, cannot be sad. Rather, jellyfish are doubly sad that there are neither peanut butter fish nor bread fish. I bet jellyfish are sad that there are no peanut butter fish. And both are sad there are no bread fish. Or is that the case? After all, the jellyfish are sad because peanut butter fish do not exist. Therefore both, cannot be sad. Rather, jellyfish are doubly sad that there are neither peanut butter fish nor bread fish. I bet jellyfish are sad that there are no peanut butter fish. And both are sad there are no bread fish. Or is that the case? After all, the jellyfish are sad because peanut butter fish do not exist. Therefore both, cannot be sad. Rather, jellyfish are doubly sad that there are neither peanut butter fish nor bread fish.


Helpful Links not mentioned above

Do websites need to look exactly the same in every browser? Answer: DoWebsitesNeedToLookExactlyTheSameInEveryBrowser.com

GitHub - github.com/jensimmons/thelayoutsahead:http://github.com/jensimmons/thelayoutsahead

The Web Ahead Labs: http://labs.thewebahead.net/

Back to top