Where to Discuss?

Local Group

Preface

Goal: Creating basic layout from scratch using Flex.

Almost every component start with layout.


Very Simple Flex

Let’s practice!

Consider start with a very simple flex structure.

Reading Reference

All is explained here:

I don’t think that I need to explain more.

Document: HTML Body

  <main class="tabs">
    <div class="tab-headers">
      Header
    </div>

    <div class="tab-contents">
      Contents
    </div>
  </main>

Stylesheet: CSS

The stylesheet would be self explanatory.

.tabs {
  display: flex;
  flex-direction: row;
}

.tabs * {
  box-sizing: border-box;
  padding: 1rem;
}

.tab-headers {
  flex-basis: 30%;
  background-color: #bdf;
}

.tab-contents {
  flex-basis: 70%;
  background-color: #6bf;
}

Document: HTML Head

Do not forget to put the stylesheet between the <head>...</head>.

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tabs - Flex Layout</title>
  <link rel="stylesheet" type="text/css"href="../css/01-flex-layout.css">

Preview

The output in browser would be similar to this figure below:

Tabs Component: Flex Layout


Basic Layout

Still using flex, consider continue to basic structure.

Document: HTML Body

  <main class="tabs">
    <div class="tab-headers">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
    </div>

    <div class="tab-contents">
      <div>
        <h3>Lorem Ipsum</h3>
        <p>Lorem ipsum dolor sit amet,
          consectetur adipiscing elit.
          Quisque in faucibus magna.</p>
      </div>
    </div>
  </main>

It is still simple. I just add a few content.

Stylesheet: CSS: Responsive

Change the flow direction from column to row.

The stylesheet would be as below:

/* Main Layout: Mobile First */

.tabs {
  display: flex;
  flex-direction: column;
}

.tabs * {
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .tabs {
    flex-direction: row;
  }
  
  .tabs>* {
    min-height: 20rem;
  }
}

Form the very start, I use mobile first as responsive rule. That is why I use @media (min-width: …) {…}, instead of @media (max-width: …) {…}.

I also add border-box to make the box size consistent.

Stylesheet: CSS: Inner Layout

We begin the simple structure with inner layout and outer layout:

  • Outer: .tab-headers and .tab-contents.

  • Inner: .tab-headers div and .tab-contents div.

/* Inner and Outer Layout */

.tab-headers {
  flex-basis: 30%;
}

.tab-headers div {
  padding: 1rem;
  height:  4rem;
  display: flex;
  align-items: center;
}

.tab-contents {
  flex-basis: 70%;
}

.tab-contents div {
  padding: 1rem;
  height:  100%;
}

Stylesheet: CSS: Border

You don’t need this one below.

For convenience while debugging, I usually use different color.

Sometimes I also add border, while examining box model.

/* Border helper to distinct element */

.tabs div {
  border: 1px dashed grey;
  background-color: #bdf;
}

.tabs div div {
  background-color: #6bf;
}
  • .

Once we get the layout right, we can safely remove this additional stuff.

Document: HTML Head

Put the stylesheet between the <head>...</head>.

  <meta name="viewport"
        content="width=device-width, initial-scale=1">
  <title>Tabs - Inner Layout</title>
  <link rel="stylesheet" type="text/css"
        href="../css/01-basic-layout.css">

Preview

Now we have two kind of previews, based on responsiveness.

Mobile First

Tabs Component: Basic Layout: Mobile

Tablet

Tabs Component: Basic Layout: Tablet

As you can see with this distinct color, the tabs on the left pane has two layers.

The right pane, is actually has two layers, but the inner layers occupied all the height. We need two layers for content, because we need different inner content for each tabs.


Tailwind

Since we are going to use Tailwind CSS, I’m going to introduce from the very start.

Stylesheet: Tailwind

Significantly reduce lines of code.

Do not bother will the tailwind setup, I will explain later. All you need to know that, we can represent all the previous stylesheet, to other format.

/* Main Layout: Mobile First */
.tabs        { @apply flex flex-col; }
.tabs *      { @apply box-border; }

@screen md {
  .tabs      { @apply flex-row; }  
  .tabs>*    { min-height: 20rem; }
}

/* Inner and Outer Layout */
.tab-headers        { flex-basis: 30%; }
.tab-headers div    { @apply p-4 h-16 flex items-center; }
.tab-contents       { flex-basis: 70%; }
.tab-contents div   { @apply p-4 h-full; }

/* Border helper to distinct element */

.tabs div       { border: 1px dashed grey; }
.tabs div       { @apply bg-blue-300; }
.tabs div div   { @apply bg-blue-500; }

As you can see, not everything can be ported to tailwind, some rulse are still using native css.

  • .

This is just an introduction, so you can skip this tailwind stuff. We will discuss about it later.

Document: HTML Head

The tailwind build result is provided in repository. Do not forget to change the stylesheet between the <head>...</head>.

  <meta name="viewport"
        content="width=device-width, initial-scale=1">
  <title>Tabs - Inner Layout</title>
  <link rel="stylesheet" type="text/css"
        href="../css/01-tailwind-basic.css">

The preview result is exactly the same.


Inspect Elements

Whenever you have problems.

For any debugging issue, you can check first with inspect elements.

Tabs Component: Inspect elements

Sure, that most people have already know about this feature. I just realize that some beginner, always forget to use this powerful tools.


What’s Next?

Consider continue reading [ Tabs - CSS - Mockup Layout ].