Prévisualisation Style guide @cContainer [New window]

Contenu du container

Contenu du container "fluid"

Macro 

        <@cContainer class='mb-5'>
            <@cBlock class='white-light-bg-color p-sm'>
                <@cTitle level='3' class="main-info-color">Contenu du container</@cTitle>
            </@cBlock>
        </@cContainer>
        <@cContainer type='fluid'>
            <@cBlock class='white-light-bg-color p-sm'>
                <@cTitle level='3' class="main-info-color">Contenu du container "fluid"</@cTitle>
            </@cBlock>
        </@cContainer>

Html 

<div class="container mb-5">
<div class="white-light-bg-color p-sm">
<h3 class="main-info-color">
Contenu du container</h3>
</div>
</div>
<div class="container-fluid">
<div class="white-light-bg-color p-sm">
<h3 class="main-info-color">
Contenu du container "fluid"</h3>
</div>
</div>

Les paramètres

  • @param - id - string - optional - identifiant unique du container
  • @param - class - string - optional - classe(s) css du container
  • @param - type - string - optional - le type de container, en ajoutant la valeur '-fluid' il prend toute la largeur
  • @param - params - string - optional - permet d'ajouter des paramètres HTML au container

Macro 

        <@cRow>
            <!-- Contenu en colonne -->
        </@cRow>

Html 

<div class="row ">
<!-- Contenu en colonne -->
<p>
Contenu en colonne</p>
</div>

Les paramètres

  • @param - id - string - required - identifiant unique de la ligne
  • @param - class - string - optional - classe(s) css de la ligne
  • @param - params - string - optional - permet d'ajouter des paramètres HTML à la ligne

Aide

Prévisualisation Style guide @cCol [New window]

Colonne A
Colonne B

Macro 

        <@cRow>
            <@cCol>
                 Colonne A
             </@cCol>
             <@cCol>
                 Colonne B
             </@cCol>
        </@cRow>

Html 

<div class="row ">
<div class="col ">
Colonne A
</div>
<div class="col ">
Colonne B
</div>
</div>

Les paramètres

  • @param - id - string - required - identifiant unique de la colonne
  • @param - class - string - optional - classe(s) css de la colonne
  • @param - cols - string - optional - Si non vide ajoute la classe "col", que vous pouvez compléter avec l'attribut "class" ci-dessous. Si vous ajoutez une valeur, attention le préfix de classe 'col-' est présent dans la macro. Vous pouvez ajouter les "sm-XX", "md-XX", "lg-XX", "xl-XX" ou "XX" est toute valeur permise par Bootstrap. On peut ajouter d'autres paramètres BS séparés par un espace.
  • @param - defa@chListt - string - optional - Si col est vide, ajoute le préfix valeur de "defa@chListt", par défaut -col- qui peut être complété avec l'attribut "class" ci-dessous.
  • @param - params - string - optional - permet d'ajouter des paramètres HTML à la colonne

Aide

Prévisualisation Style guide @cHeader [New window]

Header v1

Header v2

Macro 

        <@cHeader title='Header v1'/>
        <@cHeader>
            <@cTitle>Header v2</@cTitle>
        </@cHeader>

Html 

<header >
<h2>
Header v1</h2>
</header>
<header >
<h3>
Header
<small>
v2</small>
</h3>
</header>

Les paramètres

  • @param - id - string - optional - identifiant unique du header
  • @param - class - string - optional - classe(s) css du header
  • @param - title - string - optional - titre compris dans le header
  • @param - titleLevel - number - required - taille du titre du header
  • @param - titleUrl - string - optional - url du titre, qui sera sous forme de lien si ce paramètre a une valeur
  • @param - titleUrlClass - string - optional - classe(s) css sur le titre sous forme de lien
  • @param - params - string - optional - permet d'ajouter des paramètres HTML au header

Prévisualisation Style guide @cSection [New window]

Contenu de la Section

Macro 

        <@cSection>
            <@cTitle level=2 class='border border-dark p-24'>Contenu de la Section</@cTitle>
        </@cSection>

Html 

<section>
<h2 class="border border-dark p-24">
Contenu de la Section</h2>
</section>

Les paramètres

  • @param - id - string - optional - identifiant unique de la section
  • @param - class - string - optional - classe(s) css de la section
  • @param - type - string - required par défaut "section" - élément HTML de niveau block de structure section
  • @param - params - string - optional - permet d'ajouter des paramètres HTML à la section

Aide

Wrapper "Section", tag html5

Prévisualisation Style guide @cBlock [New window]

Contenu de la Section

Macro 

        <@cBlock>
         ...
        </@cBlock>

Html 

<div>
<h2 class="border border-dark p-sm">
Contenu de la Section</h2>
</div>

Les paramètres

  • @param - id - string - optional - identifiant unique du bloc
  • @param - class - string - optional - classe(s) css du bloc
  • @param - type - string - required par défaut "div" - élément HTML de niveau block
  • @param - params - string - optional - permet d'ajouter des paramètres HTML au bloc

Aide

Wrapper "Div"

Prévisualisation Style guide @cArticle [New window]

Contenu Editorial

Titre de niveau 2

Paragraphe

Titre de niveau 3

Paragraphe

Titre de niveau 4

Paragraphe

  • Item 1
  • Item 2
  1. Item 1
  2. Item 2

Macro 

        <@cArticle title='Contenu Editorial'>
          <@cTitle level=2>Titre de niveau 2</@cTitle>
          <@cTitle level=3>Titre de niveau 3</@cTitle>
          <@cTitle level=4>Titre de niveau 4</@cTitle>
          <@cText>Paragraphe</@cText>
          <@chList>
            <@chItem>Item 1</@chItem>
            <@chItem>Item 2</@chItem>
          </@chList>
          <@cText type='hr'>
          </@chList type=k'o'>
            <@chItem>Item 1</@chItem>
            <@chItem>Item 2</@chItem>
          </@chList>
        </@cArticle>

Html 

<article class=" portlet" >
<header >
<h2>
Contenu Editorial</h2>
</header>
<div class="article-content">
<h2>
Titre de niveau 2</h2>
<p>
Paragraphe</p>
<h3>
Titre de niveau 3</h3>
<p>
Paragraphe</p>
<h4>
Titre de niveau 4</h4>
<p>
Paragraphe</p>
<ul >
<li>
Item 1</li>
<li>
Item 2</li>
</ul>
<hr>
</hr>
<ol >
<li>
Item 1</li>
<li>
Item 2</li>
</ol>
</div>
</article>

Les paramètres

  • @param - id - string - optional - identifiant unique de la Inline
  • @param - class - string - optional - classe(s) css de la Inline
  • @param - title - string - optional - titre de l'article
  • @param - titleLevel - number - required - taille du titre de l'article
  • @param - titleClass - string - optional - classe(s) css sur le titre de l'article
  • @param - params - string - optional - permet d'ajouter des paramètres HTML à l'article

Aide

Wrapper "Article", tag html5