Soc Forms are built upon the Bootstrap form style. The 'soc-form' is simplified however, in stead of using different bootstrap classes to style your form, only a single 'soc-form' class must be added to the form element. This will create a horizontal form on large screens and change itself to a vertical one on smaller devices.
Guidelines for implementation
Style options are available to change details of the form. Use the following classes next to 'soc-form' to change the form:
form.soc-form>(div>(label[for="i$"]{Label $}+div>input#i$[type="text" placeholder="item $"]))*4+button[type="submit"]{Save}
form.soc-form.inline.hidden-labels>(div>(label[for="i$"]{Label $}+div>input#i$[type="text" placeholder="item $"]))*4+button[type="submit"]{Save}
form.soc-form.compact.btn-left>(div>(label[for="i$"]{Label $}+div>input#i$[type="text" placeholder="item $"]))*4+button[type="submit"]{Save}+button.btn-danger{Cancel}