Search code examples
javascriptcsscode-structuregetuikit

What is the best way to add your custom JS files and fonts to your own distribution of UIkit


We can create our own distribution of UIKit using the gulp task:

gulp dist -t THEME-NAME

This will create a folder dist and generate your minified CSS and JS files from the LESS files.

For my project I have custom JS files and FONTS. If I put subfolders for fonts and js in my THEME folder, they are not taken into consideration by the gulp task.

If I put them in the srcfolder they are then added to my distribution.

Is this good practice or what should I do to keep code out of the uikit code and then generate my own distribution?


Solution

  • So I decided to structure my folders as follow.

    I decided to use uikit as a vendor library. I use Laravel's Elixir to compile the less files and minify the javascript and CSS files.

    Thus I put the uikit in the vendor folder in the assets folder along with my custom fonts. I have the following structure:

    Assets
     |__CSS
     |__images
     |__javascript
     |__less
     |__vendor
        |__uikit
        |  |__js
        |  |__less
        |
        |__fonts
           |__css
           |__fontName 
    

    Then I run elixir's gulp and publish my assets under /public and .copythe images and other needed folders under that public rep.