apm install atom-html-preview
Provides Twitter 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 and Fontawesome
An example with HTML Preview
-
html-
: Generates Basic HTML Template -
html-min
: Generates Basic HTML Template without comments
All components also have autocompletion support for extra options.
The plugin has Glyphicon and Fontawesome support.
-
icon
: Generates glyphicon icon snippet -
fa
: Generates fontawesome icon snippet
alert
alert-link
close
badge
breadcrumb
item
btn
btn-group
btn-group-vertical
btn-toolbar
btn-modal
dropdown
menudivider
menuheader
menuitem
form-group
input-group
label-
list-group
list-inline
list-item
list-unstyled
nav-pills
nav-tabs
nav-
-
navbar
: Generates standard navbar template -
navbar-drop
: Generates navbar dropdown item
pager
page-header
pagination
panel
progress-
table-
thumbnail
well
jumbotron
-
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
-
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>
-
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
- Snippet funcionality has some bugs, I hope it will be fixed by Atom team.
- More to come :)