Skip to content

Commit

Permalink
Added syntax highlighting and backend preview panels to the UI docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@LukeTowers
LukeTowers committed Jul 31, 2024
1 parent 9395ca4 commit 7a7082e
Show file tree
Hide file tree
Showing 19 changed files with 2,474 additions and 1,073 deletions.
22 changes: 17 additions & 5 deletions ui/controls/autocomplete.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,23 @@

Autocomplete control.

<input
class="form-control"
placeholder="Search for something or else"
data-control="autocomplete"
data-source="something: 'Something', else: 'Else'" />
```html
<input
class="form-control"
placeholder="Search for something or else"
data-control="autocomplete"
data-source="something: 'Something', else: 'Else'"
/>
```

```backend
<input
class="form-control"
placeholder="Search for something or else"
data-control="autocomplete"
data-source="something: 'Something', else: 'Else'"
/>
```

## JavaScript API

Expand Down
134 changes: 98 additions & 36 deletions ui/controls/button.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,58 +6,120 @@

Use the button classes on an `<a>`, `<button>`, or `<input>` element.

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
```html
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
```

```backend
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
```

### Options

Use any of the available button classes to quickly create a styled button.

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>
```html
<!-- Standard button -->
<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>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- 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>
<!-- 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 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>
<!-- 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>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>
```

```backend
<!-- Standard button -->
<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>
<!-- 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>
```

### Sizes

Fancy larger or smaller buttons? Add `.btn-lg`, `.btn-sm`, or `.btn-xs` for additional sizes.

<p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>
```html
<p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>
```

```backend
<p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>
```

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
```html
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
```

```backend
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
```
125 changes: 91 additions & 34 deletions ui/controls/callout.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,60 +4,117 @@

Displays a detailed message to the user, also allowing it to be dismissed.

<div class="callout fade in callout-warning">
<button
type="button"
class="close"
data-dismiss="callout"
aria-hidden="true">&times;</button>
<div class="header">
<i class="icon-warning"></i>
<h3>Warning warning</h3>
<p>My arms are flailing wildly</p>
</div>
<div class="content">
<p>Insert coin(s) to begin play</p>
</div>
```html
<div class="callout fade in callout-warning">
<button
type="button"
class="close"
data-dismiss="callout"
aria-hidden="true">&times;</button>
<div class="header">
<i class="icon-warning"></i>
<h3>Warning warning</h3>
<p>My arms are flailing wildly</p>
</div>
<div class="content">
<p>Insert coin(s) to begin play</p>
</div>
</div>
```

```backend
<div class="callout fade in callout-warning">
<button
type="button"
class="close"
data-dismiss="callout"
aria-hidden="true">&times;</button>
<div class="header">
<i class="icon-warning"></i>
<h3>Warning warning</h3>
<p>My arms are flailing wildly</p>
</div>
<div class="content">
<p>Insert coin(s) to begin play</p>
</div>
</div>
```

### No sub-header

Include the `no-subheader` class to omit the sub heading.

<div class="callout fade in callout-info no-subheader">
<div class="header">
<i class="icon-info"></i>
<h3>Incoming unicorn</h3>
</div>
```html
<div class="callout fade in callout-info no-subheader">
<div class="header">
<i class="icon-info"></i>
<h3>Incoming unicorn</h3>
</div>
</div>
```

```backend
<div class="callout fade in callout-info no-subheader">
<div class="header">
<i class="icon-info"></i>
<h3>Incoming unicorn</h3>
</div>
</div>
```

### No icon

Include the `no-icon` class to omit the icon.

<div class="callout fade in callout-danger no-icon">
<div class="header">
<h3>There was a hull breach</h3>
<ul>
<li>Get to the chopper</li>
</ul>
</div>
```html
<div class="callout fade in callout-danger no-icon">
<div class="header">
<h3>There was a hull breach</h3>
<ul>
<li>Get to the chopper</li>
</ul>
</div>
</div>
```

```backend
<div class="callout fade in callout-danger no-icon">
<div class="header">
<h3>There was a hull breach</h3>
<ul>
<li>Get to the chopper</li>
</ul>
</div>
</div>
```

### No header

<div class="callout fade in callout-success">
<div class="content">
<p>Something good happened</p>
<ul>
<li>You found a pony</li>
</ul>
</div>
```html
<div class="callout fade in callout-success">
<div class="content">
<p>Something good happened</p>
<ul>
<li>You found a pony</li>
</ul>
</div>
</div>
```

```backend
<div class="callout fade in callout-success">
<div class="content">
<p>Something good happened</p>
<ul>
<li>You found a pony</li>
</ul>
</div>
</div>
```

### Data attributes:

- data-dismiss="callout" - when assigned to an element, the callout hides on click
- `data-dismiss="callout"` - when assigned to an element, the callout hides on click

## JavaScript API

Expand Down
Loading

0 comments on commit 7a7082e

Please sign in to comment.