Sublime Text, mes snippets HTML / CSS

Pour faire suite à un billet précédent à propos des plugins et raccourcis de mon éditeur fétiche Sublime Text, je continue sur ma lancée en mettant à disposition mon lot de snippets personnalisés (que j’utilise quotidiennement).

Les snippets sont des bouts de code HTML/CSS/JS/etc qui fonctionnent sous forme d’autocomplétion avec la touche tab.

Où les trouver ?

Ma liste de snippets (mis à jour régulièrement) à télécharger ici : http://kiwi.gg/snippets

Comment les installer ?

Copiez les fichiers sur votre disque à cet endroit :

C:\Users\ *****\AppData\Roaming\Sublime Text 2\Packages\User

Comment s’en servir ?

Voici la liste, non exhaustive, des raccourcis existants (fonctionne avec touche Tab) :

  • @media → @media (max-width: 640px) {}
  • media → @media (max-width: 640px) {}
  • content → du contenu-type HTML (titre, navigation, paragraphes)
  • css → <link rel=”stylesheet” href=”styles.css” media=”all”>
  • doctype → feuille HTML5 de base
  • doctypemini → feuille HTML5 miniature de base
  • ie → <!—[if IE]> <![endif]—>
  • ie7 → <!—[if lte IE 7]> <![endif]—>
  • knacss → version complète et à jour de KNACSS.css
  • list → crée une liste ul/li de 5 éléments
  • lorem → crée du texte schnapsum
  • loremp → crée 3 paragraphes de schnapsum
  • navi → crée une navigation HTML5
  • noie → <!—[if !IE]><!—> <!—<![endif]—>
  • unicode → affiche une liste de caractères unicode utiles
  • viewport → <meta name=”viewport” content=”width=device-width,initial-scale=1.0”>

Amusez-vous bien avec et n’hésitez pas à me proposer d’autres snippets utiles !