Templo

Moteur de site

tags : haXe, hss, templo, js, ajax, php

Ce site a été entièrement développé en haXe, en utilisant HSS pour le design CSS, et Templo pour la construction de mon moteur de site.

http://www.haxe.org/com/libs/templo

Présentation de HSS

  • HSS est un compilateur qui supporte la syntaxe CSS valide, et introduit les variables dans la construction de la feuille de style, la notion de block de variables, mais aussi la gestion des erreurs lors de la compilation.
  • L'utilisation des variables en HSS est un point fort, elle permet de gérer et de tester plus facilement et rapidement l'effet d'un style sur un ou plusieurs éléments.

Variables de propriété:

HSS permet d'utiliser des variables dans la syntaxe CSS.

Exemple :
var maCouleur = #999999; //#999 marche aussi bien
var maPolice = Arial;

body{
    color: $maCouleur;
    font: $maFont;
}

Les bloques de variables :

Au lieu de déclarer les variables de propriété une par une, on peut aussi les déclarer en une seule fois.

Exemple :
var aMenuHover = {display:block; width: 100px; background:#CCC;}

#Menu .item a:hover {
      $aMenuHover;
      text-decoration:none;
}

Les bloques imbriquées :

Dans une page, il peut y avoir plusieurs éléments différents ayant le meme nom de classe.

Exemple: ici class='plop'
<div id='formBlock'>
    <div class='plop'><h2>Hello haXers !</h2></div>
    <form class='form'>
          <div class='plop'>Allo : </div>
          <textarea></textarea>
    <form>
</div>

En CSS pour pouvoir atteindre séparément deux éléments portant le meme nom de classe, on doit faire comme suivant:

Exemple :
#formBlock {
      color: #CCC;
}
#formBlock .plop{
     font-weight: bold;
}
#formBlock .form .plop{
      font-size: 16px;
      margin: 0px 0px 0px 20px;
}
#formBlock .form textarea{
      width: 200px;
      border:1px dashed #999;
}

On peut remarquer ici que la structure des bloques imbriqués XHTML est représenté en CSS de façon applatie, et on est obligé de spécifier à  chaque fois le contexte complet dans laquelle la classe a effet. HSS permet de façon plus naturelle de représenter la meme situation :

Exemple :
#formBlock{
           .plop{
                 font-weight:bold;
            }
            .form{
                  .plop{
                        font-size: 16px;
                        margin: 0px 0px 0px 20px;
                  }
                  textarea{
                        width: 200px;
                        border: 1px dashed #999;
                  }
            }
}

Validation CSS

HSS permet de produire un CSS valide et affiche les erreurs commises lors de la compilation de la feuille hss.

Exemple :

dans le cas suivant le compilateur renvoie une erreur concernant l'attribut 'font-sizze' qui est mal écrite.

span { font-sizze: 12px} //ERROR : Unknwon attribute 'font-sizze'

Ici nous aurons une erreur car la valeur de l'attribut est mal écrite

span {font-size: 12pixel} //ERROR: Invalid 'font-size' value '12pixel'

Par ailleurs il est possible d'écrire des propriétés CSS non-standard, pour des styles spécifiques à  Internet Explorer par exemple.

.element{
       ma-propriete-special: CSS('Les valeurs spécifiques');
}

A la compilation le controle de la syntaxe sera tout bonnement ignorée.