Giter Club home page Giter Club logo

protocol's Introduction

Protocol

Protocol is a design system for Mozilla and Firefox websites. It establishes a common design language, provides reusable coded components, and outlines high level guidelines for content and accessibility.

https://protocol.mozilla.org/

Protocol is still an evolving project. Currently it’s used primarily by the Mozilla Marketing Websites team as the front-end for www.mozilla.org. The long term goal is to provide a robust, unified design system that anyone at Mozilla can use to build an on-brand website.

If you’re interested in using Protocol on your project, let us know and we can help you. You can find us in #protocol-design-system on Mozilla’s Slack (for Mozillians) or in #protocol-design-system on Matrix (open to the public). Also feel free to file an issue on GitHub.

Current npm package version. Total downloads on npm. Pull requests welcome!

Getting Started

Protocol is built on the Node.js platform and published to NPM, so be sure to have both installed before proceeding.

Installation

To use Protocol in your website 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.

Usage

Once installed, the relevant CSS and JS files will be available in your project under ./node_modules/@mozilla-protocol/core/.

The core CSS file is bundled as protocol.css, which contains styling for things such as basic elements and typography. Component and layout CSS is bundled as protocol-components.scss for convenience.

Note: The original source (.scss) files are also included in the published package. You may want to consider compiling your own CSS to include only what you need for each page of your website, in order to further optimize for performance.

Building From Source

To build Protocol from source including the documentation site, you can clone the repo from GitHub:

$ git clone https://github.com/mozilla/protocol.git
$ cd protocol
$ npm start

Running npm start will install dependencies, build your toolkit, and start the development server at http://localhost:3000.

Further Documentation

protocol's People

Contributors

alexgibson avatar stephaniehobson avatar craigcook avatar michaelmccombie avatar amychurchwell avatar pmac avatar errolyn avatar dependabot[bot] avatar johngruen avatar thejeffreytaylor avatar glogiotatidis avatar jgmize avatar maxxcrawford avatar tikhsup avatar 0xflotus avatar aaronshivers avatar anand-371 avatar liamnewmarch avatar mozilla-github-standards avatar rraue avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.