Forum Discussion

b_poplin's avatar
b_poplin
Expert
5 years ago

Responsive skin multiple Lithium instances

Background: Our company uses a single Lithium Instance as a master template. Changes made to this master instance are inherited by our other Lithium instances via a deployment strategy Lithium has helped us to implement.

One feature that we want our instances to inherit from our master template is the Responsive skin. In Studio/Community Style/CSS, the responsive skin defined in our master appears under title of "Parent Skins". Let's suppose the name of this skin is "Master Responsive". Master Responsive contains CSS definitions that rely upon SASS variable custom colors.

Each of our instances need to be customized. Our process should be to create a "new skin" based upon Master Responsive. This does work.

Problem: If we change skin "Master Responsive" in our master template, then the changes will not be reflected throughout our custom skins on other instances.

Reason: Core skin "responsive_peak" behaves as expected. This skin is not included as editable in the "new skin". "Master Responsive", though, becomes the default SASS in "new skin". It is a snapshot of the current "Master Responsive" and you can override it directly.

More desired would be that "Master Responsive" would not be a snapshot, but rather a CSS definition loaded first in header, which could have custom CSS override the same classes.

Out dated solution: In "non-responsive" skin, we used a custom header component to define our custom color CSS using freemarker. This solution will not work any longer, since Freemarker cannot access the values of Sass variables.

Questions:
1. Is there any way to edit "responsive_peak" / _style.scss so that our core code could be included and is inheritable? We could then override specific classes in custom skin _style.scss.
2. Is there any way to base a custom skin on a parent skin, but not have it be a snapshot? Instead parent skin loads in header, but we could override specific classes in custom skin.
3. Can custom colors defined be accessed via Freemarker?
4. Are there any other options out there?

  • b_poplin's avatar
    b_poplin
    Expert
    5 years ago

    We are testing the following to see if it will work.  Please let us know if you see any issues with our plan, and I will accept this post as solution if our test is successful.

     

    • we create a new skin on a child instance based upon parent skin from Master Responsive called inheritancetest

    • Delete all the contents of inheritancetest/sass/_styles.scss except one class definition. This class definition will be altered to prove that changes to _styles.scss do customize the site.

    • Edit inheritancetest/sass/skin.scss with the following line in order to include all of the Master Responsive classes during page load:  import 'master_responsive/sass/_style';  This must appear above the import "style" statement in order to allow override to work.

    • The hypothesis is that changes to Master Responsive will be inherited by child instance, and the import line in skin.scss will make sure the latest shows on the child instance and the customizations ininheritancetest/sass/_styles.scss will be unaffected.