Uikit 3 help required

[SamC]

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:

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.

[DaveP]

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'.

[SamC]

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?

[szabesz]

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.

[SamC]

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:

• Drag files here to attach, or choose files... 
  Max total size 0.02MB

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.

[bernhard]

never got any replies on that  @Pete 

[SamC]

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!

[Pete]

Hi guys

Sorry - been super busy lately and not checking in often at all. The limit is set at 100mb per user - I'll ask Ryan if he's happy to increase it as he's the one paying for the server.

[bernhard]

a limit per time or by number of posts would be great. it's totally understandable that not every user needs 100mb from the beginning. it would even make sense to have a low limit at first imho

[Pete]

Bizarrely the starter group did have unlimited attachments - I've fixed that now as that's a recipe for disaster

I think we can do something really simple like "above 100 posts, have an extra few hundred mb, above 500 posts have more again" or something, but just waiting to hear back from Ryan. That's the easiest way to do it using member groups so when you get to X posts it puts you in another group with the extra size limit. The only other setting is a per-upload size which isn't as useful but can stop spam accounts from uploading junk I guess.

Basically, there's not a lot of settings we can tweak but I'm sure the option I've just mentioned will be enough. No point restricting our most helpful members!

[Peter Knight]

 

7 hours ago, Pete said:

Basically, there's not a lot of settings we can tweak but I'm sure the option I've just mentioned will be enough. No point restricting our most helpful members!

Cue lots of PW developers wondering how much work it'd be to create a PWforum module over the Christmas  

[Pete]

18 hours ago, Peter Knight said:

Cue lots of PW developers wondering how much work it'd be to create a PWforum module over the Christmas  

Hehe, it has crossed my mind a few times but... it's a massive can of worms with huge implications around support. The biggest problem really is there are so many cheap/free offerings out there that I think that's why there's not a huge amount of competition. In terms of "big players" commercially, you've got vBulletin and IPB, and unless you have a few hundred customers at their annual prices you're not paying one developer full time to work on it.

I'm pretty sure something much simpler could be built though with less bells and whistles, but I wouldn't trust myself to be able to write something that could scale well.

On 12/13/2017 at 7:37 PM, bernhard said:

a limit per time or by number of posts would be great. it's totally understandable that not every user needs 100mb from the beginning. it would even make sense to have a low limit at first imho

Ryan tells me he actually doubled the space last month so you should be good for a while and we'll maybe look into the increase per post count option in the meantime.

[bernhard]

1 minute ago, Pete said:

Ryan tells me he actually doubled the space last month so you should be good for a while and we'll maybe look into the increase per post count option in the meantime.

yep, i know i talked to him during my writeup of the blogpost. i just wanted to help as i think 100mb for everybody is not the best solution. i'm fine now, but i think it makes sense to restrict new users more than active ones.

thanks for taking care of it now!