Git Product home page Git Product logo

bs3-sublime-plugin's Introduction

Twitter Bootstrap 3 - Sublime Plugin

A sublime plugin complete with Twitter Bootstrap 3 snippets

Feel free to let me know what else you want added via:

What's included - contents

CDN

Component Snippet code
CDN link (both CSS & JS) bs3-cdn
CDN link (CSS only) bs3-cdn:css
CDN link (JS only) bs3-cdn:js

Forms

Component Snippet code
Form bs3-form
Inline Form bs3-form:inline
Horizontal Form bs3-form:horizontal

Tables

Component Snippet code
Table bs3-table
Bordered Table bs3-table:bordered
Condensed Table bs3-table:condensed
Hover Table bs3-table:hover
Striped Table bs3-table:striped

Input Fields (Form fields)

Note: you can add " :h " to the end of any input field snippet to make it compatible with Twitter Bootstrap 3 horizontal forms. E.g.

  • bs3-input:text:h
  • bs3-input:hidden:h
Component Snippet code Options
Label bs3-input:label
Text Input bs3-input:text :h
Email Input bs3-input:email :h
Password Input bs3-input:password :h
Hidden Input bs3-input:hidden :h
Url Input bs3-input:url :h
Color Input bs3-input:color :h
Number Input bs3-input:number :h
Range Input bs3-input:range :h
Date Input bs3-input:date :h
Week Input bs3-input:week :h
Month Input bs3-input:month :h
Time Input bs3-input:time :h
Tel Input bs3-input:tel :h
Search Input bs3-input:search :h
Reset Input bs3-input:reset :h
Submit Input bs3-input:submit :h
Checkbox Input bs3-input:checkbox :h
Radio Box Input bs3-input:radio :h

Alerts

Component Snippet code
Alert Box (Default) bs3-alert
Danger Alert Box bs3-alert:danger
Info Alert Box bs3-alert:info
Success Alert Box bs3-alert:success
Block Alert Box (Default) bs3-alert:block
Danger Block Alert Box bs3-alert:block:danger
Info Block Alert Box bs3-alert:block:info
Success Block Alert Box bs3-alert:block:success

Badges

Component Snippet code
Badge (Default) bs3-badge

Breadcrumbs

Component Snippet code
Breadcrumbs bs3-breadcrumbs

Buttons

Note: all button snippets below can have any of the following options append to the end of the snippet *.

  • :danger
  • :default
  • :disabled
  • :info
  • :primary
  • :success
  • :warning

An example:

  • bs3-button:success
  • bs3-large-button:disabled
  • bs3-block-button:warning
Component Snippet code Options
Button bs3-button *
Block Button bs3-block-button *
Mini Button bs3-mini-button *
Small Button bs3-small-button *
Large Button bs3-large-button *
Button bs3-button *

Grid

Note: The bs3-col snippet can be used both on its own or with the addition of a colon followed by the number of columns required: E.g.

  • bs3-col
  • bs3-col:6
  • bs3-col:12
Component Snippet code Options
Column bs3-col :1-12
Row bs3-row
Container bs3-container

Icons

Component Snippet code
Icon (use with Font Awesome) bs3-icon
Icon (use with Glyphicons) bs3-icon:g

Images

Component Snippet code
Thumbnail bs3-thumbnail
Thumbnail with content bs3-thumbnail:content

Labels

Component Snippet code
Label bs3-label
Danger Label bs3-label:danger
Info Label bs3-label:info
Success Label bs3-label:success
Warning Label bs3-label:warning

Pagination

Component Snippet code
Pager bs3-pager
Aligned Pager bs3-pager:aligned
Pagination bs3-pagination
Pagination:small bs3-pagination:small
Pagination:large bs3-pagination:large

Navigation

Component Snippet code
Navbar (basic navbar) bs3-navbar
Navbar Brand Element bs3-navbar:brand
Navbar Button bs3-navbar:button
Navbar Form bs3-navbar:form
Navbar Link bs3-navbar:link
Navbar Text bs3-navbar:text
Navbar Fixed-Botton bs3-navbar:fixed-bottom
Navbar Fixed-Top bs3-navbar:fixed-top
Navbar Inverse bs3-navbar:inverse
Navbar Responsive bs3-navbar:responsive
Navbar Static-Top bs3-navbar:static-top

Jumbotron

Component Snippet code
Jumbotron (ex Hero Unit) bs3-jumbotron

Panels

Component Snippet code
Panel bs3-panel
Panel (contextual) bs3-panel:{warning,success,info,danger,primary}
Panel (with heading) bs3-panel:heading
Panel (with footer) bs3-panel:footer

List-groups

Component Snippet code
List group bs3-list-group
List group (with badges) bs3-list-group:badges
List group (linked list) bs3-list-group:linked
List group (with content) bs3-list-group:content

Media Objects

Component Snippet code
Media Object bs3-media-object

bs3-sublime-plugin's People

Contributors

jasonmortonnz avatar pafnuty avatar robertd avatar

Watchers

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.