Book Image

NW.js Essentials

By : Benoit
Book Image

NW.js Essentials

By: Benoit

Overview of this book

If you are an experienced Node.js developer who wants to create amazing desktop applications using NW.js, this is the book for you. Prior knowledge of HTML5, jQuery, and CSS is assumed.
Table of Contents (11 chapters)
10
Index

A matter of style

Once we have our folder structure ready, we can proceed to create the style sheets. Inside the css folder, create an app.css file for the Main window and an options.css file for the Options window. Let's see the first one:

app.css:

/* Reset */
html, body, #mainView {
  width: 100%; height: 100%; margin: 0; padding: 0;
}
/* Custom behaviors */
html * {
  -webkit-user-select: none; box-sizing: border-box;
}
/* mainView container */
#mainView {
  display: flex; border-top: 1px solid #c7c7c7;
}
/* Right sidebar */
#sidebar {
  flex: 0 0 100px;
  padding: 15px 0; text-align: center;
  background: #414A4C; color: #f8f8f8;
}
/* Todo container */
#todoListContainer {
  flex: 1;
  background: #F8F8FF; overflow: auto;
}
/* Button styling */
.button {
  font-family: sans-serif; font-weight: 800;
  display: inline-block; border-radius: 100%;
  color: #F8F8FF; text-align: center; text-decoration: none;
  transition: background-color 0.2s linear;
}
/* Add button */
.add-button {...