HTML libre

HTML libre

Seulement sur SledPlus

Sled propose une collection de composants qui vous permettent de répondre à un large éventail de besoins. Ceci étant, certains besoins spécifiques peuvent nécessiter un développement spécifique, ce que permet le composant HTML libre.

1. Le HTML.

C’est la partie centrale de votre composant.

Sled étant basé sur le framework Foundation, vous devez vous conformer à son formalisme pour un résultat optimum et pour garder une cohérance avec le reste de votre page. Prennez donc le temps de vous familiariser avec ce framework.


Ajoutez un composant HTML à votre page puis ouvrez le panneau de propriétés. Allez sur l’onglet «Configuration».

À titre d’exemple, ajouter le tableau html suivant:


<table>
 <thead>
  <tr>
   <th width="200">Table Header</th>
   <th>Table Header</th>
   <th width="150">Table Header</th>
   <th width="150">Table Header</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Content Goes Here</td>
   <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
   <td>Content Goes Here</td>
   <td>Content Goes Here</td>
  </tr>
  <tr>
   <td>Content Goes Here</td>
   <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
   <td>Content Goes Here</td>
   <td>Content Goes Here</td>
  </tr>
  <tr>
   <td>Content Goes Here</td>
   <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
   <td>Content Goes Here</td>
   <td>Content Goes Here</td>
  </tr>
 </tbody>
</table>


Vous pouvez constater que son rendu dans le composant hérite des styles du framework Foundation. Cela vous permet d’optenir un rendu cohérant et performant en un minimum d’efforts.

2. le CSS.

Encore une fois, le framework Foundation fournit une base de style qui doivent répondre à la pluspart de vos besoins. Si toutefois vous souhaitez faire une modification spécifique, vous pouvez dans la section CSS (sous la section HTML) ajouter un CSS spécifique. Notez cela dit que ce CSS s’appliquera à toute la page. Vous devez donc prendre soin de cibler un élément via un id ou une class.


À éviter :

p {
  color: red;
}


À préférer :

p.monParagraphe {
  color: red;
}


3. Les fichiers.

Naviguez sur l’onglet Fichier. Vous avez la possibilité d’associer à votre composant une série de fichiers (images, pdf). Ils seront publiés avec le composant. Vous devez utiliser uniquement le chemin fournit dans vos HTML et CSS.

4. Les scripts.

Il n’est pas possible d’ajouter un script (Javascript) directement dans les propriétés du composant. Ceci étant, vous pouvez ajouter un script à la page puis cibler votre composant via l’utilisation d’un ID spécifique.