Twitter Bootstrap 3 Snippets for Atom
Clone or download
Latest commit 15a4a92 Sep 22, 2015
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
settings Add css, less, jade support. Sep 22, 2015
snippets Fix & rename package Sep 1, 2015
.gitignore init Apr 15, 2014
LICENSE.md update, removed unnecessary folder and files, licience update Apr 15, 2014
README.md "Twitter Bootstrap" => "Bootstrap" Jan 30, 2015
package.json Prepare 1.2.12 release Sep 1, 2015

README.md

Bootstrap 3 Support for Atom

Provides Bootstrap 3 classes and HTML tags with autocompletion features.

Install:

apm install atom-bootstrap3

Key Features:

  • Supports autocompletion of all helper classes in JavaScript, CSS and HTML
  • Snippet support for all components.
  • Autocompletion for Glyphicons, Fontawesome and Octicons

An example with HTML Preview

Atom HTML Preview with Bootstrap

Templates

  • html-: Generates Basic HTML Template
  • html-min: Generates Basic HTML Template without comments
  • html-oi: Generates Basic HTML Template (replace fontawesome in favor of octicons)

Components

All components also have autocompletion support for extra options.

Icons

The plugin has Glyphicon and Fontawesome support.

  • icon: Generates glyphicon icon snippet
  • fa: Generates fontawesome icon snippet
  • oi: Generates octicon snippet

Alert

  • alert
  • alert-link
  • close

Badge

  • badge

Breadcrumb

  • breadcrumb
  • item

Buttons

  • btn
  • btn-group
  • btn-group-vertical
  • btn-toolbar
  • btn-modal

Menus and Dropdowns

  • dropdown
  • menudivider
  • menuheader
  • menuitem

Forms

  • form-group
  • input-group

Labels

  • label-

Lists

  • list-group
  • list-inline
  • list-item
  • list-unstyled

Tabs and Navigations

  • nav-pills
  • nav-tabs
  • nav-
  • navbar: Generates standard navbar template
  • navbar-drop: Generates navbar dropdown item

Other Components

  • pager
  • page-header
  • pagination
  • panel
  • progress-
  • table-
  • thumbnail
  • well
  • jumbotron

JavaScript Components

  • modal: Generates modal HTML
  • btn-modal: Generates modal trigger button HTML
  • accordion: Generates accordion HTML
  • accordion-item: Generates accordion item HTML
  • carousel: Generates carousel HTML
  • carousel: Generates carousel item HTML
  • navbar: Generates navbar HTML
  • navbar-dropdown: Generates navbar dropdown item

Grid

  • row: Generates column container: <div class="row"></div>
  • col-: Generates column: <div class="col-..."></div>
  • col-lg: Generates large column: <div class="col-lg-..."></div>
  • col-md: Generates medium column: <div class="col-md-..."></div>
  • col-sm: Generates small column: <div class="col-sm-..."></div>
  • col-xs: Generates extra small column: <div class="col-xs-..."></div>
  • con: Generates container: <div class="container"></div>
  • conf: Generates fluid container: <div class="container-fluid"></div>

Typography

  • lead: Lead class <p class="lead">
  • h1-: Heading 1 <h1>Text {<small>optional</small>}</h1>
  • h2-: Heading 2 <h2>Text {<small>optional</small>}</h2>
  • h3-: Heading 3 <h3>Text {<small>optional</small>}</h3>
  • h4-: Heading 4 <h4>Text {<small>optional</small>}</h4>
  • h5-: Heading 5 <h5>Text {<small>optional</small>}</h5>
  • h6-: Heading 6 <h6>Text {<small>optional</small>}</h6>
  • initialism: Generates "initialism" text
  • blockquote-reverse: Generates reverse blockquote
  • dl-horizontal

Notes

  • Snippet funcionality has some bugs, I hope it will be fixed by Atom team.
  • More to come :)