IMPLEMENTED: Make the root selector in the CSS input interpolatable

Feature Requests / Improvements
41

This is a great request!

42

Excellent request. Love this idea.

43

Thank you Kevin for this request.

1 Like
44

Would be a great feature ++

45

Hey guys,

perfect timing on this one.

We were working on the custom CSS area including the root substitution logic just recently. The root keyword will be replaced by the new %root% keyword. This change makes the whole substitution process a lot more robust and simple as we do no longer have to perform complex checks for cases where we do not want to substitute the keyword (e.g. .my-root-class). Additionally the new logic makes concatenating selectors possible.

So taking Kevin’s .product-card example you can use the following custom CSS in the future…

%root% {
  background-color: #fff;
}

%root%__heading {
   text-transform: uppercase;
}

%root%__button {
   border-radius: 100vmax;
}

… which then results in an output like this:

.product-card {
  background-color: #fff;
}

.product-card__heading {
   text-transform: uppercase;
}

.product-card__button {
   border-radius: 100vmax;
}

We’re looking forward to hear your thoughts on this.

One more quick note:

While we really appreciate your participation in the forum a simple like on those feature requests is more than enough. The “+1”, “I agree!” or “Would be great!” comments just make it harder to follow a possible discussion. Thanks for understanding. :slight_smile:

Best,

André

8 Likes
46

@aslotta

To clarify, will plain “root” still work, or will it be replaced entirely?

If you replace it entirely, do you have a plan for backward compatibility?

And if you replace it entirely, can you add a button to the CSS box for inserting the %root% selector wherever the cursor currently is, since it’s harder to type?

1 Like
47

@digitalgravy It will be replaced entirely. It won’t have any impact on existing custom CSS using the root keyword though as the substitution happens on the fly. That means after updating Bricks you will see the new %root% version in your custom CSS editor in places where you used the old root version previously.

I will “pitch” the insert button idea internally. For me personally typing %root% isn’t a big deal at all and feels a lot easier than typing some CSS, moving the mouse to an insert button, continue typing, using the mouse for an insert and so on… :slight_smile:

What about a keyboard shortcut to insert %root% while typing?

48

@aslotta I’m good with a keyboard shortcut. Add a tooltip or message to inform the user of the shortcut.

shift + opt + r perhaps?

2 Likes
49

+1 Great idea - I’m with you :wink:

50

@aslotta Would also be awesome to get

%root% {

}

prefilled when clicking into the editor, as 90% of the time you need it anyway.

I would also rather like typing “%%” and have it expand to “%root%” instead of a keyboard shortcut, would be more convenient imho. :slight_smile:

51

Hi guys,
With Bricks 1.9.1/1.9.1.1, we’ve changed root to %root%. See the changelog for more information:

Please let us know if you are still experiencing issues.

Best regards,
timmse

2 Likes
52

Yeah. Like it was mentioned in: SCSS Compiler in the "CSS" tab - #5 by ryanmvickerman