I have 2 jsps for 2 cq components that have the same html structure but the css is different.
What are the best practices for refactoring in this case?
One scenario would be to have a single component and set the css classes based on some input provided by the author in the dialog (component type 1, component type 2), but this gets messy cause I need to do the if checks and set different values for the css classes. It becomes even more complicated if I add a 3rd component with the same html structure and different css.
I would suggest to use one of next approaches:
Create base component with html structure and for each design create components which have sling:resourceSuperType of base component. And in child components you can override css file with specific one.
Base component should be made of (at least) 2 jsp files:
container with some class (unique among different designs) which contains include of actual component content. This class then should be used in you selectors in css file. Like .container-design-1 .title {}. This container also can be overwritten in child components.
jsp with content.
Also you can still use component dialogue, but populate dropdown menu with available designs dynamically. For example, you can have some servlet+service which looks into repository and collects available clientlib categories for this component. And during rendering you will include selected clientlib category, set unique class for your container and use it in css selectors (like in previous approach).
Also in both cases html and id/class names of elements should be the same, and only styles implementation is different.
Related
lit-element completely encapsulates CSS and the only way to style components is via custom CSS variables.
When using tailwindcss all styles are applied via classes, and I currently don't see a way to inject those classes from the outside world.
What I would like to achieve is to make the custom lit-component completely unaware of tailwind. It should only do the most basic styling but leave the customisation up to the user of the component.
The only solution I see right now is to provide the classes via a property and then apply them using classMap. But I don't know where users would like to apply those classes and adding them to each element is unfeasible (and unmaintainable). In addition, I have my doubts that tailwind would even work in that case due to the style-encapsulation.
It sounds like you want your users to be able add classes to specific parts within the custom element you authored?
If it works with what your component's trying to do, the best way to achieve that would be to place slots in your component and have the user provide the element to fill those slots as children to your component. That way the user directly controls what classes they want to put on it and the styling will apply as the children would be part of the light DOM.
As you've said, providing classes via property would be clunky API and styling won't apply unless you forego using shadow DOM by overriding createRenderRoot which is not recommended.
CSS custom properties are not the only way to allow users to style parts of your component as you can also add part attributes letting the user use ::part() pseudo-element to style them. If your users can write CSS instead of providing tailwind classes, that would be the way to give users some control of styling your component. See https://developer.mozilla.org/en-US/docs/Web/CSS/::part
I am implementing very basic tables following the examples given in the official docs.
In those examples, the tables have nice styling which is seemingly localized to each sample table. The main style I want to use is mat-elevation-z8 (from what I can tell). Unfortunately, when I embed that table in my page it styles the entire page, all the way up to the body. Here is a stackblitz which shows what I mean:
https://stackblitz.com/edit/angular-5oe5jz
The divs above and below the table are styled to match the table. I want the table to be styled in isolation as in the samples. Is my only option to go override every property I don't want to be affected by Material?
1) You don't need to override every property, but you just use material CSS classes where you require otherwise don't add the classes.
2) For example in your stackblitz link the page is looking with material design, because you applied class 'mat-app-background basic-container' to the div in your index.html file. so that the entire page is looking with material design.
3) Remove that mat-app-background basic-container from index.html file, and use material CSS classes to for tables only.
4) I have just updated the index.html file for your reference. check here
I have css class which needs to be added to three different component(for example) which might not require for other components of our application.
which one would be the best approach.
add that css class to style.css (global css)and use it or
add it to three different component specific style sheet as it is not used anywhere in the application(is this considered as code duplicate ?)
Thanks!
I would say that adding it to the global styles is just fine for this purpose. View encapsulation is cool, but the cascading part of CSS is still something that we're supposed to take advantage of...just as long as you're still cognizant of keeping styles organized and not too high of specificity.
Conversely, if you knew all three components would share parent component, you could turn off view encapsulation for that component and add the class there, which is essentially the same as adding to global styles with the difference being the style would only be loaded when the component is loaded.
You could also use ::ng-deepon a parent component to target its children. Sass brings other solutions, but it doesn't look like you're using .scss files.
I'm using a ListView in my program with many, many styled Text's. Currently, I'm doing something like this
case COMMENT:
t = new Text(lexer.comment.toString());
t.setStyle(BASE_STYLE + COMMENT_STYLE);
where the style is stored as java string. I do have a global.css in my application which is used to style some static nodes of the scene, but for the programatically created texts I don't know how to access this. I tried using t.setId(..) and put a style definition in the css file but this doesn't work.
Is there a way that I can store all styles for my different text types in one css and access them easily? Note that I'm creating many of those text objects.
There are three ways to apply CSS styling to a JavaFX Node (or a combination of them):
As Tom mentioned, a Nodes css style classes are accessed via Node.getStyleClass(). This returns an ObservableList where you can add and remove your style classes.
If you change a Nodes style rather often, it is better to use pseudo selectors, like :hover or :active with Node.pseudoClassStateChanged().
The third option you already discovered (setStyle()), but I dislike this option because moving the CSS parts into a seperate file offers many advantages.
For #1 and #2 you need to attach a Stylesheet to the Scene/Node, with Scene.getStylesheets() or Parent.getStylesheets(), where your CSS definitions are stored. For example:
listView.getStylesheets().add(getClass().getResource("myStyles.css").toExternalForm());
Addtional info for #1:
If you want to add the style-class my-node to a JavaFX Node:
node.getStyleClass().add("my-node");
now you can style that node in your CSS file:
.my-node {}
Addtional info for #2:
You can declare and use your own pseudo-class with
PseudoClass comment = PseudoClass.getPseudoClass("comment");
node.pseudoClassStateChanged(comment, true);
node.pseudoClassStateChanged(comment, false);
And in your css file:
.my-node:comment {}
I have made some templates on wikia.com, which contain only CSS code (key:value;).
My problem is having another template use these style templates in a style attribute tag.
style="{{MyTemplateStyle}}"
This code does not evaluate as expected. The CSS code is outputted before the element and the style attribute is not included inside the element.
Am I trying something not possible for a wiki ?
I merely want to be able to change styling on certain templates in one place, like regular HTML & CSS pages.
CSS styling specified from the style="" attribute always takes priority over any other css, even if you use !important in a CSS specification.
Therefore any edits you make to your CSS on Wikia will not ever override the CSS specified inside an attribute.
Kim, you were right to switch to classes instead of embedding in-line styles via templates.
The very idea of using templates suggest that this was going to be re-used in more than one place, applying styles to a group or, in fact, a class of elements.
This approach is much simpler to read and maintain (as you only have one, central place to edit), and also, if done right, will enable you to seamlessly change the colour scheme via Special:ThemeDesigner.