Defining layouts

That's enough for base styles; now, we will start on the layout. First, we will arrange the title bar, main section, and footer:

To achieve this design, we should preferably use Flexbox. If you are not familiar with this layout mode, I will recommend the article, Understanding Flexbox: Everything you need to know (http://bit.ly/2m3zmc1). It provides probably the most clear and easy-to-catch-up way of explaining what a Flexbox is, what options are available, and how to use them efficiently.

So, we can define the application layout like that:

./assets/css/Component/l-app.css

.l-app { 
  display: flex; 
  flex-flow: column nowrap; 
  align-items: stretch; 
} 
 
.l-app__titlebar { 
  flex: 0 0 40px; 
} 
 
.l-app__main { 
  flex: 1 1 auto; 
} 
 
.l-app__footer { 
  flex: 0 0 40px; 
} 

We make .l-app a flex container that arranges inner items along a cross axis, vertically (flex-flow: column nowrap). In addition, we request the flex items to fill in the full height of the container (align-items: stretch). We set the title bar and footer to a fixed height always (flex: 0 0 40px). However, the main section may shrink and grow depending on the viewport size (flex: 1 1 auto).

Since we have an application layout, let's define the inner layout for the main section:

What we need to do is to make items--dir-list and file-list--to arrange horizontally one after another:

./assets/css/Component/l-main.css

.l-main { 
  display: flex; 
  flex-flow: row nowrap; 
  align-items: stretch; 
} 
 
.l-main__dir-list { 
  flex: 0 0 250px; 
} 
 
.l-main__file-list { 
  flex: 1 1 auto; 
} 

In the preceding code, we set the flex items to line up along an main axis horizontally using flex-flow: row nowrap. The l-main__dir-list item has a fixed width and its width depends on the viewport.

Actually, it's hard to see any results of our work until we give the components some colors:

./assets/css/Component/titlebar.css

.titlebar { 
  background-color: #2d2d2d; 
  color: #dcdcdc; 
  padding: 0.8em 0.6em; 
} 

We also colorise the footer component:
./assets/css/Component/footer.css

.footer { 
  border-top: 1px solid #2d2d2d; 
  background-color: #dedede; 
  padding: 0.4em 0.6em; 
} 

and the file-list component:

./assets/css/Component/file-list.css

.file-list { 
  background-color: #f9f9f9; 
  color:  #333341; 
} 

and eventually the dir-list component:

./assets/css/Component/dir-list.css

.dir-list { 
  background-color: #dedede; 
  color: #ffffff; 
  border-right: 1px solid #2d2d2d; 
} 

Now, we only need to include all the modules in the index file:

./assets/css/app.css:

@import url("./Base/base.css"); 
@import url("./Component/l-app.css"); 
@import url("./Component/titlebar.css"); 
@import url("./Component/footer.css"); 
@import url("./Component/dir-list.css"); 
@import url("./Component/file-list.css"); 

As it's done, we launch the application using the following command:

npm start

It launches the application and shows the layout: