All notable changes to this style guide are documented here.
New Stad Gent style. View all markup changes below. Always look up the mentioned elements in the styleguide to see the new HTML markup.
The themify theme() function creates style selectors like this:
.cs--blue .original-selector .child ... {}Where .cs--blue is the theme color and this class is added to the
But sometimes the .original-selector is a body class which is not supported by
the theme() function.
The theme-body() function adds the color class to the first element of the
selector:
.cs--blue.original-selector .child ... {}@include accolade;
Add an outside accolade to an element and add a color to it.
@include abstract-shadow;
Add an underlying container of the same size under the chosen element. For example the highlight molecule.
@include button-icon-right;
Also added the .icon-right class for icons that are on the right-hand side.
Follow these markup changes in your project to have CSS applied flawlessly.
Added legend-title class
The legend now has a <span class="legend-title"> around the text/title/label
Changed <input> to <button>. This is important to be able to use the hover effect in combination with an icon.
Removed icons: external-link, fancyback
Added icons: basket, civil-affairs, contact, cross-circle, culture, education, environment, for-children, fullscreen-enter, fullscreen-exit, ghent, health, info-circle, layers, link, living, map, mobility, music, next, pause, pinterest, play, previous, question, question-circle, refresh, settings, shopping, sign-language, sign-out, spoken-language, stop, tag, target, threads, uitpas, uit-met-vlieg, view-grid, view-list, virus, whatsapp, wheelchair-no, work.
Some icons have been updated, using the same machine name.
This element is new. Existing labels such as on teasers can be replaced by this atom. See teaser markup changes.
This new molecule is used to display a colored text with same color icon in front of it. It is e.g. used in the Timeline Roadmap display.
Default heading changed from h3 to h2 and the close button has the .button-secondary class
This module is expanded with the option to add another container (for images, e.g. on Timeline) that is controlled with the data-controls-img attribute, linking it to the id of the img container.
Use the .accordion--link class for read-more type links with the correct button and content classes.
A wrapper was added to columns: .contact-details-columns and the h3 is changed to an h2 with class .h3, which is outside of those columns.
No more spot images via classes. The icon can be changed in HTML markup via
the proper icon name in the <i> element.
An H2 title has been added.
Not based on Highlight molecule anymore. Instead, there is new markup, including the option for an image (1:1).
The H2 heading changed to H4 and is visible. The heading text changed as well.
A class is added to the <ul> element to define 2 or 3 columns.
The icon classes have changed to the circle variants.
The file upload molecule (variation multiple) has the new class multiple added on the section.
<section class="file-upload multiple">.
This change is needed to hide the ‘No file chosen.’ text on this variation.
h2 instead of an h3..single-partner becomes .partners class because styling changes are determined based on wrapper class .partner__single or .partner__multiple.<a> tag has .no-icon class so that it does not get an external link icon in some cases.intro and .intro-content.There are multiple variations of teasers instead of just one. Pick the right variation for your use case.
no-image for correct styling.h3 with .h4 class, except for teaser--square__double, which has a regular h3 as a first teaser.date instead of event.tags-label-wrapper.A banner-image-container full-width wrapper is added. The image inside is not a gallery but a simple image shown without data-ratio attribute.
The grid system is updated (Susy is removed), an example is added to the readme. The old (legacy) grid classes still work for now.
is-frontpage.Timeline paragraph title is now an h3, the Timeline item title is now an h4 and the Timeline item subtitle is now an h5.
There’s an image (singular) that is loaded twice: once on the right side and shown on mobile and once on the left side and shown on desktop. Make sure the data-controls-img attribute of the title is the same as the image container for desktops’ id.
The timeline slots can have a reverse order (by adding the .timeline-slot-reverse class) e.g. if the previous slot is odd, but also if the previous slot is even and also has the .timeline-slot-reverse class.
The new timeline--roadmap variant is used for displaying steps. It also includes an accordion with extra content options.
Titles have changed to h2 and h3 for slot title and teaser title
Not based on Highlight molecule anymore. The HTML markup has been simplified.
<aside class="summary-box">
...
</aside><span>Show all photos <i class="icon-arrow-right" aria-hidden="true"></i></span>Becomes
<span>Show all photos <i class="icon-fullscreen-enter" aria-hidden="true"></i></span>Not based on Highlight molecule anymore. The HTML markup has been simplified.
<section class="contact-details">
...
</section>The links get a no-icon class.
Add the .contact-details--with-image class to the contact-details section if you want to remove the side margins and set it to full width.
h4 except Gentinfo title stays h3.gentinfo-block class gets 2nd class dark-background.icon-document icon becomes icon-subscribeinline.no-icon.icon-left.h4 title instead of h3.h2.h2 to h3.