Customizing Semantic UI

The app uses the full version of Semantic UI, and can be customized by changing the CSS variables.

Quick Start

The following steps are required to build customize the theme of the app:

$ npm install -g gulp
$ cd semantic
$ gulp build

Theming

• semantic/src/themes/worldvision/globals/site/variables - to modify page container sizes, default fonts, and colors
• Use overrides semantic/src/themes/github/collections/menu.overrides to override the default CSS selector styles
• Combining multiple individual component themes together in one theme.config
• Using a custom icon font, and modifying paths to assets.

Using themes

Sitewide Defaults

Semantic UI includes twelve named colors. Components with color variations inherit these global variables when defining how colors should appear.