RATCHET
<p>
Un projet qui va faire pas mal de bruit… Ratchet est un framework proposant des ressources html, css et js pour créer des sites “like app” pour Iphone. Les auteurs travaillent ou ont travaillé chez Twitter : Dave Gamache, Connor Sears, et Jacob Thornton (@fat, auteur également de Twitter Bootstrap)<br /> Les composants disponibles :
</p>
<ul>
<li>
Sticky bar
</li>
<li>
Listes
</li>
<li>
Boutons
</li>
<li>
Segmented controller (tabs)
</li>
<li>
Formulaires
</li>
<li>
Boutons toggle
</li>
<li>
Popover
</li>
<li>
Slider
</li>
<li>
Push.js pour des pages en ajax et gérant l'historique
</li>
</ul>
<p>
source : <a title="RATCHET" href="http://maker.github.com/ratchet/" target="_blank" class="btn btn-info" rel="nofollow">Ratchet<i class="icon-share icon-white"></i></a> </div>
</p>
<div class="media-body">
<h2 class="media-heading">
IcoMoon
</h2>
<p>
Cette application ultra puissante permet de créer une police d'icônes personnalisée à partir d'un catalogue de polices gratuites ou à partir de vos propres icones que vous pouvez télécharger; plus besoin d'utiliser une police dont seuls quelques caractères sont utilisés. Chaque icône est modifiable via un éditeur en ligne.<br /> Côté intégration, c'est très simple :<br /> [code]<span aria-hidden="true" class="icon-cart"></span>[/code]<br /> ou<br /> [code]<div class="fs1" aria-hidden="true" data-icon="panier"></div>[/code]<br /> L'intérêt des polices d'icônes est d'avoir un jeu d'icônes léger dont la taille est facilement modifiable. Un autre outil du même genre : <a href="http://fontello.com/" title="Fontello" target="_blank" rel="nofollow">Fontello</a><br /> ps : c'est compatible ie7.<br /> <br />source : <a title="Icomoon" href="http://icomoon.io/app/" target="_blank" class="btn btn-info" rel="nofollow">Icomoon<i class="icon-share icon-white"></i></a> </div>
</p>
</div>
<div class="media">
<div class="pull-left">
<img src="http://www.prestarocket.com/blog//wp-content/uploads/liffect-effect-lists.jpg" alt="liffect-effect-lists" title="liffect-effect-lists" class="alignnone size-full wp-image-712" />
</div>
<div class="media-body">
<h2 class="media-heading">
Liffect effect
</h2>
<p>
Des effets sympas pour afficher en séquence les élements d'une liste avec du CSS3 et du jquery<br /> <br />source : <a title="liffect" href="http://ademilter.com/lab/liffect/" target="_blank" class="btn btn-info" rel="nofollow">liffect<i class="icon-share icon-white"></i></a> </div>
</p>
</div>
<div class="media">
<div class="pull-left">
<img src="http://www.prestarocket.com/blog//wp-content/uploads/pods.jpg" alt="pods" title="pods" class="alignnone size-full wp-image-713" />
</div>
<div class="media-body">
<h2 class="media-heading">
Pods framework
</h2>
<p>
Un thème framework WordPress pour créer facilement différents types de contenu. Des tutos sont disponibles ici : <a href="http://mondaybynoon.com/20100104/introduction-to-pods-cms-wordpress/" title="Pods" target="_blank" rel="nofollow">Mondaybynoon.com</a> et sur le site officiel.<br /> <br />source : <a title="liffect" href="http://podsframework.org/" target="_blank" class="btn btn-info" rel="nofollow">Pods Framework<i class="icon-share icon-white"></i></a> </div>
</p>
</div>
<div class="media">
<div class="pull-left">
<img src="http://www.prestarocket.com/blog//wp-content/uploads/jster.jpg" alt="jster" title="jster" class="alignnone size-full wp-image-710" />
</div>
<div class="media-body">
<h2 class="media-heading">
Jster.net
</h2>
<p>
Plus de 800 ressources javascript classées par thème : multimédia, UI…<br /> <br />source : <a title="jster" href="http://jster.net/" target="_blank" class="btn btn-info" rel="nofollow">Jster<i class="icon-share icon-white"></i></a> </div>
</p>
</div>
<div class="media">
<div class="pull-left">
<img src="http://www.prestarocket.com/blog//wp-content/uploads/jpanel.jpg" alt="jpanel" title="jpanel" class="alignnone size-full wp-image-709" />
</div>
<div class="media-body">
<h2 class="media-heading">
Jpanel Menu
</h2>
<p>
Un plugin Jquery pour un menu avec effet panel. utile pour le responsive, c'est le même effet que l'off canvas layout (<a href="http://www.zurb.com/playground/off-canvas-layouts" title="Off canvas" target="_blank" rel="nofollow">www.zurb.com/playground/off-canvas-layouts</a>)<br /> <br />source : <a title="jpanel" href="http://jpanelmenu.com/" target="_blank" class="btn btn-info" rel="nofollow">Jpanel<i class="icon-share icon-white"></i></a> </div>
</p>
</div>
<div class="media">
<div class="pull-left">
<img src="http://www.prestarocket.com/blog//wp-content/uploads/jsurl.jpg" alt="jsurl" title="jsurl" class="alignnone size-full wp-image-711" />
</div>
<div class="media-body">
<h2 class="media-heading">
Js url
</h2>
<p>
Un plugin Jquery très léger pour parser simplement les urls.<br /> <br />source : <a title="jsurl" href="https://github.com/websanova/js-url" target="_blank" class="btn btn-info" rel="nofollow">Jsurl<i class="icon-share icon-white"></i></a> </div>
</p>
</div>
<div class="media">
<div class="pull-left">
<img src="http://www.prestarocket.com/blog//wp-content/uploads/bootbox.jpg" alt="bootbox bootstrap" title="bootbox" class="alignnone size-full wp-image-707" />
</div>
<div class="media-body">
<h2 class="media-heading">
Bootbox
</h2>
<p>
Une ressource pour Twitter Bootstrap pour remplacer les boite de dialogue de votre navigateur (alert, confirm…). Ce plugin propose pas mal d'options.<br /> <br />source : <a title="Bootbox" href="https://github.com/prestarocket/bootbox" target="_blank" class="btn btn-info" rel="nofollow">Bootbox<i class="icon-share icon-white"></i></a> </div>
</p>
</div>
<div class="media">
<div class="pull-left">
<img src="http://www.prestarocket.com/blog//wp-content/uploads/behance.jpg" alt="behance inspiration ecommerce" title="behance" class="alignnone size-full wp-image-706" />
</div>
<div class="media-body">
<h2 class="media-heading">
Inspiration (Behance)
</h2>
<p>
Pour terminer, voici une petite sélection de beaux sites (surtout e-commerce) à venir ou en ligne chinés sur Behance. Mon préféré : Leylines.<br /> <br />source : <a title="Behance" href="http://www.behance.net/collection/1/5194743" target="_blank" class="btn btn-info" rel="nofollow">Behance inspiration<i class="icon-share icon-white"></i></a> </div>
</p>
</div>