Edit This Page

Napoleon Bonaparte Theme

npm version

Napoleon is a Semantic UI inspired theme developed for editorial tools at Dow Jones.

Like common front end frameworks Napoleon provides a set of CSS classes to style HTML elements.

In addition to the traditional HTML elements, Napoleon also defines styles and classes for Bonaparte components.


Main Features

Baseline Grid

All elements and text styled with Napoleon align on a baseline grid. This allows Napoleon elements to be mixed and matched while still resulting in a clean user interface.

The baseline grid is defined as 1rem. Napoleon defines 1rem as 12px by default.

Toggle the grid in the top right corner in the kitchen sink.


Napoleon doesn't apply any styles to any HTML elements by default.

Resets and styling of base tags (<p>, small, <h1>–<h6>) are applied for elements within a .napoleon wrapper, or elements that have the .ui class.

Through this, Napoleon doesn't interfere with other CSS on a page.