The website is intirely powered by haXe, using HSS for the CSS design, and Templo for the website engine.

• HSS
• TEMPLO
• The website engine

HSS

• HSS is a compiler and a language which supports valid CSS syntax. It introduces variables in the construction of the stylesheet. We also can notice the use of nested blocks. Bu the most appreciated thing is that by compiling hss code we can catch compilation errors.
• The use of variables in HSS permit us to manage and to test more easily and quickly effects produced by the stylesheet on severeals elements.

Variables:

These are some uses of variables in HSS.

var myColor = #999999; //#999 works as well
var myPolice = Arial;

body{
    color: $myColor;
    font: $myPolice;
}

Block variables :

Instead of declaring property variables one by one, we also can declare them in once.

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

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

Nested blocks :

In a web page, we can have severals differents elements which have the same class name.

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

In CSS we can reach separately two elements having the same class name. We do that like following :

#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;
}

Notice that XHTML nested blocks structure is flatened, and we must specify each time the complete context in which one the class effects. HSS permits in a more naturally way to represent the same situation :

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

CSS validation

In this case the compiler sends back an error about this css attribute :

In this one, we'll get an error beacuse the css attribute value isn't well written.

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

Otherwise, we can write non-standard css propertie, for Internet Explorer for example in order to apply some specifics css properties.

.element{
       my-property-special: CSS('Specific values');
}

Syntax control will be just ignored.