This is the layout of the Turnkey web client.

The names are the CSS selectors (IDs using # in CSS, classes using . in CSS).

Copy from the Site.css file with an explanation:

 Div and stylesheet structure

 1. Body wrapper (#bodyWrapper)
   2. Global navigation (#globalNavWrapper)
     The top menu, or main menu (MVC-generated, modified by Angular JS code)
   2. Global content wrapper (#globalContentWrapper) 

     For non-viewmodel views (login for example)
       Content starts directly under #globalContentWrapper

     3. Recover margin from above (#flexLayoutWrapper)
       * For AngularJS, the AngularJS App starts (ng-app and ng-view) here with #flexLayoutWrapper
       * For MVC, the definition for form and field posting to the server is directly below #flexLayoutWrapper. These are both full-height
         <form>
           <fieldset>

       4. Content wrapper (#contentWrapper) 
         * For AngularJS, HTML generated server-side, injected into the DOM by AngularJS, and data-bound client-side
         * For MVC, this is part of the complete rendered page coming from the server

         5. Sidebar wrapper (#sidebar)
           For non-flex handling, it introduces scrollbars and manual height handling (Safari and Edge)
           6. Sidebar (#sidebar)
             Takes space as needed, using a scrollbar for the vertical axis
         5. Viewmodel wrapper (#viewmodelWrapper)
           For non-flex handling, it introduces scrollbars and manual height handling (Safari and Edge)
           6. Section for the viewmodel (#viewmodelSection)
               Either of the following:
                 * Ordinary one block of content, using a scrollbar for both axes, all scrolling
                 * Two, three or more x- and/or y-segmented gridboxes, with middle sections scrolling
                     First and last segments taking the space they need
                     Middle segment, using a scrollbar for both axes
                     Note that vmGridBox* classes are only present if the design includes splitters.
       4. Validation messages wrapper (#validationMessageWrapper)
         5. Validation messages formatting (#validationMessages)
               The actual information, warnings and errors (AngularJS data bound)

Note - We add a CSS class with the name of the ViewModel high up in the HTML hierarchy:

This enables you to make CSS rules that apply only to selected views.

If the ViewModel is named "WorkBoard", add a CSS rule like this:

 .WorkBoard #sidebar{ visibility: hidden;} 

The above CSS rule will effectively hide the whole sidebar menu - but only for the WorkBoard view.

Updates Nov 2018

To apply your own generic style sheet, we have introduced a CSS class unique per control type. The CSS names are taken from the names of this enum:

public enum CSSControlType { ctStaticText,ctImage,ctTextEdit,ctDatePicker,ctCheckbox,ctCombobox,ctButton,ctGrid,ctGroupbox,ctFile,ctLink, ctTextArea, ctNumberEdit, ctFloatNumberEdit }; 

This CSS class will be applied to the div that encloses the whole control, including the label.

Since the label may be omitted in the design of certain controls, we also tell you this by adding the CSS class = "NoLabel" on the div enclosing the control.

If you use the CSS-Grid, this is the same div that is placed in the CSS-Grid; if you use Bootstrap, it is the bootstrapped div that is placed in the 12-table.