Comprehensive Guide to Layout Building #2 [ Advanced Layout Shift ]

This is the second entry in a blog series about constructing your own layout. In this post, we will touch on the following topics for intermediates to understand:

1. Display types, what they accomplish, and when to use each one.
2. What the position property does, how to use it, and what it can accomplish.
   
3. How you can use them in your layout-building process to stand out.
   

By using these properties in your layout, you can begin to add complexity to how your elements are structured. Once you understand these topics, it will allow you to create an amazing profile like the one shown below:

The position property allows for elements to be shifted around in their scope in different ways; each method you input will influence how it behaves when scrolling. These methods have their own specialized behaviors for different cases, below are the different types of positional behaviors:

STATIC / RELATIVE

The static method is the default for most elements; it allows for the element to behave normally without any changes. Also, any of the default CSS repositioning rules, such as top or left, will not apply to static elements. 

Below is a default static img of eepy kitty:

On the other hand, relative allows for the element to behave normally, have its own scope, and be repositioned with said default repositioning rules.

Below is the same image but with the following changes:

One of the more important things to note when using relative is the scope it adds to your element; if you parent anything to your relative element, it will be inside of it's scope, which causes sticky and absolute positioning to behave within the bounds of it's parent instead of the main body.

FIXED

Fixed positioning makes elements with it completely stuck to the viewport; you can shift the element around via the default CSS positioning rules. (Note that scope doesn't apply to fixed objects.)

The shark gif will stay in the same place even when I scroll.

ABSOLUTE / STICKY

The absolute positioning rule allows for the precise movement of the element it is set to in its local scope; you can shift absolute elements via the use of position rules such as top and left.

The element's scope is decided as either the first element with relative or absolute positioning, or it just defaults to the page's body.

Example above:

While still similar, sticky positioning acts in a different way. You can only put position rules equivalent to the inline axis; they will be static until the viewport hits the bounds of their positional rules's equivalent boundaries when absolute.

Use these positioning rules to enhance certain effects you may add to your elements and shift components around in unique ways.

Working on your layout in any advanced manner requires you to use display properties, and since it is impossible for me to go into depth about each one, I'll link amazing resources I personally trust about each display property. (With the exception of contents.)

FLEXBOX

Kevin Powell has an amazing video about how to use flexbox, if you want to delve deeper into his other videos on the subject then view these links: 

• How to take control of Flexbox
• Flexbox design patterns you can use in your projects
  
• A Flexbox trick to improve text wrapping
  

Below are the two main web documentation platform's pages on display: flex;

• Flexbox: Mozilla Web Documents
  
• Flexbox (Flexible box): W3Schools
  

GRID

If you ever want a quick deep explanation of something complex in CSS, I CANNOT recommend Slaying the Dragon more.

Other resources:

• The easiest way to get started with CSS Grid
  
• Learn how to make a Responsive CSS Grid Layout
  
• How to Create CSS Bento Grid
  

Web Documents:

• Grid: Mozilla Web Documents
• Grid Layout: W3Schools
  

Utility Display Properties (contents / none)

The display properties none and contents are for specific use cases that don't involve element shifting in a particular sense. 

Display: none; causes the element to not be rendered at all; this also includes all of its children being removed from the rendering context. This can be used to remove unwanted sections from your profile, most notably the URL section or profile-info.

.right-column has a display of none.

Display: contents; causes the element you apply it to to basically be gutted, for which all of its children will be siblings to the affected element. This allows for incredible effects if you know how to use it properly.

Entirely gutted profile.

Alright, so this took longer than expected. Sorry for that. I had to go on a trip on Sunday, and it setback this post's progress by a lot; the next post will be shorter and be about before and after psuedoelements. Stay tuned for that.