City of Ghent Style Guide


All notable changes to this style guide are documented here.



  • SGD8-2444: Update gentinfo logo



  • STIJ-433: Fix corrupt fira semibold webfont



  • STIJ-432: Fix webfonts weights



  • STIJ-430: Fix allow export googlefonts folder



  • STIJ-427: Add G-sport icon to font



  • GENERAL: Add .nvmrc file - at the terminal prompt type nvm use
  • STIJ-412: Add spotimages question / ball / badminton / paperclip
  • STIJ-425: Add visualisation to disabled form states


  • STIJ-426: Fix uniform font-sizes in lists


  • DTGB-874: Selfhost webfonts



  • STIJ-414: Add extra large button
  • STIJ-423: Add resolutions component


  • STIJ-422: Fix no Timeline paddings to fix SG modifiers
  • STIJ-421: Fix icons
  • STIJ-391: Fix change Slack reference to email
  • STIJ-400: Fix extra top spacing for field-message
  • STIJ-390: Fix reverse striped rows behaviour on tables
  • STIJ-403: Fix large button min-height
  • STIJ-395: Fix disabled state for select elements



  • STIJ-421: Add icons : sportclub - subscribe



  • STIJ-416: Add grid display to timeline


  • STIJ-415: Fix prevent floating prefix & suffix



  • STIJ-413: Add Label list atom



  • STIJ-407: Edit & Add Button varianten
  • STIJ-408: Pagination - Hover states


  • STIJ-410: Fix build error on ttf2woff



  • STIJ-406: Add secondary alert button



  • STIJ-399: Fix WCAG color contrast for selected text


  • STIJ-409: Add font-display: swap



  • STIJ-397: Fix openinghours styling so embedded CSS can then be removed


  • STIJ-396: Change partner logo’s to space evenly



  • Add cart icon



  • Add click outside behaviour to accordion component



  • Add lock open icon.



  • Fix missing vendor folder in build directory in npm package



  • STIJ-394: Fix too strict selectors for sidebar components



  • STIJ-393: Fix wrong padding on filter labels in filter/sidebar layout



  • Fix postinstall script: revert change in version 5.0.2.



  • Fix postinstall script, readd check on publicRootPath. Fix warnings in jenkins job after using 5.x in gent_base.



  • STIJ-389: Added new sidebar layout.


  • STIJ-389: Fix broken links in readmes.
  • STIJ-389: Fix security vulnerabilities



  • Changed the build output! See package.json “files” array for details.


  • STIJ-386: Card molecule.
  • STIJ-387: Status atom.
  • Added .no-style modifier for lists to remove padding, margin and list-style.


  • STIJ-369: Updated the icon font to include versioning, cfr: gent-icons-v5.woff2.
  • STIJ-287: Updated button size within .form-actions.
  • STIJ-366: Removed table column min-width.
  • STIJ-375: Allow HTML in field-message without generating extra margin.
  • STIJ-384: Updated fieldset styling: padding and borders.
  • STIJ-384: Updated label ‘optional’ styling.
    Template updated: remove parentheses around ‘optional’!
  • STIJ-384: Updated wizard and multistep form button texts.


  • STIJ-381: Enabled list style within the accordion component.
  • STIJ-384: Fixed with of the label and field-description, should not exceed the with of the input field.


  • Fixed accordion.js: catch invalid URL hash.



  • Added checklist spot icon.
  • Added GentInfo language variants.


  • Updated the footer template to replace Digipolis by our new name: ‘District09’.


  • Fixed spacing for inline icon list.



  • Updated the beta checkboxes dynamic component template and JS functions file.



  • Updated modal-actions z-index.



  • STIJ-279: Fixed text overflow for large names in the authentication component.
  • STIJ-365: Fixed warning color for themes blue, teal and green.


  • STIJ-333: Added button with icon on the left side variation.
  • STIJ-286: Added tag-list component; a collection of tags.
  • STIJ-364: Added field-message info variant.
  • STIJ-306: Added .w7-o2, .w9-o1, .w10-o1 and .w12 helper classes to give children of the detail-layout a column width and offset.
  • STIJ-353: Beta Added the checkboxes dynamic component,
    This component will replace the checkboxes with filter component.
    If your project uses the checkboxes with filter component, please plan your transition to the new dynamic component.
  • STIJ-326: Added optional introductory text in the filter layout.


  • STIJ-286: All ‘teaser‘ variants now use the ‘tag-list’ component.
  • STIJ-286: Breaking ‘file upload - multiple‘ now uses the ‘tag-list‘ component.
    Support for the old template with selector ul.inline will drop in the next major release.
  • STIJ-286: Breaking the filter layout now uses ‘tag-list‘ to display the selected filters.
    Update your templates accordingly, or the selected filters will lose their margins.
  • STIJ-358: Breaking
    The template, styling, heading levels and content of the footer component have been updated.
    Make sure to read the component documentation, it contains details about which parts are optional or custom for each site.
    Do not simply copy all hyperlinks! They are mostly for demo purposes only.


  • The positioning of .search-block and .contact-box has been removed from the detail layout.
    These components don’t exist within this styleguide.
    If your project does have these components: position them using classes .w9-o1 and .w10-o1 respectively.

Following items had been marked as deprecated in the last major release.
They have now been removed.

  • ‘contact-block’ has been removed in favour of the generic ‘CTA-block’. Your project should no longer use classes .inner-box, .box-left, .box-top, .box-no-icon.
    This includes it’s usage in _detail-layout.scss.
  • ‘help-block’ has been removed.
    This includes it’s usage in _detail-layout.scss.
  • ‘extra-articles’ has been removed.
  • modal.functions.js has been removed.
    Use modal/index.js from the vendor directory
    or install**@digipolis-gent/modal** as dependency.
  • Dependency body-scroll-lock has been removed (it’s usage has been moved to @digipolis-gent/modal).
  • Class .mijn-gent-block has been removed in favour of .authentication.
  • Classes .subsite .subsite-title have been removed from the header hero in favour of .theme and .theme-title.
    The class .subsite still exists to display the site name in the header. (deprecated since 3.0.0-beta9)
  • Class .wizard-steps has been removed in favour of .form-steps.
    (deprecated since 3.0.0-beta4)
  • Classes .teaser-programme .teaser-topic .teaser-topic-links .teaser-contact-info .teaser-search .teaser-search-wide .content__top .content__bottom .content__left .content__right have been removed.
    (deprecated since 3.0.0-beta1)



  • STIJ-361: Content of the mobile menu was not visible when using Internet Explorer.
  • STIJ-357: Unified multistep form links with link atom.
  • STIJ-324: Unified icon labels in teasers.
  • STIJ-352: Changed programme spoticon size.
  • STIJ-316: Added mobile/tablet styling for tabs.



  • Added blue, teal and green themes.


  • Updated themeable color variables.
    This should not impact your applications unless you decided to override the variables or used the theme mixin yourself.
    For a detailed overview of all affected components, check out the git compare for this release and look for the thememixin.
  • Updated the header search background and border colors.
  • Updated the authentication link; added a black user icon.


  • Fixed background accolade in contact-details context.
  • Fixed teaser hidden read more text order.
    ‘Read more’ links should be followed by a hidden text, not preceded.
    This was incorrect in our templates.
    Please check your projects to see if you had copied this error.
    The correct template is:
       <a href="#" class="read-more standalone-link">
         Read more
         <span class="visually-hidden">about _usually the title of the teaser_</span>
  • Fixed filter layout template.
    The form actions (‘show result’) were outside of the filter form tag.
    This template fix will not break the styling of the previous template,
    but it is advisable to check your projects.

    The form tag should be placed on the .modal-inner element if used as a filter form.
       <form class="modal-inner" action="">
         <div class="modal-header"></div>
         <div class="modal-content"></div>
         <div class="modal-actions"></div>



  • Fixed SVG for link, loupe, mail, newsletter and phone.



  • Checkbox_filter.functions.js: added check to make sure checkbox input element is loaded.



  • Privacy disclaimer in the form template.


  • Removed shadow from inverted contact details.
  • Adapted links hover color to status message background color.
  • Allowed the use of strong tags around links in list-items.
  • Added “about” to read more link value
  • Fixed table bindings. Bind table functions to '.responsive-table .table-wrapper' instead of '.responsive-table' to fix WCAG scrollable content violation.
  • Fixed fieldset styling in filter layout modal. Make sure the .filter-section also has class sidebar.
  • Modal fixed-height had a scrollable region without keyboard access. The template has been updated, make sure to add tabindex=0 on all your .modal--fixed-height templates in your project too.


  • Deprecated: ‘mijn-gent-block’ has been renamed to the more generic ‘authentication’ in order to match the documentation.
    The ‘.mijn-gent-block’ class is still functional but marked as deprecated. Please use ‘.authentication’ from now on.

  • Breaking ‘CTA-block’ now uses the generic highlight component. The old template and classes will be removed in the next major version.
    Make sure your templates use .highlight and .highlight__inner.

  • Radios and checkboxes template has been updated to fix the bottom margin. Add a form-item wrapper around the form-columns, just like for any other form field.

  • Updated component names:

    • ‘Day Widget’ to ‘Open Today’
    • ‘Checkbox With Filter’ to ‘Checkboxes with filter’
    • ‘Menu’ to ‘Main Menu’
    • ‘Week Month Widget’ to ‘Opening Hours’
    • ‘Readspeaker Button’ to ‘Text To Speech Button’
    • ‘Summary Box’ to ‘Summary’

    SCSS classes remain unchanged!

  • Updated fieldset styling and form-item margins.

  • Changed book.svg fill color so that it is able to transform to the different theme colors.

  • You can now also trigger opening the accordion component by using the URL hash.

  • Reduced spinner size.

  • The .active link in the menu should now be bold.

  • Moved .social-list styling to the footer and theme-footer components.


  • Deprecated ‘contact-block’ has been marked as deprecated in favour of the generic ‘CTA-block’. Templates and classes will be removed in the next major version.
  • Deprecated .help-block has been marked as deprecated.
  • Deprecated .extra-articles has been marked as deprecated.
  • Deprecated modal.functions.jshas been marked as deprecated. Use modal/index.js from the vendor directory or install**@digipolis-gent/modal** as dependency.
  • Removed: .intro component was unused and has been removed. .detail-layout has been using .summary-text for the same effect.



  • Helper classes for margins and to hide elements.


  • Removed border bottom from fieldsets where necessary.
  • Fixed placeholder image for wide teasers.



  • Invalid CSS in hr styling.
  • Fixed form-columns whitespace.
  • Fixed overflow issue for videos in the timeline component.


  • Preview for Filter layout
  • Filter modal is now a fixed-height modal.



  • Size icon.
  • Euro icon.
  • Update icon.


  • BREAKING: Menu templates have been changed. Check which menu components are used in your project and update your template accordingly.


  • Inconsistent alignment between theme-footer and footer component.
  • Filter layout sidebar overflow.
  • Keyboard bug on checkboxes with filter.
  • Fixed width of images in wide teasers.



  • Focus outline for input type radio without class.
  • Add deprecated classes for boxes so it doesn’t break anything.



  • Added partners block component.

  • Split Form variants into separate components:

    • Form (default)
    • Multistep form
    • Wizard
  • Intro component.

    • The .intro class is now not dependent of .overview-layout anymore.
  • Users, size and wheelchair icons.

  • Highlight component:

    • BREAKING: The box-left, box-top and box-no-icon classes are now deprecated. You should replace them with the new highlight component.
  • Focus styling for all components.

  • Language switcher component.


  • Added more variants to form-actions.
  • Display icons in gentinfo block in default text color.
  • Move modal to root when it’s opened (Accessibility improvement).
  • Moved image wall and image gallery components up a directory.
  • Changed border color of links in status messages.
  • Updated maps component with example maps.
  • Added the slack channel to the docs.
  • Updated all form font-sizes to .8rem or 16px.
  • Renamed “Sidebar Layout” to “Filter Layout”.


  • Remove hidden overflow from lists to fix missing underline.
  • Fixed max width of Gentinfo logo.
  • Added responsive styling to the table of contents component.
  • Incorrect line-height for modal close button.
  • Fixed position of calendar icon in teasers.


  • BREAKING: Search block (too project specific).
  • BREAKING: Feedback form (too project specific).



  • Fixed translations for footer block.
  • Removed icon from breadcrumb links.
  • Removed icon from footer links.


  • Alignment of programme component title and teasers.
  • Z-index of login dropdown has now been increased to 99.
  • Padding of cta-block–multiple.
  • Fixed-height modal on IE11.



  • broken-link icon.
  • Broken image placeholder.


  • Changed paddings for box with spot image at the top.

  • Renamed document-box to documents.

    :warning: The document-box CSS class is deprecated as from now.

  • Make breadcrumbs collapsible.

  • Empty image placeholder.


  • Make show-more class for grid more specific, since “show-more” conflicts with other libraries.

    :warning: BREAKING CHANGE: Rename “show-more” to “grid__show-more”

  • Blue background when focusing on select element in IE11/Edge.
  • DTGB-728: Fixed line height for input date on mobile safari.
  • DTGB-731: Fixed underline color of links in the cs–orange theme.


  • Related box component (not generic enough).
  • Figure component, it is renamed to Image.
  • Font-size override for h2 in Summary box.



  • Background colors for table cells
  • Globe icon.


  • Added rounded corners to modal.
  • Improved responsive behavior for file upload.
  • Added extra wrapper for tables, named table-wrapper

:warning: BREAKING CHANGE:: markup for table has changed.

  • Removed bold styling when hovering over a menu item.


  • Video breaking out of container when used in combination with text alignment.
  • ‘Show more’ styling not being applied when not placed directly after a collection.
  • Non-collapsing margins for grid, resulting in too much bottom margin.

:warning: BREAKING: a wrapper has been added around the grid.

  • Font-size of avatar is now 26px instead of 24px.
  • Cross-browser behavior for icon buttons.
  • Alignment of status messages with 1 line of text.


  • Crisis communcation block, since it was too project-specific



  • Subsite header title added for mobile.


  • Refactored subsite header template.

  • Added fixed font-size of .8rem to table cells.

  • Background color for the teaser label.

  • Forms:

    • Don’t stretch field-message over the available width, but determine the width according to the content instead.
    • Add spacing to fieldset field-messages.
    • Display font in errored fields in normal font-style (instead of italic).


  • Bug where checkboxes in fixed-height modal were displayed in the modal-actions.
  • Modal width/height on tablet resolutions.
  • Spacing for tags in inverted teasers.


  • Base.js dependencies from menu.functions and modal.functions. Base.js does not exist anymore, remove it from your page template.

  • Updated link styling in mijn-gent block.



  • Changed width of image gallery to 10 columns in the Detail layout.
  • Quote wrapper is displayed over the full 12 columns in the Detail layout.
  • Social block in theme footer is left aligned on mobile devices.


  • JS error when no caption for table is provided.
  • Spacing for mobile tables.
  • Broken line in accolade for the Quote component.
  • Image placeholders on Overview layout.



  • File upload molecule.


  • Added class form-steps-list to make Form Steps extendable.
  • Make it possible to override the icon of button-alert.


  • Table row color for tables that both have a thead and tbody element.



  • Added table theming.
  • Added JS functionality that adds necessary attributes to tables on page load.


  • Added table theming.
  • Added JS functionality that adds necessary attributes to tables on page load.


  • Added all possible variants for the Theme Footer component.
  • Added all language variants for the Footer component.
  • Increased legend font-size.


  • Faulty underline for tabs.
  • Missing border-bottom for tags with a link.
  • Header search button underline.


  • Multiselect variant for Select component.



  • Bottom border to fieldset.
  • Logo to theme footer.
  • No Image fallback for avatar in MijnGent block.


  • Accolade background for field messages in boxes.
  • Positioning of the subsite figure on IE11.


  • Underline for links.



  • DTGB-684: Separate checkboxes component.
  • DTGB-684: Separate radios component.
  • DTGB-688: Vertical variant for Form Steps.
  • DTGB-688: Wizard (as a variant for the Form organism).
  • DTGB-688: Multistep form (as a variant for the Form organism).


  • DTGB-684: Moved select to molecules and have it use the form-item component.

  • DTGB-684: Moved form to organisms.

  • DTGB-688: Renamed ‘Wizard Steps’ to ‘Form Steps’.

    :warning: The wizard-steps CSS class is now deprecated and will be removed in the next major version. Update it to form-steps.

  • DTGB-707: Removed webkit datepicker up/down arrows.

  • DTGB-708: Fixed button styling for iOS’ Safari.


  • DTGB-684: Dark button variant.



  • Reverted the render tag back to the default include tag.
  • Re-added path filters to fix asset paths for the generated static files.



  • Changed yarn engine requirements to a ^1.12.0.
  • Component templates are now included with the render tag. More info: frctl/twig.
  • Resolved all dependency vulnerabilities.


  • Contact box component.



  • DTGB-552: Spinner.
  • DTGB-680: Form-row.
  • DTGB-673: Added Gent Info component.
  • DTGB-621: Modal component in molecules tree (i.e. this component isn’t hidden anymore).
  • DTGB-673: Added Gent Info component.
  • DTGB-678: Form-disclaimer.
  • DTGB-677: Wizard steps.
  • DTGB-172: Component documentation.


  • DTGB-676: Exposed modal open and close functions.

  • DTGB-665: Refactored pages to only show layouts. This shouldn’t affect any custom projects.

  • DTGB-621: Cross-browser behavior of the modal component.

  • DTGB-621: Focus management of the modal component.

  • DTGB-659: Changed tablet breakpoint from 769px to 768px.

  • DTGB-675: Refactoring of some components:

    • Fonts description changed.
    • Label component hidden in style guide.
    • Field message component hidden in style guide.
    • Logo component hidden in style guide.
  • DTGB-607: Changed font-size for boxes to 16px (a.k.a. .8rem)

  • DTGB-629: Updated text alignment for boxes on detail pages.

  • DTGB-697: Updated hover animation for links.


  • DTGB-677: Form steps.
  • DTGB-683: Frequently visited.
  • DTGB-683: Filter placeholder.



  • DTGB-649: contact block variants
  • DTGB-650: multiple cta-block wrapper
  • DTGB-651: Links on topic overview page
  • DTGB-654: File download molecule
  • DTGB-656: Frequently visited molecule
  • DTGB-658: Filter placeholder


  • DTGB-651: Topic teaser styling
  • DTGB-656: Border-width of tag
  • DTGB-655: Updated copy in checkbox-with-filter popup
  • DTGB-604: removed font-size increase on +1920px screens
  • DTGB-660: Added gentinfo logo to the gentinfo-island.


  • DTGB-648: Refactored form fields


  • DTGB-648: Field description (replaced by variant of field message)



  • DTGB-574: tabs
  • DTGB-633: inverted variant of contact-details


  • DTGB-634: cta block variants


  • DTGB-641: Refactored filter template to display filter button next to result instead of above it


  • DTGB-635: Fixed missing scroll lock on mobile menu.



  • DTGB-547: Added icon overview to the icon atom page.
  • DTGB-569: Added subscribe molecule (hidden).
  • DTGB-547: Renamed icon-link to icon-url
  • DTGB-610: Added dash-separated list
  • DTGB-555: Added programme organism.
  • DTGB-555: Added modal molecule.


  • DTGB-569: Completely refactored theme footer.


  • DTGB-429: Temporarily replaced baguettebox.js with a Forked version.
  • DTGB-539: Refactored footer templates to sections.
  • DTGB-539: Refactored timeline item wrappers to role listitem.
  • DTBG-539: Refactored image-gallery template to also use labelledby.


  • DTGB-509: Updated checkbox-with-filter template.


  • DTGB-208: Added max-width fallback for text elements.
  • DTGB-416: Updated gulp build to fail on error.
  • DTGB-410: Added fractal search functionality.
  • DTGB-203: Refactored gulpfile to gulp ^4.0.0
  • DTGB-144: Added SassDoc generation for external developers.
  • DTGB-147: Redefined the color palletes and color schemes.
    • Refactored the way themify works. This removed the use of variables to determine the themified variant of a component.
    • Sections have changed into color schemes Sections have been changed into color schemes with the cs-- prefix. Colors are now defined in a $colors SASS map and accessed through the color() function. See the documentation of colors for more information.
    • Themify changes Refactored the way themify works. This removed the use of variables to determine the themified variant of a component.
    • Color scheme nesting removed Color scheme nesting has also been removed because they won’t be used anymore in the new style guide.
    • Color panals introduced Color panels have been added to allow easier default styling of new components and to allow easier overriding of the properties of these components.
  • STIJ-159: Added tag atom styling.
  • DTGB-174: Changed styling of status messages.
  • DTGB-214: Added new styling to buttons.
  • DTGB-218: Added new logo.
  • DTGB-258: Added gulp task to generate iconfont.
  • DTGB-283: Updated the license file to GPLv2.
  • DTGB-288: Added the quote molecule.
  • DTGB-394: Moved layouts from 61-layouts directory to a 71-pages directory.
  • DTGB-180: Added gulp task to perform accessibility checks.
  • DTGB-209: Added new styling for basic input field atoms.
  • DTGB-431: Added video component.
    • We added styling for radio buttons and checkboxes. These were not styled in previous versions of the style guide.
    • Removed jQuery UI Datepicker support and integration! Did some refactoring to the SASS partials. Most of the input field styling can now be found in the _forms.scss partial.
  • DTGB-406: Added styling for the footer organism.
  • DTGB-407: Changed the default font size breakpoints.
  • DTGB-421: Added a feedback form component.
  • DTGB-282: Added an image gallery organism.
  • DTGB-282: Replaced lightgallery by baguettebox as lightbox libary.
  • DTGB-423: Added a topic collection organism.
  • DTGB-148: Refactored heading organism.
  • DTGB-148: Added info-box organism.


  • DTGB-140: Removed some files from the NPM package.
  • DTGB-140: Fixed a bug where npm install breaks the install of the style guide.
  • DTGB-276: Fixed a bug where the breadcrumb alignment was not correct.
    • Some markup changes have been introduced so you might need some refactoring.
  • DTGB-397: Changed the markup of radio buttons and checkboxes. They are now inside their own fieldset.
  • DTGB-401: Updated links to new public gent_base repository.
  • DTGB-402: Added a required form fields indicator at the top of forms.
  • DTGB-443: Added article teaser component.
  • DTGB-443: Added ‘more articles’ block.


  • STIJ-246: Added a mixin and class no-link-style to make it possible to override the link styling of certain blocks with text-decoration: none;.
  • STIJ-246: Give links that are styled like a button a text-decoration: none;.
  • STIJ-86: Added documentation for the description atom.
  • STIJ-93: Added external link variant. This defines a class .external-link that provides a ::before on the link and adds a new-tab icon.
  • STIJ-92: Updated the label atom documentation.
  • STIJ-88: Updated the heading atom documentation.
  • STIJ-96: Updated the paragraph atom documentation.
  • STIJ-94: Updated the list atom documentation.
  • STIJ-250: Added small fix for empty teaser collection preview templates.


  • STIJ-244: Fixed critical gulp build bug. IMPORTANT Necessary fix for 2.8.0.


  • STIJ-198: Changed color-element-states() mixin to element-states() mixin.
  • STIJ-236: Fixed markup of breadcrumb + fixed an issue where the breadcrumb didn’t wrap correctly.
  • STIJ-237: IMPORTANT Removed bootstrap grid styling for forms.


  • STIJ-200: Refactor status messages.
  • STIJ-229 Refactored Gulp-file to ECMA-6
  • STIJ-229 Fixed gulp npm-install. Added –help support and argument checking through the yargs module.
  • STIJ-229 Fixed gulp build to support -h –help, option validation through Yargs.
  • STIJ-229 Refactored ES-lint to accomodate node.js, ES-6, enforced ‘use strict’; on a function level instead of global.


  • STIJ-235: Refactor form actions.


  • STIJ-221: Removed header margin top again. We need to think of a better way to implement this.
  • STIJ-219: Added travis integration.
  • STIJ-223: Added codeclimate integration.


  • STIJ-216:
    • Added masonry-layout library.
    • Added organism for masonry layout.
  • STIJ-217: Added validation check to script.


  • STIJ-197: Added margin top to headings and fixed the color of links inside headings.
  • STIJ-207: Fixed small issue for preview templates.
  • STIJ-208: Fixed bug in script.
  • STIJ-210: Move some dependencies to devDependencies.
  • STIJ-211: Fixed newsletter block styling.
  • STIJ-214: Added preview template fixes after refactoring the heading atoms.


Due to some issues with publishing to NPM we had to update to a new patch version without introducing new changes to the style guide.


  • STIJ-208: Removed console log and updated script to generate main_cli.scss content.


  • STIJ-170: Fixed a bug where the search icon in the header did not work for FF and IE.
  • STIJ-175: Added teaser and topic teaser molecules.
  • STIJ-193: Added figcaption atom and figure molecule.
  • STIJ-194: Updated preview layouts and added some building blocks.
  • STIJ-199: Removed some style guide specific preview templates that where not necessary anymore.
  • STIJ-205: Added deploy script for admins.
  • STIJ-206: Added main_cli.scss file that creates the main sass file without SASS globbing to support Angular CLI.
  • STIJ-207: Added small fix for preview layouts.


IMPORTANT: Class .text-center has been removed

  • STIJ-1: Fixed whitespace issue for the gallery component.
  • STIJ-30: Fixed styling for select and multi select fields on iPad.
  • STIJ-39: Fixed component colors inside of sections, based on guidelines fron the City of Ghent.
  • STIJ-45: Changed jQuery UI datepicker format to a Dutch format.
  • STIJ-87: Added description field documentation.
  • STIJ-87: Refactored description field atom to use Themify mixin.
  • STIJ-89: Changed the documentation of an icon to English and update it a bit.
  • STIJ-96: Added paragraph atom documentation.
  • STIJ-96: Removed the paragraph variant that contains centered text, it is not allowed by the City of Ghent!
  • STIJ-100: Added variant for CTA links.
  • STIJ-100: Added CTA link documentation.
  • STIJ-106: Added search molecule documentation.
  • STIJ-170: Fixed search molecule bug where it was using the old button submit atom instead of the input type submit atom.
  • STIJ-170: Added a label to the search molecule.
  • STIJ-170: Hide the label of the search molecule in the header organism.
  • STIJ-170: Add placeholder to search molecule inside the header organism.
  • STIJ-175: Added page wide image component.
  • STIJ-177: Added newsletter block component.
  • STIJ-178: Added styling for inline form-items.
  • STIJ-178: Added address organism.
  • STIJ-182: Fixed whitespace when previewing footer component in the style guide.
  • STIJ-186: Added header variant with breadcrumb and with a banner image.
  • STIJ-186: Added small fix to the buttons in the header.
  • STIJ-188: Fixed issue in gulp command js:dist.
  • STIJ-189: Fixed some style guide specific issues.


  • STIJ-158: Changed datepicker date format to an English format.
  • STIJ-159: Removed button submit atom.
  • STIJ-159: Moved the submit button documentation to the input submit atom.
  • STIJ-160: Changed the form actions - editor molecule variant to include a normal button instead of a dropbutton.
  • STIJ-161: Fixed broken links in documentation files.
  • STIJ-162: Changed all Dutch text to English.
  • STIJ-168: Changed style guide title to a versioned version.
  • STIJ-169: Integrate link in style guide to the GitHub CHANGELOG.


  • STIJ-50: Fixed label for attributes and changed a lot of the form examples in the style guide.
  • STIJ-86: Added documentation to some components.
  • STIJ-156: Updated the CONTRIBUTING and README files.
  • STIJ-156: Updated the README file of the gallery component with important licensing information.
  • STIJ-157: Changed the loaded JS files in the _preview.twig file to the minified versions. This fixes issues when automatically deploying.
  • STIJ-157: Changed the gulp file to also locally minify the JS files. This fixes local JS issues.


IMPORTANT: Updating this style guide through composer is DEPRECATED! The next release will remove composer.json!

  • STIJ-154: Changed preview layout of style guide to be more user friendly.
  • STIJ-156: Added license information for the gallery component that uses Light Gallery (jQuery plugin). Important: Check the bit about the commercial license!


  • STIJ-155: Added small fixes to various form elements.


  • STIJ-45: Added custom styling to the jQuery UI datepicker component.
  • STIJ-148: Refactored hamburger-menu into a single component.


  • STIJ-148: Made hamburger-menu WCAG compliant.
  • STIJ-148: Created a global TabTrap object.


  • STIJ-112: Added footer documentation.
  • STIJ-149: The footer organism now has a different grid implementation. Through the use of a data-columns attribute we made the grid styling flexible between 2, 3 or 4 columns.
  • STIJ-150: Changed social media links block. This now displays the social media links of Stad Ghent correctly.


  • STIJ-147: Added changes to Chosen for multiselect fields. Chosen will now be disabled on iPad.


  • STIJ-146: Added at and code icons.
  • Optimised following icons: caret, pinned, paper, idea, smartphone, data, data-new.


  • STIJ-145: Added pinned icon.


  • STIJ-63: Made Fractal variants of paragraphs.
  • STIJ-63: Remove underlined text from paragraph examples, it is discouraged to use underlined text.
  • STIJ-131: Remove placeholders from all input type fields except search fields.
  • STIJ-25: Fixed status messages preview pages.
  • STIJ-140: Fixed themify issue on select input fields.


  • STIJ-25: Added themify to the status messages component.


  • Fixed select box appearance in IE.
  • STIJ-139: Added no-optional class to hide optional from field labels.
  • STIJ-139: Changed the styling of checkbox and radio field labels.
  • STIJ-139: Added fieldset styling.
  • STIJ-139: Changed class of messages.


  • Fixed a bug in the script.


  • STIJ-126: Removed CDN imports of external libraries and added them through yarn.


  • STIJ-125: Fixed close button for items inside multiselect.
  • STIJ-137: Changed preview template for Mijn Gent block.


  • STIJ-40: Fixed ugly styling on buttons and input fields for iOS.


  • STIJ-35: Added bindings and functions for the Gallery component.


  • STIJ-2:
    • Added default no-style styling to lists in the hamburger menu.
    • Fixed preview hamburger menu.
  • STIJ-34: Changed Gent info block title to h3.


  • STIJ-32: Refactored heading.
  • STIJ-95: Added more documentation.
  • STIJ-122: Minor validation fixes.
  • STIJ-123: Added form errors.


  • STIJ-116: Minor change to the styling of the Form Steps molecule.


  • STIJ-76:
    • Added bindings and functions layer to all Javascript files.
    • Added documentation for Javascript use and component Javascript.
    • Refactored some Javascript code.
  • STIJ-116:
    • Changed markup for the Form Steps molecule.
    • Changed styling for the Form Steps molecule.
    • Added themify for the Form Steps molecule.