Using siQtheme with packages manager

siQtheme is developed as a package, mainly to use with a packages manager like npm or yarn. Of course, you can still use traditionally read below to do this. The quickest way to install siQtheme is using a package manager then import the styles and javascript in your project.

If you need help installing NPM and Node on your machine, go here to read the documentation on installing Node.js and NPM.

Install siQtheme with NPM

    npm i siqtheme

Import style
You would want to import the styles to your main SASS file, example app.scss.

    // import styles
    @import '~siqtheme/src/sass/siqtheme';

Import javascript
Add this to your main JS file like app.js.

    // import script
    require('siqtheme');

Copy the content from node_modules/siqtheme/src/sample.html onto your document to see the theme. Make sure to change the stylesheet and javascript file paths to yours.

And that's it! You would just style your page normally as you would with Bootstrap. Use the browser's developer tool to inspect the elements and classes.

Using siQtheme the traditional way

You still need to have node.js and npm install on your machine to compile the source to a build. Download the theme from Github, extract the file and run the following commands in terminal (Mac) or command prompt (Windows) from the project directory.

Download siQtheme

    ## install dependencies
    npm install

    ## compile as development (uncrompress files)
    npm run dev

    ## compile for production (compressed files)
    npm run prod

Once you compiled the source, you should see a public directory with all the HTML, CSS, JS files. Include the stylesheet and javascript in your document as you normally do. Copy the content from node_modules/siqtheme/src/sample.html onto your document to see the theme.

Resource Articles

I've written a couples articles explaining the process and how to integrate with a PHP framework below. Click on the article to read more.