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:
For font sizes and related parameters such as padding, we use relative units (em). It means that we set these values relative to the parent font size:
.component { font-size: 10px; } .component__part { font-size: 1.6em; /* computed font-size is 10*1.6=16px */ }
This trick allows us to efficiently scale components. For example, when using the Responsive Web Design (RWD) approach, we may need to reduce the font sizes and spacing proportionally for a smaller viewport width. When using ems, we just change font size for a target component, and values of subordinated rules will adapt.
