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.
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.
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.
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:
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.
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.
Comments