SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 214 visiteurs en ce moment

Accueil > Squelettes > Squelettes généralistes > SPIPr > LayoutGala dans SPIPr

LayoutGala dans SPIPr

23 mars 2015 – par Cerdic – commentaire

3 votes

Documentation source : http://spipr.nursit.com/layoutgala

Présentation

PNG - 19.5 ko

LayoutGala est un système de layout simple, robuste et flexible. Avec un unique Markup HTML il permet de réaliser une grande variété de disposition en CSS. Il favorise le référencement en permettant de positionner dans le HTML le contenu principal avant le contenu de navigation.

Ce système de layout a été ajouté au plugin BootStrap pour SPIP, sous formes de mixins LESS. Il est ainsi utilisable combinés aux media-queries pour faire varier la mise en page en fonction de la largeur de l’écran, et offre une alternative plus riche au système de layout basique proposé par BootStrap

Exemple d’utilisation

Pour utiliser un des mixins disponibles, il suffit de faire un @import et de l’appeler avec les arguments correspondants :

Structure HTML de la page et id

LayoutGala s’applique sur les selecteurs suivants :

  • #container
  • #wrapper
  • #content
  • #aside
  • #extra

La structure HTML minimale de la page pour y appliquer LayoutGala est la suivante :

La structure HTML de la page recommandée porte en plus des attributs class homonymes aux id, des classes primary et secondary sur le contenu principal et secondaire, ainsi qu’un header et un footer.

Layout Responsive

Les mixins LayoutGala sont combinés dans des media-queries pour construire un Layout qui s’adapte en fonction de la taille de l’écran, comme dans l’exemple complet ci-dessous :

Layouts disponibles

Les 16 layouts les plus utiles du système LayoutGala sont nativement inclus dans le plugin BootStrap pour SPIP.

Dans les syntaxes d’appel ci-dessous, les arguments ont les unités suivantes :

  • @Ncolxxx est un nombre de colonnes dans la grille BootStrap, de 1 à 12
  • @Wcolxxx est une largeur (Width) avec son unité (ex : 100%)
  • @gridColumnWidth est la largeur de la colonne de la grille
  • @gridGutterWidth est la largeur de la gouttière de la grille

Layout #7

3 colonnes en largeurs fixes : aside, content, extra

#layoutgala7 > .core(@NcolContent, @NcolAside, @NcolExtra, @gridColumnWidth, @gridGutterWidth)

Layout #8

3 colonnes en largeurs fixes : extra, content, aside

#layoutgala8 > .core(@NcolContent, @NcolAside, @NcolExtra, @gridColumnWidth, @gridGutterWidth)

Layout #9

3 colonnes en largeurs fixes : content, aside, extra

#layoutgala9 > .core(@NcolContent, @NcolAside, @NcolExtra, @gridColumnWidth, @gridGutterWidth)

Layout #10

3 colonnes en largeurs fixes : content, extra, aside

#layoutgala10 > .core(@NcolContent, @NcolAside, @NcolExtra, @gridColumnWidth, @gridGutterWidth)

Layout #11

3 colonnes en largeurs fixes : aside, extra, content

#layoutgala11 > .core(@NcolContent, @NcolAside, @NcolExtra, @gridColumnWidth, @gridGutterWidth)

Layout #12

3 colonnes en largeurs fixes : extra, aside, content

#layoutgala12 > .core(@NcolContent, @NcolAside, @NcolExtra, @gridColumnWidth, @gridGutterWidth)

Layout #27

content en pleine largeur, aside et extra en 2 colonnes en dessous

#layoutgala27 > .core(@WcolContent, @WcolAside, @WcolExtra, @gridColumnWidth, @gridGutterWidth)

Layout #28

content en pleine largeur, extra et aside en 2 colonnes en dessous

#layoutgala28 > .core(@WcolContent, @WcolAside, @WcolExtra, @gridColumnWidth, @gridGutterWidth)

Layout #33

2 colonnes en largeurs fixes : content, et une colonne aside+extra

#layoutgala33 > .core(@NcolContent, @NcolAside, @NcolExtra, @gridColumnWidth, @gridGutterWidth)
@NcolAside et @NcolExtra ont en général la même valeur.

Layout #34

2 colonnes en largeurs fixes : une colonne aside+extra et une colonne content

#layoutgala34 > .core(@NcolContent, @NcolAside, @NcolExtra, @gridColumnWidth, @gridGutterWidth)
@NcolAside et @NcolExtra ont en général la même valeur.

Layout #35

2 colonnes en largeurs fixes : une colonne content+extra, et une colonne aside

#layoutgala35 > .core(@NcolContent, @NcolAside, @NcolExtra, @gridColumnWidth, @gridGutterWidth)

Layout #36

2 colonnes en largeurs fixes : une colonne aside, et une colonne content+extra

#layoutgala36 > .core(@NcolContent, @NcolAside, @NcolExtra, @gridColumnWidth, @gridGutterWidth)

Layout #37

2 colonnes en largeurs fixes : une colonne content et une colonne aside. extra en dessous des deux.

#layoutgala37 > .core(@NcolContent, @NcolAside, @NcolExtra, @gridColumnWidth, @gridGutterWidth)

Layout #38

2 colonnes en largeurs fixes : une colonne aside et une colonne content. extra en dessous des deux.

#layoutgala38 > .core(@NcolContent, @NcolAside, @NcolExtra, @gridColumnWidth, @gridGutterWidth)

Layout #39

content en largeur fixe, aside et extra en deux colonnes de largeurs fixes en dessous.

#layoutgala39 > .core(@NcolContent, @NcolAside, @NcolExtra, @gridColumnWidth, @gridGutterWidth)

Layout #40

content en largeur fixe, extra et aside en deux colonnes de largeurs fixes en dessous.

#layoutgala40 > .core(@NcolContent, @NcolAside, @NcolExtra, @gridColumnWidth, @gridGutterWidth)

Dernière modification de cette page le 23 mars 2015

Retour en haut de la page

Vos commentaires

Répondre à cet article

Qui êtes-vous ?
  • [Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Cycle2

    7 août 2014 – 104 commentaires

    La seconde version de la librairie Javascript « jQuery Cycle », qui permet de produire des diaporamas, se nomme « Cycle2 » : http://jquery.malsup.com/cycle2/. Voici cette nouvelle librairie mise en plugin pour SPIP. Si vous utilisez déjà « jQuery (...)

  • CleverMail

    20 janvier 2010 – 635 commentaires

    CleverMail est un plugin permettant d’envoyer des lettres d’informations à des abonnés depuis SPIP. Issu au départ d’un développement libre complètement indépendant de SPIP, il a connu une première version pour SPIP 1.9 avant d’être complètement réécris (...)

  • SPMC : Squelette par mot clé V2.0

    21 septembre 2009 – 48 commentaires

    Ce plugin prend la suite de squelette par mot clef V1.92 qui ne fonctionnait plus sous SPIP 2.0.x. Avec l’accord de Mortimer qui n’a plus le temps de le maintenir, je prend donc la suite. Présentation du plugin « Squelette par mot clé V2.0 » Le (...)

  • Sarka-SPIP 3

    15 septembre 2009 – 211 commentaires

    Si la lignée 3 de Sarka-SPIP a été l’occasion de refaire presque entièrement le code du squelette elle continue à évoluer et à s’améliorer au fil des versions. Nous ne saurions trop conseiller aux nouveaux utilisateurs - et aussi aux anciens - (...)

  • Paiement avec Formidable

    16 février 2015 – 53 commentaires

    Ce plugin « Paiement avec Formidable » permet d’ajouter une étape de paiement à la fin de la saisie d’un formulaire créé par le plugin Formidable. Il le complète et nécessite par ailleurs le plugin bank qui gère l’interface technique avec les prestataires (...)