Layouts, container and navs

The structure of the main tag element depends on you, but is there a few rules that you need to know.

Sidebar (side) component, will push (left/right or top/bottom) all tag with class body-content that are next siblings side ~ .body-content.

Header component will push down only first tag directly after (next siblings) css selector: header + *.

Name of body-content class you can modify on less/formir/setup/classes.less.

Content holder class keeps your padding and other behavior on your page elements.

Name of content-holder class you can modify on less/formir/setup/classes.less

      
        // Layout Unit
@layout-unit: px;
@layout-steps: 8;
@layout-factor: 0.3;
@layout-geometric-step: @base-geometric-step;
@layout-width: @content-max-width;
@layout-height: @content-max-height;

// Rensponsive Web Design

// Break points
@desktop-min-width: 1280px;
@tablet-max-width: 1024px;
@tablet-portrait-max-width: 768px;
@mobile-max-width: 568px;
@mobile-portrait-max-width: 320px;

// Break point on mobile menu
@mobile-menu-max-width: @tablet-portrait-max-width;


// Z-index
  //// Modals
  @modal-zindex: 10000;

  //// Side
  @side-zindex: 10000;
  //// Tooltips
  @tooltip-zindex: 10000;
  @tooltip-arrow-zindex: 1;
  //// Popups
  @popup-zindex: 10000;
  @popup-arrow-zindex: 1;
  //// Select
  @select-zindex: 10000;

  // Header
  @header-zindex: 10000;


// Content
@content-max-width: unit(1128, @layout-unit);
@content-min-margin: unit(20, @layout-unit);
@content-max-height: unit(600, @layout-unit);

      
    

      
        // Layout
@content-holder: content-holder;
@body-content: body-content;

@center-vertically: center-vertically;
@horizontally: horizontally;

//// Header
@header: .header; // tag 'header' or class or both
@header-content: header-content;
@header-fixed: fixed;

//// Footer
@footer: footer; // tag 'header' or class or both