Download Protostrap

Protostrap Sublime Cheatsheet


Protostrap comes with a series of precoded extras that speed up your prototyping game. The cheat sheet is a collection of snippets and key bindings that are useful in your daily word.



Snippets

We have a series of snippets we use and this cheatsheet helps us keep track of which shortcut triggers which snippet.

Shortcut Name and Snippet
acc Accordeon.   Type: HTML

<div class="panel-group accordeon-wedge" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#coll<?php echo getUniqueId();?>">
        <a  class="panel-title">
            One
        </a>
    </div>
    <div id="coll<?php echo $lastUniqueId;?>" class="panel-collapse collapse in">
      <div class="panel-body">
        One Body
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#coll<?php echo getUniqueId();?>">
        <a  class="panel-title">
            Two
        </a>
    </div>
    <div id="coll<?php echo $lastUniqueId;?>" class="panel-collapse collapse">
      <div class="panel-body">
        Two Body
      </div>
    </div>
  </div>
</div>
acgr Accordeon Group.   Type: HTML
<div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#coll<?php echo getUniqueId();?>">
            One
        </a>
      </h4>
    </div>
    <div id="coll<?php echo $lastUniqueId;?>" class="panel-collapse collapse in">
      <div class="panel-body">
        OneBody
      </div>
    </div>
  </div>
alert Alert.   Type: PHP
 <?php alert("Message", "info", "inherit" , "boxid" , "dismiss" ); ?>
br Break.   Type: HTML
<br>
psbtn Button.   Type: HTML
<button class="btn  btn-primary">Label$TM_SELECTED_TEXT</button>
btngr Button Group.   Type: HTML
<div class="btn-group toggleSinglePrimary">
    <button type="button" class="btn btn-default">Left</button>
    <button type="button" class="btn btn-default">Middle</button>
    <button type="button" class="btn btn-default">Right</button>
</div>
togglesingle Button Group with Toggle Single Primary.   Type: HTML
<div class="btn-group toggleSinglePrimary">
                            <button type="button" class="btn btn-default">one</button>
                            <button type="button" class="btn btn-default">two</button>
                            <button type="button" class="btn btn-default">three</button>
                        </div>
card Card.   Type: HTML
<div class="card">
    <div class="btn btn-default btn-togglePrimary btn-circle-sm btn-onCard"><i class="fa fa-heart-o"></i></div>
    <img class="card-img-top" src="assets/img/placeholderImage.svg" class="img-responsive" alt="Card image cap">
    <div class="card-block">
        <h4 class="card-title">Star small round</h4>
        <p class="card-text">A card with a round heart icon button that toggles to primary. <br>
        <br>
        Classes used: <br>
            btn btn-default btn-circle-sm btn-togglePrimary btn-onCard
        </p></p>
    </div>
</div>
carousel Carousel.   Type: HTML

        <?php
// define the carousel Id
// this is the name of the variable containing the carousel data
$carouselId = "carousel" ;?>
<div id="<?php echo $carouselId ;?>" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
  <?php foreach ($carousel as $key => $val) {
    $class = "";
    if($key === 0){
        $class = "active";

    }
    ?>
    <li data-target="#<?php echo $carouselId ;?>" data-slide-to="<?php echo $key ;?>" class="<?php echo $class ;?>"></li>
  <?php } ?>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
      <?php foreach ($carousel as $key => $value) {
            $class = "";
            if($key == 0){
                $class = "active";

            }?>
            <div class="item <?php echo $class ;?>">
                <img width="100%"src="./assets/img/<?php echo $value['image'] ;?>" alt="<?php echo $value['caption-title'] ;?>">
                <div class="carousel-caption">
                    <h4><?php echo $value['caption-title'] ;?></h4>
                    <p><?php echo $value['caption-text'] ;?></p>
                </div>
            </div>
      <?php } ?>


  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#<?php echo $carouselId ;?>" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#<?php echo $carouselId ;?>" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>
checkbox Checkbox.   Type: HTML
<label class="checkbox">
    <input type="checkbox" name="chk<?php echo getUniqueId();?>" id="chk<?php echo $lastUniqueId;?>" value="chk<?php echo $lastUniqueId;?>">
        Label
</label>
ac jQuery Add a Class, use "hide" as default.   Type: jQuery
.addClass("hide");
rc jQuery Remove Class, use "hide" as default.   Type: jQuery
.removeClass("hide");
tc jQuery Toggle Class, use "hide" as default.   Type: jQuery
.toggleClass("hide");
coll Collapse.   Type: HTML
<a href="javascript:void(0);" class="btn" data-toggle="collapse" data-target="#collapse<?php echo getUniqueId();?>">Trigger</a>
<div id="collapse<?php echo $lastUniqueId;?>" class="collapse">

</div>
console Console Log.   Type: jQuery
console.log('');
datepicker Datepicker.   Type: HTML
<div class="input-group date" id="" data-date="">
    <input class="form-control" type="text" value="">
    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>
fileupload Fileupload.   Type: HTML
<div data-provides="fileupload" class="fileupload fileupload-new">
    <div class="input-append">
        <div class="uneditable-input span3"><i class="icon-file fileupload-exists"></i> <span class="fileupload-preview"></span></div><span class="btn btn-file"><span class="fileupload-new">Select file</span><span class="fileupload-exists">Change</span><input type="file"></span><a data-dismiss="fileupload" class="btn fileupload-exists" href="#">Remove</a>
    </div>
</div>
<a href="javascript:void(0)" class="btn">Upload</a>
filtertable Filtertable.   Type: HTML
<div class="table-responsive table-responsive-maxheight">
    <?php
    $tabledata = $var;
    include("./snippets/makeTableFromData.php");?>
</div>
flex Flex Row with a fixed, a flex and a fixed slot.   Type: HTML
div.flexbox>div.fix80+div.flex-1+div.fix
flexbox Flexbox.   Type: HTML
<div class="flexbox">
    <div class="fixed-size-80" ></div>
    <div class="flex-1" ></div>
</div>
foreach Foreach.   Type: PHP
<?php foreach ($item as $key => $val) { ?>

<?php } ?>
formchk Form Group Checkbox.   Type: HTML
<div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
        <div class="checkbox">
            <label>
                <input type="checkbox" name="name"> Label
            </label>
        </div>
    </div>
</div>
formradio Form Group Radio.   Type: HTML
<div class="form-group">
    <label for="" class="col-sm-2 control-label">Label</label>
    <div class=" col-sm-10">
        <div class="radio">
            <label>
                <input type="radio" name="group"> Optionlabel
            </label>
        </div>
        <div class="radio">
            <label>
                <input type="radio" name="group" checked="checked"> Optionlabel
            </label>
        </div>
        <div class="radio">
            <label>
                <input type="radio" name="group"> Optionlabel
            </label>
        </div>
    </div>
</div>
formtext Form Group Text.   Type: HTML
<div class="form-group">
    <label for="id" class="col-sm-2 control-label">Label</label>
    <div class="col-sm-10">
        <input type="text" class="form-control" id="id" placeholder="Placeholder">
    </div>
</div>
ajax Ajax Get request.   Type: JavaScript
$.get('file.php?getparameter='+value, function(data){
    $("#id").html(data);
    return;
});
hideif Hide If.   Type: PHP
<?php hideIf("roles") ;?>
hrp Horizontal Ruler with plain class.   Type: HTML
<hr class="plain">
icon Icon.   Type: HTML
<i class="fa fa-search"></i>
image Image.   Type: HTML
<img class="img-responsive" src="assets/img/file.png" alt="">
include Include.   Type: PHP
<?php include("./snippets/.php");?>
incif Include If.   Type: PHP
<?php includeIf("roles","file.php") ;?>
inputdate Input Date.   Type: HTML
<div class="input-group date" id="" data-date="">
    <input class="form-control" type="text" value="<?php echo $today ;?>" name="">
    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>
psinput Input Field.   Type: HTML
<input type="text" class="form-control" name="" value="" placeholder="" >
inputgr Input Group.   Type: HTML
<div class="input-group">
      <span class="input-group-addon">pre</span>}
      <input type="text" class="form-control" name="" placeholder="">
      <span class="input-group-addon">post</span>}
</div>
issetget Assign a specific GET variable if it exists.   Type: PHP
$var = "";
if(isset($_GET['var'])){
    $var = $_GET['var'];
}
click jQuery click event handler.   Type: jQuery
$(".class").click(function() {

});
onclick jQuery onclick event handler.   Type: jQuery
$("body").on("click", ".classname", function() {

});
each jQuery Each.   Type: jQuery
.each(function (it, elem) {
    
});
$$ jQuery Selector.   Type: jQuery
$(".class")
list List-Group.   Type: HTML
<ul class="list-group">
    <li class="list-group-item"></li>
    <li class="list-group-item"></li>
    <li class="list-group-item"></li>
</ul>
md3 grid Row with 4 md-3 slots.   Type: HTML
div.row>div.col-md-3*4
md363 grid Row with an md-3, md-6 and an md-3 slot.   Type: HTML
div.row>div.col-md-3+div.col-md-6+div.col-md-3
md4 grid Row with 3 md-4 slots.   Type: HTML
div.row>div.col-md-4+div.col-md-4+div.col-md-4
md48 grid Row with an md-4 and an md-8 slot.   Type: HTML
div.row>div.col-md-4+div.col-md-8
md6 grid Row with 2 md-6 slots.   Type: HTML
div.row>div.col-md-6*2
md84 grid Row with an md-8 and an md-4 slot.   Type: HTML
div.row>div.col-md-8+div.col-md-4
media Media.   Type: HTML
<div class="media">
    <a class="pull-left" href="javascript:void(0);">
        <img class="media-object" src="assets/img/img.png" alt="">
    </a>
    <div class="media-body">
        <h4 class="media-heading">Headline</h4>
        Bodytext
    </div>
</div>
mp Micropadding of 8px.   Type: HTML
<div class="micropadding"></div>
modal Modal.   Type: HTML
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#${1:myModal">
  Launchmodal
</button>}
nb nbsp.   Type: HTML
&nbsp;
panel Panel.   Type: HTML
<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">title</h3>
  </div>
  <div class="panel-body">
    content
  </div>
</div>
php PHP Tag.   Type: PHP
<?php  ?>
echo PHP Echo Tag.   Type: PHP
<?php echo $var ;?>
post Post.   Type: PHP
$_POST['id']
row Row.   Type: HTML
<div class="row">
    <div class="col-md-3">

    </div>
    <div class="col-md-9">

    </div>
</div>
selectpicker Select.   Type: HTML
<select class="selectpicker" data-live-search="true" name="select" data-width="auto">
    <option value="">one</option>
    <option value="">two</option>
    <option value="">three</option>
</select>
showif Show If.   Type: PHP
<?php showIf("roles") ;?>
sl Make Emmet markup for a simple List.   Type: HTML
ul.simpleList>li*5
splitbtn Split Button.   Type: HTML
<div class="btn-group">
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);">
      Label
      <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li class=""><a href="" class="">foo</a></li>
        <li class=""><a href="" class="">bar</a></li>
        <li class="disabled"><a tabindex="-1" href="#">Label</a></li>
    </ul>
</div>
switchbtn Switch Button.   Type: HTML
<input type="checkbox" class="switch" data-on-text="ON" data-off-text="OFF" data-on-color="primary" checked>
pstable Table.   Type: HTML
<table class="table table-condensed">
    <tr>
        <th></th>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
tabs Tabs.   Type: HTML
<!--  ** TABS ** -->
<div class="tabbable">
    <ul class="nav nav-tabs">
          <li class="active"><a href="#tab1" data-toggle="tab">One</a></li>
          <li><a href="#tab2" data-toggle="tab">Two</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="tab1">
            <!-- TAB 1 CONTENT -->

            <!-- TAB 1 CONTENT  END -->
        </div>
        <div class="tab-pane " id="tab2">
            <!-- TAB 2 CONTENT -->

            <!-- TAB 2 CONTENT  END -->
        </div>
    </div>
</div>
<!-- ** End of TABS ** -->
this jQuery $(this) statement.   Type: jQuery
$(this).
data jQuery - construct this data statement.   Type: jQuery
$(this).data("")
__ Get translation for a key.   Type: PHP
<?php echo __("key"); ?>
typeahead Typeahead.   Type: HTML
<span class="form">
    <!-- Typeahead - Change Data in assets/js/main.js -->
    <input type="text" class="form-control typeahead" name="mytypeahead" placeholder="Typeahead (Try: foo)">
</span>
vd PHP vardump.   Type: PHP
<?php var_dump($var) ;?>
void Javascript Void.   Type: HTML
javascript:void(0);
while While loop with increment.   Type: PHP
<?php
$i = 1;
while ($i <= 3) {?>

    <?php $i++;
} ?>

Key Bindings

To make things even easier we have a series of key bindings for the most often used snippets - macOS only.

Key Binding   Name and Snippet
ctrl+b Button 
<button class="btn  btn-primary">Label$TM_SELECTED_TEXT</button>
ctrl+i Icon 
<i class="fa fa-search"></i>
ctrl+shift+t Tabs 
<!--  ** TABS ** -->
<div class="tabbable">
    <ul class="nav nav-tabs">
          <li class="active"><a href="#tab1" data-toggle="tab">One</a></li>
          <li><a href="#tab2" data-toggle="tab">Two</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="tab1">
            <!-- TAB 1 CONTENT -->

            <!-- TAB 1 CONTENT  END -->
        </div>
        <div class="tab-pane " id="tab2">
            <!-- TAB 2 CONTENT -->

            <!-- TAB 2 CONTENT  END -->
        </div>
    </div>
</div>
<!-- ** End of TABS ** -->
ctrl+t Table 
<table class="table table-condensed">
    <tr>
        <th></th>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
ctrl+r Row 
<div class="row">
    <div class="col-md-3">

    </div>
    <div class="col-md-9">

    </div>
</div>
ctrl+shift+c Collapse 
<a href="javascript:void(0);" class="btn" data-toggle="collapse" data-target="#collapse<?php echo getUniqueId();?>">Trigger</a>
<div id="collapse<?php echo $lastUniqueId;?>" class="collapse">

</div>
ctrl+shift+< PHP Tag 
<?php  ?>
ctrl+e PHP Echo Tag 
<?php echo $var ;?>
ctrl+f Foreach 
<?php foreach ($item as $key => $val) { ?>

<?php } ?>
ctrl+v PHP vardump 
<?php var_dump($var) ;?>
ctrl+c jQuery click event handler 
$(".class").click(function() {

});