ratchet

RATCHET

<p>
  Un projet qui va faire pas mal de bruit&hellip; Ratchet est un framework proposant des ressources html, css et js pour créer des sites &#8220;like app&#8221; 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>

icomoom

<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&hellip;<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&hellip;). 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>