rivet-shell
A configurable set of layout components for applications build using Rivet
Download Rivet shell | View the demo
Getting started
The Rivet shell add-on requires the use of the core Rivet CSS. You can find out more about how to get started in the Rivet documentation. Once you are using Rivet, you can download the Rivet shell source files and include them in your project.
1. Include the CCS in your page
<link rel="stylesheet" href="dist/css/rivet-shell.min.css">
Using Sass
If you are already using Rivet's Sass, you can also use the shell by importing it:
@import "< you-path-to-node_modules ></you-path-to-node_modules>/rivet-shell/sass/rivet-shell.scss";
2. Add the markup
Here is the markup for a basic shell configuration including the Rivet header and footer.
<header class="rvt-header">
<!-- Rivet header markup -->
</header>
<main class="rvt-shell">
<div class="rvt-shell__stage">
<div class="rivet-page-header">
<!-- Page header content -->
</div>
<!-- Rest of your app's main content -->
</div>
</main>
<footer class="rvt-footer">
<!-- Rivet footer markup -->
</footer>
Installing with NPM
npm install --save-dev rivet-shell