SamC

Uikit 3 help required

Recommended Posts

So I'm trying Uikit 3 again. I wanted to get to know this framework in order to better understand making an admin theme. Testing it on a simple HTML page, with a structure:

test
 - uikit
   - build
   - dist
   - src
   - etc...
 - index.html

I just git cloned it rather than NPM install because I wanted to use their build script. Then I created a custom folder and a file at /uikit/custom/styles.less with the following:

@import "../src/less/uikit.theme.less";

// mixin to add new declaration
.hook-card() {
  background-color: orange;
  color: white;
}

Running 'npm run watch' recompiles, I get the output at /uikit/dist/css/uikit.styles.css and results in:

uikit.thumb.png.bbbc49afc87de2fc58606c4d6c612fe1.png

So all seems to work. What I don't understand is how to make a theme. I see a file at /uikit/src/less/theme/uikit.theme.less

Basically I can't seem to put two and two together. I'm well familiar with preprocessors but this has me stuck.

1) Can anyone elaborate (further than the docs) on how to set this up? Am I supposed to modify the theme folder to create my theme? In which case, would be overwritten when I update.

2) If I use their build process, how do I include my own app.js file into their build process and have it output at /uikit/dist/js/uikit.app.min.js?

Any advice would be awesome thanks.

  • Like 3

Share this post


Link to post
Share on other sites

You aren't on your own. The docs aren't mega clear. I got something working with the LESS version and AIOM (which can compile LESS) but it doesn't feel very 'sleek'.

  • Like 1

Share this post


Link to post
Share on other sites
1 hour ago, DaveP said:

The docs aren't mega clear.

The documentation for my arduino sensor kit I received the other day written in Chinglish made more sense. For bootstrap, I just installed with npm and made a gulpfile to do all the preprocessing with some tools of choice.

'use-strict';

var gulp           = require('gulp');
var sass           = require('gulp-sass');
var autoprefixer   = require('autoprefixer');
var postcss        = require('gulp-postcss');
var sourcemaps     = require('gulp-sourcemaps');
var postcssFixes   = require('postcss-flexbugs-fixes');
var cssnano        = require('cssnano');
var rename         = require('gulp-rename');
var uglify         = require('gulp-uglify');

var paths = {
    sass: 'src/scss/',
    css: 'src/css/',
    js: 'src/js/'
};

gulp.task('sass', function() {

  var processors = [
      autoprefixer({browsers: ['last 2 versions'], cascade: false}),
      postcssFixes()
  ];

  return gulp.src(paths.sass + 'styles.scss')
      .pipe(sass({
          includePaths: ['node_modules/bootstrap/scss']
      }))
      .pipe(postcss(processors))
      .pipe(gulp.dest(paths.css))
});


gulp.task('watch', function() {
    gulp.watch(paths.sass + '**.scss', ['sass']);
});


gulp.task('minifycss', function () {
    var processors = [
        autoprefixer({browsers: ['last 2 versions'], cascade: false}),
        postcssFixes(),
        cssnano()
    ];

    return gulp.src(paths.css + '*.css')
        .pipe(sourcemaps.init())
        .pipe(postcss(processors))
        .pipe(rename({suffix: '.min'}))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('dist/css/'));
});

gulp.task('uglifyjs', function() {
    return gulp.src(paths.js + '*.js')
        .pipe(rename({suffix: '.min'}))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js/'));
});

gulp.task('build', ['minifycss', 'uglifyjs']);

Now, theoretically, I could simply 'npm install uikit' and change a few things, use less, point to uikit instead of bootstrap etc.

var less = require('gulp-less');
//...
includePaths: ['node_modules/uikit/src/less']

Something like that, then pull everything in to a less file, make you theme inside your project directory, not in the node_module folder, thus using 'my own' build process. I have not tried AIOM module yet but that looks interesting.

I've noticed a couple few things so far with uikit:

1) The less has all the prefixing in it already for some reason, rather than autoprefixer.
2) The compile time with their out-the-box (less) build process is painfully slow, about 5-6 seconds before I can refresh and see changes. My build process above was pretty much instant (but was also sass).
3) It seems I'm forced to include their JS just to use the grid.

So far, I've got /custom/pwtuts.less:

// Core
@import "../src/less/uikit.less";

// My theme
@import "pwtuts/_import.less";

// mixin to add new declaration
.hook-card() {
  background-color: orange;
  color: white;
}

@card-body-padding-horizontal: 100px;
@card-title-font-size: 51px; // weird number so I can find it easy in the css output file...

I'll give it a shot for another week or so and see where it gets me. I'd like to use it but their build script is just too slow and I can't see a way of including my own custom JS into it.

I also still have no idea why I've got '/src/less/components/' and '/src/less/theme/' folders. They import slightly different things in their respective '_import.less' file but the penny has definitely not dropped for me yet. Actually, now I've got the core (components), the theme (theme), and a custom theme (pwtuts). lol where's the banging head against wall emoji?

  • Like 1

Share this post


Link to post
Share on other sites
17 hours ago, SamC said:

in order to better understand making an admin theme

Maybe we should kindly ask @ryan to put together a step-by-step tutorial for beginners on "How to build/customize your own UIkit admin theme", or something like that... I would also like to learn more about it, I just do not have the time to wade through source code and related bits of information.

  • Like 1

Share this post


Link to post
Share on other sites
5 hours ago, szabesz said:

"How to build/customize your own UIkit admin theme"

From what I gather so far, I might be wrong here, but I think you could:

1) Git clone the admin theme.
2) Go to '/AdminThemeUikit/uikit/'. Copy the '/custom' folder into the same level, rename the old folder 'custom.original' or something in case things go pear shaped. Your theme must be inside a folder called 'custom'. The folder inside this is called 'pw', but you could leave that as is.
3) Crack open terminal, navigate to the uikit directory. In my case:

cd /Users/Sam/Desktop/AdminThemeUikit/uikit
npm install // installs webpack and other random node stuff
npm run compile // to compile everything
npm run watch // to watch for changes

4) Add your overrides into  '/AdminThemeUikit/uikit/custom/pw.less'.

Saving this then compiles your new colours/padding/whatever etc. It would just be a case of just using this new admin module with your new css in /site/modules/ as the paths to the css/js would remain the same. The final compiled file transforms from 'pw.less' (which pulls in 'uikit.theme.less' and 'pw/_import.less': _import.less in turn pulls in the components) into:

/AdminThemeUikit/uikit/dist/css/uikit.pw.min.css

All the available scripts you can run are in:

/AdminThemeUikit/uikit/package.json

Prepend with 'npm run...' npm run build-scss', 'npm run compile-js' etc.

"build-scss": "mkdir -p src/scss/theme & mkdir -p src/scss/components & node build/scss",
"compile": "npm run compile-less && npm run compile-js",
"compile-js": "node build/build",
"compile-less": "npm run icons && node build/less",
"compile-rtl": "npm run compile-less -- rtl",
"icons": "node build/icons",
"prefix": "node build/prefix",
"scope": "node build/scope",
"release": "npm run compile && npm run compile-rtl && npm run build-scss && node build/release",
"watch": "npm-watch",
"test": "webpack-dev-server --inline --hot && open http://localhost:8080/tests/"

Then you can run:

npm run test

I got some errors, but strangely, after a couple of attempts and refreshing the page, I get a test page at:

http://localhost:8080/tests/

Sadly, I can't upload my screenshots because:

I don't know why but it's happening to me constantly, and it's quite limiting to say the least!

Anyway, I might be wrong and I haven't modified anything yet, but I believe it's along these lines. 

One thing that's strange to me is that:

/AdminThemeUikit/uikit/custom/pw/

...has both less and css files within. This doesn't seem right, the css should only be in the dist folder.

Anyway, this is as far as I've investigated. Maybe this helps a little. I'll probably try and build a theme just with custom colours tomorrow to see if this is the correct method. Ultimately, I want an admin theme with a sidebar, no overlay sidebar at all and a minimal masthead.

  • Like 1

Share this post


Link to post
Share on other sites
28 minutes ago, bernhard said:

never got any replies on that :( @Pete 

Wow, didn't think about a limit, that sucks a bit. Guess my long storybook style posts are at an end!

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.