Go one step further with our solutions for creating an intuitive, personalized experience.
The Haltura library has a content management system based on columns. Depending on the different media, it will be possible to restructure your project efficiently.
The h_container class encompasses the main content of your project with the following structure.
<div class="h_container">...</div>
Macroscopically, Haltura considers that the user path is vertical.
Following this principle, we will use the h_row class to create sections.
<div class="h_row">
<div class="layout-block-documentation"></div>
</div>
<div class="h_row">
<div class="layout-block-documentation"></div>
</div>
And finally, enter as many h_col as there are columns in each section.
<div class="h_row">
<div class="h_col">
<div class="layout-block-documentation">col</div>
</div>
<div class="h_col">
<div class="layout-block-documentation">col</div>
</div>
</div>
<div class="h_row">
<div class="h_col">
<div class="layout-block-documentation">col</div>
</div>
</div>
Naturally, the columns will stretch to the maximum length.
But it is possible to define the proportions of the columns with col_[X] (X being a number between 1 and 12, ex: col_6).
<div class="h_row">
<div class="h_col col_4">
<div class="layout-block-documentation">col_4</div>
</div>
<div class="h_col col_8">
<div class="layout-block-documentation">col_8</div>
</div>
</div>
<div class="h_row">
<div class="h_col col_9">
<div class="layout-block-documentation">col_9</div>
</div>
<div class="h_col col_3">
<div class="layout-block-documentation">col_3</div>
</div>
</div>
Finally, the proportions can vary with the different breakpoints. It will be necessary to make a precision via col_[X]--[R] (R being the breakpoint, e.g. col_5--t).
When the support is below this breakpoint, the columns will adapt with the other classes filled in.
<div class="h_row">
<div class="h_col col_5--m">
<div class="layout-block-documentation">col_5--m</div>
</div>
<div class="h_col col_7--s">
<div class="layout-block-documentation">col_7--s</div>
</div>
</div>
<div class="h_row">
<div class="h_col col_9--d col_4--s">
<div class="layout-block-documentation">col_9--d col_4--s</div>
</div>
<div class="h_col col_3">
<div class="layout-block-documentation">col_3</div>
</div>
</div>
<div class="h_row">
<div class="h_col col_5--m">
<div class="layout-block-documentation">col_5--m</div>
</div>
<div class="h_col col_7--s">
<div class="layout-block-documentation">col_7--s</div>
</div>
</div>
<div class="h_row">
<div class="h_col col_9--d col_4--s">
<div class="layout-block-documentation">col_9--d col_4--s</div>
</div>
<div class="h_col col_3">
<div class="layout-block-documentation">col_3</div>
</div>
</div>
| Class | Definition |
|---|---|
| h_container | Create a container. |
| h_row | Create a row. |
| col_[V] | Create a V/12 space col. |
| col_[V]--[B] | Create a V/12 space col 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