[JENKINS-60920] Update the Header and Breadcrumb styles

Implement the header and breadcrumbs UI changes as specified on the UX SIG resources (https://jenkins.io/sigs/ux/).

Opt-in changes

Only changes to layout, iconography and Jenkins logo will be enabled by default. New colors and logo section should be enabled with the Java option -Dui.enableNewUi=true

Originally reported by fqueiruga, imported from: Update the Header and Breadcrumb styles

assignee: fqueiruga
status: Resolved
priority: Minor
component(s): core
resolution: Fixed
resolved: 2020-02-24T12:55:20+00:00
votes: 0
watchers: 2
imported: 2025-11-24

Raw content of original issue

Implement the header and breadcrumbs UI changes as specified on the UX SIG resources (https://jenkins.io/sigs/ux/).

Opt-in changes

Only changes to layout, iconography and Jenkins logo will be enabled by default. New colors and logo section should be enabled with the Java option -Dui.enableNewUi=true

fqueiruga:

Original comment link

Raw content of original comment:

Some technical considerations:

	Started using material icons as SVG sprites using the <svg> tag.
	
		Icons are taking from the symbol files on the material repo (https://github.com/google/material-design-icons/tree/master/sprites/svg-sprite). Currently only the action and social sprites are included and used.
		Added the svgxuse JS library to polyfill svg sprites on IE 11. It does not block rendering but causes a Flash Of No Icons on IE 11.
	
	
	Use the [BEM|http://getbem.com/] methodology to namespace the CSS when possible.

Some technical considerations:

Started using material icons as SVG sprites using the tag.
- Icons are taking from the symbol files on the material repo (https://github.com/google/material-design-icons/tree/master/sprites/svg-sprite). Currently only the action and social sprites are included and used.
- Added the svgxuse JS library to polyfill svg sprites on IE 11. It does not block rendering but causes a Flash Of No Icons on IE 11.
Use the [BEM|http://getbem.com/] methodology to namespace the CSS when possible.

Navigation Menu

Repository navigation

[JENKINS-60920] Update the Header and Breadcrumb styles #20829

Opt-in changes

Opt-in changes

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[JENKINS-60920] Update the Header and Breadcrumb styles #20829

Description

Opt-in changes

Opt-in changes

Activity

jenkins-infra-bot commented on Jan 30, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions