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
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-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.