Utility classes
Elephant provides a set of utility classes. Most of them can be applied to any element, Wmacros and Wiki tags.
Shadows
Text based shadows can be applied to containers or regular elements. Provides a text based shadow, including icons and emojis.
textShadow
darkShadow
textShadow
darkShadow
@w{grid(class=two column center aligned)}
@w{column(class=textShadow)}
%icon-teal user huge%
textShadow
@w{/column}
@w{column(class=darkShadow)}
%icon-teal user huge%
darkShadow
@w{/column}
@w{/grid}
Box shadow classes can be applied to containers or regular elements.
boxShadow
darkBoxShadow
bottomShadow
topShadow
leftShadow
rightShadow
topInnerShadow
bottomInnerShadow
@w{grid(class=padded four column center aligned)}
@w{column(class=boxShadow)}boxShadow@w{/column}
@w{column(class=darkBoxShadow)}darkBoxShadow@w{/column}
@w{column(class=bottomShadow)}bottomShadow@w{/column}
@w{column(class=topShadow)}topShadow@w{/column}
@w{column(class=leftShadow)}leftShadow@w{/column}
@w{column(class=rightShadow)}rightShadow@w{/column}
@w{column(class=topInnerShadow)}topInnerShadow@w{/column}
@w{column(class=bottomInnerShadow)}bottomInnerShadow@w{/column}
@w{/grid}
Backgrounds
Background classes provide an easy way to change background colors. Notice that highlights require a background color or image.
softBackground and darkerBackground look the same with white background. The difference is that darkerBackground will create a darker version of current background, even if it is an image.
softBackground
darkerBackground
linearHighlight
radialHighlight
@w{grid(class=padded four column center aligned)}
@w{column(class=softBackground)}softBackground@w{/column}
@w{column(class=darkerBackground)}darkerBackground@w{/column}
@w{column(class=blue linearHighlight)}linearHighlight@w{/column}
@w{column(class=green radialHighlight)}radialHighlight@w{/column}
@w{/grid}
Effects
Effects are CSS based transitions. Shine, as it happened with highlights, requires a background color.
shine-gradient
scaleHover
@w{grid(class=padded two column center aligned)}
@w{column(class=orange shine-gradient)}shine-gradient@w{/column}
@w{column(class=scaleHover)}scaleHover@w{/column}
@w{/grid}
Fonts
Font color classes affect fonts and icons. Notice that we are using a
div container inside the columns, to prevent the color colliding with column background color. Usually you will prefer using the inline Wmacro, the example is provided for rare cases where the color can't be forced.
el-text red
el-text orange
el-text yellow
el-text olive
el-text green
el-text teal
el-text blue
el-text violet
el-text purple
el-text pink
el-text brown
el-text grey
@w{grid(class=padded four column center aligned)}
@w{column}[div(class:el-text red)]el-text red[/div]@w{/column}
@w{column}[div(class:el-text orange)]el-text orange[/div]@w{/column}
@w{column}[div(class:el-text yellow)]el-text yellow[/div]@w{/column}
@w{column}[div(class:el-text olive)]el-text olive[/div]@w{/column}
@w{column}[div(class:el-text green)]el-text green[/div]@w{/column}
@w{column}[div(class:el-text teal)]el-text teal[/div]@w{/column}
@w{column}[div(class:el-text blue)]el-text blue[/div]@w{/column}
@w{column}[div(class:el-text violet)]el-text violet[/div]@w{/column}
@w{column}[div(class:el-text purple)]el-text purple[/div]@w{/column}
@w{column}[div(class:el-text pink)]el-text pink[/div]@w{/column}
@w{column}[div(class:el-text brown)]el-text brown[/div]@w{/column}
@w{column}[div(class:el-text grey)]el-text grey[/div]@w{/column}
@w{/grid}
Font size classes affect fonts, icons and emojis. Both classes force font size to be 30% bigger. While
bigger is relative to the container, rbigger is based on page's font size.
bigger
rbigger
@w{grid(class=padded two column center aligned)}
@w{column(class=bigger)}bigger@w{/column}
@w{column(class=rbigger)}rbigger@w{/column}
@w{/grid}
Columns
Column related classes are an easy way to create text columns within a container.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@w{segment(class=two-columns)}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@w{/segment}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@w{segment(class=three-columns)}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@w{/segment}
| English | 07/19/26 06:22 | Lluís Turró Cutiller | |
| English | 07/20/26 23:23 | Lluís Turró Cutiller |
