Textmate Bundles

Download

Download Kreviii Bundles

Installing

Here is what you need to do in order to install and then activate bundles in textmate:

• Open Finder and find this directory your-dir/Library/Application Support/Textmate/Bundles/
• Move the bundle files there
• Open Textmate
• In Textmate, find the top menu item and select : Bundles -> Bundle Editor -> Reload Bundles

Now You Got Bundles

So to view all these "Kreviii" bundles , Hit control (⌃) + option/alt (⌥) + commmand (⌘) + B and you will find it amongst a large list of the default textamte bundles that exist for all the different programming languages it supports. You might notice that textmate automatically made your name into a bundle aswell.

When you find Kreviii HTML, or Kreviii CSS, you can see all the snippets available. Now snippets are categorized into 4 or 5 types, I use mostly snippets ( purple icon ). There are also Commands and Macros which my analogy would be similar to using 'actions' in Photoshop.

With snippets you can assign Tab Triggers or Key Equivients ( keyboard shortcuts ) which you must do carefully because textmate has a lot of build in keyboard shortcuts so I avoid making too many until I'm comfortable knowing that it is't already something I need. Tab Triggers : you type a key word then hitting Tab (⇥) on the keyboard you have your snippet. Then you might have Tab Stops Meaning that you can hit tab again to place you cursor in predesigned places for very quick coding.

Try Dis!

1. First make sure that your page is ready for HTML use Textmate's keybaord shortcut shift ⇧ + control ⌃ + option ⌥ + H. Notice in the very bottom left corner dialoge HTML, and try clicking there to see how you can quickly change to different types. Alternatively you can use the same keyboard shortcut with different letters ex: shift ⇧ + control ⌃ + option ⌥ + C will get you to CSS.

2. Tab triggers can be set to work only when the document is of a certain type. So now Kreviii HTML shortcuts now work, type html5 then with out a space hit tab ⇥. You Should get 2 options , you can use the numbers on the keyboard to choose, or click ( Textmate is all about not clicking if at all possible ). Try the HTML5 min

3. Now you should have a nice new page to start doing some basic HTML, you can start coding and preview control ⌃ + option ⌥ + command ⌘ + P, use jQuery , and do all of it before you even saved !

4. Perhaps save. Like any program shift ⇧ + command ⌘ + S ( save as )

5. Now hit command ⌘ + up ↑ arrow key which should bring your cursor to the top of the page. From there you can bump down to just past the <title> attribute, and give a new line space and from here type style then tab ⇥ ( with tab triggers the cursor needs to be right after the key word

6. If you have the Kreviii CSS bundle , you should be able try out some of the CSS things, one is 'boilderplate' tab ⇥ which brings you with some options , you can choose 'whole thing' and from there you might delete the media queries ( unless your about to publish an iPhone friendly site ) but all the other things are a great starting place for any project, as per CSS goes.

7. Now that you get the idea explore the tab triggers and the symbols hopefully have been making sense by now, if not check out the DOCS section for textmate-shortcuts.html. There is a list of the built in Textmate shortcuts for HTML and And CSS, as well as a table of these symbols and the meaning. It's about 4-5 you need to know, they all represent the control-keys on the keyboard ( shift, control, alt/option, command, tab, sometimes delete or esc are used. )