Bungee | un framework CSS élastique

Au revoir, pixels... A l'heure où la différence de résolution entre les écrans augmente, le design élastique devient incontournable.
Bungee est une solution minimaliste permettant la mise en place de sites élastiques.

Télécharger Bungee

version 0.1a - archive zip - 3,1ko
 

Utiliser Bungee

Bungee utilise une grille de 12 colonnes dont la plus petite subdivision vaut 4em. Pour les nostalgiques des pixels, ça fait environ 64px. Au niveau de zoom par défaut, un site construit avec Bungee mesure 768px de large, et s'affiche donc parfaitement sur un écran de faible résolution.

Concrètement, il suffit de créer un div ayant la class container, puis d'y intégrer des div ayant les classes grid_n. Les subdivisions peuvent être imbriquées.
Un exemple plus parlant est sans doute la source de cette page, réalisée avec Bungee.

Exemple

<div class="container">
    <div class="grid_5">
        ...
    </div>
    <div class="grid_3">
        ...
    </div>
    <div class="grid_4">
        ...
    </div>
    <div class="clear"> </div>
<div><-- fin container -->
 

Pourquoi Bungee ?

  1. Parce que c'est le seul framework élastique à l'heure actuelle.
  2. Parce que par essence même, il est 100E2R.
  3. Parce qu'il est léger : moins de 10 ko
  4. Pour son fonctionnement intuitif : quelques minutes suffisent à bâtir un site avec Bungee.

Todo List

  • Vérifier compatibilité IE
  • Nettoyer et organiser les CSS
  • CSS print et handheld
  • ajouter la gestion de blocs push et pull
  • Proposer styles par défaut
  • Créer page de démo

Crédits

Bungee n'aurait pas vu le jour sans le travail de Nathan Smith, Olav Bjorkoy, Khoi Vinh, Jon Tan, Eric Meyer, Oliver Reichenstein.