Open chucklorenz opened 3 years ago
Using AT 0.10.5 with FW 5.15.2 with Vanilla 5.7.0
Hi @chucklorenz,
Thank you for raising this as an issue and apologies for the rather tardy response on my part.
The move from block-color
to bg-color
was to try and reduce the specificity of the mixin so it could be applied to multiple levels - course / content object / article / block / component - but, and this is a failure on my part, it's not written explicitly enough that it may not work at each of these levels without further development work or that it will cascade down.
The mixin itself predominately targets the block and component levels and could relatively swiftly be scaled up to also target articles. In fact, by 'limiting' the mixins application to these three levels (article / block / component) it should hopefully resolve the inconsistent application. I use the word limit here not in the physical sense of restricting the mixin but by removing reference that it can be applied at higher levels.
Addressing your bullet list:
bg-color
, I would expect all blocks within to inherit this blue colour. If a stricter application is required I would expect the bg-color
mixin to be moved down a level of specificity and applied at the block level instead.In summary, I would suggest making the following amendments:
bg-color
mixin.article
to mixinI'm keen to know your thoughts on the above and look forward to your response.
Hi @guywillis
Extra classes and mixins are a bonus. Because these mixins are "extras," I believe the Vanilla author (you in this case) can make them work in any gosh-darn way he/she wants--as comprehensive or as granular. But I think as you do, that comments alongside the mixins ought to reflect its intended use. So ultimately I'm OK with any [or no] modification you make to the mixin code so long as the comments better reflect the mixin's intended use. An addition that I think might be helpful: in the comments identify the role of the mixin parameters: one determines the background color, one determines the font color. Might help the understanding of someone unpracticed in reading Less mixins (my hand is raised!!).
Yes, I'd like to see a version of the mixin that is applied to an article and that cascades to its child blocks. I think it would be better still if it incorporated the page, too, and cascaded to all of its child containers. (Exclude the page header, I think that needs a mixin that targets it separately. So the only thing on the page level that gets modified is the background; but applying it to the page is meaningful because the cascade impacts all of its articles.)
But I'd want this cascading mixin as an alternative to, not as a replacement for, targeted mixins. Can we have both? I'd still want a mixin that targets the container I applied it to and that does not cascade to its children. In other words, I'd like a mixin that changes an article's background and font color without affecting its blocks. We have a targeted mixin for the block. We'd need one for the article. I guess you could do one for the page if you felt the need for completeness, but there are other easy ways to assign a background color to a page. We have a targeted mixin for the page header, too. Perhaps one for a page footer (doesn't matter if it is not in Adapt repos)--again if you feel the need for completeness. And let's ignore the component because the standard, unmodified Adapt component is simply not constructed to take accept a background. (No padding, etc.) Is one helpful for menu items? Perhaps, but low priority for me.
If we have any mixins that cascade, I think it will be important to examine the compile order. If .bg-color-mixin
can be applied to both an article and to a block, someone will apply it to both in the same page. It is reasonable for them to expect that the mixin that they applied to the block will override the cascade from the mixin applied to the article.
Guy, here's my recommendation to you:
.bg-color-mixin
so that it works with articles and blocks and so that it cascades. (Think about this mixin as the DRY cascade-through-everything mixin.).bg-color-mixin
.article-color-mixin
to parallel .block-color-mixin
and construct it so that it does not cascade through to its blocks..block-color-mixin
.bg-color-mixin
so that it cascades through "all" containers..block-color-mixin
to other [worthy] containers.Hope this is helpful. And happy to continue the conversation here or in PM if desired.
While working on this issue, I have found specificity to be a crucial issue. All these mixin styles complete with styles originating with plugin or Vanilla. Unfortunately, it seems that some plugins apply styles to directly to the element, e.g., title
, while others apply them to the inner div, e.g., title-inner
. Increased specificity seems to be a more robust strategy than relying on compile order.
If bg-color-mixin
were to be a "global" strategy--apply it on any CO-A-B-C container and it styles all its children--is there a user expectation that it can be applied in more than one place? and is it expected that bg-color used on a block will override a different bg-color used on the page? I think this would be a reasonable expectation for anyone working with HTML/CSS/Less.
So far I have been unable to create such a global mixin, one whose styles are overwritten by usage on a child.
We could achieve increased specificity (and success) is we introduced another parameter representing the element:
.bg-color-mixin(@element, @color, @color-inverted
) used as bg-color(block, black)
But this greatly multiplies the number of declarations needed in advance of its use. So much so that it seems that it would be more effective (less code and less user prep) to create separate mixins, one for each CO-A-B-C container.
Thoughts?
@guywillis any thoughts?
Using AT 0.10.5 with FW 5.15.2
I like having built-in classes and mixins. Unfortunately, I feel the style inconsistencies are counter-intuitive enough to count as a bug. Or am I misunderstanding??
The image below uses Vanilla's built-in .bg-color-mixin: @acme-slate: #2f4454; @acme-rosefont: #da7b93; .bg-color-mixin(acme-slate, acme-rosefont);
It was applied in the AT in page Classes.
Comments in theme-extras.less says it can be applied to course, contentObject, article, block, or component. No mention is made of style cascade. I think it is counter-intuitive to expect that applying a "bg-color" would expect a cascade. Applying a bg-color to a single article or block is an act of making an exception to the theme's general styles. I would expect that I am modifying that single element.
And the cascade is inconsistent:
Also the bg-color applied to the page awkwardly pokes through the margin on the menu item:
On the other hand, the header-color mixin which is intended for use with page headers is much much more consistent (since the rule is less expansive). The menu item, too, is unaffected.