Defining CSS variables

NW.js releases quite frequently, basically updating with every new version of Chromium. That means we can safely use the latest CSS features. The one I'm most excited about is called Custom Properties (https://www.w3.org/TR/css-variables), which were formerly known as CSS variables.

Actually, variables are one of the main reasons CSS preprocessors exist. With NW.js, we can set variables natively in CSS, as follows:

--color-text: #8da3c5; 
--color-primary: #189ac4; 

After that, we can use the variable instead of real values across all the modules in the document scope:

.post__title { 
  color: var(--color-primary); 
} 
.post__content { 
  color: var(--color-text); 
} 

So if we decide now to change one of defined colors, we need to do it once, and any rules relying on the variable receives the new value. Let's adopt this technology for our application.

First, we need to create definitions for the module:

./assets/css/Base/defenitions.css

:root { 
  --titlebar-bg-color: #2d2d2d; 
  --titlebar-fg-color: #dcdcdc; 
  --dirlist-bg-color: #dedede; 
  --dirlist-fg-color: #636363; 
  --filelist-bg-color: #f9f9f9; 
  --filelist-fg-color: #333341; 
  --dirlist-w: 250px; 
  --titlebar-h: 40px; 
  --footer-h: 40px; 
  --footer-bg-color: #dedede; 
  --separator-color: #2d2d2d; 
} 

Here, we define variables representing colors and fixed sizes in the root scope. This new file gets included to the CSS index file:

./assets/css/app.css:

@import url("./Base/defenitions.css"); 
... 

Then, we have to modify our components. First we take care of the top level application layout:

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

.l-app { 
  display: flex; 
  flex-flow: column nowrap; 
  align-items: stretch; 
} 
 
.l-app__titlebar { 
  flex: 0 0 var(--titlebar-h); 
} 
 
.l-app__main { 
  flex: 1 1 auto; 
} 
 
.l-app_footer { 
  flex: 0 0 var(--footer-h); 
} 

Then we layout the main section that consists of two columns with dir and file lists:

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

.l-main { 
  display: flex; 
  flex-flow: row nowrap; 
  align-items: stretch; 
} 
 
.l-main__dir-list { 
  flex: 0 0 var(--dirlist-w); 
} 
 
.l-main__file-list { 
  flex: 1 1 auto; 
} 

We style the header:

./assets/css/Component/titlebar.css

.titlebar { 
  background-color: var(--titlebar-bg-color); 
  color: var(--titlebar-fg-color); 
  padding: 0.8em 0.6em; 
} 

And the footer:

./assets/css/Component/footer.css

.footer { 
  border-top: 1px solid var(--separator-color); 
  background-color: var(--footer-bg-color); 
  padding: 0.4em 0.6em; 
} 

We also need to set colors for the child components of the main section. So style the file list component:

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

.file-list { 
  background-color: var(--filelist-bg-color); 
  color: var(--filelist-fg-color); 
} 

and directory list component:

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

.dir-list { 
  background-color: var(--dirlist-bg-color); 
  color: var(--dirlist-fg-color); 
  border-right: 1px solid var(--separator-color); 
} 

We can run the application to observe that it looks the same. All the colors and sizes are successfully extrapolated from the variables.