Change Log

Features and Improvements

• CoreCSS is now available via npm! Just run npm install is24-corecss. Make sure you have setup FASt correctly.
• Simplified folder structure inside ZIP archive.
• Segmented controls are now available!
• Links have no visited state anymore.
• Flex grid is out of its experimental state.
• LESS Variables and Mixins now have a documentation.

Bug fixes

• Remove outline from link-text buttons, bringing them in line with regular links.
• Change highlight color on focus for links to brand orange.
• disabled did not look completely right for checkboxes and other form elements, as well as for dropdown-links. That is fixed now.
• Feedback form has been updated with up-to-date contact methods.

Features and Improvements

• All new IS24 icon set.

Bug fixes

• Roll back spacing to the way it was before 3.x. We got the feedback that the new system breaks layouts and makes upgrading hard which is why we changed that back.
• Roll back font-weight of links to normal / 400.
• Fixes the teasers on our main documentation page.

Features and Improvements

• All new typo! Almost every piece of text has been updated, alongside with the documentation.
  • <h6> is now the same as <h5>. Please refrain from using it in the future.
• Spacings have been unified. No more changes between desktop and mobile (rolled back in 3.0.0-6)
• All new color palette! We now use only four main colors, making the color palette much clearer in its purpose. The variety of text colors has been reduced. If you were using the LESS color variables before, you will need to adjust accordingly, although the old colors will continue working.

• All new form inputs!

  Every piece of form input has been redesigned. For checkboxes and radio buttons, make sure you include id in your <input> and a corresponding for in your <label>!

  There are also new form elements: toggle switches and dropdown links.

• All new buttons!

  Every button has been redesigned.

  Please mind that the new best practice is that buttons should be put into their own line, as opposed to next to input elements.

Breaking Changes

• State-bound buttons are no longer a thing. Please make sure to migrate away from them. State-bound buttons look like this: palm-button or lap-button.
• Checkboxes and radio buttons now need id set in <input> and a corresponding for in <label>. If these attributes are not set, these controls will not be clickable.

(Potentially) Breaking Changes

• All font sizes have increased. This might break your layout, especially if you have vertically aligned text blocks.

Deprecated Features

• The old color palette is now deprecated and does not have a suitable replacement for every color. If you were using the LESS color variables before, you will need to adjust accordingly since all colors have changed.
• Line heights like font-line-xs have been deprecated.
• fineprint has been replaced by font-discreet. Please change accordingly.

Features and Improvements

• The new page-wrapper--full-width modifier allows you to create full-width page layouts.
• The FontAwesome icon font has been upgraded to version 4.6.3.
• The advertisement component now allows for the placement of a skyscraper ad on the left-hand side of the page.
• The viewport element has been deprecated and references to it removed from the documentation. We do not believe the element is necessary anymore, and its overflow restrictions may introduce a number of elusive bugs.

Bug Fixes

• Disabled buttons are no longer see-through and will now look the same regardless of what background they are placed on.
• Fixed an issue where the flex grid would behave strangely if placed directly underneath uncleared floating elements.

Features and Improvements

• The lightest shade of gray (@gray9) is now slightly darker to get better contrast on white backgrounds. Similarly, input element borders are now one shade darker to get better contrast on gray backgrounds.
• The default font size of all form input elements (and of text within forms in general) has been increased on small displays to increase legibility and to avoid browser-forced zoom-ins on user interaction.
• The FontAwesome icon font has been updated from version 4.2.0 to 4.5.0.

Bug Fixes

• Fixed a positioning issue where the super banner and skyscraper ad placements would be placed outside of the viewport if the page wrapper element didn't also have a certain, non-advertisement-related CSS class.
• The arrow icon on form select elements is now properly placed at the right edge of the field in Internet Explorer.
• Mobile devices running on iOS will no longer increase the font size when changing to landscape mode.

Features and Improvements

• The padding on the content-wrapper element has been increased on small devices to make pages feel less cramped.
• The new font-line-xs class allows for more narrowly spaced lines of text.
• Labels for required form inputs are now positioned more closely to their inputs and are no longer printed in bold text.
• Stand-alone links may now be underlined (in those rare cases where you would need to).
• The color palette documentation now offers more detailed information about color codes and their usage. You can now copy the color codes right off the page.
• Palm-sized devices will now load only two of the font weights for the Open Sans web font (normal and semi-bold) to improve loading speed.
• The Open Sans font files have been removed from the project in favor of the stand-alone Open Sans files hosted on the Static Server.

New Modules and Components

• The Tooltips and Popovers module is now integrated into the Core framework.
• A new (experimental) extension to the grid offers a bunch of new layouting features that you may find very useful. Go and try it out, then give us feedback!
• You can now make any text element look like a specific type of headline with the headline font classes.
• There is a new helper which will horizontally center block elements.
• A new addition to the content wrapper lets you stretch content to the full page width from within a content wrapper.

Deprecated Features

• The Top Navigation module is now deprecated. It is being superseded by the new individual Top Navigation module, which you may find here.

Bug Fixes

• Text wraps on links with icons are now properly aligned regardless of font size.
• Headlines have had their line height increased so that character descenders are no longer cut off if the headline's overflow is hidden.
• Buttons made from <a> tags will now look okay even if they have no href attribute.
• Full-width buttons (using a variation of the one-whole class) are now less prone to layout bugs when the label text width approaches the width of the button.

Features and Improvements

• The Top Navigation layout has been improved to allow the use of hover tabs on display widths starting from 768px. This should make navigation easier on many tablets in portrait mode, which used to get only the slide-in navigation.
• Form inputs can now be resized with the font size classes.
• Buttons sizes have been adjusted within forms to make them fit better alongside form input fields.
• The Campaign Box can now be toggled by device state.
• There is a new class to exclude elements from the print layout.
• Standard links are now always shown blue regardless of whether or not they have been visited.

New Modules and Components

• The new Absolute Positioning module allows you to absolutely position elements depending on device state.
• The new Links With Visited State module lets you apply the violet visited state to individual links or groups of links.

Bug Fixes

• The Open Sans font reference in the CSS has been improved to prevent legacy browsers from misinterpreting the definition and requesting a nonexistent resource.
• The Open Sans Light font has been updated to fix a bug where certain special characters, such as “é”, were shown bolder than the rest of the text.

Bug Fixes

• Form select fields now explicitly have a white background. On Linux systems, some browsers would render a gray background due to differing user agent styles.
• The welcome message in the top navigation account tab will no longer cut off character descenders (as on the letters “g” or “q”).
• The show/hide state of the avatar image in the top navigation account tab may now be toggled separately from the login state. Before, it was not possible to show a placeholder image to non-logged-in users.
• The “powered by” logo in the top navigation is now less likely to overlap the brand claim on very small devices.

Bug Fixes

• Fixed a bug where on certain mobile browsers the slide-in navigation would spontaneously expand and cover the content area after scrolling.
• Fixed a bug where, using the default browser on certain Android devices, the top navigation would expand and cover the whole screen in orange, rendering the page unusable.

Features and Improvements

• Page Frame

  • The page wrapper now has a maximum width of 1170px, including paddings.
  • Left and right borders have been added to the page wrapper by default to fence off the actual page area from the background on very large displays.

• Backgrounds

  • A default color has been defined for the background class to make usage more straightforward.
  • Some other purely presentational background colors have been removed in favor of the standard color.

• Borders

  • A default color has been defined for the border class, so you no longer need to specify both border and border-<color>.

• Buttons

  • Buttons have been adjusted to look flatter.
  • To keep their naming consistent regardless of visuals, the button class names have been changed from button-lightblue, button-darkblue, and button-orange to button, button-secondary, and button-primary, respectively.

• Fonts

  • The new default typeface for both headlines and regular text is Open Sans.
  • The Open Sans fontface is available in the font weights 300, 400, 600, and 700. You can apply these weights with the classes font-light, font-normal, font-semibold, and font-bold, respectively.
  • All default font sizes and font size classes have been adjusted to go better with the new typeface.
  • Text will no longer be displayed larger on palm-sized devices. All font sizes now have fitting counterparts for small and large devices.
  • There is a new large font size, which will be the default size for H1 headings. You can apply this size to your text with the new font-xxxl class.
  • The new font-lightgray class allows you to turn your text a shade lighter. (This function was formerly associated with font-light and has been renamed to solve a naming conflict.)

• Forms

  • The standard form theme now has a more generic name to facilitate future changes (form-theme-standard).
  • Form inputs are now larger to go along with the typographical changes and to improve usability on small devices.

• Spacings

  • All spacings have had their values adjusted to introduce more free space into pages. This affects all margin-, padding-, gutter-, and list-spacing- classes.
  • Spacings are now smaller on palm-sized devices than on larger devices to conserve space.
  • Spacings now come in an “XXL” variant. All of the above-mentioned classes now work with the *-xxl suffix.

• New Components

  • You can use the campaign box module to create an eye-catcher for your main product entry.
  • The breadcrumb navigation module tells users their location on the site.
  • The text-spacing helper allows you to apply a standard spacing to an arbitrary number of paragraphs without having to manipulate each one individually.

Deleted Features

• Background Colors

  • background-lightgray, background-lightblue, background-darkblue, and background-darkgray have been removed – there is only one standard background color now, applied through background.

• Borders

  • border-lightblue, border-darkblue, border-lightgray, and border-darkgray have been removed – these purely presentational border colors have been dropped in favor of the standard color which is now bound to the border class.

• Buttons

  • button-orange – has been renamed to button-primary.
  • button-darkblue – has been renamed to button-secondary.
  • button-lightblue – has been replaced by the new white default button (button).
  • button-transparent – the transparent button has been dropped due to a lack of use cases. Please use the white button instead.

• Fonts

  • The font-light class will no longer turn the text color of an element lighter. Use the new font-lightgray instead.
  • The font family classes font-global and font-headline have been removed because they no longer make sense with regular text and headlines sharing the same font family.
  • The font-line-l class has been removed because an increase in the standard line height has made it unnecessary to further increase the line height of an element.

• Forms

  • form-theme-blue – The blue form theme has been replaced. The new standard theme has a more generic name to facilitate future changes (form-theme-standard).

• Rounded Corners

  • All classes for rounded corners (rounded, rounded-*) have been removed because they do not fit the new design principles.

• Page Header – Full

  • The old global header page-header-full has been removed in favor of the new standard top navigation (top-navigation).

• Advertisements

  • Due to changes to the top navigation, it is no longer possible to contain super banner ads within the header. As such, the page-wrapper--with-ads--contained class is now inactive.

Developers

• The LESS CSS variables and mixins used by the Core project will from now on be exported with each version in the Bundled Resources archive. You can include these in your own projects to get access to the relevant variables for the respective Core version that your project is based on.

Bug Fixes

• The SSO login script will now correctly throw away duplicates when attaching parameters to SSO links.
• The header script was adjusted slightly to alleviate a bug that may occur in heavily dynamic apps where the header will sometimes stick to the top of the page regardless of scroll position.

Features and Improvements

• We implemented some layout changes to avoid broken alignments and visual artifacts in pages with advertisements. The content area is now centered and has a maximum width of 1280px, and elements will no longer be able to break out of that area, as the header and footer used to.
• As a result of the above, the content-wrapper-container element has become obsolete. You no longer need to wrap your content-wrapper elements in these.
• With the new page-wrapper--border class, you can apply a border to the left and right sides of your page wrapper to distinguish it from the rest of the window background. This is especially useful in centered layouts.

Bug Fixes

• The layout of the first-level items in the top navigation bar has been adjusted to ensure that tabs will always be positioned in the same place, no matter which item is highlighted.
• The stacking order of the account tab has been adjusted to prevent other content from overlapping it.
• The login script now correctly appends a configurable return URL and application name parameter to the SSO registration link.

Bug Fixes

• Fixed a bug in the advertisement styles where skyscraper banners that are part of a hockey stick configuration would not be shown regardless of display size on pages which have not yet adopted the new ad layout.

Features and Improvements

• The OpenSans typeface is now available in light font weight (300).
• The FontAwesome icon set has been updated. You can now use icons up to version 4.2.0.
• We introduced a new content-wrapper-container element. All content-wrapper elements should be nested in one of these to make proper alignment possible in layouts with advertisements.
• The way that advertisements are shown has been adjusted to make sure that ads are always as close as possible to the content column. On wide displays, the ads will now be drawn on top of the page and attached to the centered content column.
• The “screen” condition has been removed from all media queries to make the respective styles available to devices other than regular screen interfaces, most notably printers. Before, printing pages would sometimes result in duplicate content because of misregarded hiding classes.

Features and Improvements

• Added the new top navigation bar, which along with a modified version of the white header forms the new global header.
• Added the corporate-powered-by module which you can use to show the “powered by Telekom” logo on the top right of standard pages (mainly in conjunction with the new header).
• Added the Open Sans typeface to the pool of standard fonts. This is currently only used for the new global top navigation – you can apply the font face manually by adding the font-opensans class.
• The font-semibold class lets you display text in semi-bold letters. This is an important distinction in certain typefaces, such as Open Sans.
• The new vertical-center helper gives you a way to vertically center any element within its parent element.

Bug Fixes

• Moved CSS file for browsers without media query support up in the tree to fix faulty relative references. Also fixed the banner so it will now show the correct version number.
• Mirrored a couple of recent changes which had previously been missing to core_no-mq.css file.
• Removed all styles from core_no-mq.css which are exclusively for the palm or lap states so that browsers without media query support will apply only those styles that are meant for desk-top devices.

Features and Improvements

• Error color was made a few shades lighter for improved contrast to regular text.
• Link icons now work within link lists even if you wrap the link in another element. Before, structures such as ul.icon-arrow > li > div > a would not have been allowed.
• Added clearfix-before so you can now clear block elements toward the top – useful for when you want to contain top margins on an element's descendants, for example.
• Added media-query-less variant of Core CSS file to replace respond.js – you will need this if you wish to support IE8 and plan to implement the CSS from another domain (as in “www.static-immobilienscout24.de”)
• Added a blue variant of the “NEU” icon to the global header which works better on the world tabs than the regular white and orange one.
• Added Arial to the pool of potential fonts for headlines to improve the experience for Linux users browsing with Firefox.

Bug Fixes

• Fixed info banner in zipped CSS files that would show a placeholder rather than the current version.
• Prevented horizontal resizing of textarea elements within form to avoid broken layouts.
• Adjusted line height on global header's active world tab to get rid of a phantom border in recent versions of Firefox.
• Fixed broken layout of welcome text for logged-in users in the global header.
• Adjusted sub navigation bar in global header to prevent tab hover effect from overlapping content below the header.
• Attached affiliate link bar (scout-verticals) explicitly to the top left to avoid layout bugs in case its parent container has horizontal padding.