Almost all user interface comes down to this

Posted: June 21, 2022 / Last updated: September 8, 2023

We know that developers like to believe that they are “left brain” people and that “designers” (often referring to the photoshop/figma 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?

Interface layout?

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)

things.html

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

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

things.html

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

This is the same.

things.html

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

This one is also the same. It’s just very readable.

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 parent’s job to organize things. (The child might have some preferences but get the basics down first)

Now only the most spiritually connected people are going to be able to see the pattern here, but you’ll have to take our word for it. If you look really really closely… you can see that the things in the code are things…

Make it easy on yourself

Layning out website/app headers, checkboxes, lists, – and whatever else… comes down to a solid understanding of flex-box basics.

In a column (stacking blocks)

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

In a row (in a line)

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

Space between things

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

When things don't fit

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

Wrapping around to the next row (like text) (and Pac-Man)

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

Stretch as a default

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

Align center (on the horizontal axis)

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

Putting them together

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

Grouping

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

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:

Looking to learn CSS like – really good?

We know of a pretty great school. You can check it out.