Greencheap-uikit NPM

GreenCheap Uikit

If you are developing your own GetUikit theme, sometimes you may have difficulty. For example, it is very difficult to personalize Uikit's icons. You have to put the changes you made in the Uikit project into your project manually, which is a complete mess.

So I developed this package and started for myself. This package provides uikit less, js and icons packages in your own project, allows you to bundle it to your project. Moreover, it complies with uikit rules.

How To Using?

It works the same as Uikit. Create a file called greencheap.js for your project touch greencheap.js. import greencheap package const greencheap = require('greencheap-uikit');

Add "compile": "node ./greencheap.js to scripts on packages.json

	"scripts": {
		"greencheap-compile": "node ./greencheap.js"
	}

open the greencheap.js

	const  greencheap = require('greencheap-uikit');
	// for Less
 	greencheap.compileless();
 	// for Icons
	greencheap.compileIcons();
	// for Javascript
	greencheap.compileJs();

1 - How To Build Less

The Less source files allow you to customize UIkit. To use the customized version on your website, you need to compile the Less sources into CSS. There are basically two approaches available to you: Setup your own build process or use the build scripts included in UIkit.

Use included build process

If you want to change the styling of UIkit, you can use its build process to create a differently themed version of the CSS, that you can then include in your project. That way you do not need to set up your own build process.

To include your own Less theme in the build process, create a /custom directory, which will contain all of your custom themes.

Create a file /custom/my-theme.less (or any other name) and import the core UIkit styles (uikit.less) or UIkit with its default theme (uikit.theme.less).

// Import UIkit default theme (or uikit.less with only core styles)
@import "../node_modules/uikit/src/less/uikit.theme.less";

// Your custom code goes here, e.g. mixins, variables.
// See "how to create a theme" below for more info.
@import "./my_theme/_import.less";