Sing Documentation

Form Elements

There are four general styles available to style forms: .form-horizontal, .form-condensed, .form-label-left and "no style" for horizontal placed inputs, decreased margins, labels aligned to left and default form accordingly. You can combine any of them together.

Inputs

Bootstrap styles input by default, so there is no need to add any classes to inputs. Just use them. Don't forget to include input type.

Bootstrap has a great documentation about forms.

Input Sizing

Any input can be sized by adding .col-*-* class. For vertical sizing .input-lg and .input-sm are available.

Prepended and appended inputs

Again Bootstrap helps. It has everything we need to prepend and append inputs.

Textareas

Auto-growing textarea uses jQuery Autosize plugin to increase area size dynamically. Files:

<script src="vendor/jquery-autosize/jquery.autosize.min.js"></script>

Wysiwyg editor is based on bootstrap-wysihtml5. Files:

<script src="vendor/bootstrap3-wysihtml5/lib/js/wysihtml5-0.3.0.min.js"></script>
<script src="vendor/bootstrap3-wysihtml5/src/bootstrap3-wysihtml5.js"></script>

Markdown editor is built with Markdown js. Files:

<script src="vendor/markdown/lib/markdown.js"></script>

Selects

Two different type of selects avaiables in Sing template:

  • Select2 - is a really powerful tool used to convert default selects to interactive search-enabled widgets.
  • Bootstrap Select - is Bootstrap based custom select, designed to behave like regular Bootstrap selects. This one can be colored as any button.

Required files:

<script src="vendor/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script src="vendor/select2/select2.min.js"></script>

Checkboxes and Radio

To style default checkboxes and radio buttons Awesome Bootstrap Checkbox library is used. This lib was written specially for Sing, so in case you find some bugs or want some features - let us know.

Button-like checkboxes

Bootstrap has a great api to handle button states - bootstrap-button.js, so using it to imitate checkbox or radio buttons.

iOS-like switches

There is a special plugin to do that - Switchery. Include following files:

<script src="vendor/switchery/dist/switchery.min.js"></script>

Pickers

Any field may have either Datetimepicker or Colorpicker attached. Required files:

<script src="vendor/moment/min/moment.min.js"></script>
<script src="vendor/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
<script src="vendor/mjolnic-bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script>

Masked Inputs

To make any input accept only formatted values there is a great plugin to use - jasny's inputmask.js. Files:

<script src="vendor/jasny-bootstrap/js/inputmask.js"></script>

Sliders

Sing sliders are styled version of Bootstrap Slider plugin.

<script src="vendor/seiyria-bootstrap-slider/dist/bootstrap-slider.min.js"></script>

Simple file uploads

Same as masked input based on Jasny's BS fork. Files:

<script src="vendor/jasny-bootstrap/js/fileinput.js"></script>

Dropzone

Dead simple file upload plugin with image preview Dropzone.

<script src="vendor/dropzone/downloads/dropzone.min.js"></script>