Madek UI Elements

  1. 0 Scratchpad
  2. 1 Layout
  3. 2 Colors
  4. 3 Typography
  5. 4 Buttons & Links
  6. 5 Forms
  7. 6 Icons
  8. 7 Components
  9. 8 Combos
  10. 9 Past Spec
  11. 10 Upcoming - Actions n Stats
  12. 11 Upcoming - Relations
  13. 12 React

6 Icons

6.1

_icons.scss

Arrow Icons .icon-arrow-{name}

By default, icons inherit font colour from their parent. A few modifier classes are provided to alter icon’s colour when needed. Arrow icons come also with small size variation.

Modifiers:

  • .bright – White variation
  • .mid – Grey variation
  • .branded – Branded variation
  • .small – Small variation
  • .branded.small – Small Branded Variation 
<i class='icon-arrow-up'></i>

<i class='icon-arrow-right'></i>

<i class='icon-arrow-down'></i>

<i class='icon-arrow-left'></i>
.bright 
<i class='bright icon-arrow-up'></i>

<i class='bright icon-arrow-right'></i>

<i class='bright icon-arrow-down'></i>

<i class='bright icon-arrow-left'></i>
.mid 
<i class='mid icon-arrow-up'></i>

<i class='mid icon-arrow-right'></i>

<i class='mid icon-arrow-down'></i>

<i class='mid icon-arrow-left'></i>
.branded 
<i class='branded icon-arrow-up'></i>

<i class='branded icon-arrow-right'></i>

<i class='branded icon-arrow-down'></i>

<i class='branded icon-arrow-left'></i>
.small 
<i class='small icon-arrow-up'></i>

<i class='small icon-arrow-right'></i>

<i class='small icon-arrow-down'></i>

<i class='small icon-arrow-left'></i>
.branded.small 
<i class='branded small icon-arrow-up'></i>

<i class='branded small icon-arrow-right'></i>

<i class='branded small icon-arrow-down'></i>

<i class='branded small icon-arrow-left'></i>

6.2

_icons.scss

Privacy Icons .icon-privacy-{name}

By default, icons inherit font colour from their parent. A few modifier classes are provided to alter icon’s colour when needed.

Modifiers:

  • .bright – White variation
  • .mid – Grey variation
  • .branded – Branded variation 
<i class='icon-privacy-open'></i>

<i class='icon-privacy-private'></i>

<i class='icon-privacy-private-alt'></i>

<i class='icon-privacy-group'></i>

<i class='icon-privacy-group-alt'></i>
.bright 
<i class='bright icon-privacy-open'></i>

<i class='bright icon-privacy-private'></i>

<i class='bright icon-privacy-private-alt'></i>

<i class='bright icon-privacy-group'></i>

<i class='bright icon-privacy-group-alt'></i>
.mid 
<i class='mid icon-privacy-open'></i>

<i class='mid icon-privacy-private'></i>

<i class='mid icon-privacy-private-alt'></i>

<i class='mid icon-privacy-group'></i>

<i class='mid icon-privacy-group-alt'></i>
.branded 
<i class='branded icon-privacy-open'></i>

<i class='branded icon-privacy-private'></i>

<i class='branded icon-privacy-private-alt'></i>

<i class='branded icon-privacy-group'></i>

<i class='branded icon-privacy-group-alt'></i>

6.3

_icons.scss

Visualization Mode Icons .icon-vis-{name}

By default, icons inherit font colour from their parent. A few modifier classes are provided to alter icon’s colour when needed.

Modifiers:

  • .bright – White variation
  • .mid – Grey variation
  • .branded – Branded variation 
<i class='icon-vis-list'></i>

<i class='icon-vis-graph'></i>

<i class='icon-vis-miniature'></i>

<i class='icon-vis-grid'></i>

<i class='icon-vis-pins'></i>
.bright 
<i class='bright icon-vis-list'></i>

<i class='bright icon-vis-graph'></i>

<i class='bright icon-vis-miniature'></i>

<i class='bright icon-vis-grid'></i>

<i class='bright icon-vis-pins'></i>
.mid 
<i class='mid icon-vis-list'></i>

<i class='mid icon-vis-graph'></i>

<i class='mid icon-vis-miniature'></i>

<i class='mid icon-vis-grid'></i>

<i class='mid icon-vis-pins'></i>
.branded 
<i class='branded icon-vis-list'></i>

<i class='branded icon-vis-graph'></i>

<i class='branded icon-vis-miniature'></i>

<i class='branded icon-vis-grid'></i>

<i class='branded icon-vis-pins'></i>

6.4

_icons.scss

Other Icons .icon-{name}

By default, icons inherit font colour from their parent. A few modifier classes are provided to alter icon’s colour when needed.

Modifiers:

  • .bright – White variation
  • .mid – Grey variation
  • .branded – Branded variation 
<i class='icon-madek'></i>

<i class='icon-pen'></i>

<i class='icon-cog'></i>

<i class='icon-filter'></i>

<i class='icon-plus'></i>

<i class='icon-plus-small'></i>

<i class='icon-upload'></i>

<i class='icon-dload'></i>

<i class='icon-checkmark'></i>

<i class='icon-lock'></i>

<i class='icon-eye'></i>

<i class='icon-move'></i>

<i class='icon-cover'></i>

<i class='icon-set'></i>

<i class='icon-media-entry'></i>

<i class='icon-tag'></i>

<i class='icon-tags'></i>

<i class='icon-trash'></i>

<i class='icon-user'></i>

<i class='icon-add-user'></i>

<i class='icon-add-group'></i>

<i class='icon-admin'></i>

<i class='icon-home'></i>

<i class='icon-power-off'></i>

<i class='icon-lens'></i>

<i class='icon-magnifier'></i>

<i class='icon-highlight'></i>

<i class='icon-star'></i>

<i class='icon-clipboard'></i>

<i class='icon-question-mark'></i>

<i class='icon-question'></i>

<i class='icon-bang'></i>

<i class='icon-close'></i>

<i class='icon-copy'></i>

<i class='icon-contrast'></i>

<i class='icon-undo'></i>

<i class='icon-catalog'></i>

<i class='icon-link'></i>

<i class='icon-api'></i>

<i class='icon-library'></i>

<i class='icon-checkbox'></i>

<i class='icon-checkbox-mixed'></i>

<i class='icon-checkbox-active'></i>
.bright 
<i class='bright icon-madek'></i>

<i class='bright icon-pen'></i>

<i class='bright icon-cog'></i>

<i class='bright icon-filter'></i>

<i class='bright icon-plus'></i>

<i class='bright icon-plus-small'></i>

<i class='bright icon-upload'></i>

<i class='bright icon-dload'></i>

<i class='bright icon-checkmark'></i>

<i class='bright icon-lock'></i>

<i class='bright icon-eye'></i>

<i class='bright icon-move'></i>

<i class='bright icon-cover'></i>

<i class='bright icon-set'></i>

<i class='bright icon-media-entry'></i>

<i class='bright icon-tag'></i>

<i class='bright icon-tags'></i>

<i class='bright icon-trash'></i>

<i class='bright icon-user'></i>

<i class='bright icon-add-user'></i>

<i class='bright icon-add-group'></i>

<i class='bright icon-admin'></i>

<i class='bright icon-home'></i>

<i class='bright icon-power-off'></i>

<i class='bright icon-lens'></i>

<i class='bright icon-magnifier'></i>

<i class='bright icon-highlight'></i>

<i class='bright icon-star'></i>

<i class='bright icon-clipboard'></i>

<i class='bright icon-question-mark'></i>

<i class='bright icon-question'></i>

<i class='bright icon-bang'></i>

<i class='bright icon-close'></i>

<i class='bright icon-copy'></i>

<i class='bright icon-contrast'></i>

<i class='bright icon-undo'></i>

<i class='bright icon-catalog'></i>

<i class='bright icon-link'></i>

<i class='bright icon-api'></i>

<i class='bright icon-library'></i>

<i class='bright icon-checkbox'></i>

<i class='bright icon-checkbox-mixed'></i>

<i class='bright icon-checkbox-active'></i>
.mid 
<i class='mid icon-madek'></i>

<i class='mid icon-pen'></i>

<i class='mid icon-cog'></i>

<i class='mid icon-filter'></i>

<i class='mid icon-plus'></i>

<i class='mid icon-plus-small'></i>

<i class='mid icon-upload'></i>

<i class='mid icon-dload'></i>

<i class='mid icon-checkmark'></i>

<i class='mid icon-lock'></i>

<i class='mid icon-eye'></i>

<i class='mid icon-move'></i>

<i class='mid icon-cover'></i>

<i class='mid icon-set'></i>

<i class='mid icon-media-entry'></i>

<i class='mid icon-tag'></i>

<i class='mid icon-tags'></i>

<i class='mid icon-trash'></i>

<i class='mid icon-user'></i>

<i class='mid icon-add-user'></i>

<i class='mid icon-add-group'></i>

<i class='mid icon-admin'></i>

<i class='mid icon-home'></i>

<i class='mid icon-power-off'></i>

<i class='mid icon-lens'></i>

<i class='mid icon-magnifier'></i>

<i class='mid icon-highlight'></i>

<i class='mid icon-star'></i>

<i class='mid icon-clipboard'></i>

<i class='mid icon-question-mark'></i>

<i class='mid icon-question'></i>

<i class='mid icon-bang'></i>

<i class='mid icon-close'></i>

<i class='mid icon-copy'></i>

<i class='mid icon-contrast'></i>

<i class='mid icon-undo'></i>

<i class='mid icon-catalog'></i>

<i class='mid icon-link'></i>

<i class='mid icon-api'></i>

<i class='mid icon-library'></i>

<i class='mid icon-checkbox'></i>

<i class='mid icon-checkbox-mixed'></i>

<i class='mid icon-checkbox-active'></i>
.branded 
<i class='branded icon-madek'></i>

<i class='branded icon-pen'></i>

<i class='branded icon-cog'></i>

<i class='branded icon-filter'></i>

<i class='branded icon-plus'></i>

<i class='branded icon-plus-small'></i>

<i class='branded icon-upload'></i>

<i class='branded icon-dload'></i>

<i class='branded icon-checkmark'></i>

<i class='branded icon-lock'></i>

<i class='branded icon-eye'></i>

<i class='branded icon-move'></i>

<i class='branded icon-cover'></i>

<i class='branded icon-set'></i>

<i class='branded icon-media-entry'></i>

<i class='branded icon-tag'></i>

<i class='branded icon-tags'></i>

<i class='branded icon-trash'></i>

<i class='branded icon-user'></i>

<i class='branded icon-add-user'></i>

<i class='branded icon-add-group'></i>

<i class='branded icon-admin'></i>

<i class='branded icon-home'></i>

<i class='branded icon-power-off'></i>

<i class='branded icon-lens'></i>

<i class='branded icon-magnifier'></i>

<i class='branded icon-highlight'></i>

<i class='branded icon-star'></i>

<i class='branded icon-clipboard'></i>

<i class='branded icon-question-mark'></i>

<i class='branded icon-question'></i>

<i class='branded icon-bang'></i>

<i class='branded icon-close'></i>

<i class='branded icon-copy'></i>

<i class='branded icon-contrast'></i>

<i class='branded icon-undo'></i>

<i class='branded icon-catalog'></i>

<i class='branded icon-link'></i>

<i class='branded icon-api'></i>

<i class='branded icon-library'></i>

<i class='branded icon-checkbox'></i>

<i class='branded icon-checkbox-mixed'></i>

<i class='branded icon-checkbox-active'></i>

6.5

_icons.scss

Special Icons .icon-{name}

Modifiers:

  • .hover – Hover variation
  • .disabled – Disabled variation
  • .active – Pressed variation 
<i class='icon-checkbox'></i>

<i class='icon-checkbox-bright'></i>

<i class='icon-star-empty'></i>
.hover 
<i class='hover icon-checkbox'></i>

<i class='hover icon-checkbox-bright'></i>

<i class='hover icon-star-empty'></i>
.disabled 
<i class='disabled icon-checkbox'></i>

<i class='disabled icon-checkbox-bright'></i>

<i class='disabled icon-star-empty'></i>
.active 
<i class='active icon-checkbox'></i>

<i class='active icon-checkbox-bright'></i>

<i class='active icon-star-empty'></i>

6.6

_icons.scss

Header Nav Icons .icon-{name}

Modifiers:

  • .dark – Midtone variation 
<i class='icon-nav-help'></i>

<i class='icon-nav-search'></i>
.dark 
<i class='dark icon-nav-help'></i>

<i class='dark icon-nav-search'></i>

6.7

_icons.scss

Mini icons .icon-{name}

Destined to live within only tag cloud buttons, mini icons are small variations on some of the above icons that need to use another character and grid size to be perfectly crips.

<i class='icon-group-mini'></i>

<i class='icon-user-mini'></i>

<i class='icon-tag-mini'></i>

6.8

_icons.scss

"Content Type" Icons in Page Headers .icon-{name}

Icons are used in Page Headers to indicate the type of content presented. \nBelow is a list of all such pages and their corresponding icons.

Title of an Entry 

<div class='ui-body-title'>
<div class='ui-body-title-label'>
<h1 class='title-xl'>
<i class='icon-media-entry'></i>

Title of an Entry
</h1>
</div>
</div>

Title of a Set 

<div class='ui-body-title'>
<div class='ui-body-title-label'>
<h1 class='title-xl'>
<i class='icon-set'></i>

Title of a Set
</h1>
</div>
</div>

Title of a Filter-Set 

<div class='ui-body-title'>
<div class='ui-body-title-label'>
<h1 class='title-xl'>
<i class='icon-filter-set'></i>

Title of a Filter-Set
</h1>
</div>
</div>

Mein Archiv 

<div class='ui-body-title'>
<div class='ui-body-title-label'>
<h1 class='title-xl'>
<i class='icon-home'></i>

Mein Archiv
</h1>
</div>
</div>

Inhalte, für die ich verantwortlich bin 

<div class='ui-body-title'>
<div class='ui-body-title-label'>
<h1 class='title-xl'>
<i class='icon-privacy-private-alt'></i>

Inhalte, für die ich verantwortlich bin
</h1>
</div>
</div>

Meine letzten Importe 

<div class='ui-body-title'>
<div class='ui-body-title-label'>
<h1 class='title-xl'>
<i class='icon-upload'></i>

Meine letzten Importe
</h1>
</div>
</div>

Meine Favoriten 

<div class='ui-body-title'>
<div class='ui-body-title-label'>
<h1 class='title-xl'>
<i class='icon-star'></i>

Meine Favoriten
</h1>
</div>
</div>

Meine Schlagworte 

<div class='ui-body-title'>
<div class='ui-body-title-label'>
<h1 class='title-xl'>
<i class='icon-tag'></i>

Meine Schlagworte
</h1>
</div>
</div>

Mir anvertraute Inhalte 

<div class='ui-body-title'>
<div class='ui-body-title-label'>
<h1 class='title-xl'>
<i class='icon-privacy-group-alt'></i>

Mir anvertraute Inhalte
</h1>
</div>
</div>

Meine Arbeitsgruppen 

<div class='ui-body-title'>
<div class='ui-body-title-label'>
<h1 class='title-xl'>
<i class='icon-privacy-group'></i>

Meine Arbeitsgruppen
</h1>
</div>
</div>

Vokabulare 

<div class='ui-body-title'>
<div class='ui-body-title-label'>
<h1 class='title-xl'>
<i class='icon-tags'></i>

Vokabulare
</h1>
</div>
</div>

Erkunden 

<div class='ui-body-title'>
<div class='ui-body-title-label'>
<h1 class='title-xl'>
<i class='icon-catalog'></i>

Erkunden
</h1>
</div>
</div>

Erkunden / Katalog 

<div class='ui-body-title'>
<div class='ui-body-title-label'>
<h1 class='title-xl'>
<i class='icon-catalog'></i>

Erkunden / Katalog
</h1>
</div>
</div>

Erkunden / Beispielhafte-Sets 

<div class='ui-body-title'>
<div class='ui-body-title-label'>
<h1 class='title-xl'>
<i class='icon-set'></i>

Erkunden / Beispielhafte-Sets
</h1>
</div>
</div>

Erkunden / Häufige Schlagworte 

<div class='ui-body-title'>
<div class='ui-body-title-label'>
<h1 class='title-xl'>
<i class='icon-tag'></i>

Erkunden / Häufige Schlagworte
</h1>
</div>
</div>

Suche 

<div class='ui-body-title'>
<div class='ui-body-title-label'>
<h1 class='title-xl'>
<i class='icon-lens'></i>

Suche
</h1>
</div>
</div>

Medienarchiv 

<div class='ui-body-title'>
<div class='ui-body-title-label'>
<h1 class='title-xl'>
<i class='icon-library'></i>

Medienarchiv
</h1>
</div>
</div>

Metadaten editieren 

<div class='ui-body-title'>
<div class='ui-body-title-label'>
<h1 class='title-xl'>
<i class='icon-pen'></i>

Metadaten editieren
</h1>
</div>
</div>

Berechtigungen von "Foobar" 

<div class='ui-body-title'>
<div class='ui-body-title-label'>
<h1 class='title-xl'>
<i class='icon-lock'></i>

Berechtigungen von &quot;Foobar&quot;
</h1>
</div>
</div>

Adressen für "Foobar" 

<div class='ui-body-title'>
<div class='ui-body-title-label'>
<h1 class='title-xl'>
<i class='icon-link'></i>

Adressen für &quot;Foobar&quot;
</h1>
</div>
</div>

Visualisiertes Set 

<div class='ui-body-title'>
<div class='ui-body-title-label'>
<h1 class='title-xl'>
<i class='icon-vis-graph'></i>

Visualisiertes Set
</h1>
</div>
</div>

Nach vergleichbaren Inhalten stöbern 

<div class='ui-body-title'>
<div class='ui-body-title-label'>
<h1 class='title-xl'>
<i class='icon-eye'></i>

Nach vergleichbaren Inhalten stöbern
</h1>
</div>
</div>

Import Media 

<div class='ui-body-title'>
<div class='ui-body-title-label'>
<h1 class='title-xl'>
<i class='icon-upload'></i>

Import Media
</h1>
</div>
</div>

Extending Madek Icon Font

Icons rely on an icon font located in the assets/fonts/madek-icon-font folder. Madek Icon Font has been built using IcoMoon App.

  1. Launch IcoMoon font creator app located on this URL at the time of writing these instructions.
  2. Create a New Project from the top left menu.
  3. Import Icons from selection.json file located in the above mentioned folder.
  4. Import .svg file containing your new icon. Ideal measurements of a that SVG item to use are: 512px × 512px. Icon graphics look sharpest and will scale best when they are overlaid on and its edges align to a 16 × 16 module grid system.
  5. Once your new icon is loaded to the set, select it by using the Selection tool accessible from the top menu.
  6. Move to the Font screen accessible from the bottom menu.
  7. Hit Preferences button and set: Font Name to madek-icon-font, icon- and check 'Encode and Embed Font in CSS' option.
  8. Next to the newly added icon, specify class suffixes that it will be called by (i.e. user to create .icon-user selector).
  9. Download the package.
  10. Replace all files in the madek-icon-font folder with the contents of the downloaded package.
  11. Document your new icon character in this section of the styleguide.