How To Style Guide

Buttons.helpers.cshtml

// These are not real helpers, only examples to show some helper code.
@Html.Button("text") //Default
// Renders
<button type="button" class="btn btn-default">Default</button>

@Html.Button("text").Primary()
// Renders
<button type="button" class="btn btn-primary">Primary</button>

// Etc...
@Html.Button("text").Success()

@Html.Button("text").Info()

@Html.Button("text").Warning()

@Html.Button("text").Danger()

Buttons.html

<!-- Standard button, Indicates a simple action such as naviagation -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Additional call to action types -->
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

Colors.scss

// Primary color
// Use when giving an element a high visual importance, or indicates a primary action
background-color: $primary-color; // #428bca;
background-color: $primary-hover-color; // white;
color: $primary-text-color; // #3071a9

//Secondary color 
// Use when giving an element a medium visual importance, informational but not necessary action
background-color: $secondary-color; // #5bc0de;
color: $secondary-text-color; // white
background-color: $secondary-hover-color; // #31b0d5;

//Hero color
// Use when identifying highest level header elements, use sparingly
background-color: $hero-color; // #6f5499;
color: $hero-text-color; // white;

//Dark color
// Use when identifying footer level elements, use sparingly
background-color: $dark-color; // #333;
color: $dark-color; // white;

//Alerts
// Use sparingly
// Use when extreme caution should be taken, identifying a dangerous destructive or potentially negative action; or an action has failed
background-color: $alert-danger-color; // #f2dede;
color: $alert-danger-text-color; // #b94a48;

// Use when caution should be taken
background-color: $alert-warn-color; // #fcf8e3;
color: $alert-warn-text-color; // #c09853;

// Use when a postitve action will be taken, identifying save or create actions, or to indicate a succesful action
// Use sparingly
background-color: $alert-success-color; // #468847;
color: $alert-success-text-color; // #dff0d8;

Typography.headers.html

<h1>h1 Header</h1>
<h2>h2 Header</h2>
<h3>h3 Header</h3>
<h4>h4 Header</h4>
<h5>h5 Header</h5>
<h6>h6 Header</h6>
<p>...</p>

Typography.lists.html

<!-- unordered -->
<ul>
  <li>...</li>
</ul>
<!-- ordered -->
<ol>
  <li>...</li>
</ol>
<!-- unstyled -->
<ul class="list-unstyled"></ul></ul>
  <li>...</li>
</ul>
<!-- inline -->
<ul class="list-inline"></ul></ul>
  <li>...</li>
</ul>

widget.js.html

<script src="/path/to/widget.min.js"></script>
<script>
  (function(){
      widget.init();
  })();
</script>