À propos de la mise en page
Pour assembler les éléments en interface, il y a quelques règles.
La hiérarchie des éléments:
section > div.container > div.columns > div.column
On ne doint jamais imbriqué plusieurs containers les uns
dans les autres, mais on devrait toujours en avoir un pour tous les
contenus. Leur marges servent à normalisé la largeur du site sur les
différents écran. Il en est de même pour les autres tags de "layout",
à l'exception des la séquence columns > column , qui elle
peut être récursive (en sachant bien que les 12 colones des
sous-grilles représente une fraction de la largeur du parent; donc
impossible à aligner convenablement dans une colone flexible ou de
5-col de large par exemple).
Tous ces éléments ont leur propre règles de marges, lorsqu'on assigne
ces classes à d'autres éléments )comme h1, ou
li, ça peut créer des effets imprévisible (puisque ces
éléments ont aussi souvent leur propres règles d'affichages).
.content
Dans bulma, classecontent est réservé pour l'affichage
du contenu html provenant d'un CMS. Ça permet d'appliquer des styles
par défaut pour les listes, titre, paragraphes, etc. C'est donc un
autre éléments qui peut créer des bogues visuels si on l'applique sur
différents tags. C'est un nom de classe pratique, mais vaut mieux
l'éviter. Pour les pages d'infos par contre (où le HTML vient de
Kinow) c'est idéal.
cartes : plans
* petit texte en dessous #####
notification .outlined
Abonnement groupé###
That's it. If it can be multiple lines, then it is somewhat more complicated. But there are solutions on http://pmob.co.uk/. Look for "vertical align".
Abonnement groupé###
That's it. If it can be multiple lines, then it is somewhat more complicated. But there are solutions on http://pmob.co.uk/. Look for "vertical align".
Démo 🎨
Grille
Champs
Spacers
Pour espacé verticalement des items de façon consistante
class =spacer s spacer m (default size)
spacer l spacer xl spacer xxl
Tailles
$margin-s: 5px;
$margin-m: 10px;/* default */
$margin-l: 20px;
$margin-xl: 40px;
$margin-xl: 80px;
Demo carou-rail
👨💻 Le composent d'item sont danslistItem.vue Couleurs
$blue: #1FECFE;
$lg aka $light-gray: #f9f9f9;
$g aka $gray: #A0A0A0;
$black: #000;
$white: #fff;
Voir base.scss pour les détails
Bloc image + texte
Nom de Bob
Nom de Bob
Bacon ipsum dolor amet beef ribs kielbasa corned beef pork be lly t-bone salami drumstick meatball cow. Pig strip steak pork ground round prosciutto sausage short loin ribeye chuck shankle tri-tip frankfurter tail meatloaf filet mignon. Cupim pork chop doner tri-tip, ham tail bee f sirloin shoulder turkey cow ham hock short loin chicken kielbasa. Pancetta venison ham hock, pork
dividers
normalthin
fat
.title .xl Titles (XL)
.title.outlined Outlined & contour 🕊️
.l Title L
.m Title M
.title .s Title S
.xs Title xs
.l Large Bacon ipsum dolor amet buffalo kielbasa filet mignon kevin frankfurter ham hock beef biltong pancetta boudin bacon shank meatball beef ribs
.m someothertag span Medium Bacon ipsum dolor amet buffalo kielbasa filet mignon kevin frankfurter ham hock beef biltong pancetta boudin bacon shank meatball beef ribs.
.s span Small Bacon ipsum dolor amet buffalo kielbasa filet mignon kevin frankfurter ham hock beef biltong pancetta boudin bacon shank meatball beef ribs.
XS Bacon ipsum dolor amet buffalo kielbasa filet mignon kevin frankfurter ham hock beef biltong pancetta boudin bacon shank meatball beef ribs.
Para sur 8 cols (tel que sur la page "événement"
p class="max8cols" ... ou via de vrais colones pour plus de
précision:
Des grands auteurs de l’histoire du cinéma documentaire, de ses orgines jusqu’à ses productions les plus récentes. Une exploration de la variété des écritures, des approches et des formes du documentaire, à travers les œuvres de cinéastes majeurs ou de réalisateurs émergents.
Tailles
Voir base.scss pour dernière version...
$xs: 12px; /* use only for special cases */
$s: 16px;
$m: 22px;
$l: 36px;
$xl: 96px;
/* mobile sizes */
$xs-m: 12px; /* use only for special cases */
$s-m: 15px;
$m-m: 18px;
$l-m: 24px;
$xl-m: 40px;
Icons
sizes
size: S
size: M
size: L
Images
Boutons
Colones
6+6is-6
6
is-5
1
6
is-4
4
4
is-3
3
3
3
is-5
1
1
1
1
1
1
1
Bloc marketing
Des regards de cinéastes sur le réel.
Des documentaires choisis à la main, défendus par nos programmateur·rices.
Hassen Ferhani, Alice Diop, Marie Losier… Retrouvez leurs films dans notre catalogue de 1 700 œuvres accessibles en location.
Tout un monde documentaire, un monde cinématographique qui résiste et crée, contre toutes les images qui nous envahissent.
Chaque semaine, en tant qu'abonné·e, offrez gratuitement un film à un proche.
Abonnez-vous pour 1€
Formulaires
Choix de souscription
skeleton et loader
