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>
