ftw.theming 1.11.0

Inspecting the SCSS registry

The @@theming-resources (on any navigation root) lists all resources.

Resource slots

The registry allows to register resources to a list of fix slots. These are the available slots, sorted by inclusion order:

• top

• variables

• mixins

• ftw.theming

• addon

• theme

• policy

• bottom

Adding resources

Adding SCSS resources is done in the ZCML of a package. The SCSS should always go into the same package where the styled templates are.

<configure
    xmlns:theme="http://namespaces.zope.org/ftw.theming"
    xmlns:zcml="http://namespaces.zope.org/zcml"
    i18n_domain="ftw.tabbedview">

    <configure zcml:condition="installed ftw.theming">
      <include package="ftw.theming" />

      <theme:scss
          file="resources/tabbed.scss"
          slot="addon"
          profile="ftw.tabbedview:default"
          />
    </configure>

</configure>

<configure
    xmlns:theme="http://namespaces.zope.org/ftw.theming"
    xmlns:zcml="http://namespaces.zope.org/zcml"
    i18n_domain="plonetheme.fancy">

    <include package="ftw.theming" />

    <theme:resources
        slot="theme"
        profile="plonetheme.fancy:default"
        layer="plonetheme.fancy.interfaces.IFancyTheme">

        <theme:scss file="resources/foo.scss" />
        <theme:scss file="resources/bar.scss" />

    </theme:resources>

</configure>

Resource Ordering

The SCSS resources are ordered when retrieved from the registry, so that the order is as consistent as possible.

Ordering priority:

1. the resource’s slot (see the slot section below) 1. the before and after options (topological graph sorting), within each slot. 1. the ZCML load order of the resources

Be aware that the ZCML load order is usally random.

Resource factories for dynamic resources

A resource factory is a callable (accepting context and request) which returns a DynamicSCSSResource object. Since the callable instantiates the resource, it’s content can be created dynamically.

<configure
    xmlns:theme="http://namespaces.zope.org/ftw.theming"
    xmlns:zcml="http://namespaces.zope.org/zcml"
    i18n_domain="plonetheme.fancy">

    <include package="ftw.theming" />

    <theme:scss_factory factory=".dynamic_resource_factory" />

</configure>

from ftw.theming.interfaces import ISCSSResourceFactory
from ftw.theming.resource import DynamicSCSSResource
from zope.interface import provider

@provider(ISCSSResourceFactory)
def dynamic_resource_factory(context, request):
    return DynamicSCSSResource('dynamic.scss', slot='addon', source='$color: blue;',
                               cachekey='1')

When generating the SCSS is expensive in time, you should subclass the DynamicSCSSResource class and implement custom get_source and get_cachekey methods. The get_cachekey should be very lightweight and cheap: it is called on every pageview. It should return any string and only change the return value when the get_source result will change.

from Products.CMFCore.utils import getToolByName
from ftw.theming.interfaces import ISCSSResourceFactory
from ftw.theming.resource import DynamicSCSSResource
from zope.annotation import IAnnotations
from zope.interface import provider


class CustomSCSSResource(DynamicSCSSResource):

      def get_source(self, context, request):
          return 'body { background-color: $primary-color; }'

      def get_cachekey(self, context, request):
          portal = getToolByName(context, 'portal_url').getPortalObject()
          config = IAnnotations(portal).get('my-custom-config', {})
          return config.get('last-change-timestamp', '1')

@provider(ISCSSResourceFactory)
def dynamic_resource_factory(context, request):
    return CustomSCSSResource('my.package:custom.scss', slot='addon')

Declare icon for portal types

Portal type icons are declared in the scss file of the addon package. It is possible to support multiple icon sets by declaring icons for each iconset:

@include portal-type-font-awesome-icon(repository-folder, leaf);
@include portal-type-icon(repository-folder, "\e616", customicons);

Using those mixins does not generate any CSS yet, nor does it introduce dependency to those iconset. It simply stores this information in a list to be processed later.

Switching iconset

A theme or policy package may change the iconset. The standard iconset is font-awesome. Changing the iconset should be done in an SCSS file in the variables slot.

$standard-iconset: customicons;

Custom iconsets

The default iconset is font-awesome, which is automatically loaded and the necessary CSS is generated when the $standard-iconset variable is font-awesome.

For having custom iconsets an SCSS file must be registered in the bottom slot. This is usually done by a theme or policy package.

The SCSS file should apply the necessary CSS only when the $standard-iconset is set to this iconset:

@if $standard-iconset == customicons {

  @font-face {
    font-family: 'customicons';
    src:url('#{$portal-url}/++theme++foo/fonts/customicons.eot?-fa99j8');
    src:url('#{$portal-url}/++theme++foo/fonts/customicons.eot?#iefix-fa99j8') format('embedded-opentype'),
    url('#{$portal-url}/++theme++foo/fonts/customicons.woff?-fa99j8') format('woff'),
    url('#{$portal-url}/++theme++foo/fonts/customicons.ttf?-fa99j8') format('truetype'),
    url('#{$portal-url}/++theme++foo/fonts/customicons.svg?-fa99j8#opengever') format('svg');
    font-weight: normal;
    font-style: normal;
  }

  .icons-on [class^="contenttype-"],
  .icons-on [class*=" contenttype-"] {
    &:before {
      font-family: 'customicons';
      content: "x";
      text-align:center;
      position: absolute;
    }
  }

  @each $type, $value in get-portal-type-icons-for-iconset(font-awesome) {
    body.icons-on .contenttype-#{$type} {
      &:before {
        content: $value;
      }
    }
  }
}

Using media queries Mixins

ftw.theming provides mixins for most common media queries:

• phone (800px)

• tablet (1024px)

• desktop-M (1360px) - HD

• desktop-L (1920px) - Full HD

• desktop-XL (2560px) - WQHD

Example usage:

#container {
    width: 1600px;

    @include tablet {
        width:1000px;
    }
    @include phone {
        width:500px;
    }
}

Including font faces

@include font-face($name: 'VerdanaRegular', $path: '++resource++nidau.web/fonts/Verdana');

The file-extension for the $path argument is going to be concatenated automatically. Both woff and woff2 must be provided.

The mixin then produces the following css code:

@font-face {
  font-family: 'VerdanaRegular';
  font-style: normal;
  font-weight: normal;
  src: url("++resource++nidau.web/fonts/Verdana.woff2") format(woff2),
    url("++resource++nidau.web/fonts/Verdana.woff") format(woff);
}

@font-face {
  font-family: 'VerdanaBold';
  font-style: normal;
  font-weight: bold;
  src: url("++resource++nidau.web/fonts/Verdana-Bold.woff2") format(woff2),
    url("++resource++nidau.web/fonts/Verdana-Bold.woff") format(woff);
}

1.11.0 (2017-12-19)

• Avoid using freeze in test_cachekey_refreshes_when_navroot_changes for plone 5.1, since we get a ReadConflictError. The value of the test does not change if we remove the freeze context manager. [mathias.leimgruber]

• Implement Plone 5.1 compatibility [mathias.leimgruber]

1.10.2 (2017-07-03)

• Introduce webkit-only mixin. [Kevin Bieri]

1.10.1 (2017-06-02)

• Fix escaping of font type on fontface mixin. [Kevin Bieri]

• Provide background option for tab-list mixin. [Kevin Bieri]

• Introduce hyphenation mixin. [Bieri Kevin]

1.10.0 (2017-03-20)

• Add uninstall profile [raphael-s]

• Make sure the default profile is installed when installing ftw.theming with quickinstaller. [raphael-s]

1.9.0 (2017-02-09)

• Update font-awesome to 4.7.0. [elioschmutz]

1.8.2 (2017-01-11)

• 1.8.1 was accidentally released from the wrong branch. Please use 1.8.2 instead. [Kevin Bieri]

• Use two columns for print layout. [Kevin Bieri]

• Avoid duplicate (mimetype) icons on “Image” types. [jone]

• Introduce new mixins

  • Introduce link-color helper

  • Introduce font-face helper

  • Introduce rem helper

  [Kevin Bieri]

1.8.0 (2016-10-06)

• Switch from “private” to “public” caching, since the CSS does not contain any user specific data. [jone]

• Fix caching for unpublished navigation roots by not using p.a.caching. [jone]

• Introduce appearance helper [Kevin Bieri]

1.7.1 (2016-09-26)

• Support replacing portal-type- and mimetype-icons. [jone]

• Fix support for mimetype icons having long names. [jone, mbaechtold]

1.7.0 (2016-09-22)

• Fix multi-fill support of embed-resource mixin, introducing a new syntax and signature. [Kevin Bieri]

1.6.1 (2016-08-08)

• Reduce tab hover state The current hover state will be always the selected state [Kevin Bieri]

1.6.0 (2016-07-18)

• Move zindex system from plonetheme.blueberry [Kevin Bieri]

1.5.2 (2016-07-06)

• Use font family definitions from plonetheme.blueberry [Kevin Bieri]

1.5.1 (2016-06-23)

• Support selected state of tab-list on link (a tag) too. [mathias.leimgruber]

• ie-only slector now supports ms edge and IE11. [raphael-s]

1.5.0 (2016-05-26)

• Introduce spinner mixin. [Kevin Bieri]

1.4.0 (2016-05-24)

• Introduce ie-only mixin. [Kevin Bieri]

1.3.0 (2016-05-20)

• Extend list-group mixin interface to configure the hover color. [Kevin Bieri]

• Add new variable $color-content-background. [mathias.leimgruber]

• Introduce overlay mixin. [Kevin Bieri]

• Extend floatgrid with by-index directive. [Kevin Bieri]

1.2.0 (2016-03-30)

• Introduce horizontal definition list mixin. [Kevin Bieri]

• Responsive support for textareas. [Kevin Bieri]

• Introduce portrait mixin. [Kevin Bieri]

• Responsive support for input fields. [Kevin Bieri]

• Introduce active list-group item mixin. [Kevin Bieri]

1.1.0 (2016-03-03)

• Introduce progressbar. [Kevin Bieri]

• Register imaging scales as dynamic SCSS resource. [Kevin Bieri]

• Add label element mixins. [elioschmutz]

• Introduce inverted link colors. Apply blueberry color scheme. [Kevin Bieri]

• Update font-awesome to 4.5.0. [jone]

• Add width-full functional class of grid system for legacy support. [Kevin Bieri]

• Introduce floated grid system. [Kevin Bieri]

• Use more modular and adaptive mixins to provide a base to build themes upon it. Deprecated variables are stil avilable but will be removed in the next major. So use the new variables set for further styling. [Kevin Bieri]

1.0.3 (2015-11-17)

• Change collection / topic icons in order to avoid collision. [jone]

• Add open office mimetype icons. [jone]

1.0.2 (2015-10-28)

• Provide mimetype icons for solr flairs. [jone]

1.0.1 (2015-10-26)

• Remove duplicate icon in search results for files. [jone]

1.0.0 (2015-09-30)

• Initial implementation [jone]