A set of Emmet snippets for use with Indiana University's Rivet software design system.
Compatible with Rivet version 1.1.0.
Emmet is available as a plugin for most editors, including Visual Studio Code, Atom, and Sublime Text.
- Load custom Emmet snippets for use with Visual Studio Code
- Install Emmet for use with Atom
- Load custom Emmet snippets for use with Atom
- Install Emmet for use with Sublime Text
- Load custom Emmet snippets for use with Sublime Text
For more information on installing Emmet for use with your editor, see the Emmet downloads page.
If you're using Visual Studio Code or Atom, you'll have to enable formatting for newlines (\n) in Emmet before you can start using the Rivet snippets.
To enable newline formatting for Emmet snippets in Visual Studio Code:
- Open the Visual Studio Code settings pane under Code > Preferences > Settings.
- In the User Settings pane on the right-hand side, add the following JSON:
"emmet.syntaxProfiles": {
"html": {
"inline_break": 1
}
}To enable newline formatting for Emmet snippets in Atom:
- Open the Emmet package preferences under Atom > Preferences > Packages.
- In the Settings section of the Emmet preferences page, check Format Line Breaks.
Emmet snippets are available for each of Rivet's core components.
| Starter template snippets |
|---|
rvt-start |
rvt-css |
rvt-js |
For more information about this component, see the Rivet documentation on grid layouts.
| Grid snippets |
|---|
rvt-container |
rvt-container-freshman |
rvt-container-sophomore |
rvt-container-junior |
rvt-container-senior |
rvt-grid-item |
For more information about this component, see the Rivet documentation on panels.
| Panel snippets |
|---|
rvt-panel |
rvt-panel-light |
For more information about this component, see the Rivet documentation on breadcrumb navigation.
| Breadcrumb snippets |
|---|
rvt-breadcrumbs |
rvt-breadcrumbs-callout |
For more information about this component, see the Rivet documentation on dropdown buttons.
| Dropdown snippets |
|---|
rvt-dropdown |
rvt-dropdown-item-group |
For more information about this component, see the Rivet documentation on headers.
| Header snippets |
|---|
rvt-header |
rvt-header-identity |
rvt-nav |
rvt-nav-item |
rvt-nav-item-dropdown |
For more information about this component, see the Rivet documentation on footers.
| Footer snippets |
|---|
rvt-footer |
For more information about this component, see the Rivet documentation on pagination.
| Pagination snippets |
|---|
rvt-pagination |
rvt-pagination-right |
rvt-pagination-small |
rvt-pagination-small-right |
For more information about this component, see the Rivet documentation on badges.
| Badge snippets |
|---|
rvt-badge |
rvt-badge-action |
rvt-badge-success |
rvt-badge-warning |
rvt-badge-error |
rvt-badge-secondary |
rvt-badge-secondary-action |
rvt-badge-secondary-success |
rvt-badge-secondary-warning |
rvt-badge-secondary-error |
For more information about this component, see the Rivet documentation on tables.
| Table snippets |
|---|
rvt-table |
rvt-table-compact |
rvt-table-striped |
rvt-table-bordered-cells |
rvt-table-plain |
For more information about this component, see the Rivet documentation on tabs.
| Tab snippets |
|---|
rvt-tabs |
rvt-tabs-fitted |
rvt-tabs-vertical |
rvt-tab |
For more information about this component, see the Rivet documentation on buttons.
| Button snippets |
|---|
rvt-button-group |
rvt-button-group-segmented |
rvt-button-group-segmented-fitted |
rvt-button |
rvt-button-success |
rvt-button-danger |
rvt-button-plain |
rvt-button-secondary |
rvt-button-secondary-success |
rvt-button-secondary-danger |
rvt-button-small |
rvt-button-small-success |
rvt-button-small-danger |
rvt-button-small-plain |
rvt-button-small-secondary |
rvt-button-small-secondary-success |
rvt-button-small-secondary-danger |
rvt-button-small-secondary-plain |
rvt-button-modal |
rvt-button-full-width |
For more information about this component, see the Rivet documentation on checkboxes.
| Checkbox snippets |
|---|
rvt-checkbox |
For more information about this component, see the Rivet documentation on file inputs.
| File input snippets |
|---|
rvt-upload |
rvt-upload-multiple |
For more information about this component, see the Rivet documentation on input groups.
| Input group snippets |
|---|
rvt-input-group |
rvt-input-group-button-first |
For more information about this component, see the Rivet documentation on radio buttons.
| Radio button snippets |
|---|
rvt-radio |
For more information about this component, see the Rivet documentation on select elements.
| Select element snippets |
|---|
rvt-select |
For more information about this component, see the Rivet documentation on text inputs.
| Text input snippets |
|---|
rvt-text-input |
rvt-textarea |
For more information about this component, see the Rivet documentation on alerts.
| Alert snippets |
|---|
rvt-alert-info |
rvt-alert-success |
rvt-alert-warning |
rvt-alert-error |
rvt-alert-inline |
For more information about this component, see the Rivet documentation on modals.
| Modal snippets |
|---|
rvt-button-modal |
rvt-modal |
rvt-dialog |
For more information about this utility, see the Rivet documentation on styling text.
| Text snippets |
|---|
rvt-h1 |
rvt-h2 |
rvt-h3 |
rvt-p |