Responsive Forms Advanced Cusomization

Media Queries Breakpoints

Min width:

// Small screen / phone

@screen-sm-min: 544px;

 // Medium screen / tablet

@screen-md-min: 768px;

 // Large screen / desktop

@screen-lg-min: 992px;

 // Extra-large screen / wide desktop

@screen-xl-min: 1200px;

Max width:

@screen-xs-max: (@screen-sm-min - 1);

@screen-sm-max: (@screen-md-min - 1);

@screen-md-max: (@screen-lg-min - 1);

@screen-lg-max: (@screen-xl-min - 1); 

Main Form Layout

Represents the layout structure of the form view. There should be one in a view.

<div class="sqf-layout"> </div>

 Layout Mode

Fixed – Fixed to the maximum of Css class: sqf-layout-fixed

Maximum width:

@layout-sm: 576px;

@layout-md: 720px;

@layout-lg: 940px;

@layout-xl: 1140px;

Fluid: full-width layout (100%)  Css class: sqf-layout-fluid

Default: full-width layout (100%), but limited to 1140px  Css class: sqf-layout

Header

Represents the form header. There should be one in a layout.

<div class="sqf-layout-row sqf-header">
       <h1><sq8:Text runat="server">Form Header</sq8:Text></h1>
<small><sq8:Text runat="server">Form Description</sq8:Text></small> </div>

Footer

Represents the form footer. There should be one in a layout.

<div class="sqf-layout-row sqf-footer"> </div>

 PlaceHolder

Represents a placeholder. Mainly used to hold a sub views, grids, sections or any other HTML content.

<div class="sqf-layout-row sqf-placeholder"> </div>

Section

Represents a form section - a set of controls that are grouped logically.

<div class="sqf-layout-row sqf-section">
<div class="sqf-section-header">
<h2><sq8:Text runat="server">Section Header</sq8:Text></h2>
<small><sq8:Text runat="server">Section description</sq8:Text></small>
</div>
<div class="sqf-section-body sqf-container">
                     
</div>
</div>

Child Elements: Header, Body

You cannot edit the content. Add a row and a column to add content.

Section Header

Displays a header for a section in the form.

<div class="sqf-section-header">
<h2><sq8:Text runat="server">Section Header</sq8:Text></h2>
<small><sq8:Text runat="server">Section description</sq8:Text></small>
</div>

 Section Body

<div class="sqf-section-body sqf-container"> </div>

 By having the sqf-container class in the definition, it behaves as a grid container (see the Container section below).

 Grid System

The grid system is based on a 12-column layout. There are three main components:

  • Container
  • Row
  • Column

Container

The main container of the grid.

<div class="sqf-container"> </div>

 Child Elements: Row

The Content is not editable, add a row and a column to add content.

Row

A horizontal group of columns.

<div class="sqf-row"> </div>

Child Elements: Column

The Content is not editable, add a column to add content.

Column

Content container, meaning content can only be added to the column. You define a column width by applying a css class for each screen in format sqf-col-[screen]-[span], where:

  • screen is one of the possible screens: xs (extra small), sm (small), md (medium), lg (large) and xl (extra large).
  • span is one of the possible columns up to 12.

For example:

<div class="sqf-col-md-4 sqf-col-xs-12"> </div>

Defines 4-columns width for medium devices, and 12-columns width for extra-small devices.

In the design environment, Span is controlled from the column property grid.

Controls Layout Inside a Column

  • Vertically: the label is display block, meaning that any control that is placed after the label will move to the next line.  Css Class = sqf-control-group-v.
  • Horizontally: any control will be placed to the right of the label. Css Class = sqf-control-group-h
  • Default: wrapping is done according to the column container.

Nested Grid

To create a nested grid, add a row to a column.

For example:

<div class="sqf-col-xs-12">
<div class="sqf-row">
              <div class="sqf-col-xs-12">
</div>
</div>
</div>
About this Article
  • Created: 06/07/2017 2:14 am EDT
  • Last updated: 06/07/2017 3:03 am EDT
In This Article