HexagonJS
Edit Page
Layout
A set of classes that provide an easy way for your page to adapt to different screen sizes. The layout classes provide an alternative take on the standard grid system found in many frameworks. The classes provided make use of the flexbox display model, which provide some advantages over standard fixed size grid layouts.
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
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
compactBooleanadded
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.