siQtheme Reponsive Admin Template with jQuery and Bootstrap 4 - Dark and Light Mode

As the world is going into lockdown because of the covid-19 pandemic, why not take this opportunity while staying at home to create something for the community and share it with the world!

siQtheme is a responsive admin template created with Bootstrap 4 and using Webpack / Laravel-Mix to bundle the assets. It's best to use it with a packages manager like npm or yarn and pull into your project. However, you can install the theme traditionally by compiling the source into a public build. Webpack is a module bundler primarily for JavaScript, but it can transform front-end assets like HTML, CSS, and images if the corresponding loaders are included.

Author: Simon Nguyen - siQuang

View demo here https://siqtheme.com

Installation

There are a few ways to install siQtheme depends on your project. You'll need Node.js and NPM to pull in all the packages as the download only contains the source files.

Download from Github

• Download from Github Releases.
• After download run the following command from project directory in console to pull in all dependencies.

# install app's dependencies
$ npm install

GIT Clone

git clone https://github.com/siQuang/siqtheme.git

NPM

# install package
$ npm i siqtheme

Usage

Just run the following cmd to generate a public directory with all the files.

# compile as development
$ npm run dev

# build production with minification
$ npm run prod

#---------------------------------------
# To use browser sync, make sure to change
# the proxy to your local environment
# i.e. localhost
#---------------------------------------
$ npm run watch

Structures

The download contains the source files and will need to be compile for development or production.

siqtheme/
├── src/
│   ├── assets/
│   │   ├── fonts/
│   │   ├── img/
│   │   ├── sass/
│   │   ├── scripts/
│   ├── partials/
│   ├── index.ejs
│   └── ...
├── mix-manifest.json
├── package.json
├── pages.js
└── webpack.mix.js

Using siQtheme with Laravel

Install the siQtheme package

$ npm i siqtheme

Add to bootstrap.js file in resources directory

require('siqtheme');

Import styles to app.scss

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

Create a new view file (i.e. test.blade.php) and copy the content from the sample.html:

node_modules/siqtheme/src/sample.html

Replace the stylesheet link and script in your new file with the correct link and script for your application.

# replace this line to point to your style
<link href="assets/css/app.css" rel="stylesheet">

# replace this line to point to your script
<script src="assets/scripts/app.js"></script>

Add a new route

Route::get('/test', function() {
	return view('test');
});

And thats it!

Using siQtheme with Codeigniter 3

I've written an article on integrating siQtheme with Laravel-Mix for Codeigniter 3 that you can follow below.

Integrating Laravel-Mix and siQtheme with Codeigniter 3

Or you can download the completed project below.

Download CI3-siQtheme