DEV Community

loading...
Perpetual Education

Almost all of the UI layout comes down to just this

perpetual . education
http://perpetual.education is a design/programming school. We like to be part of the discussion over here at Dev.to / We have time-slots for free conversations for career advice IRL : )
Updated on ・2 min read

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?

Alt Text

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>

Alt Text

Alt Text

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.

Alt Text

(even this thing!)

and this:

Alt Text

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:

Discussion (4)

Collapse
philippejadin profile image
Philippe Jadin

Really cool! I love this kind of "pushing the existing status quo" article.

Do you advocate using custom html tags already?

Collapse
perpetual_education profile image
Collapse
mtness profile image
mtness

I totally second this.
Reminds me of the article "the principle of the least power" :
css-tricks.com/newsletter/220-the-...

Collapse
perpetual_education profile image
perpetual . education Author

Can you elaborate on this? As in / vs some bootstrap col-4 md-12 col-12 type stuff: just using CSS? Is that where you see that parallel?

Forem Open with the Forem app