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.


The single page is shown here.



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.


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.


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.


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:


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


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


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

We will explore CSS in more detail in future posts.

Post a Comment

Popular posts from this blog

Develop a Side Menu App using Intel XDK - Part 1

Setting up Kid's Corner on Windows 10 Phone

Intel XDK: Controls 6: Using the Google Map Widget