Device responsive
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.
Diving into
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 takes 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 | grid | 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. |
| English | 07/25/26 02:09 | Lluís Turró Cutiller |
