Ink framework css/js

Initialisation pour les Javascript UI Composants


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 :

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

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 :

Initialisation pour les UI Composants (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

Inconvénients

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

mais large-21 n’existe pas…

Flexbox

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

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

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 :


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/