Layout

Examples

HTML

<div class="docs-layout-demo">
  <div class="hx-layout hx-group hx-horizontal">
    <div class="hx-section"></div>
    <div class="hx-group hx-vertical">
      <div class="hx-section"></div>
      <div class="hx-section"></div>
      <div class="hx-group hx-horizontal">
        <div class="hx-section"></div>
        <div class="hx-section"></div>
      </div>
    </div>
    <div class="hx-section"></div>
    <div class="hx-section"></div>
  </div>
</div>

CSS

/* adds some styling to make the sections of the layout visible for this example */
.docs-layout-demo .hx-section {
  background: #d6d6d6;
  min-width: 150px;
  min-height: 100px;
}

Api

Change Log

Functions

hx.groupSelectiondeprecated

Deprecated

Replaced by hx.group(options)

Creates a detached div, classed with hx-group and hx-horizontal, wrapped in a selection

Returns

Selection

The selection containing the new element

hx.group.fixedSelectiondeprecated

Deprecated

Replaced by hx.group(options)

Creates a detached div, classed with hx-group, hx-horizontal and hx-fixed, wrapped in a selection

Returns

Selection

The selection containing the new element

hx.group.verticalSelectiondeprecated

Deprecated

Replaced by hx.group(options)

Creates a detached div, classed with hx-group and hx-vertical, wrapped in a selection

Returns

Selection

The selection containing the new element

hx.group.vertical.fixedSelectiondeprecated

Deprecated

Replaced by hx.group(options)

Creates a detached div, classed with hx-group, hx-vertical and hx-fixed, wrapped in a selection

Returns

Selection

The selection containing the new element

hx.sectionSelectiondeprecated

Deprecated

Replaced by hx.section(options)

Creates a detached div, classed with hx-section, wrapped in a selection

Returns

Selection

The selection containing the new element

hx.section.fixedSelectiondeprecated

Deprecated

Replaced by hx.section(options)

Creates a detached div, classed with hx-section and hx-fixed, wrapped in a selection

Returns

Selection

The selection containing the new element

hx.groupoptionsObjectSelection

Creates a detached div, classed with hx-group wrapped in a selection

Arguments

options

Properties

compactBoolean

Whether to use a hx-compact-group instead of a hx-group

Default: false

fixedBoolean

Whether to add the hx-fixed class to the group

Default: false

verticalBoolean

Whether to add the hx-vertical class to the group. When this is false, the hx-horizontal class is added.

Default: false

Returns

Selection

The selection containing the new element

hx.sectionoptionsObjectSelection

Creates a detached div, classed with hx-section wrapped in a selection

Arguments

options

Properties

fixedBoolean

Whether to add the hx-fixed class to the section

Default: false

sizeString

The additional size class to add to the section. Can be one of:

small
medium
large

Returns

Selection

The selection containing the new element

Classes

hx-border

Adds border to an element.

hx-border-bottom

Adds bottom border to an element.

hx-border-left

Adds left border to an element.

hx-border-right

Adds right border to an element.

hx-border-top

Adds top border to an element.

hx-compact-group

Given to a div that can contains several sections (or possibly more nested groups or compact groups). This class is similar to hx-group with the difference that the hx-sections within the group will have no margin.

Extra Classes

hx-horizontal

Used in conjunction with the hx-group class to indicate that the content inside it should be displayed horizontally on one line

hx-vertical

Used in conjunction with the hx-group class to indicate that the content inside it should be stacked vertically

hx-content

Wrap the main content of your page in this - it will center align the contents of the page and will match the header width.

hx-flag-spacing

A class to assist with migration to version 2 of Hexagon. Uses a more explicit variable for the padding and margin applied by the margin/padding classes from this module.

hx-full-screen

Add to the body tag to make the header and content span the entire window size. Scrolling is disabled on the content when this used.

hx-full-width

Add to the body tag to make the header and content span the entire width of the page.

hx-group

Given to a div that can contains several sections (or possibly more nested groups). Can be specified on the same div as hx-layout

hx-vertical

Used in conjunction with the class to indicate that the content inside it should be stacked vertically

Extra Classes

hx-horizontal

Used in conjunction with the hx-group class to indicate that the content inside it should be displayed horizontally on one line

hx-layout

Give to the outermost hx-group class in a layout to have it's margin match the margin of the sections. This class is not required when using hx-group/section.

hx-margin

Adds margin to an element.

hx-margin-bottom

Adds bottom margin to an element.

hx-margin-left

Adds left margin to an element.

hx-margin-right

Adds right margin to an element.

hx-margin-top

Adds top margin to an element.

hx-no-border

Removes the border from an element.

hx-no-border-bottom

Removes the bottom border from an element.

hx-no-border-left

Removes the left border from an element.

hx-no-border-right

Removes the right border from an element.

hx-no-border-top

Removes the top border from an element.

hx-no-margin

Removes the margin from an element.

hx-no-margin-bottom

Removes the bottom margin from an element.

hx-no-margin-left

Removes the left margin from an element.

hx-no-margin-right

Removes the right margin from an element.

hx-no-margin-top

Removes the top margin from an element.

hx-no-pad

Removes the padding from an element.

hx-no-pad-bottom

Removes the bottom padding from an element.

hx-no-pad-left

Removes the left padding from an element.

hx-no-pad-right

Removes the right padding from an element.

hx-no-pad-top

Removes the top padding from an element.

hx-pad

Adds padding to an element.

hx-pad-bottom

Adds bottom padding to an element.

hx-pad-left

Adds left padding to an element.

hx-pad-right

Adds right padding to an element.

hx-pad-top

Adds top padding to an element.

hx-phone

Shows the element only on phone sized devices.

hx-phone-hide

Hides the element only on phone sized devices.

hx-section

Given to a div that that will actually contain some content.

Extra Classes

hx-fixed

Give to a section to prevent it from growing to fill the space.

hx-large

Give to a section to make it take up at least 100% of the container width. Any section given this class has a minimum width defined by the named-class-min-width theme option.

hx-medium

Give to a section to make it take up at least 50% of the container width. Any section given this class has a minimum width defined by the named-class-min-width theme option.

hx-small

Give to a section to make it take up at least 25% of the container width. Any section given this class has a minimum width defined by the named-class-min-width theme option.

hx-tablet

Shows the element only on devices that are tablet sized or smaller.

hx-tablet-hide

Hides the element only on devices that are tablet sized or smaller.