Beans Default Styling

Hello, I found that Chris is removing the Beans Default Styling in his child themes:

remove_theme_support( 'beans-default-styling' );

I do not really understand what the default styling is? When should we do that?

thanks Jochen

Hello Jochen,

Beans comes with some styles that you can find in lib/assets/less.

By adding remove_theme_support( 'beans-default-styling' ); in your functions.php, you ask Beans not to load these (very minimal) elements of style.

Oh, the default styling is only that little code in the default.less, yes?

What he is also doing, is to equeue his own uikit folder:

beans_uikit_enqueue_theme( 'jenkins', get_stylesheet_directory_uri() . '/assets/less/uikit' );

Is that overriting the enque of the uikit-overwrite directory?

beans_uikit_enqueue_theme( 'beans', BEANS_ASSETS_PATH . 'less/uikit-overwrite' );

When should we use our own uikit folder?

Onother question: Is it no problem to use LESS and normal CSS in the child themes style.less file?

thanks

Hi Jochen,

UIkit goes through the following process by default:

1. UIkit core in tm-beans/lib/api/uikit/scr/less/
2. UIkit default theme in tm-beans/lib/api/uikit/scr/themes/default/
3. Beans default structural overwrite in /assets/less/uikit-overwrite/

So in your child theme if you add:

add_action( 'beans_uikit_enqueue_scripts', 'example_enqueue_uikit_assets' );

function example_enqueue_uikit_assets() {

 beans_uikit_enqueue_theme( 'example', get_stylesheet_directory_uri() . '/assets/less/uikit' );

}

It will add it to the queue and overwrite what ever variables/LESS/CSS. Will you could absolutely add it directly add UIkit overwrites in your style.less (more about that further down), enqueueing a UIkit theme allows you to organise your files by components which would only be used if the component is used. So for example if you want to overwrite some of the UIkit grid component, then you would add a grid.less file in your child theme /assets/less/uikit/ folder which you have enqueued using the code mentioned above.

Regarding Beans default styling and as Mathieu correctly said, if you use remove_theme_support( 'beans-default-styling' ); it just prevent minimal default styling from loading which is situated in tm-beans/assets/less/style.less.

So now down to your child theme style.less which you would have enqueued as such:

add_action( 'beans_uikit_enqueue_scripts', 'example_enqueue_uikit_assets' );

function example_enqueue_uikit_assets() {

 beans_compiler_add_fragment( 'uikit', get_stylesheet_directory_uri() . '/style.less', 'less' );

}

To answer your question, yes you can totally write normal CSS there. LESS is CSS on steroide so you can write your CSS and benefit from LESS on top of it (Beans makes it super easy because it processes it for you, make sure you are in dev mode when working on it so that it reads your file changes and process your changes on page reload).

I believe that if you are not going to do heavy UIkit overwrites, it doesn't really justify to enqueue a UIkit theme. Instead it is totally acceptable to add some UIkit variables in your style.less. For example if we look at this code snippet, you see that you can either set it via normal CSS or by setting the UIkit variable.

Note that the biggest difference is that adding CSS means bigger file weight (duplicate CSS to overwrite) which eventually leads to slower page load. On the other hand, overwriting UIkit variables means that instead of processing LESS to CSS using the last UIkit/theme value set, it uses your value and does not add extra CSS leading to a lean and light CSS file and faster page load.

Hope that makes sense,

Thanks for your helpful words. That makes many thinks clearer. I read all your docs here at getbeans.io already. Now I have to look at the uikit site.

I tried to find the easiest way to change the basic colors. But where can I find the LESS vars like @global-background or @global-link-color? I found nothing at getuikit.com. Only the costumizer LESS export showed me the variables.

Thanks

Hey Jochen,

Unfortunately for that you have to look in UIkit itselft. The default theme acts as a helper so it the first place to look is in tm-beans/lib/api/uikit/scr/themes/default/. Look in variables.less and base.less for global stuff. Then in specific components to style components 🙂 If there isn't a variable to do what you want, then dive in tm-beans/lib/api/uikit/scr/less/ and apply the same logic.

This is probably the most tedious task as it requires some LESS and UIkit understanding but it is also really cool and powerful 🙂 If you don't understand it 100% or don't really have the time to learn it, don't sweat it! It will come over time and it isn't a requirement, you can totally use normal CSS to style your website like in most themes.

Happy coding,

Ok, i'm diving in the UIkit Less files.

Are those @globals vars, like @global-background, a Beans thing? I think it's best to start with that @global vars, right?

Thanks for your time,

Hey Jochen, none of these variables are coming from Beans, it is all UIkit stuff.

There isn't really a particular order to start with, it all depends on what you want to style. I usually start styling my websites by setting up the @globals and @bases and then jump in the components but it isn't a rule, it comes down to preferences.

Thanks,

So, I have managed to mess up the mobile-friendly aspect of the Beans Default Child Theme by defining a bunch of widths for various "containers".

I'm thinking it would be better to find the global variables for the various widths and redefine those.

So in order to find the name and value of a global UIkit variable, one should look in the following directories in the following order ??

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

and those will have all the global variables that one might want to assign a new value in one's style.less file?

Wow, that's a lot of places to look.

If these variables and their locations are likely to be relatively stable, I might be willing to supply a table of info on Where To Find Which Variable. That is, I can see I probably need to construct such a table for my own use, and would be happy to share it.

Happy searching! (As Thierry might say.) 🙂

Editing Less variables is a simple thing, but keeping track of changes & relations can become quite the daunting task when attempting to create a complete custom UIKit theme.

It's perhaps easier to clone the uikit github, duplicate one of their three included themes, and follow their instructions so you can use the uikit customiser to tweak your own theme live in the browser.

I'll readily admit that uikit is very developer focused, with very little in terms of step-by-step procedural how-to's or such, there's also very little to find out there for examples.

That said, as I understand it, the tools the people behind uikit present can handle pretty much automating everything, and the customiser can do the rest. Figuring out those tools is an entirely different matter though, if - like me - you're coming at it without experience whatsoever 😛

I'm currently trying to figure out how to create a cloud9 instance which has everything uikit needs for customisation & compiling, and what steps in what order for which task - so that I can end up with a situation where I can just use the customiser to design, and then hit a button to compile just what is needed for the theme (keeping things light and tight).

At this point I've destroyed half a dozen instances 😛 So it's a bumpy road, but .. there's progress. One thing I notice, there are pretty much no beginner level tutorials out there 😛

Hi everyone 🙂

I read this thread, which had the initial question posed by Jochen, who was wondering what the line of code

remove_theme_support( 'beans-default-styling' );

was doing.

As both Mathieu and Thierry pointed out, as I understand - is that it basically removes the link to tm-beans/lib/assets/less/style.less file, which contains some basic styles that - from what I can see - are the classes that usually start with the 'tm-' prefix.

However, at the bottom of that file there is also a section called WordPress theme requirement , which also contains some basic styles, most starting with 'wp-' prefix.

Since no one has addressed this directly, does

remove_theme_support( 'beans-default-styling' );

also remove the Wordpress - required styles ?

In other words, if I really wanted a 'naked' child theme, with only the styles that come from UIkit and my own customization, and I want to use this remove_theme_support function, do I then need to separately include the 'Wordpress - required styles ' , or is the function so smart to remove only the 'tm-' prefixed styles ?

I hope this question makes sense .

Cheers,

YunaM

Hi,

An update :

I just saw that in another 'Theme Butler' child theme, 'Designer for Hire' , in the 'style.css' in the theme's root, Chris lists the 'Wordpress - required' classes, without giving them any value.

 /**
* Core WP
*
* Add styling for the core WP classes.
*/

.wp-caption,
.wp-caption-text,
.sticky,
.screen-reader-text,
.gallery-caption,
.bypostauthor,
.alignright,
.alignleft,
.aligncenter{}

Which is something he didn't do in the 'Banks' child theme, at least I couldn't see it.

So, that was either his oversight , or those 'WP-required' classes are not really that big of a deal, and were not required for his application.

I think the Wordpress Core default stylings should also go into the Beans core.

Classes like .aligncenter are important, because the WP editor is using it. You need to include it in every theme.

You can find it here https://codex.wordpress.org/CSS

Hey guys,

Yuna regarding this reply, you don't have to add it to your child theme, it is a mistake in Chris child themes.

Jochen regarding the WP classes, Beans does have it in lib/assets/less/style.less but doesn't not load it in the backend editor. There is currently and issue open for that so it should be fixed in the next release.

Thanks,

PS: I have moved the comments about Beans future in a new discussion as it is not related to Beans default styling.

Oh my fault. The image alignment was not working on my theme. So I thought the default styling are missing.

Good so, now I have removed it again from my child.