Auteur : lise

Initialisation pour les Javascript UI Composants

<script type="text/javascript" src="http://fastly.ink.sapo.pt/3.1.10/js/ink-all.js"></script>
<script type="text/javascript" src="http://fastly.ink.sapo.pt/3.1.10/js/autoload.js"></script>

Avantages

• INK utilise son propre JS UI pour les widgets et non  jQueryUI.

• Le fichier autoload.js qu’on charge dans la page permet d’éviter d’écrire du javascript pour créer les composants UI JS. Ce fichier initialise ces éléments automatiquement en fonction de leur classe CSS. Tous les composants sont enregistrés dans autoload.js.
  Par exemple pour créer un datepicker, il suffit d’ajouter la classe ink-datepicker à l’élément :

<input type="text" class="ink-datepicker" />

Pour configurer le calendrier, les options basiques se passent avec des data-attributes et non du javascript.

<input type="text" class="ink-datepicker" 
       data-format="d-m-Y"
       data-auto-open="true"
       data-start-date="2012-06-02"
       data-date-range="2012-06-02:2017-06-02"/>

Pour plus d’infos : http://ink.sapo.pt/javascript-ui/#InkUIDatePicker_1

Si on veut avoir d’autres options plus poussées comme configurer la date en français, il faudra utiliser du JS (http://ink.sapo.pt/javascript/Ink.UI.DatePicker/)

Composants intéressants :

• La validation des formulaires : http://ink.sapo.pt/javascript-ui/#InkUIFormValidator_2
• Le chargement des images au scroll : http://ink.sapo.pt/javascript-ui/#InkUILazyLoad_1
• La pagination : http://ink.sapo.pt/javascript-ui/#InkUIPagination_1

Initialisation pour les UI Composants (CSS)

<link rel="stylesheet" type="text/css" href="http://fastly.ink.sapo.pt/3.1.10/css/ink.css">

Le système de grille fonctionne en pourcentage et non en colonnes comme Bootstrap.

• tiny pour les écrans inférieurs à 320px
• small pour les écrans de 321px à 640px
• medium pour les écrans de 641px à 960px
• large pour les écrans de 961px à 1260px
• xlarge pour les écrans supérieurs à 1261px

<div class="ink-grid">
  <div class="column-group">
    <div class="xlarge-30 large-40 medium-50 small-70 tiny-100">
      <div class="column">Colonne 1</div>
    </div>
  </div>
</div>

Inconvénients

• les classes de grilles sont instanciées dans le fichier css mais pas tous les pourcentages. Par exemple : large-20 existe

.large-20 {
  width: 20%;
}

mais large-21 n’existe pas…

Flexbox

Il faut remplacer le fichier ink.css par celui spécifique aux flexbox :

<link rel="stylesheet" href="http://cdn.ink.sapo.pt/3.1.10/css/ink-flex.css">

Pour les navigateurs qui ne sont pas compatibles, on fait appel à Modernizr :

<script type="text/javascript" src="http://cdn.ink.sapo.pt/3.1.10/js/modernizr.js"></script>
<script type="text/javascript">
  Modernizr.load({
    test: Modernizr.flexbox,
    nope : 'http://cdn.ink.sapo.pt/3.1.10/css/ink-legacy.min.css',
  });
</script>

Modernizr va détecter si le navigateur supporte les flexbox et si ce n’est pas le cas, les classes no-flexbox et no-flexboxlegacy vont être ajoutées à l’élément html et Ink va utiliser la feuille de style ink-legacy.

Exemple pour centrer une div :

<div class="ink-grid">
  <div class="column-group push-center">
    <div class="all-50">
      50%
    </div>
  </div>
</div>

NB : On garde la class ink-grid pour la grille car l’élément column-group est par défaut un « container flexible ».

Les classes utilisées pour l’alignement :

• push-top : aligne un élément en haut du container flexbox
• push-middle : aligne un élément au milieu du container flexbox
• push-bottom : aligne un élément en bas du container flexbox
• push-left : aligne un élément à gauche du container flexbox
• push-center : aligne un élément au centre du container flexbox
• push-right : aligne un élément à droite du container flexbox
• order-# : range les éléments suivant l’ordre défini (jusqu’à 10)
• reverse : inverse l’ordre des éléments d’un container flexbox (n’est pas lié à order)
• vertical : affiche les éléments flexbox de façon verticale

Pour plus d’informations et voir le fonctionnement en détails : http://ink.sapo.pt/ui-elements/flexbox/