Exploring styling with Intel XDK - 2

In this post we take a look at media queries and how they enter styling in Intel XDK projects.

Media queries came about in CSS3. In CSS2, the @media rule was introduced to address the different media types (desktop screens, printers, handheld etc). However this did not taek off except fro prit media type.

Media queries look for the type of support or capability available on the device to tailor the styling.
Media queries checks many things including display related variables like,

  • Width and height of viewport
  • Width and height of device
  • Device Orientation (Landscape/portrait)
  • Resolution
Like anything else browser support is essential, typically the support for @media rule.

Media query has the @media rule and the query syntax. The syntax of media query is:

@media not|only mediatype and (expressions) {
    CSS-Code;
}
The result of the media query returns true if,

  • The media type matches the type of device the document is beign displayed
  • All expressions in the media query is true
When the media query returns true, the corresponding style sheet or style sheet rules are applied according to the cascading rules. Unless, the not or only operators are used the media type is optional and all type will be implied. The media rule can be used in link reference to apply different rules to different media.

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

There are basically four different media types:
all (for all media types); print(for printers);screen(computer screens, tablets, smart phones, etc) and speech(for screen readers).

In my previous post using Intel XDK, the style code I created for the background using the built-in styling feature resulted in this media query:

@media all {
  #afui .Paleblue .panel {
    background-color: rgba(128, 128, 255, 0.34);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
}
In another test project, I created a round button using the built-in styling feature as shown.
The displayed round button:

mediaqry_00

This was designed using the interactive built-in styling feature shown here:


mediaqry_01

This gets into the index_main.less.css as shown below:

 @media all {
  #afui .TestRound {
    height: 30px    !important;
    width: 100px  !important;
    border-radius: 50%  100% 100% 100% !important;
  }
}

 Irrespective of media type, the css rule applies to all devices. Since we are using the interactive designer this css rule is automatically created.

Comments

Post a Comment

Popular posts from this blog

UWP: Displaying formatted text in a TextBox Control

Image
The entry you make in a text box control is of data type text and sometimes you need to format it as a currency with thousands separator while displaying. Also, if the number of decimal places you enter is more than 2, you need to round it up to 2 in the output. How do you code this in a UWP app? Create a UWP page starting from a Blank UWP project with three controls as shown. There are two text boxes and a button. You enter a number in the top textbox (txt1) and click the button, the formatted currency will be displayed in the bottom textbox(txt2). The app displays as shown. Now provide for a click event for the button and insert code as shown: Convert_1 The string entered in txt1 is converted to data-type double, it is then 'rounded'. The rounded number is then formatted to show the currency symbol and the 1000's place delimiter you find, for example in Excel formatting. Here is the app after entering a number and c
Read more

UWP: XAML's ComboBox Control -Part 1

Image
Microsoft's Universal Windows Framework apps are well supported by Microsoft and you could use it for not only Windows but for other devices as well. You can also use UWP for cross-platform use. In the Universal Windows Platform (UWP) projects there is an advantage of one code that works on different device families (phone, tablet, desktop etc.). However, the UWP projects depend on using XAML.  ComboBox details can be seen in the Object Explorer of Visual Studio 2017 Community used in writing this post. In this post, I will show you how you may work with this controls for a UWP project. Getting the ComboBox Control Placing ComboBox on the Design area Adding ComboBoxItems We start with a Windows Universal blank C# project with the name JComboBox as shown. You will be asked for what target and minimum versions of Windows 10 that you want. The higher the version the more feature support. The Build version 16299 is chosen for both as shown i
Read more

Handling AppManifest Validation error

This error may show up if one chooses an image file that does not comply with the enumeration. Here is the description of the error: Severity Code Description Project File Line Suppression State Error  Validation error. error C00CE169: App manifest validation error: The app manifest must be valid as per schema: Line 26, Column 25, Reason: '' violates enumeration constraint of 'badge badgeAndTileText'. The attribute 'Notification' with value '' failed to parse. XXXXXX C:\Users\Owner\source\repos\xxxxxx\bin\ARM\Debug\AppxManifest.xml   I chose a resource for Badge in the Assets and Visual Studio spawned this error. The only way to get out of this was to comment out (or better remove) the following line in the AppManifest .xml Make sure you save the file after the removal as every time you Build, the AppManifest.xml gets recreated.
Read more