The geometry controller watches for changes to window size and orientation and notifies all listening controllers when these events occur.

Include the following javascript code to start the digitopia.js framework with the geometry controller enabled. The example on the controller page enables the framework without the geometry controller enabled.

                  

The controller sets a class on the body tag for the current scale breakpoint. This class can be used in css rules to modify the style of particular html elements in at various breakpoints.

While modern browsers have "Media Queries" that allow you to have specific CSS rules for elements at different screen widths, the responsive controller scheme works on all browsers.

  1. Define CSS selectors using breakpoint classnames to control appearance of the following HTML element at various breakpoints.
                          
                          
  2. Resize the window and watch the background color of this element change at different width breakpoints:
  3. You can also use these automatically generated utility css classes in HTML to show/hide block elements at breakpoints.
    • tiny
    • small
    • medium
    • large
    • huge
    • hide when not in particular breakpoint "hidden-not-xxx"
      • visible
      • visible
      • visible
      • visible
      • visible
    • hide only in particular breakpoint "hidden-xxx"
      • visible
      • visible
      • visible
      • visible
      • visible
    • show only in particular breakpoint "hidden-not-xxx shown-xxx"
      • visible
      • visible
      • visible
      • visible
      • visible
    • show when not in particular breakpoint "hidden-xxx shown-not-xxx"
      • visible
      • visible
      • visible
      • visible
      • visible
  1. The geometry controller emits the following events:
    • DigitopiaScaleChanged: Width breakpoint transition has occurred
    • DigitopiaOrientationChanged: Orientation changed

    Javascript controllers can watch for and respond to geometry changes.

                          
  2. Associate controller with element
                          
  3. Notice the content of the box now shows breakpoint class name and orientation

Loading...