Go one step further with our solutions for creating an intuitive, personalized experience.
Take advantage of the Position utility class to easily position your components.
First, position your elements with the relative, static, sticky, absolute and fixed classes.
<div class="static"></div>
<div class="relative"></div>
<div class="sticky"></div>
<div class="absolute"></div>
<div class="fixed"></div>
You can add breakpoints to these classes: relative--[B], static--[B], sticky--[B], absolute--[B] and fixed--[B] (e.g. fixed--t, absolute--m, static--d).
<div class="static--d"></div>
<div class="relative--s"></div>
<div class="sticky--l"></div>
<div class="absolute--m"></div>
<div class="fixed--t"></div>
For some of these classes, you can adjust the positioning with top_[V], right_[V], bottom_[V] or left_[V].
Here [V] defines:
- Either a pixel value between 0 and 200 with a step of 5 (e.g. top_50px, right_175px).
- Or a value in percentage between 0 and 100 with a step of 5 (e.g. bottom_35, left_100).
<div class="relative height_200px bg_background-invert-10">
<div class="absolute top_0 left_0 width_50px height_50px bg_primary"></div>
<div class="absolute bottom_50 right_50 width_50px height_50px bg_primary"></div>
<div class="absolute top_50 left_50 width_50px height_50px bg_primary"></div>
</div>
Here is the final structure of these classes top_[V]--[B], right_[V]--[B], bottom_[V]--[B] and left_[V]--[B].
[B] corresponds to breakpoints, e.g. top_55--t, right_150px--m.
<div class="relative height_200px bg_background-invert-10">
<div class="absolute top_0--t left_0 width_50px height_50px bg_primary"></div>
<div class="absolute bottom_50 right_50--d width_50px height_50px bg_primary"></div>
<div class="absolute top_50 left_50--m width_50px height_50px bg_primary"></div>
</div>
Finally, you can adjust the positioning with translate_center--[B], translate-x_center--[B], translate-y_center--[B].
These classes create an offset to center your element (e.g. translate_center--t, translate-x_center).
<div class="relative m_3 height_200px bg_background-invert-10">
<div class="absolute top_0 left_0 translate_center width_50px height_50px bg_primary"></div>
<div class="absolute top_50 left_50 translate_center width_50px height_50px bg_primary"></div>
<div class="absolute bottom_0 left_100 translate-x_center--t width_50px height_50px bg_primary"></div>
</div>
<div class="relative height_200px bg_background-invert-10">
<div class="absolute top_0 left_0 width_50px height_50px bg_primary"></div>
<div class="absolute bottom_50 right_50 width_50px height_50px bg_primary"></div>
<div class="absolute top_50 left_50 width_50px height_50px bg_primary"></div>
</div>
<div class="relative height_200px bg_background-invert-10">
<div class="absolute top_0--t left_0 width_50px height_50px bg_primary"></div>
<div class="absolute bottom_50 right_50--d width_50px height_50px bg_primary"></div>
<div class="absolute top_50 left_50--m width_50px height_50px bg_primary"></div>
</div>
<div class="relative m_3 height_200px bg_background-invert-10">
<div class="absolute top_0 left_0 translate_center width_50px height_50px bg_primary"></div>
<div class="absolute top_50 left_50 translate_center width_50px height_50px bg_primary"></div>
<div class="absolute bottom_0 left_100 translate-x_center--t width_50px height_50px bg_primary"></div>
</div>
| Class | Definition |
|---|---|
| static | position: static. |
| relative | position: relative. |
| absolute | position: absolute. |
| fixed | position: fixed. |
| sticky | position: sticky. |
| static--[B] | position: static at the breakpoint [B]. |
| relative--[B] | position: relative at the breakpoint [B]. |
| absolute--[B] | position: absolute at the breakpoint [B]. |
| fixed--[B] | position: fixed at the breakpoint [B]. |
| sticky--[B] | position: sticky at the breakpoint [B]. |
| top_[V] | top: [V]%. |
| top_[V]px | top: [V]px. |
| top_[V]--[B] | top: [V]% at the breakpoint [B]. |
| top_[V]px--[B] | top: [V]px at the breakpoint [B]. |
| right_[V] | right: [V]%. |
| right_[V]px | right: [V]px. |
| right_[V]--[B] | right: [V]% at the breakpoint [B]. |
| right_[V]px--[B] | right: [V]px at the breakpoint [B]. |
| bottom_[V] | bottom: [V]%. |
| bottom_[V]px | bottom: [V]px. |
| bottom_[V]--[B] | bottom: [V]% at the breakpoint [B]. |
| bottom_[V]px--[B] | bottom: [V]px at the breakpoint [B]. |
| left_[V] | left: [V]%. |
| left_[V]px | left: [V]px. |
| left_[V]--[B] | left: [V]% at the breakpoint [B]. |
| left_[V]px--[B] | left: [V]px at the breakpoint [B]. |
Haltura wants to provide you with an efficient experience by implementing cookies! Cookies are small files that help us to understand you better and to ensure the proper functioning of our technologies. You have the right to manage them as you wish!
Cookie settings