Bookmarks

Utiliser les Flexbox CSS pour le design d’interfaces utilisateurs est devenu de plus en plus courant , d’une part parce que réaliser des mises en pages complexes est beaucoup moins casse-tête en utilisant les Flexbox CSS qu’en utilisant la vieille technique des boîtes flottantes (float: left, float: right) et bénéficie d’un meilleur support des navigateurs Web actuels. Pourquoi s’en privé !

Flexbox Patterns de CJ Cenizal présente à travers différents exemples d’interfaces utilisateurs, les nouvelles propriétés CSS liées à Flexbox et comment les utiliser .

List.js est une petite libraire Javascript qui permet d’ajouter très rapidement et simplement des fonctionnalités de tri, de filtrage et de recherche à une liste HTML existante, sans en altérer le code.

Voilà comment la librairie fonctionne :

<div id="users">
  <input class="search" placeholder="Search" />
  <button class="sort" data-sort="name">
    Sort by name
  </button>

  <ul class="list">
    <li>
      <h3 class="name">Jonny Stromberg</h3>
      <p class="born">1986</p>
    </li>
    <li>
      <h3 class="name">Jonas Arnklint</h3>
      <p class="born">1985</p>
    </li>
    <li>
      <h3 class="name">Martina Elm</h3>
      <p class="born">1986</p>
    </li>
    <li>
      <h3 class="name">Gustaf Lindqvist</h3>
      <p class="born">1983</p>
    </li>
  </ul>
</div>
<script src="http://listjs.com/no-cdn/list.js"></script>

Ensuite un simple appel à la fonction List() et le tour est joué

var options = {
  valueNames: [ 'name', 'born' ]
};
var userList = new List('users', options);

See the Pen zpuKF by Jonny Strömberg (@javve) on CodePen.

Je faisais ma veille tranquillement ce matin, quand je suis tombé sur Parsley.js, totalement par hasard. Parsely.js est un petit plugin JavaScript qui permet de laisser un peu de côté ce qu’on adore détester : la validation de formulaire côté client. L’intérêt du plugin réside dans le fait qu’il ne nécessite aucune ligne de JavaScript, tout se passe au sein du code HTML5 grâce à l’attribut data-*. Enjoy !

Aujourd’hui, je suis tombé sur Instafeed.js, un plugin JavaScript permettant d’afficher des flux de photos Instagram n’importe où.

L’intérêt de ce plugin réside dans le fait que l’on peu récupérer des flux de photos selon un tag particulier, un lieu, un utilisateur ou simplement les photos les plus populaires.

Du coup, je me suis empressé de le mettre en place ici sur mon blog.

Cela fait un bout de temps que j’ai ce petit lien dans mes cartons : une ressource qui répertorie les différentes façon d’écrire un caractère spécial au format ISO pour l’inclure dans nos CSS et notamment  avec la propriété content, mais aussi en hexadécimal, etc. Une ressource incontournable donc. Merci Chris Coyier.

Vous cherchez des icônes minimalistes pour vos interfaces utilisateur ? Alors le site iconmonstr.com est fait pour vous ! En plus de proposer plus de 600 icônes de qualité, celles-ci sont disponibles au format PNG, mais aussi et surtout au format SVG ! Le must pour vos interfaces adaptées aux écrans hautes densité !