Code Monkey home page Code Monkey logo

bootstrap-snippets's Introduction

Bootstrap Snippets

HTML and Haml snippets for Twitter Bootstrap 3.3.2 markup, for the Vim plugin snipMate.

Animation

Dependencies

Installation using Pathogen

$ cd ~/.vim
$ mkdir bundle
$ cd bundle

# Install dependencies:
$ git clone https://github.com/garbas/vim-snipmate.git
$ git clone https://github.com/tomtom/tlib_vim.git
$ git clone https://github.com/MarcWeber/vim-addon-mw-utils.git

# Install bootstrap-snippets
$ git clone -b bootstrap-3-3-2 git://github.com/bonsaiben/bootstrap-snippets.git

Usage

In an html or haml file, type a trigger name in Insert mode, and press Tab to expand it into HTML markup.

Trigger names are meant to be as predictable as possible without being too long or redundant.

Most trigger names correspond directly to the relevant tag or class name, minus hyphens. For example, btnprimary becomes:

<button type="button" class="btn btn-primary">Default</button>
Buttons

Markup with .btn class uses the <button> tag by default, however there is usually a corresponding <a> tag version with the same trigger preceded by an a. For example, with btnprimary there is also abtnprimary which becomes:

<a href="#" class="btn btn-primary" role="button">Primary</a>

See Trigger Glossary below for a full list of triggers.

Filetypes

By default html snippets will only work in html files, or file formats associated with the html filetype in vim. If you are using a format like Ruby ERB (.html.erb) and the html snippets are not working, you may have to tell Vim to associate .html.erb files with the html filetype, for example:

autocmd BufRead,BufNewFile *.html.erb set filetype=html

Autocomplete

bootstrap-snippets ships with a dictionary file containing all of the triggers. This can be used as a vim dictionary for autocomplete (Insert mode CTRL+N/CTRL+P).

Add the dictionary file and enable dictionary autocomplete:

set dictionary+=~/.vim/bundle/bootstrap-snippets/dictionary
set complete+=k

Trigger Glossary

You can find a trigger glossary in the Wiki here.

bootstrap-snippets's People

Contributors

bonsaiben avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.