To use Protocol in your website with minimal fuss you can install the core package directly from NPM:
npm install @mozilla-protocol/core --save
Alternatively, you can also download the latest release from GitHub.
in your project under
The core CSS file is bundled as
protocol.css, which contains styling for things
such as basic elements and typography, as well as some global components like
navigation and a footer. Other component and layout CSS is bundled as
protocol-components.css for convenience.
However, these pre-compiled CSS files include the entire pattern library, which may be a lot more than you need need. We recommend compiling your own styles from the source Sass files, also included in the published package. That allows you to configure Protocol to include just the styles and components you need for each page of your website.
Styling is written in Sass using the SCSS syntax. Protocol styles are fragmented into separate Sass partials so you can import just the parts you need and keep your CSS files light. You can do this on a per-page basis so each page gets its own stylesheet for just the components needed on that page. Or you can take a hybrid approach with a global stylesheet for general styling and common components as well as separate, per-page stylesheets for components and page-specific styling as needed.
protocol.scss file is an example of a global Protocol-based stylesheet. It
sets a few common variables and imports fonts and base styles. Modify your own
version of that file to configure Protocol for your site.