Hi everyone 🙂
What is the best workflow of working with a Beans Child theme and modifying the style.less file, by using the LESS variables that come with UIkit ?
I'm new to using LESS and have become very accustomed to using Chrome DevTools to tweak my CSS properties.
Of course, the LESS variables are not showing in the Chrome DevTools.
Other than constantly refering to the UIkit LESS files to find the variables, are there any other workflows that would work with Beans, preferably NOT based on Node.js ?
Cheers,
YunaM
Hey Yuna, you can try the editor Sublime Text and install the auto-complete plugin uikit-sublime.
Unfortunately it does not complete the @variables, but the plugin is working great with uikit .classes.
Hey guys,
Thanks Jochen, I didn't know about this sublime plugin. Great tip 🙂
Yuna, this was already asked, see my reply here. While you have to look at it yourself at the moment, I am working on integrating what is called sourcemap which will show you in your browser in which file and line the LESS is set. I have no ETA on that but I am currently working on it 🙂
Thanks,
Hey Jochen and Thierry,
Thanks for your answers. You guys confirmed the impression that I got so far, I just wanted to check if there is maybe something else out there. As for now, I think I'll stick mostly with placing plain CSS into style.less and occasionally peek into some Less variables.
I think that in reality there are not too many variables there, and that in time I will develop a sense for what is what and where to look for it. Of course , having a sourcemap would be ideal, but I think the workflow that I created so far will work just fine, in most cases.
I used the UIkit's online Customizer, which is a great way to make some preliminary decisions about many of LESS variables, and create a 'theme'. The UIkit Customizer generates a LESS or CSS file that I included with my Beans child theme, and the rest I can pretty much do with the plain old CSS.
Cheers,
YunaM
Hey Yuna,
Using the UIkit customizer and downloading the LESS variables by clicking "Get LESS" which can then be pasted straight into your style.less is a clever approach too (I didn't know that either) 🙂
Thanks for sharing guys, hopefully these tips will be helpful to others too.
These tips are helpful to others! Thanks
Hey Yuna, You can use ATOM https://atom.io together with atom-uikit his uikit autocomplete.