Setting up Sage 9 with uikit

sage
1

Hello All,

This is my first post and I am getting started with Sage. I have worked with WordPress for sometime and have good understanding of WordPress/HTML/CSS/JS.
I am trying to adapt modern workflow for theme development process, usually i would go with child themes and get the job done. I can follow tutorials and run basic commands however no in-depth knowledge of webpack, npm and composer.
Now I am trying to achieve something which from many posts sounds like an easy task however I am struggling with it because almost any of the materiel i found online is about sage8 which used bower and gulp etc… All i need to do is:

  • Remove bootstrap
  • Add uikit

If anyone can guide me to the right direction, I shall be highly thankful.

Regards

M

Edit:
I have found this on sage9 page but still not sure how.

What’s new in Sage 9
Bootstrap 4, Bulma, Foundation, Tachyons. Or no CSS framework! You’re no longer tied into any specific CSS framework out of the box.

Edit 2:

It turned out the actual issue was “TTY mode is not supported on Windows platform” which did not let the framework and other options invoke.
To simply remove bootstrap or switch to other built-in frameworks either within theme directory.

but with slight modification for windows it will be

vendor\bin\sage preset

and do not forget to yarn && yarn build to refresh files.

so it helped me to remove Bootstrap and I can add ukit by

yarn add uikit

I’ve done up to this part now, I will later include the paths where includes has to be done for uikit to work properly. So it helps for anyone that might be reading this.

Thank you @devotoare and @alwaysblank for the quick help.

Edit:

well after playing with many settings, I have figured out the best way to import uikit is to import dist css to main.scss file.

@import "~uikit/dist/css/uikit.css";

and uikit and uikit-icons into main.js file

import "uikit/dist/js/uikit";
import "uikit/dist/js/uikit-icon";

Hope it helps to anyone looking for it.

2 Likes
2

As you found with Sage 9 Bootstrap is much easier to use as optional. You mentioned you started with Sage8, I would start a new project in Sage9. It just came out of final beta a few days ago and is ready to go. When installing Sage9 you’ll get a prompt in your terminal about whether or not to include Bootstrap. In your use case, pick no. Then after install run yarn add uikit Then you’’ want to import it (see 3rd Party section here).

After that you can build the css or watch it if your’re using BrowserSync (do this in Dev – it’s the best).

3

Thank you for the reply devotoare,

I have started with new project sage9, when i create the project using composer, I do not get any prompt for selection. I am using Windows 10 and Xampp, if that matters.
I have tried many times and every time new project is created, bootstrap is there.
I figured out the yarn add uikit part, but when I comment out bootstrap includes, yarn build throws errors. :disappointed_relieved:

4

Awkward Windows support for composer install stuff w/r/t Sage is a known issue, but there seems to be a good workaround: No option prompts for composer sage install - on windows

If you want to go about removing Bootstrap manually, you could take a look at how sage-installer modifies those files, and reverse-engineer it.

5

Thank you for the right direction, I will report back with yay or nay.

6

I had the same problem (I use Windows) you can run the install script manually as described here. Sage 9 Custom Installation

1 Like
7

If you have problems with import UIkit scripts and Icons, here is the solution that I haved solved for Sage 9 and Uikit :slight_smile:

8

Just a minor thing, uikit-icon is missing an s. It should be like this:

image

import ‘uikit/dist/js/uikit-icons’;