Window CSS Styling

Smart.Window represents an HTML container that sits ontop of the page. The window can be dragged and resized inside the containing area.

Required files

The Smart.Window element requires the following file references to be placed on a web page in order for the custom element to be successfully registered and properly working:

  • smart.element.js — this is the base file that defines the common architecture of all Smart custom elements. It is part of the repository ni-kismet/smart-element.
  • smart.button.js — this file defines the functionality of the SmartButtons inside the header section of the Window custom element.
  • smart.window.js — this file defines the functionality of the Smart.Window custom element.

Smart.Window also requires the following style sheets in order to be displayed correctly.

  • smart.base.css — the base style sheet file.

Initialization

To create an instance of the Smart.Window custom element, insert the following tag in an HTML page:

<smart-window></smart-window>

To set properties of the custom element initially, do so by setting the respective attributes of the tag, e.g.:

<smart-window resizable></smart-window>

Getting and setting properties dynamically

Before accessing the custom element’s API in JavaScript, the custom element’s instance has to be retrieved:

let customElement = document.querySelector('smart-window');

Properties are represented as members of the custom element’s instance object and can be accessed as such.

Here is an example showing how to get a property dynamically:

let customElement = customElement.resizable;

Here is an example showing how to set a property dynamically:

customElement.resizable = true;

Styling (CSS API)

Smart HTML Elements use a pair of css files – smart.base.css and smart.[theme name].css. The base stylesheet creates the styles related to the element’s layout like margin, padding, border-width, position. The second CSS file applies the HTML Element’s colors, fonts, borders and backgrounds. The smart.base.css should be included before the second CSS file.

CSS selectors

The following CSS selectors can be used to style Smart.Window:

  • smart-window – the element itself. Can be used to set width and height for the whole element.
    • .smart-header-container – an HTML container that holds the header and header buttons.
    • .smart-header – the header ( title ) section of the element.
    • .smart-buttons-container – an HTML container that holds the header buttons of the window.
      • .smart-pin-button – a Smart.Button custom element used for the pin action.
      • .smart-collapse-button – a Smart.Button custom element used for the collapse action.
      • .smart-maximize-button – a Smart.Button custom element used for the maximize action.
      • .smart-minimize-button – a Smart.Button custom element used for the maximize action.
      • .smart-close-button – a Smart.Button custom element used for the close action.
    • .smart-content – an HTML container that holds the main content of the element.
    • .smart-footer – the footer section of the element.

CSS variables

Smart.Window uses the following CSS variables:

  • –smart-widnow-default-width – used to set the default width of the element. Default value is 400px.
  • –smart-window-default-height – used to set the default height of the element. Default value is 400px.
  • –smart-window-min-width – determines the minimum width of the element.
  • –smart-window-header-height – determines the height of the header section of the element.
  • –smart-window-footer-height – determines the height of the footer section of the element. By default it’s the same size as the header section.

Notes

Icons in Firefox

Arrows and other visual elements in Smart custom elements are displayed through the use of glyphicons.

Firefox has a setting that prevents HTML pages from accessing files with glyphicons when working locally and not from files on a server. To properly display glyphicons when developing locally, please do the following:

  • Open about:config in the Firefox address bar;
  • Search for the security.fileuri.strict_origin_policy property and change it from true to false.