Alpine JS framework

Alpine is a rugged, minimal tool for composing behavior directly in your markup. Think of it like jQuery for the modern web.

Installation

Prerequisite

The following tools are required to setup the template:

• Node js
• Package manager (npm or yarn)

Installing Nodejs

If Node js is not installed on your machine, you must install it first. Node.js distributions usually come bundled with npm, a package manager for the platform, which runs from the command line and manages dependencies for your applications. All npm packages contain a file, usually in the project root, called package.json - this file holds metadata relevant to the project. As you’ve installed Node.js, you can verify to check whether the installation is successful or not. To check if you have Node.js installed, run this command in your terminal:

node -v

And to check the npm version, type:

npm -v

Installing Template

The following process will be used to install Lineone template

Setup

Download the package. Go to lineone-html directory, open terminal and run

npm i

Run The Development Server

Let's run the following command

npm start

This starts your app’s "development server" on port 8080. Let’s check to see if it’s working. Open http://localhost:8080from your browser.

Running Laravel Mix

Laravel Mix provides a fluent API for defining Webpack build steps for your application using several common CSS and JavaScript pre-processors. Laravel Mix is a configuration layer on top of webpack. When you run the dev or production scripts, all of your application's CSS and JavaScript assets will be compiled and placed in defined (dist) directory:

npm run dev

Watching Assets For Changes

The npm run watch command will continue running in your terminal and watch all relevant HTML, CSS and JavaScript files for changes:

npm run watch

Compiling for Production

To build assets for production, you must run the following command. These commands output to the dist directory.

npm run prod

Project structure

Within the download you will find the following directory and file structure:

lineone/
├── dist/ (Production Version)
│	├── css/
│	├── fonts/
│	├── iamges/
│	├── js/
│	├── index.html
│	└── ...
├── src/ (Development Version)
│	├── css/
│	│	├── components/
│	│	|	├── avatar.css
│	│	|	└── ...
│	│	├── app.css
│	│	├── base.css
│	│	├── fontawesome-all.css
│	│	├── components.css
│	│	└── pages.css
│	├── js/
│	│	├── components/
│	│	|	├── navLink.js
│	│	|	└── ...
│	│	├── directives/
│	│	|	├── tooltip.js
│	│	|	└── ...
│	│	├── magics/
│	│	|	├── clipboard.js
│	│	|	└── ...
│	│	├── pages/
│	│	├── utils/
│	│	├── app.js
│	│	└── store.js
│	├── images/
│	├── fonts/
│	├── html/
│	│	├── index.html
│	│	└── ...
├── .prettieringnore
├── .prettierrc.json
├── package.json
├── tailwind.config.js
├── .htmlhintrc
└── webpack.mix.js

Customization

Tailwind CSS is a highly customizable framework. For learning more about customizing the Tailwind template, please use the official documentation of Tailwind.

Customizing Colors

To customize colors you should change customColors values in tailwind.config.js file:

const customColors = {
  // ..
  primary: colors.indigo["600"],
  secondary: "#F000B9",
  // ..
};

Dark Mode

To enable Dark Mode by default change isDarkModeEnabled value in store.js file from:

export default {
  // ...
  init() {
    // ...
    this.isDarkModeEnabled = Alpine.$persist(false).as("_x_darkMode_on");
    // ...
  },
  // ...
};

to

export default {
  // ...
  init() {
    // ...
    this.isDarkModeEnabled = Alpine.$persist(true).as("_x_darkMode_on");
    // ...
  },
  // ...
};

Monochrome Mode

To enable Monochrome Mode change isMonochromeModeEnabled value in store.js file from:

export default {
  //   ...
  isMonochromeModeEnabled: false,
  //   ...
};

to

export default {
  //   ...
  isMonochromeModeEnabled: true,
  //   ...
};

Also, you can persist this value by adding this code on init function in store.js file:

export default {
  // ...
  init() {
    // ...
    this.isMonochromeModeEnabled: Alpine.$persist(true).as("_x_monochrome_Mode_on");
    // ...
  }
  // ...
}

Sidebar Status

To expand sidebar by default add is-sidebar-open in body tag:

<!-- /// -->
 <body
    x-data
    x-bind="$store.global.documentBody"
    class="is-sidebar-open"
  >
<!-- /// -->

Header Status

Header can be static or sticky. By default, the header is sticky. If you want to make the header static add is-header-not-sticky in body tag:

<!-- /// -->
 <body
    class="is-header-not-sticky"
  >
<!-- /// -->