Using containers
Previous tutorials have shown stripes, which you might say, are containers. This tutorial aims to show other containers, who's main use is to provide margins, paddings along with stripe-like colors and framework colors. Following tutorials explain in more detail how colors work.
Segments
Segments and solids are containers with its own margins. They provide an easy way to add content and show it is related. We have used segments when providing examples, and we'll continue to do so.
This text is enclosed in a segment.
@w{segment}
This text is enclosed in a segment.
@w{/segment}
Segments can be basic, respecting the same margins, but without border.
@w{segment(class=basic)}
Segments can be **basic**, respecting the same margins, but without border.
@w{/segment}
Segments can have framework colors...
@w{segment(class=blue)}
Segments can have framework colors...
@w{/segment}
...and use them as background.
@w{segment(class=inverted blue)}
...and use them as background.
@w{/segment}
Solids
Solids are basically segments tuned to allow systems colors.
This text is enclosed in a solid.
@w{solid(color=c2)}
This text is enclosed in a solid.
@w{/segment}
Solids use a different way to decide the font color, but the result is similar.
This text is enclosed in a solid.
@w{solid(color=primary)}
This text is enclosed in a solid.
@w{/segment}
Solids can also use background images.
@w{solid(image=repository(/bg-example.png))}
Solids can also use background images.
@w{/segment}
Transparent
By default, segments and solids have a background. transparent is an easy way to use segments that use their container background.
This text is enclosed in a segment.
@w{transparent}
This text is enclosed in a segment.
@w{/transparent}
| English | 07/17/26 23:55 | Lluís Turró Cutiller | |
| English | 07/20/26 04:52 | Lluís Turró Cutiller |
