Looking for contributors for the Gloss (Diazo based project)

Plone Support Add-on Development
1

Gloss is a web design process, which aims to create happy design teams.
It is built on top of Plone and Diazo (though I've managed to get it working with Kotti). This has been my side project since October 2014 (when the first commit was made on the project).

At this point I'm looking for contributors who want to help to make Gloss super!

Here are the current docs:
https://the-gloss-project.readthedocs.org

A video showing how Gloss uses css classes to control how content is transformed:

Send me a private message to volunteer.

2 Likes
2

What do you need?

3

@djay,
... I should have mentioned our issue tracker.


There are 10 issues which give you a good idea of tasks that can be done.

I need someone willing to dig into Gloss, test it out with their own projects (even if it is their own personal website), file bugs and help to fix existing ones as well as add enhancements.

I'm willing to spend time supporting/kickstarting persons interested in the project.

1 Like
4

Is the idea here to use webflow.com to do the actual design ?

5

Yes the actual design is done in a design tool such as webflow.
So far we've built Gloss to work well with webflow but think of it as the first example implementation. It should be possible to do it without webflow as your theme editor, any editor that allows you to add your own css classes can be used.
The idea is to make it possible to author themes by learning a few additional css "marker" classes and then work with supported grid systems (Webflow is the best supported at the moment). This means that it should work with Bootstrap based themes and Foundation based themes eventually. Currently the
Diazo/XSL rules are targeted at Webflow.

6

Slightly related: Once there was a Plone ( 2.x) add-on that had this approach (I think), It was called CPS skins, and I used it while making my first Plone sites. ( the site is 10 years old, but actually still running ( kjeldstub.no )

7

[BTW... I updated my answer above to be more to the point]

No, the CPS skins approach is exactly what Gloss is not. Instead of providing bits and pieces to mix and match, it builds on the Diazo approach of starting with a unified, cohesive theme, built outside of Plone by an experienced designer in the tool of their choice.

Then the designer adds some special classes (gl- classes) to their theme, I also call these "content assignment classes" and they correspond to Diazo rules sets predefined by Gloss. This effectively lowers the bar to Diazo theming so that a designer doesn't have to learn Diazo rules or XSLT. The best explanation is in the Gloss docs:

The list of Gloss gl- classes and what they do can be found here:
http://the-gloss-project.readthedocs.org/en/master/reference.html

8

So its a carefully written diazo rule set that allows you to make basic themes without writing diazo?

  • Is it easy for the themer to know when this approach won't work? ie how to determine a theme is too complex.
  • If a design is too complex, is it then easy to copy the diazo rules (or include them) and add more rules to do just that extra part? e.g. like some tricky navigation or something?
  • Is is possible to base rebuild barceloneta like this?
  • is there any reason not include this approach in the core if its a smooth learning curve to using diazo for more complex stuff?
9

@djay... yes it is a ruleset to shield "casual" designers from Diazo.

Firstly some context:
The overarching philosophy of Gloss is to keep designers happy and save developers from reimplementing the designer's work, Diazo provides the toolkit to do this, Gloss is an opinionated implementation.

I tend to make a distinction between a Gloss themer (Basic theming with CSS gl- classes for content assignment) and a Diazo themer (Advanced theming with Diazo directives and XSLT). More complex stuff generally aligns with what I classify as 'Advanced theming'. My current solution for Basic themers is gl- classes via Gloss, and for advanced themers, we provide a cheat sheet of common Diazo recipes. BTW there is only a small overlap between those who are fluent with Diazo and those who are empathetic designers.

To answer your questions....

Is it easy for the themer to know when this approach won't work? ie how to determine a theme is too complex.

The documentation is the trick here, it provides a list of gl- classes and what they do. You know you need to go further if none of the gl- classes do what you want. In the case of compelling new scenarios that are not supported, Gloss users would be encouraged to file a ticket for an enhancement and then, if it is practical, it would be added to Gloss. see: Reference — Gloss Project 0.7.1pre0 documentation

If a design is too complex, is it then easy to copy the diazo rules (or include them) and add more rules to do just that extra part? e.g. like some tricky navigation or something?

Gloss rules can be easily added to other themes and, because they are fully compatible with Diazo they can be extended with "traditional" Diazo theming approaches, we do this in our projects now.

Is is possible to base rebuild barceloneta like this?

If you mean add Gloss like rules to the barceloneta base theme so that it supports gl- content assignment classes, yes and it should not affect the existing barceloneta theme since all Gloss related rules are filtered on the gl- "namespace".

is there any reason not include this approach in the core if its a smooth learning curve to using diazo for more complex stuff?

I don't know, I think the learning curve is pretty smooth.

The big threat is it becoming unwieldily, for example I've started to add support for what I call 'components', e.g. drop down menus and sliders (see: Components — Gloss Project 0.7.1pre0 documentation). These are early days for components, but imagine being able to 'decorate' a slider in your theme with a with a few extra gl- classes and magically it would dynamically pull in images from a Plone Carousel. Unfortunately at the moment this has to depend on third-party packages like webcouturier.dropdownmenu and the carousel add-ons. When Plone moved to Plone 5 and webcouturier.dropdownmenu did not it broke gl- support for dropdown menus. As long as we are aware of this we can navigate carefully but it is an important consideration if you're thinking of adding it to the core.

"/me thinks he should do a presentation on Gloss at the next Plone conference" :slight_smile:

10

Is it possible, and / or could it be an idea to somehow add the gl-classes in Plone itself.

(some kind of setting that does:

'some-class-or-id': 'gloss-class-to-add (select it)],

11

90% of the gl-classes are useful in the context of the HTML theme file not the Plone content itself. Unless I'm misunderstanding what you're saying, what would be needed for a core implementation would be to add the Gloss Diazo rules, as @djay has suggested, directly to barceloneta, these rules would then be able to interact with gl- classes that barceloneta "sees" as it parses the theme.

12

I suspect there is too much opposition against complex diazo rules in barcelonteta (not sure why) to make it work in the core as the base theme but I think its a good idea to plip it as an alternative starter theme to be shipped with plone.
Plone used ti ship with an example base theme and this would be a good replacement.
The reason I think it should be in the core is because this idea works better if everyone uses the same set of classes. Also because begginers shouldn't have to download more plugins to have a gentle start.

1 Like
13

So I liked your post, but that's expected as the creator of Gloss :slight_smile:
The starter theme is a good idea. I'll just need to think hard about how to deal with "component creep" -- as we add more components that rely on more third party add-ons, how do we keep it stable and predictable? Or do we provide a mechanism for third party add-on developers to ship gloss rule sets for their add-ons that extend the gl- classes, maybe call them gl-ext classes?

14

I think you could only depend on bootstrap and thats it. I don't think its a good idea to depend on thirdparty addons. Perhaps that would be an additional plugin?

15

I agree, so gloss.core and gloss.extensions or something like that...
Gloss core would try to support bootstrap markup (sliders, tooltips, and other bootstrap stuff). That way if an add-on also supports it we're good!

Extensions would be third party developed and non-core.

16

I would like to work under your mentorship to develop new theme pack for Plone5, using CSS and jQuery, that can be further extended with Diazo.

Exciting themes can be developed using some CSS and serious jQuery.
Attractive themes are what drives customers towards our organizations.

We can use different layouts and widgets for different parts of
webPage like
inputboxes,datepicker,easings,spinboxes,sliders,progressbars,tabs and
also accordions.
Improved and attractive dialog boxes can also be considered for themes.
Autocomplete widget without causing much of a burden on web server is an integral part of jQuery UI.

17

@djay,
Based on your feedback I've just 'dropped' my first PLIP for Gloss in the core.