Exploring styling with Intel XDK - 1

Without styling most of web pages will be drab. CSS is at the center of all web styling and Intel XDK is no exception. In a Standard HTML project with App Framework 3 in Intel XDK there is the standard .css page that governs the styling.

In the case of a blank project the only reference to styling is the style sheet reference to css/app.css. In addition to touch action, zooming and other interactive elements has only the minimal styling information for the single HTML page, the styling for the body.

body
{background:white;
color:black}

The single page is shown here.


 

StdMain_01

When you click on Background, you get a drop-down to create a New... style for the background element. When you choose New..., you get a window where you can create a new style class as shown. A name Paleblue was provided by the user here.

StdMain_02

When you click OK, the following takes place. An Index_main.less.css gets added as well as in the design area, a style designer opens up as shown.

StdMain_03

The index_main.less.css page is at www/css/index_main.less.css that governs lot more of the styling

Let us go back and apply a few styles as shown all for the background.

StdMain_04

Paleblue was chosen as the color. Click OK in the above to confirm it. The background color becomes blue and the HTML for the main page changes to this:

StdMain_05

The index_main.less.css page gets updated by the new change.

StdMain_06

The page is pale blue but you can adjust the opacity to make it even lighter as shown.

 
StdMain_07

Sure enough the change gets into the index_main.less.css page as shown.
 
StdMain_08

We will explore CSS in more detail in future posts.