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