Skip to content
This repository has been archived by the owner on Mar 22, 2019. It is now read-only.

indiana-university/rivet-emmet

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Emmet snippets for Rivet

A set of Emmet snippets for use with Indiana University's Rivet software design system.

Compatible with Rivet version 1.1.0.

Table of contents

Installing Emmet

Emmet is available as a plugin for most editors, including Visual Studio Code, Atom, and Sublime Text.

For more information on installing Emmet for use with your editor, see the Emmet downloads page.

Enabling line breaks

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.

Visual Studio Code

To enable newline formatting for Emmet snippets in Visual Studio Code:

  1. Open the Visual Studio Code settings pane under Code > Preferences > Settings.
  2. In the User Settings pane on the right-hand side, add the following JSON:
"emmet.syntaxProfiles": {
  "html": {
    "inline_break": 1
  }
}

Atom

To enable newline formatting for Emmet snippets in Atom:

  1. Open the Emmet package preferences under Atom > Preferences > Packages.
  2. In the Settings section of the Emmet preferences page, check Format Line Breaks.

Rivet snippets

Emmet snippets are available for each of Rivet's core components.

Starter template

Starter template snippets
rvt-start
rvt-css
rvt-js

Layout

Grid

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

Panels

For more information about this component, see the Rivet documentation on panels.

Panel snippets
rvt-panel
rvt-panel-light

Navigation

Breadcrumb

For more information about this component, see the Rivet documentation on breadcrumb navigation.

Breadcrumb snippets
rvt-breadcrumbs
rvt-breadcrumbs-callout

Dropdown

For more information about this component, see the Rivet documentation on dropdown buttons.

Dropdown snippets
rvt-dropdown
rvt-dropdown-item-group

Header

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

Footer

For more information about this component, see the Rivet documentation on footers.

Footer snippets
rvt-footer

Pagination

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

Page Content

Badges

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

Tables

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

Tabs

For more information about this component, see the Rivet documentation on tabs.

Tab snippets
rvt-tabs
rvt-tabs-fitted
rvt-tabs-vertical
rvt-tab

Forms

Buttons

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

Checkboxes

For more information about this component, see the Rivet documentation on checkboxes.

Checkbox snippets
rvt-checkbox

File input

For more information about this component, see the Rivet documentation on file inputs.

File input snippets
rvt-upload
rvt-upload-multiple

Input group

For more information about this component, see the Rivet documentation on input groups.

Input group snippets
rvt-input-group
rvt-input-group-button-first

Radio buttons

For more information about this component, see the Rivet documentation on radio buttons.

Radio button snippets
rvt-radio

Select element

For more information about this component, see the Rivet documentation on select elements.

Select element snippets
rvt-select

Text inputs

For more information about this component, see the Rivet documentation on text inputs.

Text input snippets
rvt-text-input
rvt-textarea

Overlays

Alerts

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

Modals

For more information about this component, see the Rivet documentation on modals.

Modal snippets
rvt-button-modal
rvt-modal
rvt-dialog

Utilities

Text

For more information about this utility, see the Rivet documentation on styling text.

Text snippets
rvt-h1
rvt-h2
rvt-h3
rvt-p

About

Emmet snippets for Rivet components.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published