<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<h2>Mobile-Friendly API Documentation</h2>
<p class="lead">
Emulate tables that collapse beautifully on mobile devices!
</p>
<div class="alert alert-info">
<h4>Row modifier class included</h4>
<p>This feature uses a row modifier I created called ".margin-0". When applied to a ".row" element, it will ensure the margins between the columns will be 0. </p>
<p>This is important in order to emulate the table-like effect, but it will work in any environment.</p>
</div>
<hr />
<div class="method">
<div class="row margin-0 list-header hidden-xs">
<div class="col-sm-3"><div class="header">Property</div></div>
<div class="col-sm-2"><div class="header">Type</div></div>
<div class="col-sm-2"><div class="header">Required</div></div>
<div class="col-sm-5"><div class="header">Description</div></div>
</div>
<div class="row margin-0">
<div class="col-sm-3">
<div class="cell">
<div class="propertyname">
CurrencyCode <span class="mobile-isrequired">[Required]</span>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="cell">
<div class="type">
<code>String</code>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="cell">
<div class="isrequired">
Yes
</div>
</div>
</div>
<div class="col-sm-5">
<div class="cell">
<div class="description">
The standard ISO 4217 3-letter currency code
</div>
</div>
</div>
</div>
<div class="row margin-0">
<div class="col-md-3">
<div class="cell">
<div class="propertyname">
PriceType <span class="mobile-isrequired">[Required]</span>
</div>
</div>
</div>
<div class="col-md-2">
<div class="cell">
<div class="type">
<code>Int32</code>
</div>
</div>
</div>
<div class="col-md-2">
<div class="cell">
<div class="isrequired">
Yes
</div>
</div>
</div>
<div class="col-md-5">
<div class="cell">
<div class="description">
The type of price
</div>
</div>
</div>
</div>
<div class="row margin-0">
<div class="col-md-3">
<div class="cell">
<div class="propertyname">
WarehouseID <span class="mobile-isrequired">[Required]</span>
</div>
</div>
</div>
<div class="col-md-2">
<div class="cell">
<div class="type">
<code>Int32</code>
</div>
</div>
</div>
<div class="col-md-2">
<div class="cell">
<div class="isrequired">
Yes
</div>
</div>
</div>
<div class="col-md-5">
<div class="cell">
<div class="description">
The unique identifier for the warehouse
</div>
</div>
</div>
</div>
<div class="row margin-0">
<div class="col-md-3">
<div class="cell">
<div class="propertyname">
ItemCodes
</div>
</div>
</div>
<div class="col-md-2">
<div class="cell">
<div class="type">
<code>String[]</code>
</div>
</div>
</div>
<div class="col-md-2">
<div class="cell">
<div class="isrequired">
<span class="text-muted">No</span>
</div>
</div>
</div>
<div class="col-md-5">
<div class="cell">
<div class="description">
</div>
</div>
</div>
</div>
<div class="row margin-0">
<div class="col-md-3">
<div class="cell">
<div class="propertyname">
LanguageID
<a class="lookuplink" href="javascript:;">
<i class="glyphicon glyphicon-search"></i>
</a>
</div>
</div>
</div>
<div class="col-md-2">
<div class="cell">
<div class="type">
<code>Int32?</code>
</div>
</div>
</div>
<div class="col-md-2">
<div class="cell">
<div class="isrequired">
<span class="text-muted">No</span>
</div>
</div>
</div>
<div class="col-md-5">
<div class="cell">
<div class="description">
The customer's preferred language ID (ex. 0 (English), 1 (Spanish), etc.)
</div>
</div>
</div>
</div>
</div>
</div>
/* Methods */
.method .header, .method .cell {
padding: 6px 6px 6px 10px; }
.method .list-header .header {
font-weight: normal;
text-transform: uppercase;
font-size: 0.8em;
color: #999;
background-color: #eee; }
.method [class^="row"],
.method [class*=" row"] {
border-bottom: 1px solid #ddd; }
.method [class^="row"]:hover,
.method [class*=" row"]:hover {
background-color: #f7f7f7; }
.method .cell {
font-size: 0.85em; }
.method .cell .mobile-isrequired {
display: none;
font-weight: normal;
text-transform: uppercase;
color: #aaa;
font-size: 0.8em; }
.method .cell .propertyname {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
.method .cell .type {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
.method .cell code {
color: #428bca; }
.method .cell a, .method .cell a:hover {
text-decoration: none; }
.method .cell code.custom {
color: #8a6d3b;
text-decoration: none; }
.method .cell .text-muted {
color: #ddd; }
@media (max-width: 767px) {
.method [class^="row"],
.method [class*=" row"] {
padding-top: 10px;
padding-bottom: 10px; }
.method .cell {
padding: 0 10px; }
.method .cell .propertyname {
font-weight: bold;
font-size: 1.2em; }
.method .cell .propertyname .lookuplink {
font-weight: normal;
font-size: 1.5em;
position: absolute;
top: 0;
right: 10px; }
.method .cell .type {
padding-left: 10px;
font-size: 1.1em; }
.method .cell .isrequired {
padding-left: 10px;
display: none; }
.method .cell .description {
padding-left: 10px; }
.method .cell .mobile-isrequired {
display: inline; } }
/* Row Utilities */
[class^='row'].margin-0,
[class*=' row'].margin-0,
[class^='form-group'].margin-0,
[class*=' form-group'].margin-0 {
margin-left: -0px;
margin-right: -0px; }
[class^='row'].margin-0 > [class^='col-'],
[class^='row'].margin-0 > [class*=' col-'],
[class*=' row'].margin-0 > [class^='col-'],
[class*=' row'].margin-0 > [class*=' col-'],
[class^='form-group'].margin-0 > [class^='col-'],
[class^='form-group'].margin-0 > [class*=' col-'],
[class*=' form-group'].margin-0 > [class^='col-'],
[class*=' form-group'].margin-0 > [class*=' col-'] {
padding-right: 0px;
padding-left: 0px; }
[class^='row'].margin-0 [class^='row'],
[class^='row'].margin-0 [class*=' row'],
[class^='row'].margin-0 [class^='form-group'],
[class^='row'].margin-0 [class*=' form-group'],
[class*=' row'].margin-0 [class^='row'],
[class*=' row'].margin-0 [class*=' row'],
[class*=' row'].margin-0 [class^='form-group'],
[class*=' row'].margin-0 [class*=' form-group'],
[class^='form-group'].margin-0 [class^='row'],
[class^='form-group'].margin-0 [class*=' row'],
[class^='form-group'].margin-0 [class^='form-group'],
[class^='form-group'].margin-0 [class*=' form-group'],
[class*=' form-group'].margin-0 [class^='row'],
[class*=' form-group'].margin-0 [class*=' row'],
[class*=' form-group'].margin-0 [class^='form-group'],
[class*=' form-group'].margin-0 [class*=' form-group'] {
margin-left: 0;
margin-right: 0; }
