Creative
Blog Du Webdesign
Emploi BDW
Vous êtes un utilisateur de Coda ? Vous passez un temps précieux à coder toutes ces propriétés CSS3 à rallonge dans de vos feuilles de style ? Hum.. je pense que ce billet peut vous intéresser… Vous y trouverez une liste de clips CSS3 pour Coda qui devraient booster votre productivité.
Vous n’avez pas envie de lire l’article ? Téléchargez dès maintenant la liste de clips CSS3 pour Coda :
Les nombreuses fonctionnalités de Coda en ont fait l’un des outils de développement privilégié des utilisateurs de Mac. C’est un logiciel « tout en un » : éditeur de texte, éditeur css, transfert de fichiers, système de gestion de versions, nombreux plugins etc… un outil parfait pour le travail d’intégration web (entre autre).
Parmi les multiples fonctionnalités proposées, le système de « clips » est vraiment intéressant car il permet de gagner un temps précieux.
Coda dispose d’une bibliothèque dédiée au stockage de snippets (petit morceaux de code préformatés, réutilisables facilement). Par défaut la bibliothèque ne contient que très peu de clips mais libre à vous d’en ajouter autant que vous voulez (html, css, js, php etc.).
Voici l’exemple d’un clip pour la propriété border-radius
On y retrouve les différents préfixes propriétaires et la propriété border-radius initiale. Chaque clip se compose d’un titre, d’un contenu et il est possible d’attribuer un raccourci pour en inclure rapidement le contenu dans la page en cours (ici : radius + tab)
Il existe de nombreux Clips Coda disponibles gratuitement sur Internet : Wordpress, Javascript, HTML etc.
Depuis l’arrivée des CSS3 nous sommes habitués à utiliser des propriétés à rallonge. Entre les préfixes propriétaires permettant la compatibilité inter-navigateurs, le progressive enhancement, et des propriétés CSS3 naturellement longues (comme les dégradés par exemple), tout cela accroit le temps passé à créer nos feuilles de style.
Pour optimiser mon travail d’intégration j’ai créé une liste de clips regroupant de nombreuses propriétés CSS3 auxquelles sont rattachés des raccourcis. Cet article est l’occasion de partager cette liste avec les utilisateurs de Coda qui pourraient en avoir besoin.
Voici la liste exhaustive du contenu que vous trouverez dans mes clips CSS3 :
Screenshot de la liste de clips CSS3 :
Pour être utilisé plus rapidement, chaque clip possède son propre raccourci. Pour border-radius, par exemple, il suffit de tapper radius et tab pour insérer le contenu dans votre feuille de style.
Autre exemple : si vous souhaitez ajouter un dégradé (et sa longue syntaxe), il vous suffit de tapper gradient suivi de tab pour insérer le clip. C’est très simple et cela vous économise quelques lignes de CSS à chaque fois.
L’installation est simplissime puisque vous n’avez qu’à double cliquer sur le fichier CSS3.clips pour ajouter une nouvelle famille de clips « CSS3″ à la liste des clips de Coda.
Vous pouvez bien sûr personnaliser le contenu afin de vous l’approprier plus facilement. Pour modifier un clip il vous suffit de cliquer sur l’icône « i » située sur chaque intitulé comme vous pouvez le voir sur le screenshot ci-dessous.
Vous l’aurez compris, ce système de clips peut vous faire gagner un temps précieux alors pourquoi s’en priver ?
Quelques liens pour finir
Rejoignez la communauté des créatifs du web !
- Partagez vos créations
- Gagnez en visibilité
- Créez votre blog facilement
> En savoir plus
Auteur : FOUTOYET Aurélien
voir son blog
Web designer freelance : ergonomie, design UI-UX web/mobile, intégration
le 11/03/11| #2
Super article, utilisateur de coda depuis maintenant 1 an je suis toujours aussi fan.
@The Multimédia: À ma connaissance non, mais pour coder sur windows tu peux voir du côté de komodo edit, ou encore netbeans qui sont pas mal.
le 12/03/11| #4
Merci à tous pour vous commentaires.
Emilien, je viens d'essayer et le lien est fonctionnel de mon côté
le 12/03/11| #5
C'est une super ressources. J'utilise Coda depuis un bon moment maintenant mais j'ai jamais pris le temps de faire ça.
Merci beaucoup.
le 12/03/11| #6
Merci pour l'article,
Personnellement j'utilise TextMate ou Neatbeans.
le 14/03/11| #7
Merci pour cet article. Très intéressant.
Je conseil également aux utilisateurs de Coda (ou autres logiciels) l'utilisation du framework "less" qui est également d'une grande aide pour la création de styles CSS3 :
Et d'ailleurs, j'invite nos bons rédacteurs de blogduwebdesign à faire un article sur "less", qui est un framework formidable et devient rapidement indispensable.
Je dirai même plus, je me propose également pour la rédaction de cet article si ça vous tente.
le 27/03/11| #8
Merci pour ces clips qui sont bien utiles et évites les allez retour pour les trous de mémoires :ninja:
Merci pour le conseil pour less, c'est vrai qu'un article serait intéressant :)
le 10/06/11| #9
Merci beaucoup ça me fera gagner un maximum de temps car jusqu'à maintenant je tapais tout à mains nues :-)
Également merci à Vincent pour "less"
le 30/10/11| #10
Je ne connaissais pas le référentiel des clips Coda et c'est juste énorme !
Merci pour ces liens qui vont me permettre de gagner un temps fou :)
Magazine Webdesign, Tendance Web, Webdesign et Actualité Graphique. Suivez nos Articles rédigés avec soin sur les thèmes du Motion Design et de l'actualité du Web ! Suivez le Blog du Webdesign, suivez le Magazine du Webdesign !
En Savoir Plus
le 10/03/11| #1
Super Article,
Merci !