CSS Pre-Processing¶
The “Plone theming suite” includes the following CSS pre-processors tools supported:
LESS¶
LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side.
Note
You can find more information about LESS at http://lesscss.org/
collective.lesscss¶
The collective.lesscss package integrates the LESS CSS pre-processor with Plone.
This package clone the portal_css
tool behavior, extending it to meet both
client-side and server-side LESS resources compiling methods.
It adds a portal_less
tool to the portal, enables an import/export GS profile
lessregistry.xml
file, overrides the default
Products.ResourceRegistries
viewlet by adding the LESS resources part for the <head>
tag.
Adding LESS resources¶
This package is intended to be used in conjunction with an user defined Plone Theme
package. As a developer, you can include as many LESS resources as you
may need to build your theme.
You can add LESS resources using a GS profile named lessregistry.xml
.
The syntax is cloned from cssregistry.xml
profile:
<?xml version="1.0"?>
<object name="portal_less" meta_type="LESS Stylesheets Registry">
<stylesheet title="++bootstrap++less/bootstrap.less" authenticated="False"
enabled="on" id="++bootstrap++less/bootstrap.less" rendering="link"/>
</object>
Control Panel¶
You can manage the way the LESS resources compile by accessing the LESS resources configlet located at the Site Setup. By default, client-side LESS resources compile mode and minification are enabled.
You can access to the Plone LESS control panel following the steps:
- at the top right corner of the page click on the Admin drop down menu
- choose Site Setup
- at the Add-on Configuration
- click on LESS Stylesheets Tool section
Then you need check the Enable client-side compiling stylesheets
and Enable CSS compression
at the LESS Stylesheets Tool
control panel:
Also you can access to portal_less
tool from the ZMI:
Client side compiling¶
Client-side compiling is intended to use while in (theme) development mode.
collective.lesscss
will use the standard method for compiling client-side
by using the less.js
file (v1.3, at the time of this writing) and exposing
the LESS resources after the portal_css
ones:
<link rel="stylesheet/less" type="text/css" href="styles.less">
<!-- Here goes the rest of portal_javascript resources -->
<script src="less.js" type="text/javascript"></script>
Server side compiling¶
Server-side compiled LESS resources are recommended in production mode. By unsetting this option, the site will server-side compile them into CSS resources and enable a volatile cache on them.
<plone:static
directory="resources/less"
type="bootstrap"
name="less"
/>
And furthermore, if you aren’t using plone.app.theming
for develop your theme you should declare the type you are using for your resources
by creating this class somewhere in your theme (e.g. traversal.py
file):
from plone.resource.traversal import ResourceTraverser
class BootstrapTraverser(ResourceTraverser):
"""The theme traverser.
Allows traveral to /++bootstrap++<name> using ``plone.resource`` to fetch
things stored either on the filesystem or in the ZODB.
"""
name = 'bootstrap'
and later on, declare the adapter via configure.zcml
file:
<adapter
name="bootstrap"
for="* zope.publisher.interfaces.IRequest"
provides="zope.traversing.interfaces.ITraversable"
factory=".traversal.BootstrapTraverser"
/>
So, you should now be able to access to the resources inside the resources directory by accessing:
http://localhost/Plone/++bootstrap++less/
Theme Example¶
You can check out a Twitter Bootstrap integration using the example.bootstrap package for a full example on how to integrate LESS resources in your theme package.
Note
The example.bootstrap package is supported by the Plone Theming Suite.
LESS Supported Themes¶
There are available themes with LESS supported and there are the following:
- Beyondskins capitulo1 theme.
- Beyondskins colors theme.
- Beyondskins happy theme.
- Beyondskins item6 theme.
- Beyondskins minimalist theme.
- Beyondskins phantasmagoria theme.
- Beyondskins plaza theme.
- example.bootstrap theme.
- Kube “theme” from diazotheme.kube package.
- Kube “demo” Theme from diazotheme.kube package.
- quintagroup.theme.sunrain theme.
SASS/SCSS¶
Todo
TODO this section for SASS/SCSS
.
collective.scss¶
The collective.scss package integrates the SASS CSS pre-processor with Plone.
Todo
TODO this section for collective.scss
package