Prévisualisation Style guide @cTitle [New window]

Titre de niveau 1

Titre de niveau 2

Titre de niveau 3

Titre de niveau 4

Macro 

        <@cTitle>Titre de niveau 1</@cTitle>
        <@cTitle level=2 class='main-danger-color'>Titre de niveau 2</@cTitle>
        <@cTitle level=3>Titre de niveau 3 avec fond de couleur principale</@cTitle>
        <@cTitle level=4>Titre de niveau 4</@cTitle>

Html 

<h1>
Titre de niveau 1</h1>
<h2 class="main-danger-color">
Titre de niveau 2</h2>
<h3>
Titre de niveau 3</h3>
<h4>
Titre de niveau 4</h4>

Les paramètres

  • level ( texte / defaut : 1 ) : Niveau de titre, valeur de 1 à 6.
  • class ( text / default : '' ) : Classe css.
  • id ( text / default :'' ) : Identifiant unique
  • params ( text / default :'' ) : Tout autre attribut HTML
  • <#nested> : Contenu présenté à l'intérieur de la macro.

Prévisualisation Style guide @cText [New window]

Texte exemple

Texte exemple

Macro 

        <@cText>Texte exemple
        <@cText class='main-info-color text-cap'>Texte exemple

Html 

<p>
Texte exemple</p>
<p class="main-info-color text-cap">
Texte exemple</p>

Les paramètres

  • @param - id - string - optional - identifiant unique du texte
  • @param - class - string - optional - classe(s) css du texte
  • @param - type - string - required - type de texte, par défaut un paragraphe
  • @param - params - string - optional - permet d'ajouter des paramètres HTML au texte

Prévisualisation Style guide @cInline [New window]

Contenu inline, donc dans un "span"
Contenu de type "strong"

Macro 

        <@cInline class='mt-m'>Contenu inline, donc dans un "span"
        <@cInline type='strong'>Contenu de type "strong"

Html 

<p class="mt-l">
<span>
Contenu inline, donc dans un "span"</span>
<br>
<strong>
Contenu de type "strong"</strong>
</p>
Les paramètres
  • @param - id - string - optional - identifiant unique
  • @param - class - string - optional - classe(s) css
  • @param - type - string - required par défaut "span" - élément HTML de niveau inline
  • @param - params - string - optional - permet d'ajouter des paramètres HTML
Aide

Wrapper "Inline", tag html5

Prévisualisation Style guide @chList [New window]

  • Ville de Paris
  • Ville de Nates
  1. Ville de Paris
  2. Ville de Nates

Macro 

        <@chList>
          <@chItem>Ville de Paris
          <@chItem>Ville de Nates
        
        <@chList type=\'o\'>
          <@chItem>Ville de Paris
          <@chItem>Ville de Nates

Html 

<ul >
<li>
Ville de Paris</li>
<li>
Ville de Nates</li>
</ul>
<ol >
<li>
Ville de Paris</li>
<li>
Ville de Nates</li>
</ol>
Les paramètres
  • @param - id - string - optional - identifiant unique de la liste
  • @param - class - string - optional - classe(s) css de la liste
  • @param - type - string - required - type de la liste, par défaut non-ordonnée avec la valeur 'u', peut être ordonnée avec la valeur 'o'.
  • @param - params - string - optional - permet d'ajouter des paramètres HTML à la liste

Génére le ul, paramètre par défaut, ou ol si on type la macro type='o'.

Prévisualisation Style guide @chItem [New window]

  • Ville de Paris

Macro 

<@chList><@chItem>Ville de Paris

Html 

<ul >
<li>
Ville de Paris</li>
</ul>
Les paramètres
  • @param - id - string - optional - identifiant unique de l'élément de liste
  • @param - class - string - optional - classe(s) css de l'élément de liste
  • @param - params - string - optional - permet d'ajouter des paramètres HTML à l'élément de liste

Prévisualisation Style guide @cContentFrame [New window]

Organisation du thème

La Tour Eiffel

La tour Eiffel est une tour de fer puddlé de 324 métres de hauteur située é Paris, é l’extrémité nord-ouest du parc du Champ-de-Mars en bordure de la Seine dans le 7ᵉ arrondissement.

Son adresse officielle est 5, avenue Anatole-France.

Organisation du thème

La Tour Eiffel

La tour Eiffel est une tour de fer puddlé de 324 métres de hauteur située é Paris, é l’extrémité nord-ouest du parc du Champ-de-Mars en bordure de la Seine dans le 7ᵉ arrondissement.

Son adresse officielle est 5, avenue Anatole-France.

Organisation du thème

La Tour Eiffel

La tour Eiffel est une tour de fer puddlé de 324 métres de hauteur située é Paris, é l’extrémité nord-ouest du parc du Champ-de-Mars en bordure de la Seine dans le 7ᵉ arrondissement.

Son adresse officielle est 5, avenue Anatole-France.

Macro 

        <@cContentFrame title=\'Organisation du théme\'>
         ...

Html 

<div class="content-frame content-frame-primary mb-5" >
<h1 class="h4 content-frame-title ">
Organisation du thème</h1>
<div class="content-frame-content">
<h1>
La Tour Eiffel</h1>
<p class="mt-5">La tour Eiffel est une tour de fer puddlé de 324 métres de hauteur située é Paris, é l’extrémité nord-ouest du parc du Champ-de-Mars en bordure de la Seine dans le 7ᵉ arrondissement.</p>
<p>Son adresse officielle est 5, avenue Anatole-France. </p>
</div>
</div>
<div class="content-frame content-frame-secondary mb-5" >
<h1 class="h4 content-frame-title ">
Organisation du thème</h1>
<div class="content-frame-content">
<h1>
La Tour Eiffel</h1>
<p class="mt-5">La tour Eiffel est une tour de fer puddlé de 324 métres de hauteur située é Paris, é l’extrémité nord-ouest du parc du Champ-de-Mars en bordure de la Seine dans le 7ᵉ arrondissement.</p>
<p>Son adresse officielle est 5, avenue Anatole-France. </p>
</div>
</div>
<div class="content-frame content-frame-tertiary mb-5" >
<h1 class="h4 content-frame-title ">
Organisation du thème</h1>
<div class="content-frame-content">
<h1>
La Tour Eiffel</h1>
<p class="mt-5">La tour Eiffel est une tour de fer puddlé de 324 métres de hauteur située é Paris, é l’extrémité nord-ouest du parc du Champ-de-Mars en bordure de la Seine dans le 7ᵉ arrondissement.</p>
<p>Son adresse officielle est 5, avenue Anatole-France. </p>
</div>
</div>
Les paramètres
  • @param - id - string - optional - identifiant unique de la mise en avant
  • @param - class - string - optional - classe(s) css de la mise en avant
  • @param - title - string - required - titre de la mise en avant
  • @param - params - string - optional - permet d'ajouter des paramètres HTML à la mise en avant
Aide

Element graphique pour encadrer du contenu.

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 level=3>Titre de niveau 3
          <@cTitle level=4>Titre de niveau 4
          <@cText>Paragraphe
          <@chList>
            <@chItem>Item 1
            <@chItem>Item 2
          
          <@cText type=\'hr\'>
          
            <@chItem>Item 1
            <@chItem>Item 2

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