CSS Bootstraps et autres réjouissances

N’avez-vous jamais entendu cette célèbre phrase qui dit « Pourquoi toujours tenter de réinventer la roue ?« . Telle une vielle rengaine, mais pourtant si vraie ! Stop, arrêtez de répéter vos styles CSS et travaillez plus intelligemment.

Pour vos projets web, travaillez mieux et commencez sur une base solide. Pour aller plus loin que l’utilisation de grilles comme 960.gs ou encore Blueprint, les Bootstraps peuvent énormément vous faciliter la vie pour certains de vos projets. Traduit littéralement un Bootstrap est, en système informatique, un petit programme d’amorçage qui permet d’en lancer un plus gros. (Wikipédia).

Bootstraps

Dans le cas de notre site Internet, il constitue en général un ensemble de classes CSS (et aussi Javascript) pouvant être réutilisées pour vos projets web. Vous y trouvez de tout : des styles de titres, en passant par les formulaires, jusqu’au messages d’erreurs. Bien-sûr pour la structure, tout est mis en œuvre avec des lots de grilles. HTML 5, CSS 3, compatible pour tout les navigateurs moderne, bref que du bon. Enfin presque… Il ne faut pas oublier qu’ils constituent une base bien solide, mais a personnaliser en fonction des demandes de votre projet. Mais que demander de plus ? Il existe encore d’autres alternatives ! Lisez donc la suite…

Comment les utiliser ?
Téléchargez simplement le pack complet des sources et utilisez les fichiers CSS dans votre projet.

Bootstrap Twitter

Le plus célèbre est le fameux Bootstrap Twitter qui vient de sortir en version 2.0. C’est un des plus complet du genre. Il est basé sur les styles du célèbre réseau social. Il permet aussi l’utilisation de Less.CSS.

Bootstrapp

Bonus : pour vos maquettes avec Fireworks, retrouvez les éléments du Bootstrap Twitter en PNG par ici.

FBootstrap

Idéal pour vos applications Facebook, il inclus un maximum d’éléments HTML et de styles CSS prédéfinis. Tableaux, grilles, navigation et bien plus encore.

Jquery UI Bootstrapp

Celui ci-offre un thème bien propre pour les éléments utilisant Jquery UI. Moins complet que les précédents, mais tout aussi utile.

Les autres réjouissances

Fondation

Alors là, on passe a du très lourd. Récemment mis en ligne par l’agence Zurb, Foundation est ce que l’on pourrai appeler un framework. Comportant des centaines de styles, il constitue une superbe fondation (pas fait exprès) pour concevoir et maintenir votre projet web. Il offre des éléments vraiment très utile comme des grilles flexibles pour toute résolutions de navigateurs, des boutons, des styles de texte, sans compter les éléments JavaScript tel des boîtes modales, des accordéons…. À utiliser de toute urgence pour mettre rapidement un site sur pied.



Initializr

Tout autre chose, enfin presque. Initializr est un générateur de templates HTML5 pour vous aider à commencer un projet basé sur HTML 5 Boilerplate. Le template généré est propre et comporte tout ce qu’il faut pour commencer à intégrer votre maquette.

Pour conclure :

N’est présenté ici qu’une partie des outils de ce type. Mais dans tous les cas, pour vos prochains projets web, dès l’étape du webdesign, n’oubliez pas les possibilités d’intégration rapide qui existent. Évidement ces outils ne seront pas adaptés à certains sites, mais il vous feront sans aucun doute gagner un temps précieux sur vos projets.

Vous aimerez aussi :

Cette entrée a été publiée dans Ressources, avec comme mot(s)-clef(s) , , , , , , , . Vous pouvez la mettre en favoris avec ce permalien.

9 commentaires sur CSS Bootstraps et autres réjouissances

  1. sebastien.p dit :

    Merci pour ces infos je vais tester ça très bientôt !

  2. Arbaoui Mehdi dit :

    J’ai déjà essayé BOOTSTRAP il est vraiment complet, mais la contrainte c’est qu’il n’est pas compatible avec les anciens navigateurs genre (ie6 et ie7), vous pouvez même essayé http://www.rootstheme.com/ une template WORDPRESS basé sur BOOTSTRAP et HTML5 Boilerplate.

  3. WDTrends dit :

    Oui toujours ce fameux IE…Merci pour le partage effectivement il est super ;)

  4. vinc[E] dit :

    Hello à tous, il y en a un qui fait fureur en ce moment c’est celui-ci :
    http://www.99lime.com/elements/
    :)

  5. WDTrends dit :

    Encore une autre superbe ressource, merci à toi vince[E] !

  6. Ping : CSS Bootstraps et autres réjouissances » Web Design

  7. Ping : tips webdesign « Le marque-page de claiw

  8. Ping : Jetstrap, créateur d'interfaces Bootstrap en ligne | WebdesignerTrends - Ressources utiles pour le webdesign, actus du web, sélection de sites et de tutoriels

  9. Ping : HTML5 - CSS3 | Pearltrees

Laissez votre impression, réagissez à l'article !

L'adresse de contact ne sera pas publiée.

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>