Core Framework v2.1.0 – Documentation

Change Log

Version 2.1.0

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

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.

Version 2.0.2

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.

Version 2.0.1

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.

Version 2.0.0

This release introduces substantial changes to the visual look and feel of the page. The typography has been adjusted to be larger and clearer, the spacing between elements has been increased to achieve a more open feel, and forms and lines have been reworked to convey a sense of order and logic by reducing unintended patterns and clutter.

See the Migration Guide for a quick guide on how to migrate from version 1.4.0 to version 2.0.0.

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.

Version 1.4.1

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.

Version 1.4.0

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.

Version 1.3.1

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.

Version 1.3.0

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.

Version 1.2.0

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.

Version 1.1.1

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.

Version 1.1.0

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.

Version 1.0.0

Initial release.