À 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).

Donc on sépare généralement les directives de layout (containers, column), des éléments eux memes (boutons, titres, etc).

.content

Dans bulma, classe content 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

26$

Abo hebdo

pour 12 mois

Plus de détails

Possibilité de se désabonner à tout moment

2$

Abo hebdo

pour 12 mois

Et encore plusssss###

Plus de détails

Possibilité de se désabonner à tout moment

2$

Abo hebdo

pour 12 mois

Et encore plussss sur deux lignes ###### s###

Plus de détails

Possibilité de se désabonner à tout moment

2$

Abo hebdo

pour 12 mois

Et encore plusssss###

Plus de détails

Possibilité de se désabonner à tout moment

3 items, avec marges de 1 col. (pas calé sur la grille, mais semble corespondre au design XD)

26$

Abo hebdo

pour 12 mois

Plus de détails

Possibilité de se désabonner à tout moment

2$

Abo hebdo

pour 12 mois

Et encore plussss sur deux lignes ###### s###

Plus de détails

Possibilité de se désabonner à tout moment

2$

Abo hebdo

pour 12 mois

Et encore plusssss###

Plus de détails

Possibilité de se désabonner à tout moment

* 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

Toggle grid overlay false

Champs

Courriel

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 dans listItem.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

normal

thin

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

N&B:

Boutons

Colones

6+6

is-6

6

5+1+6

is-5

1

6

4+4+4

is-4

4

4

3+3+3+3

is-3

3

3

3

5+1+1+1...

is-5

1

1

1

1

1

1

1

Bloc marketing

De grands regards de cinéastes renouvelés chaque semaine

Près de 40 documentaires choisis et défendus par des passionné·e·s

Plus de 150 œuvres rares accessibles en location

Des classiques, des nouveautés, des films issus de festivals ou d’écoles, affranchis du formatage médiatique

5 nouveaux films tous les vendredis disponibles pendant 2 mois

Première semaine gratuite!

Formulaires

Open burger

Choix de souscription

$10

Formule mensuelle

Première semaine gratuite*

Plus de détails

Possibilité de se désabonner à tout moment

$55

Formule six mois

Plus de détails

Possibilité de se désabonner à tout moment

$100

Formule annuelle

Soit deux mois offerts!

Plus de détails

Possibilité de se désabonner à tout moment

$120

Solidaire - 1 an

Abonnement solidaire pour nous témoigner votre soutien!

Plus de détails

Possibilité de se désabonner à tout moment

skeleton et loader