Less - Variables Extract

  • I have been experimenting with LESS lately as I find it actually a pretty easy way of adjusting the look and feel of a website. If you ever wonder, what you need to do to use less, here's the short version.

    1. Download UIKit3 from GitHub
    2. Extract the files
    3. In the root of the extracted library, create a directory called custom
    4. Create file with extension ,less, e.g., myless.less, this is were you customise your site. In the most simple way, this will just read:
    1. // Import UIkit default theme (or uikit.less with only core styles)
    2. @import "../src/less/uikit.theme.less";

    This basically takes the UIKit3 Default theme, no start customising:

    Then call "yarn compile" from the command line and you will soon get a uikit.myless.css and uikit.myless.min.css in the dist directory. Just use this for your theme and you are done. If you want and editor for this, have a look at: https://getcrunch.co

    If you want to customize more, I have extracted all variables from UIKit 3.0.2 for your convenience. You probably will only use the first 180 lines in most pages. I am not a CSS specialist and perhaps if we produced more templates with less, we might attract more people. Just a though.