Customize variables in LESS and UIKit css files

Over the past few months, I have struggled with customizing the UIKit LESS variables for my child themes, especially on how to find the correct variables in the first place. I want to share with the community the process I have found most streamlined and useful. (I offer this in the hopes that it will help other folks who are experiencing a similar struggle.)

1. Using Chrome's Developer Tools, I find the snippet of content that I want to change. In the Elements Window, I then select and copy the tag that encloses this snippet. Finally, I paste that tag into an editor so I can poke at its pieces. (If you're not already familiar with Chrome's Developer Tools, I highly recommend that you learn them.)

2. Inside that tag, I identify two things: the Beans data_markup_id, and the classes that start with uk-. If the snippet I selected has nested tags, there are probably several id's. And most tags will have multiple uk- classes. Borrowing the jargon of mystery novels, these uk- classes are my prime "suspects".

3. Back in Chrome's Developer Tools, with the tag still selected in the Elements Window, I look through the Styles Window for the piece of code that defines the characteristic I want to change. This could be a color or margin or padding or font size or any other type of css code. If clicking on a specific checkbox in the Styles Window changes my target characteristic, I know I have the right piece of code (I have found my "culprit".)

4. Now, I need to find the UIkit variable that specifies that characteristic. For example, let's say the culprit class I found in the Styles Window was uk-article-meta with a font-size of 14px and color of #fff. (This uk-article-meta class should also appear in the snippet of code I found in step 1, and poked at in step 2.)

5. To find these variables, I search the following folders (in this order) for the culprit class:

   tm-beans/lib/api/uikit/src/less/core
   tm-beans/lib/api/uikit/src/less/components
   tm-beans/lib/api/uikit/src/themes/default
   tm-beans/lib/assets/less/uikit-overwrite

6. The file containing this culprit class will show the variables defined in this "set" of classes, the css styles for that culprit class, and therefore which variables you need to redefine.

For example, uk-article-meta is in the article.less file in the core folder. Its css style is as follows:

.uk-article-meta {
    font-size: @article-meta-font-size;
    line-height: @article-meta-line-height;
    color: @article-meta-color;
    .hook-article-meta;
}

So the variables I want to redefine are @article-meta-font-size and @article-meta-color.

Notice that I do not need to redo the css for uk-article-meta. Instead, I need to add just two lines of code in my child theme's style.less file:

@article-meta-color: #000;
@article-meta-font-size: 12px;

Better still, define a color scheme for your theme, then assign various colors to specific details of your theme:

@my-color-black: #000;
@my-text-color: @my-color-black;
@my-font-size-small: 12px;
@article-meta-color: @my-text-color;
@article-meta-font-size: @my-font-size-small;

Using this process has meant that I rarely need to customize the Beans data_markup_id with css code. Instead, customizing the UIKit LESS variables keeps my themes robustly scalable (and mobile friendly).

And . . . Thierry or other contributors, I welcome any corrections or improvements on the process I have outlined above.

Hi Wyn,

Thanks for sharing your styling workflow, I love your mini steps tutorial which is very well written. Your workflow is 100% correct at this stage and while it seems quite intensive, it is fairly fast when you get use to it.

Great job, thanks for contributing back to the community!

PS: I am working hard on improving LESS workflow and will hopefully get the sourcemap (challenging the Beans environment since it isn't using node.js) working soon which will help a lot to stream down the process of finding the correct variable.

Hi Thierry,

Thanks for the kudos! And you're right, it is reasonably fast when you get used to it. I'm so glad that you didn't find a need for correcting or expanding it!

While I dunno what you mean by sourcemap, I will add that I only arrived at this "how to search for the right variable" process after having created a spreadsheet, consisting of 652 lines of entries, most of which are individual variables although some are summaries (eg, color, padding, margins). After that, I realized that searching those four folders was actually a LOT simpler.

If I see another process I'm using that might help folks struggling to learn Beans, I'll write that up too.

As you say, happy coding!