Layout

Layout in SME is divided into the following categories:

These classes try to separate how an element is laid out on a page relative to itself, its neighbors, and its children. However don't take this as an exact definition as many css properties have effects on more than one of these relationships.

Layout Classes

These classes are generally self descriptive and mostly set position and display properties

Class Effect
.sme-layout-absolute Applies absolute positioning
.sme-layout-relative Applies relative positioning
.sme-layout-fixed Applies fixed positioning
.sme-layout-float-left Applies a left float
.sme-layout-float-right Applies a right float
.sme-layout-clearfix Applies SME's clearfix solution
.sme-layout-visible Makes the element visible using visibility: visible
.sme-layout-collapsed Collapses the element using visibility: collapsed
.sme-layout-hidden Hides the element using visibility: hidden
.sme-layout-inline Applies inline positioning to the element
.sme-layout-none Hides the element using display: none
.sme-layout-block Applies block level positioning to the element
.sme-layout-inline-block Applies inline-block positioning to the element

Position Classes

These classes are useful for performing common positioning techniques with various display and position types.

All of the spacing classes fall into this category as well.

Class Effect
.sme-position-center
.sme-position-center-h
.sme-position-center-v
Centers an element using absolute positioning techniques
.sme-position-center-h-block
Centers an element using techniques specific to non-absolute block elements
.sme-position-center-h-inline
.sme-position-left-inline
.sme-position-right-inline
Aligns an element horizontally using techniques specific to non-absolute inline elements
.sme-position-stretch
.sme-position-stretch-h
.sme-position-stretch-v
Stretches the element to fill the available space using height and width
.sme-position-flex-auto
.sme-position-flex-none
When in a flexbox arrangement such as a stack or wrapstack. Species if the element should be automatically sized by it's parents flexbox implementation
.sme-position-flex-align-stretch
.sme-position-flex-align-center
.sme-position-flex-align-start
.sme-position-flex-align-end
.sme-position-flex-align-baseline
When in a flexbox arrangement such as a stack or wrapstack. Species self alignment in the flexbox.
.sme-position-align-v-inline-top
.sme-position-align-v-inline-bottom
.sme-position-align-v-inline-middle
.sme-position-align-v-inline-text-top
.sme-position-align-v-inline-text-bottom
.sme-position-align-v-inline-sub
.sme-position-align-v-inline-super
Specifies the vertical alignment of an element
.sme-position-below
Absolutely positions an element to be below its parent element. Used for dropdowns and menus.

Arrangement Classes

Arrangement can be thought of as describing how an element deals with its children.

Class Effect
.sme-arrange-stack-h
.sme-arrange-stack-v
Directs children to stack vertically or horizontally within the element. If the element has a height, implicit or explicit, its children with the '.sme-position-flex-auto' class will stretch to fill any remaining space.
.sme-arrange-wrapstack-h
.sme-arrange-wrapstack-v
Same as 'stack', except with wrapping enabled.
.sme-arrange-stack-centered
Use in conjunction with stack or wrapstack. Orients child elements to be centered in the element
.sme-arrange-stack-reversed
Use in conjunction with stack or wrapstack. reverses the order and orientation of the stack such that items are aligned to the opposite edge than usual
.sme-arrange-ws-nowrap
.sme-arrange-ws-wrap
.sme-arrange-ws-preserve
.sme-arrange-ws-preserve-line
.sme-arrange-ws-preserve-wrap
Sets the whitespace property of the element.
.sme-arrange-ellipsis
Arranges for the ellipsis pattern to be used on this element. That is {{ '{' }} whitespace: nowrap, overflow: hidden, text-overflow:ellipses {{ '{' }}
.sme-arrange-overflow-[type]
.sme-arrange-overflow-[type]-[direction]
Sets overflow on an element. Allowed '[type]' values are 'auto', 'scroll', 'hide', and 'show'. The optional '-[direction]' may also be appended. Valid values for '[direction]' are 'x' and 'y'

Special Layout Classes

Some layouts require special settings that are not covered by the standard layout classes such as dialogs and dropdowns. For these cases, special layout classes have been provided.

Class Effect
.sme-layout-dialog-pane Applies layout rules for an action pane
.sme-layout-dialog-compact Applies layout rules for a compact action pane
.sme-layout-dialog-fullscreen Applies layout rules for a fullscreen dialog
.sme-layout-dialog-centered Applies layout rules for a centered dialog
.sme-layout-dialog-centered-large Applies layout rules for a large centered dialog
.sme-layout-dialog-compact-square Applies layout rules for a compacted square dialog
.sme-layout-dropdown Applies layout rules for dropdown
.sme-layout-legend-entry Applies layout rules for legend entry