Quelques ressources pour optimiser Bootstrap

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Quelques ressources pour optimiser Bootstrap

Bootstrap est un framework CSS & Javascript conçu pour accélérer et faciliter vos développements «front-end». C’est devenu le couteau suisse du web : on y trouve une lame adaptée pour chaque besoin, ou presque. Une fois que Bootstrap est mis en place, l’intégrateur web dispose d’un coup de nombreux outils CSS et Javascript pour créer des maquettes et des éléments d’interface à l’aide de classes qu’il suffit de placer sur les éléments HTML appropriés (listes, div, etc).

Maquette

  • Grille de mise en page modulable et personnalisable (modification des variables avec LESS)
  • Clearfix à l’épreuve des balles,

Enrichissement graphique

  • Effets CSS simples d’utilisation grâce à LESS (Mixins) :
  • Coins arrondis,
  • Ombres portées,
  • Transitions,
  • Dégradés.

Interface utilisateur

  • Eléments de navigation avec des listes,
  • Menus avec onglets (tabs),
  • Fil d’Ariane,
  • Pagination,
  • Mur d’images,
  • Messages d’alerte,
  • etc.

Faciliter ce qui l’est déjà ?

Bootstrap est déjà simple d’utilisation, mais c’est sans compter le génie créatif du web qui a mis en place des outils en ligne dédiés à simplifier ou étendre les fonctionnalités de Bootstrap :

  • NEW! Flatstrap – Bootstrap sans les bords arrondis ou les dégradés, ça le fait encore mieux :)
  • NEW! Bootstrap Magic – Créer facilement un thème Bootstrap en direct live.
  • bootstrap-wysihtml5 – Editeur WYSIWYG pour orner vos textareas. Disponible sur GitHub
  • Invokator – Editeur visuel pour Bootstrap pour créer des sites avec n’importe quel environnement «compatible Bootstrap».
  • jetstrap — Interface 100% web pour construire des sites à partir de Twitter Bootstrap. Pas besoin de logiciel à installer : il suffit de se loguer pour accéder à ses projets.
  • bootsnipp — Plus de 30 éléments de design et bouts de code HTML, CSS & JS pour accompagner Bootstrap.
  • PaintStrap — Générez des thèmes de couleur pour Bootstrap à l’aide de Adobe kuler et COLOURlovers.
  • Bootswatch –  Galerie de thèmes pour Bootstrap, histoire de changer du thème par défaut que l’on rencontre trop souvent.
  • BootstrapCDN — Utilisez toute la puissance de Bootstrap avec la rapidité d’un CDN ! Plusieurs options disponibles selon les fichiers dont vous avez réellement besoin.
  • StyleBootstrap — Créer votre propre thème Bootstrap sans passer par le code !
  • BootTheme — Dans le même esprit que le précédent.
  • Font Awesome — Une police de caractère pour simplifier la mise en forme des icônes dans Bootstrap.
→ Téléchargez Bootstrap depuis Github.
N’hésitez pas à me signaler les ressources qui auraient échappé à ma vigilance o/

 

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



16 commentaires pour “Quelques ressources pour optimiser Bootstrap”

  1. ami44 dit :

    merci pour bootsnipp, je ne connaissais pas !

  2. Chris dit :

    Le « form builder » disponible bootsnipp est tout simplement génial!

    Une autre ressource intéressante pour Bootstrap est Font Awesome (http://fortawesome.github.com/Font-Awesome/). Plus pratique pour l’intégration d’icône que la solution proposée par Bootstrap lui-même.

  3. [...] – Projects < Web programmming < politicus Get flash to fully experience Pearltrees Quelques ressources pour optimiser Bootstrap – FF13 – Developper Bootstrap Xtra extends Bootstrap from Twitter – Vimperator – FF13 – Developper Bootstrap was built [...]

  4. emporeso dit :

    Il y a aussi une petite serie de theme tres agreable pour bootstrap : http://www.bootswatch.com

    Ainsi que la possibilité t’utiliser un cdn : http://www.bootstrapcdn.com

    Victime de son succes trop de site boostrapifié (si j’€™ose ainsi dire !) court sur la toile et la vient a  la rescousee http://stylebootstrap.info/ qui permet de personnaliser plein de choses .

  5. Maks dit :

    Merci!

    Hope you like bootsnipp!

  6. Nicolas dit :

    C’est que Bootsnipp est vraiment bien. Merci pour cette trouvaille ;)

  7. [...] design/framework < intégration < julienjolly Get flash to fully experience Pearltrees Quelques ressources pour optimiser Bootstrap YAML CSS Framework — for truly flexible, accessible and responsive websites « Responsive Web [...]

  8. [...] < virginiem Get flash to fully experience Pearltrees Quelques ressources pour optimiser Bootstrap Tirer profit de Solr Panels | techoop Non non, il ne s’agit pas de panneaux solaires, mais de [...]

  9. [...] Bootstrap est un framework CSS & Javascript conçu pour accélérer et faciliter vos développements «front-end».  [...]

  10. Laurent D dit :

    Bonjour, je cherche une solution pour utiliser Bootstrap avec Dreamweaver. En effet, a l’ouverture le css « Bootstrap » n’est pas compris par Dreamweaver. … ce qui impose de nombreux aller retour en entre Dreamweaver et le navigateur pour en voir le résultat. Est ce qu’il y a un moyen de contourner ce problème ? Merci

  11. rwaness dit :

    Belles découvertes … il existe aussi : LayoutIt! mais qui est encore en bêta.

  12. Laurent vogel dit :

    Je vous invite aussi à decouvrir une liste de ressources à ajouter à vos favoris: twittstrap

  13. […]  Des ressources pour optimiser Bootstrap […]

Laissez un commentaire

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

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site