Asettelut ja välistykset #2

This post will attempt to document all of the ways alignment can be assigned. Note that how the PAGE TEMPLATE is built that this content is shown on has much to do with how the items below will lay out. It is assumed that the post-content block in the template DOES have ‘inherit layout’ applied and is the top level container.

SOURCE: https://gist.github.com/MaggieCabrera/799d09c819616354a1b8eb3605f4fc69

No Containing It

This is a paragraph. It is a default paragraph inside no container. It should be the “regular” content with. When the window is WIDER than the “normal” width this paragraph block should be exactly as wide as the “normal width” is configured to be. When the window is anything smaller than that this paragraph should have space between it and the edge of the window.

This is also a paragraph that is not contained. However it does have a background color set. It is at the discretion of the theme as to how that situation is handled and what (if any) padding there is because of this background color.

This is a picture all by itself.
This one is wide.
This one is VERY wide. So wide that I would call it FULL WIDTH. This full width image should go all the way to the edge of the viewport.

Groupthink

This is a paragraph in a group. The group does not have any alignment assignments, therefore the width of this group should follow the same rules as the paragraph. It is expected that the text in this group align with the text above (which is not in a group).

This is that picture that you will continue to see throughout this document. It’s in the group too.

This is a paragraph in a group with a background color. It is the responsibility and discretion of the theme to apply space around a paragraph block that is inside of a group block that has a background color.

This is a paragraph in a group. There will also be another group nested within the group this paragraph is in.

This is the paragraph that resides in that second group. That’s two groups, neither of which are “inheriting default layout” or otherwise configuring layout in any way.

This is text in a group that is inheriting the default layout.

Wide Load

This is a paragraph in a group block that has been set to “wide width”. The behavior of this should be the same as the above groups without a “wide width” setting applied, but with the “wide width” value instead of the “normal width” value.

And here is that picture placed in the wide group.

This is text in a group set to “wide width” that is inheriting the default layout. The text should be “normal” width while the group is wide.

And so too should the picture.

This is a paragraph in a group block that has been set to “wide width” and is the same as the block above except that this group has a background color applied.

This one starts out with a “wide” group. Nested in that “wide group” is another group that is inheriting the default layout. Inside that group is the text you are reading.

This one starts out with a “wide” group inheriting the default layout. Nested in that “wide group” is another group and inside that group is the text you are reading.

One Step Closer to the Edge

This is a paragraph in a group that is FULL width. This Full Width group should go ALL THE WAY to the edge of the available viewport, no matter how wide that viewport is. There should always be a gap between the paragraph and the edges of this group.

The picture will align with the above paragraph. In this scenario it’s expected that the image will have a gap between it and the edge of the group (and thus the viewport).

This is a paragraph in a group that is FULL width and also configured to inherit layout. This Full Width group should go ALL THE WAY to the edge of the available viewport, no matter how wide that viewport is. The text, however, should be normal width. There should always be a gap between the text and the edge no matter how wide the viewport.

This is a paragraph in a group that is FULL width and that group has a background color set. This Full Width group, in all its background color glory, should go ALL THE WAY to the edge of the available viewport, no matter how wide that viewport is. There should be a gap between the paragraph and the edges of this group.

This one starts out with a “full width” group. This text is just inside of that group. It’s good to make sure that the text does indeed go all the way to the edge of a block. And that can take a lot of text in this kind of situation.

Nested in that “full width” group is another group and inside of that group is the text you are reading. You should read it twice. Go ahead, I’ll wait. Read it again. Did you read it again? Did you really? Or did you just read to the end and say to yourself “I’ll just pretend I read it all again”?

Nested in that “full width” group is another group which has been configured to inherit the default layout. Inside of that group is the text you are reading.

This is a “full width” group that is inheriting the default layout. It will contain a couple of other things that can be set to “wide” and “full widths.

This picture is one of those things set to FULL WIDTH. It should go all the way to the edge of the group thus filling the viewport.

Next in this “full width” group is another group which has been configured to have a wide width and inside of that group is the text you are reading.

Last in that “full width” group is another group which has been configured to also have a full width. Inside of that group is the text you are reading.

Cover your butt

This here is a cover block. Nothing special, just a cover block.

This cover block is a LITTLE more special. It has been set to ‘wide’ width.

And this is that cover block again, but all the way wide. Like so wide that it’s FULL of its self.

This part here starts off with a full width group…

and then there is a cover block inside of that full width group. It should have a gap between it and the edge.

This part here also starts off with a full width group but this one is inheriting layout…

and then there is a cover block inside of that full width group. It is set to “full width” and it should NOT have a gap between it and the edge.

Featuring

Below are some examples of the featured image block (configured as normal, wide then full). First by themselves…