Photon versions of the some common WebComponents
Clone or download
Pull request Compare This branch is 1 commit ahead of FirefoxUX:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.circleci
.storybook
attributes
bin
components
lib
.editorconfig
.eslintignore
.eslintrc.js
.gitignore Add an introduction to storybook with CSS link Oct 23, 2018
.prettierignore
.prettierrc
.stylelintignore
.stylelintrc
LICENSE Initial commit Aug 17, 2018
README.md
index.css
index.js
package-lock.json
package.json
stories.js Add an introduction to storybook with CSS link Oct 23, 2018
webpack.config.js

README.md

photon-components-web

CircleCI

This repository contains CSS styles and some React components to replicate the standard styles used in Firefox. The most recent style guidelines for Firefox are called "Photon" (hence the name of this repository).

These components are intended to be used anywhere where you want to make an HTML interface appear to be part of the browser itself. Examples where this might be useful include add-ons/extensions, UI directly in Firefox that is implemented in HTML, and some Mozilla properties like addons.mozilla.org.

This repository is not intended for a general audience. You do not have to use React to make use of the styles.

Preview & Download

Preview the latest build from master here:

Download the latest build from master here:

Development

To get started:

npm install
# To generate static CSS and images/ in dist/ :
npm run build:webpack
# To run the demonstration site locally on http://localhost:9001/ :
npm start

Conventions

Components are styled using the BEM (Block-Element-Modifier) convention:

  • Top-level components are "blocks"
    • e.g. button
  • Parts of components are "elements", and are namespaced by their block:
    • e.g. card__media as a sub-element of card
  • modifiers are optional or stateful properties applied to the markup:
    • Top-level modifiers are namespaced to their block, e.g. button--primary
    • Element-level modifiers namespace to their element, e.g. card__media--loading