jasonmortonnz / bs3-sublime-plugin Goto Github PK

Hi,

Can you add a demo page for your plugin ?

Regards,
Ben

Adding the following to your readme file would be helpful and make it even easier to start using your awesome package:

Installation

Method 1: Clone the repository into your Sublime Text 2/3 packages directory.

git clone https://github.com/JasonMortonNZ/bs3-sublime-plugin.git

Method 2: Download the .zip file and unzip it into your Sublime Text 2/3 packages directory.
Note: You can find your Sublime Text 2/3 packages directory by going to Preferences > Browse Packages.

Like so:

Many (if not all) the horizontal input fields have git conflict data in the snippet.

Here's an example from: https://github.com/JasonMortonNZ/bs3-sublime-plugin/blob/master/form/bs3-input-email-h.sublime-snippet

    <label for="input${1/(\w+)/\u\1/g}" class="col-${2:sm-2} control-label">${1/(\w+)/\u\1/g}:</label>
<<<<<<< HEAD
    <div class="col-${3:sm-10}">
=======
    <div class="col col-${3:sm-10}">
>>>>>>> ee92897f9e6bc44d2cbfd3eabf5863a8d1fd0b0e
        <input type="email" name="${1}" id="input${1/(\w+)/\u\1/g}" class="form-control" ${4:value="${5}"} ${6:required="required"} ${7:title="${8}"}>

Will some clever git-foo fix all of these in one shot?

Ubuntu 14.04
FIXED. When I first installed bs3 on sublime 2, I added the "<" trigger to my settings as per your doc... it was already in the default settings, so I added it to my user settings, and the <bs3 autocomplete didn't bring anything up. Added the trigger to all the other settings, even the html-specific one, nada. The only other package I had installed was Emmet. Disabled and uninstalled Emmet, still no dice. CTRL+Shift+P worked for bs3 no problem since I installed it. When I finally removed/reinstalled bs3, <bs3 works like a charm, great addon!

I believe my particular issue may have something to do with needing the preferences saved BEFORE bs3 was installed. Or maybe it was just a bad install? Works now and is awesome, thank you for the hard work!

maxcdn.bootstrapcdn.com
and
obviously 3.3.5

Reference snapshot

Hey there. Just to attend you.
<bs3-cdn:js is broken.
It refers to: //netdna.bootstrapcdn.com/bootstrap/js/bootstrap.min.js which access is denied. Please update it!
I think it had to be: '//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js' or something

The CSS cdn still works.

In the navigation snippet, please add one more option to add dropdown menu. It will be a real time saver.

Thanks a lot.

<snippet>
    <content><![CDATA[
<li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
              ${1:Dropdown} 
              <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#">${2:Action}</a></li>
                <li><a href="#">${3:Another action}</a></li>
                <li><a href="#">${4:Something else here}</a></li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">${5:Nav header}</li>
                <li><a href="#">${6:Separated link}</a></li>
                <li><a href="#">${7:One more separated link}</a></li>
            </ul>
        </li>
]]></content>
    <tabTrigger>bs3-navbar:dropdown</tabTrigger>
</snippet>

I've been missing the wells :)

I see document have many snippets, But alert folder only have four snippet

Is there any way to change the default url of bootstrap css and js automatically.
I am sure every body have their own bootstrap file in their computer if they use bootstrap. So, why we need to use online bootstrap? What if the internet connection is not as fast as yours?

A basic HTML template snippet would be handle. Just a quick snippet to layout the basic HTML structure and load jQuery and Bootstrap resources from Google and BootstrapCDN.

Maybe you create this plugin to Notepad++ ?

When I try use that snippets (bs3-form-label and bs3-input-label) ST2 do crash.

I opened ST2 from console and showed this error: [1] 6605 segmentation fault (core dumped)

Some snippets, like bs3-panel-heading for example, are not well indented. It seems that it concerns old snippets (those you wrote more than a year ago). New ones are well indented.

http://getbootstrap.com/components/#btn-dropdowns

bs3-carousel:
this carousel not compatible with large screen (desktop 19' 21' ) for chrome 48 & internet explo11...

In the documentation the snippet is listed as bs3-template:html5 , but the correct snippet is bs3-template:html

Regards,
Felipe

Perhaps incorporating all of the JS

Transitions

Modal

....

bs3-transitions

bs3-modal

Hello,

When I write a form with bs3 plugin, Sublime Text 2 have a crash and exit.

The snippets is fine. I don't know the cause.

Regards!

With bs3-template:html5 snippet can make this structure:

< !DOCTYPE html>
< html lang="">
< head>
< title>Title Page</title>
< meta charset="UTF-8">
< meta name=description content="">
< meta name=viewport content="width=device-width, initial-scale=1">
< meta name="viewport" content="width=device-width, initial-scale=1.0">
< !-- Bootstrap CSS -->
< link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
< /head>
< body>
< h1 class="text-center">Hello World
< !-- jQuery -->
< script src="//code.jquery.com/jquery.js"></script>
< !-- Bootstrap JavaScript -->
< script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
< /body>

< /html>

Can you see:

• Meta name description without (" ")?
• Double meta name viewport?

I know that is not a big bug, but i think this should be fix it

It would be really nice to have a description for each snippet to help remember the correct tab trigger. This'd be pretty dull to add by hand, but perhaps someone knows a way to programmatically add a description tag based on the file name or the tab trigger.

For example, I input <bs3-label it will become:

 <<span class="label">Label</span>

One extra < input, what's wrong? Thanks

Is there a way to see an inline popup like you see when you input php or css? as it is right now I can do CMD+SHIFT+P and search what I need but would be nice to have the instant popup. Also I do realize that if I type the full shortcut, for example bs3-jumbotron,tab will output the jumbotron code, but It'd be nice to have fuzzy search when typing so that we don't have to memorize all the bs3 shortcuts that we need.

I know this might be out there, but thoughts on having slim (and possibly haml) support?

Is it possible?

The snippets have no scope, so by default they show up on any kind of file.

¿Is it worth adding a scope to, say text.html?

I am willing to make a pull request if needed

Hello,
I try to make nav-pills using this plugin but looks like I can't find the snippet. Haven't it been produced? Or which snippet can I use to make nav-pills element if it's already included in the plugin?

Thank you.

It would be nice to target only the HTML-related scopes so that all scopes don't show for every file type. Right now, they're showing up in js files, ruby files, etc... which doesn't make sense. I can put together a PR if this is something you're interested in.

Add a snippet for a select box

bs3-well
bs3-well:small
bs3-well:large

Please. :)

I have trouble where tabTriggering does not trigger auto-complete snippets menu in HTML files in ST2 and ST3. Is anyone else experiencing this issue?

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

This isn't an option for at least checkboxes and radio buttons (probably more too). Even through they're listed as supporting the :h option in README.

What do you think?

Hi,

Thank's and great work !

I have forked your plugin, for creating the same with Jade language.
bootstrap3-jade-sublime-plugin

Could you add a license to your project ?

some enhancement in mind :

• using tab in your snippet for indentation sublime text doc
• removing every ${N:Image} inside alt="" of img (blank or not, #a11y in mind)
• for img use $(N:data-}src for consistency.
• use holder.js
  <img ${1:data-}src="${2:holder.js/${3:100x200}/${4:#999:#fff}/${5:text:${6:hello world}}}" alt="${7}") class="${8:.img-responsive}"/>
• maybe writing a TODO list if you want help.

How to use this plugin in Sublime 3?

Hi. Good work, many snippets available, more than 30-40.
I tried to port snippets to SynWrite editor but it's too much. If 10 - ok, but so much...

SW has similar (not fully) snippets syntax, also ${1}, ${2:test} etc
Would be good to have

Hi

I'm currently evaluating sublime and was trying this package. Every time i enter <bs3- and select a snippet a prefixed < is added to the markup, e.g. <<form ... Is this a bug?

Would be awesome if you could create grid columns with an offset value.

Suggested syntax: bs3-col:(width).(offset) or bs3-col:(width)+(offset)

Thanks for this awesome plugin!

when I attempt to use the hero example, the generated code does not appear to be working? No nav bar and nav options show up as an un-ordered list rather than in a navbar?

(also looks like "Le fav and touch icons" is referencing a local folder?

hello, i have installed the plugin for st3 but i dont have autocompletion when i put "bs3-"
i tried with html and php files

Doesn't tabTrigger

When i type TAB, Sublime will shutdown

I can only find navbar or tabs, but can't find navtabs.

<ul class="nav nav-tabs">
   <li class="active"><a href="#">${1:Active Item}</a></li>
   <li><a href="#">${2:Normal Item}</a></li>
</ul>

Neither for navpills....

<ul class="nav nav-pills">
   <li class="active"><a href="#">${1:Active Item}</a></li>
   <li><a href="#">${2:Normal Item}</a></li>
</ul>

Nor for dropdown or dropup....

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    ${1:Menu Name!}
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu">
    <li><a href="#" class="active">${2:Active Item}</a></li>
    <li><a href="#">${3:Normal Item}</a></li>
  </ul>
</div>

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    ${1:Menu Name!}
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu">
    <li><a href="#" class="active">${2:Active Item}</a></li>
    <li><a href="#">${3:Normal Item}</a></li>
  </ul>
</div>

This is for btn-group

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">${1:Button}</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      ${2:MenuName}
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#" class="active">${3:Active Item}</a></li>
      <li><a href="#">${4:Normal Item}</a></li>
    </ul>
  </div>
</div>

btn-group too.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">${1:Button}</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">${2:Button}</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">${3:Button}</button>
  </div>
</div>

progress-bar

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

http://getbootstrap.com/javascript/#tabs