City of Ghent Style Guide

Fonts

Default text font

The style guide uses the Google font “Fira Sans” for all text. This gets loaded in the _fonts.scss SASSS partial through a SASS @import statement.

The Ghent icon font

We also created our own icon font which gets loaded by an @font-face rule in _icons.scss SASS partial. This icon font is generated by using the following gulp plugins:

  • gulp-iconfont
  • gulp-iconfont-css

This allows us to define a SASS partial template, which you can find in _icons_template.template.

Available mixins and classes

In the _icons.scss SASS partial you can find all the generated icon font SCSS code you need to use an icon in your twig / html templates or in SASS by using the icon mixin provided.

Example of using the icon mixin to add an icon before an element

  @include icon('uEA01-arrow-down', 'after');

Fonts

<p>Actual base font-size is 16px.</p>
  <p>
    The HTML element is assigned a font-size of 20px. This allows us to calculate REM values by dividing by 20 instead
    of 16, which in turn gives us more readable REM values. The body element and containing elements are assigned a
    value of font-size .8rem (which matches a computed value of 16px).
  </p>

  <p><strong>Note:</strong> Elements that deviate from the predetermined font-size values are to be scaled with rems.</p>
<p>Actual base font-size is 16px.</p>
  <p>
      The HTML element is assigned a font-size of 20px. This allows us to calculate REM values by dividing by 20 instead
      of 16, which in turn gives us more readable REM values. The body element and containing elements are assigned a
      value of font-size .8rem (which matches a computed value of 16px).
  </p>

  <p><strong>Note:</strong> Elements that deviate from the predetermined font-size values are to be scaled with rems.</p>
/* No context defined. */
  • Content:
    ////
    /// This file defines fonts.
    ////
    
    @import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,600,700'); // sass-lint:disable-line no-url-protocols
    
    // WebfontLoader
    // Bypass the FOUT.
    // Placed on the container to enable loading bars etc.
    html.wf-loading {
      .container {
        opacity: 0;
      }
    }
    
    html:not(.wf-loading) {
      .container {
        transition: .1s opacity ease-in;
        opacity: 1;
      }
    }
    
  • URL: /components/raw/fonts/_fonts.scss
  • Filesystem Path: components/11-base/fonts/_fonts.scss
  • Size: 408 Bytes
  • Content:
    ////
    /// This is an generated file! Do not change this file. Use the template file
    /// _icons_template.template instead to apply changes.
    ///
    /// @group tools
    /// @author Gert-Jan Meire
    ///
    ////
    
    $id: random(1000);
    
    @font-face {
      font-family: "gent-icons-v5";
      src: url('#{$styleguide-dir}/fonts/gent-icons-v5.eot?v=#{$id}');
      src: url('#{$styleguide-dir}/fonts/gent-icons-v5.eot?#iefix?v=#{$id}') format('eot'),
      url('#{$styleguide-dir}/fonts/gent-icons-v5.woff2?v=#{$id}') format('woff2'),
      url('#{$styleguide-dir}/fonts/gent-icons-v5.woff?v=#{$id}') format('woff'),
      url('#{$styleguide-dir}/fonts/gent-icons-v5.ttf?v=#{$id}') format('truetype'),
      url('#{$styleguide-dir}/fonts/gent-icons-v5.svg#gent-icons-v5?v=#{$id}') format('svg');
    }
    
    @mixin icon-styles {
      font-family: "gent-icons-v5";
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-style: normal;
      font-variant: normal;
      font-weight: normal;
      speak: none; // only necessary if not using the private unicode range (firstGlyph option)
      text-decoration: none;
      text-transform: none;
    }
    
    [class*='icon-'],
    %icon {
      @include icon-styles;
    }
    
    ///
    /// A function to return the correct character string.
    ///
    /// @since 3.0.0
    /// @group tools
    /// @access private
    /// @author Gert-Jan Meire
    ///
    /// @param {string} $filename
    ///   The name of the icon.
    ///
    @function icon-char($filename) {
      $char: "";
      
        @if $filename == arrow-down {
          $char: "\E001";
        }
        @if $filename == arrow-left {
          $char: "\E002";
        }
        @if $filename == arrow-right {
          $char: "\E003";
        }
        @if $filename == arrow-up {
          $char: "\E004";
        }
        @if $filename == broken-link {
          $char: "\E005";
        }
        @if $filename == calendar {
          $char: "\E006";
        }
        @if $filename == cart {
          $char: "\E007";
        }
        @if $filename == chat-round {
          $char: "\E008";
        }
        @if $filename == chat {
          $char: "\E009";
        }
        @if $filename == checkmark-checkbox {
          $char: "\E00A";
        }
        @if $filename == checkmark-circle {
          $char: "\E00B";
        }
        @if $filename == checkmark {
          $char: "\E00C";
        }
        @if $filename == chevron-down {
          $char: "\E00D";
        }
        @if $filename == chevron-left {
          $char: "\E00E";
        }
        @if $filename == chevron-right {
          $char: "\E00F";
        }
        @if $filename == chevron-up {
          $char: "\E010";
        }
        @if $filename == clock {
          $char: "\E011";
        }
        @if $filename == cross {
          $char: "\E012";
        }
        @if $filename == district09 {
          $char: "\E013";
        }
        @if $filename == document {
          $char: "\E014";
        }
        @if $filename == download {
          $char: "\E015";
        }
        @if $filename == envelope {
          $char: "\E016";
        }
        @if $filename == euro {
          $char: "\E017";
        }
        @if $filename == exclamation-circle {
          $char: "\E018";
        }
        @if $filename == exclamation {
          $char: "\E019";
        }
        @if $filename == external-link {
          $char: "\E01A";
        }
        @if $filename == facebook {
          $char: "\E01B";
        }
        @if $filename == fancyback {
          $char: "\E01C";
        }
        @if $filename == favicon {
          $char: "\E01D";
        }
        @if $filename == fax {
          $char: "\E01E";
        }
        @if $filename == filter {
          $char: "\E01F";
        }
        @if $filename == flickr {
          $char: "\E020";
        }
        @if $filename == globe {
          $char: "\E021";
        }
        @if $filename == googleplus {
          $char: "\E022";
        }
        @if $filename == hamburger {
          $char: "\E023";
        }
        @if $filename == heart {
          $char: "\E024";
        }
        @if $filename == home {
          $char: "\E025";
        }
        @if $filename == image {
          $char: "\E026";
        }
        @if $filename == info {
          $char: "\E027";
        }
        @if $filename == instagram {
          $char: "\E028";
        }
        @if $filename == lightning {
          $char: "\E029";
        }
        @if $filename == linkedin {
          $char: "\E02A";
        }
        @if $filename == lock-closed {
          $char: "\E02B";
        }
        @if $filename == lock-open {
          $char: "\E02C";
        }
        @if $filename == logo-en {
          $char: "\E02D";
        }
        @if $filename == logo-es {
          $char: "\E02E";
        }
        @if $filename == logo-fr {
          $char: "\E02F";
        }
        @if $filename == logo-nl {
          $char: "\E030";
        }
        @if $filename == logo-sp {
          $char: "\E031";
        }
        @if $filename == marker {
          $char: "\E032";
        }
        @if $filename == minus {
          $char: "\E033";
        }
        @if $filename == normalphone {
          $char: "\E034";
        }
        @if $filename == phone {
          $char: "\E035";
        }
        @if $filename == plus {
          $char: "\E036";
        }
        @if $filename == readspeaker {
          $char: "\E037";
        }
        @if $filename == search {
          $char: "\E038";
        }
        @if $filename == share {
          $char: "\E039";
        }
        @if $filename == size {
          $char: "\E03A";
        }
        @if $filename == star-empty {
          $char: "\E03B";
        }
        @if $filename == star-full {
          $char: "\E03C";
        }
        @if $filename == star-half {
          $char: "\E03D";
        }
        @if $filename == twitter-outline {
          $char: "\E03E";
        }
        @if $filename == twitter {
          $char: "\E03F";
        }
        @if $filename == update {
          $char: "\E040";
        }
        @if $filename == url {
          $char: "\E041";
        }
        @if $filename == user {
          $char: "\E042";
        }
        @if $filename == users {
          $char: "\E043";
        }
        @if $filename == vimeo {
          $char: "\E044";
        }
        @if $filename == wheelchair {
          $char: "\E045";
        }
        @if $filename == youtube {
          $char: "\E046";
        }
    
        @return $char;
    }
    
    ///
    /// A function to render an icon before or after an element.
    /// It can also be used as a placeholder instead of a mixin.
    /// NOTE: This is a automatically generated function!
    ///
    /// @since 3.0.0
    /// @group tools
    /// @access public
    /// @author Gert-Jan Meire
    /// @require icon-char
    ///
    /// @param {string} $filename
    ///   The name of the icon.
    ///
    /// @param {string} $insert [before]
    ///   Wether the icon should be printed before or after the element.
    ///
    /// @param {boolean} colors$ [$true]
    ///   Should the item be a placeholder @extends or not.
    ///
    @mixin icon($filename, $insert: before, $extend: true) {
      &:#{$insert} {
        @if $extend {
          @extend %icon;
        } @else {
        @include icon-styles;
        }
        content: icon-char($filename);
      }
    }
    
    .icon-arrow-down {
      @include icon(arrow-down);
    }
    .icon-arrow-left {
      @include icon(arrow-left);
    }
    .icon-arrow-right {
      @include icon(arrow-right);
    }
    .icon-arrow-up {
      @include icon(arrow-up);
    }
    .icon-broken-link {
      @include icon(broken-link);
    }
    .icon-calendar {
      @include icon(calendar);
    }
    .icon-cart {
      @include icon(cart);
    }
    .icon-chat-round {
      @include icon(chat-round);
    }
    .icon-chat {
      @include icon(chat);
    }
    .icon-checkmark-checkbox {
      @include icon(checkmark-checkbox);
    }
    .icon-checkmark-circle {
      @include icon(checkmark-circle);
    }
    .icon-checkmark {
      @include icon(checkmark);
    }
    .icon-chevron-down {
      @include icon(chevron-down);
    }
    .icon-chevron-left {
      @include icon(chevron-left);
    }
    .icon-chevron-right {
      @include icon(chevron-right);
    }
    .icon-chevron-up {
      @include icon(chevron-up);
    }
    .icon-clock {
      @include icon(clock);
    }
    .icon-cross {
      @include icon(cross);
    }
    .icon-district09 {
      @include icon(district09);
    }
    .icon-document {
      @include icon(document);
    }
    .icon-download {
      @include icon(download);
    }
    .icon-envelope {
      @include icon(envelope);
    }
    .icon-euro {
      @include icon(euro);
    }
    .icon-exclamation-circle {
      @include icon(exclamation-circle);
    }
    .icon-exclamation {
      @include icon(exclamation);
    }
    .icon-external-link {
      @include icon(external-link);
    }
    .icon-facebook {
      @include icon(facebook);
    }
    .icon-fancyback {
      @include icon(fancyback);
    }
    .icon-favicon {
      @include icon(favicon);
    }
    .icon-fax {
      @include icon(fax);
    }
    .icon-filter {
      @include icon(filter);
    }
    .icon-flickr {
      @include icon(flickr);
    }
    .icon-globe {
      @include icon(globe);
    }
    .icon-googleplus {
      @include icon(googleplus);
    }
    .icon-hamburger {
      @include icon(hamburger);
    }
    .icon-heart {
      @include icon(heart);
    }
    .icon-home {
      @include icon(home);
    }
    .icon-image {
      @include icon(image);
    }
    .icon-info {
      @include icon(info);
    }
    .icon-instagram {
      @include icon(instagram);
    }
    .icon-lightning {
      @include icon(lightning);
    }
    .icon-linkedin {
      @include icon(linkedin);
    }
    .icon-lock-closed {
      @include icon(lock-closed);
    }
    .icon-lock-open {
      @include icon(lock-open);
    }
    .icon-logo-en {
      @include icon(logo-en);
    }
    .icon-logo-es {
      @include icon(logo-es);
    }
    .icon-logo-fr {
      @include icon(logo-fr);
    }
    .icon-logo-nl {
      @include icon(logo-nl);
    }
    .icon-logo-sp {
      @include icon(logo-sp);
    }
    .icon-marker {
      @include icon(marker);
    }
    .icon-minus {
      @include icon(minus);
    }
    .icon-normalphone {
      @include icon(normalphone);
    }
    .icon-phone {
      @include icon(phone);
    }
    .icon-plus {
      @include icon(plus);
    }
    .icon-readspeaker {
      @include icon(readspeaker);
    }
    .icon-search {
      @include icon(search);
    }
    .icon-share {
      @include icon(share);
    }
    .icon-size {
      @include icon(size);
    }
    .icon-star-empty {
      @include icon(star-empty);
    }
    .icon-star-full {
      @include icon(star-full);
    }
    .icon-star-half {
      @include icon(star-half);
    }
    .icon-twitter-outline {
      @include icon(twitter-outline);
    }
    .icon-twitter {
      @include icon(twitter);
    }
    .icon-update {
      @include icon(update);
    }
    .icon-url {
      @include icon(url);
    }
    .icon-user {
      @include icon(user);
    }
    .icon-users {
      @include icon(users);
    }
    .icon-vimeo {
      @include icon(vimeo);
    }
    .icon-wheelchair {
      @include icon(wheelchair);
    }
    .icon-youtube {
      @include icon(youtube);
    }
    
  • URL: /components/raw/fonts/_icons.scss
  • Filesystem Path: components/11-base/fonts/_icons.scss
  • Size: 9.6 KB
  • Content:
    ////
    /// This is an generated file! Do not change this file. Use the template file
    /// _icons_template.template instead to apply changes.
    ///
    /// @group tools
    /// @author Gert-Jan Meire
    ///
    ////
    
    $id: random(1000);
    
    @font-face {
      font-family: "<%= fontName %>";
      src: url('#{$styleguide-dir}/fonts/<%= fontName %>.eot?v=#{$id}');
      src: url('#{$styleguide-dir}/fonts/<%= fontName %>.eot?#iefix?v=#{$id}') format('eot'),
      url('#{$styleguide-dir}/fonts/<%= fontName %>.woff2?v=#{$id}') format('woff2'),
      url('#{$styleguide-dir}/fonts/<%= fontName %>.woff?v=#{$id}') format('woff'),
      url('#{$styleguide-dir}/fonts/<%= fontName %>.ttf?v=#{$id}') format('truetype'),
      url('#{$styleguide-dir}/fonts/<%= fontName %>.svg#<%= fontName %>?v=#{$id}') format('svg');
    }
    
    @mixin <%= cssClass%>-styles {
      font-family: "<%= fontName %>";
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-style: normal;
      font-variant: normal;
      font-weight: normal;
      speak: none; // only necessary if not using the private unicode range (firstGlyph option)
      text-decoration: none;
      text-transform: none;
    }
    
    [class*='<%= cssClass%>-'],
    %<%= cssClass%> {
      @include <%= cssClass%>-styles;
    }
    
    ///
    /// A function to return the correct character string.
    ///
    /// @since 3.0.0
    /// @group tools
    /// @access private
    /// @author Gert-Jan Meire
    ///
    /// @param {string} $filename
    ///   The name of the icon.
    ///
    @function <%= cssClass%>-char($filename) {
      $char: "";
      <% _.each(glyphs, function(glyph) { %>
        @if $filename == <%= glyph.fileName %> {
          $char: "\<%= glyph.codePoint %>";
        }<% }); %>
    
        @return $char;
    }
    
    ///
    /// A function to render an icon before or after an element.
    /// It can also be used as a placeholder instead of a mixin.
    /// NOTE: This is a automatically generated function!
    ///
    /// @since 3.0.0
    /// @group tools
    /// @access public
    /// @author Gert-Jan Meire
    /// @require icon-char
    ///
    /// @param {string} $filename
    ///   The name of the icon.
    ///
    /// @param {string} $insert [before]
    ///   Wether the icon should be printed before or after the element.
    ///
    /// @param {boolean} colors$ [$true]
    ///   Should the item be a placeholder @extends or not.
    ///
    @mixin <%= cssClass%>($filename, $insert: before, $extend: true) {
      &:#{$insert} {
        @if $extend {
          @extend %<%= cssClass%>;
        } @else {
        @include <%= cssClass%>-styles;
        }
        content: <%= cssClass%>-char($filename);
      }
    }
    
    <% _.each(glyphs, function(glyph) { %>.<%= cssClass%>-<%= glyph.fileName %> {
      @include <%= cssClass%>(<%= glyph.fileName %>);
    }
    <% }); %>
    
  • URL: /components/raw/fonts/_icons_template.template
  • Filesystem Path: components/11-base/fonts/_icons_template.template
  • Size: 2.6 KB