Skip to content

babobski/komodo-bootstrap-snippets

Repository files navigation

screenshot Komodo Edit / Ide Bootstrap snippets

Bootstrap 3.3.6 snippets collection for Komodo edit / ide.
Easy to use, you can add the snippets on different ways.
Use Tab to jump true the editable area's,
if you want to clear all tab stops you can hit the Esc key.

Usage

Search for Snippet
By hitting ctrl + shift + k a search window will popup, when you type 'bs-' all the bootstrap snippets will be shown. This is a fast way to search inside your snippets.
![screenshot](screenshot01.png)
Insert snippet by name
A other way is using the insert snippet by name short-code. If you type bs-col and hit the command ctrl + t the snippet will be included in your code.
![screenshot](inser-snippet-by-name.gif)

Setting up key bindings

change or add key bindings to the search and insert snippet by name
To change the key bindings for the search snippet command and insert snippet by name, you go to **preferences > key bindings**. Here you can change the key bindings for the commands. The commands to search for: * Insert abbreviation snippet by name (default assigned to ctrl + t) * Open commando with the tools and command scope (default assigned to ctrl + shift + k) * Open commando with the tools scope (not assigned)
add key bindings to snippet
to add key bindings to a snippet, for instance you want the gird system snippets on key bindings for a fast workflow, you can add a key binding to a snippet by right clicking on a snippet, go to properties and you will see here a tab key binding, here you can set your key binding for the snippet.

**tip:** if you want to have all of the snippets to have the same start in the key binding you can disable the alt shortcut, by going to **preferences > key bindings** and select the **remove Alt- shortcuts from menus**. You can now use the Alt key in your shortcuts, you could use alt + b + r for instance, for creating a row.

Indentation

The indentation in the snippets are by default tab based, if you are using a different indentation there is a easy way to achieve this:

Update all snippets to the right indentation

If you want to update all snippets to the indentation of your flavor, you can use the [Beautify JS](https://github.com/babobski/Beautify-js) addon. You can configure the addon to your indentation, if you than edit the snippets(right click on snippet "edit snippet") and run the beautify over the snippets and save them, you will no longer have indentation issues.

snippets included

  bootstrap-3.3.4/
	Abbreviations/
		HTML/
			Components/ 
				Alerts/
					bs-alert danger
					bs-alert dismissible
					bs-alert info
					bs-alert link
					bs-alert success
					bs-alert warning
				button-groups/
					bs-btn group
					bs-btn group justified
					bs-btn-group vertical
					bs-btn toolbar
				dropdowns/
					bs-btn dropdown
					bs-btn split dropdown
					bs-dropdown
					bs-dropdown-separator
					bs-dropup
				input-groups/
					bs-input button group
					bs-input checkbox group
					bs-input dropdown group
					bs-input group
					bs-input radio group
				Navbar/
					bs-navbar btn
					bs-navbar default
					bs-navbar fixed bottom
					bs-navbar fixed top
					bs-navbar form
					bs-navbar static top
					bs-navbar text
				Navs/
					bs-li dropdown
					bs-nav pills
					bs-nav justified
					bs-nav pills stacked
					bs-nav tabs
					bs-nav tabs justified
				page-parts/
					bs-custom content
					bs-list group
					bs-list group badge
					bs-list group custom
					bs-list group linked
					bs-media list
					bs-media object
					bs-thumbnails (4 img in row)
				Panels/
					bs-panel default
					bs-panel default list group
					bs-panel default table
					bs-panel footer
				Progress-bars/
					bs-progress bar
					bs-progress bar animated
					bs-progress bar label
					bs-progress bar striped
				bs-badge
				bs-breadcrumb
				bs-embed responsive 16by9
				bs-embed responsive 4by3
				bs-jumbotron
				bs-jumbotron full width
				bs-pager
				bs-pager aligned
				bs-pagination
				bs-well
				bs-well lg
				bs-well sm
			Css/
				Code/
					bs-basic (code) block / pre
					bs-inline code
					bs-sample output
					bs-user input / keyboard
					bs-variables / Math
				forms/
					bs-checkbox
					bs-checkbox inline
					bs-form basic
					bs-form horizontal
					bs-form inline
					bs-help block
					bs-radio
					bs-radio inline
				Grid system/
					bs-col
					bs-container
					bs-row
				Tables/
					bs-table basic
					bs-table bordered
					bs-table condensed
					bs-table hover rows
					bs-table striped rows
				Typography/
					inline-text/
						bs-deleted text
						bs-inserted text
						bs-marked text
						bs-strikethrough text
						bs-text capitalize
						bs-text center
						bs-text justify
						bs-text left
						bs-text lowercase
						bs-text nowrap
						bs-text right
						bs-text uppercase
						bs-underlined text
					bs-blockquote
					bs-blockquote reverse
					bs-close icon
					bs-description
					bs-horizontal description
					bs-label / tag
					bs-list inline
					bs-list unstyled
		javascript/
			Popovers/
				bs-popover bottom
				bs-popover default
				bs-popover dismiss click
				bs-popover left
				bs-popover right
				bs-popover top
			Tooltips/
				bs-tooltip bottom
				bs-tooltip default
				bs-tooltip left
				bs-tooltip right
				bs-tooltip top
			bs-collapse
			bs-affix
			bs-button loading
			bs-button toggle
			bs-button toggle checkbox
			bs-button toggle radio
			bs-carousel
			bs-dropdown
			bs-modal
			bs-scrolspy
			bs-tab