Almost all of the UI layout comes down to just this

#ui #visualdesign #layout #flexbox

We know that developers like to believe that they are "left brain" people and that "designers" (often referring to the photoshop/sketch production artist) - are "right" brain.

How could a "coder" ever understand how to set some typography - and put a roundy corner on something...?

How could a "creative" ever understand the incredibly complex system of boxes that defines the layout on a web page?

Well - they can. There's no such thing as "left brained" and "right brained" - and the truth is, that whatever you aren't good at - is because you haven't practiced it. So, - here's the secret:

It's a box.

It's a box - with two other boxes - inside of it. (almost always) (please feel free to argue with us on this)



<example-component class='modifier?'>
  <thing-one>HEY!</thing-one>

  <thing-two>HO!</thing-two>
</example-component>

Website/app headers, checkboxes, lists, - and whatever else... comes down to an solid understanding of flex-box basics.



.parent-element {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

Use the parent. Children shouldn't have to know anything about how they are positioned. Always set the position on the context. It's the parents job to organize things. (The child might have some preferences such as min max or flex-basis)



.column-left...

No!

Don't give the child a whacky class like
.col12-2-tailwhat md-6 border-dark-wide yucky omg

Use the parent"



<example-component class='modifier?'>
  <thing-one>HEY!</thing-one>

  <thing-two>HO!</thing-two>
</example-component>

Set the settings:



.parent-element {
  display: flex;
  flex-direction: row;
  justify-content: flex-start; /* these! */
  align-items: center;/* these! */
}

From site-wide layout structure - to the tiniest little status flag - these are the things you should understand. Spend an hour. Get it over with / so you can focus on the things that are actually hard.

(even this thing!)

and this:

EXAMPLE: https://jsfiddle.net/sheriffderek/1jkezc8t/

So, now that you know the secret to UI and front-end dev...

Consider learning real "Design." Then this coding stuff can help you build your designs.

Idea came from this Quora question:

Top comments (5)

Rob Levin • Jan 7 '22

As a hybrid I find subtle ways to "break the grid" or box very interesting. The amazing Jen Simmons jensimmons.com/ does this I think. Overlap your boxes. Set one at a slight angle and let it overlap. But I digress…

Yes, we mainly make boxes. Agreed 😄 🙌