Le blog d'Eenov, solutions eenovantes !

Foundation, le Framework CSS/JS responsive

Foundation, Framework HTML/CSS/JS completLes Frameworks CSS envahissent depuis quelques années le web. Ils sont effectivement très utiles et permettent de gagner du temps pour la mise en page de votre site internet. Notre favori : Foundation, un Framework HTML/CSS/JS créé par l’agence web Zurb

 

Qu’est-ce qu’un Framework CSS ?

Un Framework est un kit de composants qui va permettre de créer les bases d’un site web. Ici, un Framework CSS est un environnement qui vous fournit une structure de base et ainsi vous permet de faciliter votre travail de mise en page CSS. Vous avez un reset.css, pour la remise à zéro des styles, puis des styles globaux pour tous vos éléments (boutons, formulaires, textes etc…).

Les avantages

  • Productivité et rapidité de développement. Vous évitez les erreurs communes.
  • Votre CSS est optimisé et normalisé. Cela facilite la maintenance de vos projets.
  • Une documentation en ligne, des tutoriaux, des exemples pour vous permettre d’avoir une meilleure production.
  • Un code compatible multi-navigateur.
  • Une structure et une mise en page finalisées, propres, bien pensées.

Notre choix : Foundation

Ce Framework embarque un grand nombre de fonctionnalités et de styles, il est très complet et de plus, il permet  de créer des sites responsives.

Les composants de Foundation :

  • Une feuille de style avec un reset et les styles de typographies,
  • Un système de grilles fluides en 12 colonnes pour le positionnement des éléments en CSS et la “responsivité” de votre site,
  • Des feuilles de styles pour personnaliser les boutons (dégradés, avec ou sans bords arrondis etc…), et pour vos formulaires (styles, scripts JS pour gérer les messages d’erreurs etc…),
  • Des éléments d’interface comme les menus, les tableaux, les onglets, etc…,
  • Un slider Orbit en jQuery pour présenter votre contenu (texte, image, vidéo),
  • Un script JS Reveal pour gérer les fenêtres modales/Lightbox.

Foundation, Framework HTML/CSS/JS complet

Foundation s’appuie sur HTML5 Boilerplate, qui est un template HTML5 (ensemble de fichiers HTML, CSS, scripts et éléments de base tels que .htaccess, page 404, favicon etc…).

Foundation, Framework HTML/CSS/JS completUn Framework complet

Foundation est donc un Framework simple à utiliser et clé en main. Il est composé de plusieurs fonctionnalités très utiles.

Pour plus d’infos, je vous propose de vous rendre sur le site officiel : foundation.zurb.com

 

Posté par : Jérôme le 10/01/2013
Développement / Open Source
Tags : , , , , ,

3 commentaires

  • Mantis dit :

    Bonjour Marion,

    ton article est bien sympa, je suis moi même un fan de foundation.

    Mais je pense il aurait été préférable un article un peu plus argumenté sur ton choix.

    Pour la majorité Boostrap de Twitter est le meilleur, ce que bien sur en tant que non conformiste je refuse.
    Je trouve Foundation bien plus agréable sur de nombreux points, malheureusement son principal défaut est d’avoir une communauté bien moins grande que celle de boostrap.

    Par conséquent Zurb doit travailler encore plus pour être meilleur, et même si leur framework est exceptionnel je pense que mon plus grand regret est le manque de plugins jquery qui aux couleur de foundation.
    Alors je me suis amusé a trafiqué les plugins pour les adapté à foundation mais c’est une perte de temps.

    Aussi je conseille énormément à visiter les sites de Zurb qui sont de vrai perles et qui donne de vrai exemple d’utilisation du framework avec aussi des scripts exellent qui ne sont pas présent encore dans leur framework.

    • Marion dit :

      Merci beaucoup pour ton commentaire ! Effectivement, Bootstrap est plus utilisé et a une communauté plus imprortante. Le but de cet article était simplement de faire découvrir – dans les grandes lignes – un second framework, qui arrive quand même largement à sa cheville ;)

  • mantis dit :

    La version 4 est sorti depuis plusieurs semaines.
    Je suis retombé sur ton article et je viens confirmer la supériorité en stabilité, en nouveauté et en personnalisation.

    Merci Zurb pour ce super travail.

  • Poster un commentaire

    Vous voulez donner votre avis ?
    Laissez un commentaire !