Exist il une grille de référence (hors b2)

micker
Offline Topic Author
Platinum Member
Posts: 1145
Thanks: 27

Exist il une grille de référence (hors b2) was created by micker

Posted 6 years 1 month ago #47189

Hello voila je me posé une question
je sais que template creator peut se passé de bootstrap pour le responsive .... je bosse sur un site quasi full largeur et la pour travailler mes contenus j'aime bien re utilisé les class css responsive du composant ...
au dela de 1200px b2 commence a bien foiré .....
template créator a t il un grille réutilisable facilement pour faire du 3/4 1/4 etc ? si oui tu aurais un bout de doc pour m'eviter de chercher partout ?
on sinon je suis pret a test tcck 4 qui devrait avoir moins de soucis(ton testeur fous adoré)
Merci

by micker

Please Log in or Create an account to join the conversation.

ced1870
Offline
Administrator
Posts: 29116
Thanks: 3703

Replied by ced1870 on topic Exist il une grille de référence (hors b2)

Posted 6 years 1 month ago #47193

salut

ton testeur fous adoré

lol
je n'ai pas de grille, mais c'est une bonne question. Je me suis aussi déjà fait la remarque que pour aligner du contenu c'est galère
on peut construire ça ensemble si tu veux

Imaginons une grille de 12 colonnes, tu aimes flexbox ?

Je regarde ça et je te dis d'ici qq min
CEd

PS : TCK 4 n'est pas encore dispo pour tests, j'ai encore pas mal de choses à faire fonctionner avant les premières expériences utilisateurs. Mais je te ferai signe !

Joomlack Webmaster and Developer

by ced1870

Please Log in or Create an account to join the conversation.

ced1870
Offline
Administrator
Posts: 29116
Thanks: 3703

Replied by ced1870 on topic Exist il une grille de référence (hors b2)

Posted 6 years 1 month ago #47194

tiens essaie ça :

Code:

[class*="tck-"][class*="cols"] {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

/* no gutter */
.tck-2cols > * {
	width: 50%;
}

.tck-3cols > * {
	width: 33.333%;
}

.tck-4cols > * {
	width: 25%;
}
.tck-8cols > * {
	width: 12.5%;
}

/* gutter 10px */
.tck-2cols.tck-gutter-10 > * {
	width: calc((100% - 10px) / 2);
}

.tck-3cols.tck-gutter-10 > * {
	width: calc((100% - 2 * 10px) / 3);
}

.tck-4cols.tck-gutter-10 > * {
	width: calc((100% - 3 * 10px) / 4);
}
.tck-8cols.tck-gutter-10 > * {
	width: calc((100% - 7 * 10px) / 8);
}

exemple d'utilisation

Code:

<div class="tck-2cols">
<div>test1</div>
<div>test1</div>
</div>
<div class="tck-4cols">
<div>test2</div>
<div>test2</div>
<div>test2</div>
<div>test2</div>
</div>
<div class="tck-8cols">
<div>test3</div>
<div>test3</div>
<div>test3</div>
<div>test3</div>
<div>test3</div>
<div>test3</div>
<div>test3</div>
<div>test3</div>
</div>

si tu veux ajouter la gouttière de 10px:

Code:

<div class="tck-2cols tck-gutter-10">
<div>test1</div>
<div>test1</div>
</div>

qu'en penses-tu ?

Joomlack Webmaster and Developer

by ced1870

The following user(s) said Thank You: c-line

Please Log in or Create an account to join the conversation.

micker
Offline Topic Author
Platinum Member
Posts: 1145
Thanks: 27

Replied by micker on topic Exist il une grille de référence (hors b2)

Posted 6 years 1 month ago #47197

ok je vais regardé merci

by micker

Please Log in or Create an account to join the conversation.

c-line
Offline
New Member
Posts: 19
Thanks: 1

Replied by c-line on topic Exist il une grille de référence (hors b2)

Posted 6 years 1 month ago #47207

Mais ...
On dirait bien un début de FrameworkCK !

by c-line

Please Log in or Create an account to join the conversation.

ced1870
Offline
Administrator
Posts: 29116
Thanks: 3703

Replied by ced1870 on topic Exist il une grille de référence (hors b2)

Posted 6 years 1 month ago #47208

lol
mais je ne sais pas si ça marche, vu que Yannick ne donne plus de news, ce qui est assez surprenant

Joomlack Webmaster and Developer

by ced1870

Please Log in or Create an account to join the conversation.