Device responsiveness
Elephant uses by default Fomantic UI as the web framework. It's intended for visual layouts and responsiveness. What it means is, the user browser will carry the work of laying out components, through CSS/JavaScript.
CSS and JavaScript to accomplish the same results would mean a lot of markup and code. In that sense, the framework does the job, while Wiki and Wmacros take out the HTML boilerplate.
The examples we'll see may help to create complex layouts, by showing/hiding/changing elements depending on the device or screen size. It's important not to abuse these classes, since the final HTML will include all the variations, letting the user's browser decide what to show.
| class | Description |
|---|---|
| widescreen | Intended for widescreens. |
| large screen | Intended for large screens, smaller or equal to widescreens. |
| computer | Inteded for computers, smaller or equal to large screens. |
| tablet | Intended for tables, smaller or equal to computer. |
| mobile | Intended for smartphones, smaller or equal to table. |
These classes can be added to the Wmacros' class, and don't need a page reload to work. That means, they will be sensible to browser size changes, and show or hide accordingly.
Specialized classes for collection containers
| class | Container | Description |
|---|---|---|
| doubling | grid | Doubles column widths for each device jump. Final reducing size step is much as in stackable. |
| stackable | table and grid | On mobile, the columns will stack, taking full width. |
| container | grid | Makes a grid self-contained, adding responsive margins. |
| only | any | Added to widescreen, large screen, computer, tablet, mobile, from previous table, will make the content visible only when the device is met. |
| reversed | grid | Added to widescreen, large screen, computer, tablet, mobile, from previous table, will reserve columns order. |
| vertically reversed | grid | Added to widescreen, large screen, computer, tablet, mobile, from previous table, will reserve rows order. |
Advanced classes for element's display
These classes take into account elements' display mode. Use only if you feel comfortable with this attribute.
The name's start indicates the type of display it will be used: block, inline, flex and table-cell.
| class | Description |
|---|---|
| blockcomputer | Block display when computer. Otherwise, none. |
| inlinecomputer | Inline display when computer. Otherwise, none. |
| flexcomputer | Flex display when computer. Otherwise, none. |
| tablecellcomputer | Table-cell display when computer. Otherwise, none. |
| blockdevice | Block display when device. Otherwise, none. |
| inlinedevice | Inline display when device. Otherwise, none. |
| flexdevice | Flex display when device. Otherwise, none. |
| tablecelldevice | Table-cell display when device. Otherwise, none. |
| English | 07/25/26 02:09 | Lluís Turró Cutiller | |
| English | 07/26/26 04:27 | Lluís Turró Cutiller | |
| English | 07/29/26 10:25 | Lluís Turró Cutiller | |
| English | 08/01/26 02:58 | Lluís Turró Cutiller | |
| English | 08/03/26 06:44 | Lluís Turró Cutiller |
