Paste your Google Webmaster Tools verification code here
Go to Top

textmate snippets

I recently came across this textmate tutorial “Use Textmate Bundles to Increase your Productivity”. It is easy to follow.
If you aren’t familiar with adding language bundles to Textmate, you can start here Textmate Bundles, or get a list of current bundles. If you are a fan of HTML5 boilerplate, then you will be interested in this HTML5 Boilerplate template, with install instructions.

Looking through the current snippets in the CSS3 bundle i had dl for textmate and following the CSS3 Please (ready for use) examples, i was able to create some useful snippets for my next project.

i added the background-clip from CSS3 Please to the snippets created using the video. I also like the comments for browser usage, since this changes continually, but is a reminded when working of what browser versions i am testing for.
i ended up with a snippets

rounded:

/*rounded*/
-moz-border-radius: ${1:5}px;
-webkit-border-radius: $1px;
border-radius: $1px;

-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;

transition:


/* transition */
-moz-transition: all ${1:0.3}s ease-out; /* FF4+ */
-o-transition: all $1s ease-out; /* Opera 10.5+ */
-webkit-transition: all $1s ease-out; /* Saf3.2+, Chrome */
-ms-transition: all $1s ease-out; /* IE10? */
transition: all $1s ease-out;
$0

box-rotate:

/* rotate */
-moz-transform: rotate(${1:7.5}deg); /* FF3.5+ */
-o-transform: rotate($1deg); /* Opera 10.5 */
-webkit-transform: rotate($1deg); /* Saf3.1+, Chrome */
-ms-transform: rotate($1deg); /* IE9 */
transform: rotate($1deg);
filter: progid:DXImageTransform.Microsoft.Matrix( /* IE6–IE9 */
M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand');
zoom: 1;

I can see where using variables in textmate snippets is going to be very helpful.

, , , ,
Follow

Get every new post on this blog delivered to your Inbox.

Join other followers: