DF-CSS Columns: Difference between revisions
From DiviFree
(Created page with "DF-CSS >> DF-CSS Columns ==Concepts de base== Ce framework CSS : * Permet une mise en page par colonnes facile et compatible avec Divi * Est mobile First * Gère les breakpoints (sm / md / lg / xl / xxl) - voir DF-CSS Breakpoints * Permet de gérer des padding entre les colonnes * Permet l'utilisation de rows/cols en cascade (ex: des colonnes dans des colonnes) * Peut être utilisé avec ou sans divi * Utilise Flex pour toutes les mise en page en colonnes ==Row...") |
No edit summary |
||
| Line 20: | Line 20: | ||
<pre> | <pre> | ||
<div class="df-row"> | <div class="df-row"> | ||
<div class="df-md-col-50 df-lg-col-25"></div> | <div class="df-md-col-50 df-lg-col-25">...</div> | ||
<div class="df-md-col-50 df-lg-col-25"></div> | <div class="df-md-col-50 df-lg-col-25">...</div> | ||
<div class="df-md-col-50 df-lg-col-25"></div> | <div class="df-md-col-50 df-lg-col-25">...</div> | ||
<div class="df-md-col-50 df-lg-col-25"></div> | <div class="df-md-col-50 df-lg-col-25">...</div> | ||
</div> | </div> | ||
</pre> | </pre> | ||
| Line 30: | Line 30: | ||
<pre> | <pre> | ||
<div class="df-row df-md-cols-2 df-lg-cols-4"> | <div class="df-row df-md-cols-2 df-lg-cols-4"> | ||
<div class="df-col"></div> | <div class="df-col">...</div> | ||
<div class="df-col"></div> | <div class="df-col">...</div> | ||
<div class="df-col"></div> | <div class="df-col">...</div> | ||
<div class="df-col"></div> | <div class="df-col">...</div> | ||
</div> | </div> | ||
</pre> | </pre> | ||
Cas en utilisant les colonnes de Divi | |||
<pre> | |||
<div class="df-row"> | |||
<div class="et_pb_column_1_4 df-md-col-50">...</div> | |||
<div class="et_pb_column_1_2 df-md-col-50">...</div> | |||
<div class="et_pb_column_1_4 df-md-col-50">...</div> | |||
</div> | |||
</pre> | |||
==Row & Colonnes Responsives== | |||
<pre>df-{breakpoint}-col-{width}</pre> | |||
Breakpoints : sm / md / lg / xl / xxl | |||
Largeurs supportées : | |||
* df-col-10 : 10% | |||
* df-col-16 : 16.667% (1/6) | |||
* df-col-20 : 20% (1/5) | |||
* df-col-25 : 25% (1/4) | |||
* df-col-30 : 30% | |||
* df-col-33 : 33.333% (1/3) | |||
* df-col-40 : 40% | |||
* df-col-50 : 50% (1/2) | |||
* df-col-60 : 60% | |||
* df-col-66 : 66.667% (2/3) | |||
* df-col-75 : 75% (3/4) | |||
* df-col-80 : 80% | |||
* df-col-90 : 90% | |||
* df-col-100 : 100% | |||
Latest revision as of 16:38, 27 February 2023
DF-CSS >> DF-CSS Columns
Concepts de base
Ce framework CSS :
- Permet une mise en page par colonnes facile et compatible avec Divi
- Est mobile First
- Gère les breakpoints (sm / md / lg / xl / xxl) - voir DF-CSS Breakpoints
- Permet de gérer des padding entre les colonnes
- Permet l'utilisation de rows/cols en cascade (ex: des colonnes dans des colonnes)
- Peut être utilisé avec ou sans divi
- Utilise Flex pour toutes les mise en page en colonnes
Row & Colonnes Responsives
Exemple simple 1 Row / 4 colonnes reponsives
- En mode téléphone : 4 lignes de 100%
- En mode tablette : 2 lignes de 2 colonnes (50%)
- En mode Desktop: 1 ligne de 4 colonnes (25%)
Cas en utilisant les largeurs des colonnes
<div class="df-row"> <div class="df-md-col-50 df-lg-col-25">...</div> <div class="df-md-col-50 df-lg-col-25">...</div> <div class="df-md-col-50 df-lg-col-25">...</div> <div class="df-md-col-50 df-lg-col-25">...</div> </div>
Cas en utilisant le nombre de colonnes
<div class="df-row df-md-cols-2 df-lg-cols-4"> <div class="df-col">...</div> <div class="df-col">...</div> <div class="df-col">...</div> <div class="df-col">...</div> </div>
Cas en utilisant les colonnes de Divi
<div class="df-row"> <div class="et_pb_column_1_4 df-md-col-50">...</div> <div class="et_pb_column_1_2 df-md-col-50">...</div> <div class="et_pb_column_1_4 df-md-col-50">...</div> </div>
Row & Colonnes Responsives
df-{breakpoint}-col-{width}
Breakpoints : sm / md / lg / xl / xxl
Largeurs supportées :
- df-col-10 : 10%
- df-col-16 : 16.667% (1/6)
- df-col-20 : 20% (1/5)
- df-col-25 : 25% (1/4)
- df-col-30 : 30%
- df-col-33 : 33.333% (1/3)
- df-col-40 : 40%
- df-col-50 : 50% (1/2)
- df-col-60 : 60%
- df-col-66 : 66.667% (2/3)
- df-col-75 : 75% (3/4)
- df-col-80 : 80%
- df-col-90 : 90%
- df-col-100 : 100%
