WriteBot - Modern AI Landing HTML Template

Local Setup

There are two ways to change your style (CSS) for your template.

First of all, you can change your style from dist/asseta/css/style.css then upload the changed file to your live server.

The second way, If you want to change your style through SCSS. In that case, you need to follow the below steps to prepare your local environment and run it on your local. You can also minify the CSS. After your changes, you need to upload your changes assets (CSS) to your live server.

Installation SASS

Install SASS to your local through Node.js

Prerequisite: Node.js:

It is used to run the build processes. Download from the NodeJs from the official site and install it on your device according to your Operating System ( nodejs.org )

Check Node.js Version:

Open the Terminal/ Command Line
Run: node -v or node --version
If you get the version then the installation of NodeJs is done


                              
                                 $ node --version 
                                 $ v20.10.0

** Supported node.js version v20.x.x

Check npm Version:

Open the Terminal/ Command Line
Run: npm -v or npm --version
If you get the version then the installation of NodeJs is done


                              
                                 $ npm --version 
                                 $ 10.2.3

SASS Install:

Open the Terminal/ Command Line
Run: npm install -g sass
Run: sass --version
For Windows user, you need to set sass to the environment path: Go to environment variables - > system variables -> path -> Edit , and include file: C: \ Users \ your-user \ AppData \ Roaming \ npm \ sass. Then, Accept everything. and it's done.
For more information, check: https://sass-lang.com/install


                              
                                 $ sass --version 
                                 $ 1.69.5 compiled with dart2js 3.1.5

How to Run SASS

After installing SASS, need to go to your project directory from your terminal/ command line. Path: writebot. Check that you have src and dist folders. To check that run on terminal: ls .
Compile and Watch: Run on terminal: sass --watch src/assets/scss/style.scss dist/assets/css/style.css or, you can generate the CSS file only: sass src/assets/scss/style.scss dist/assets/css/style.css. Official document: https://sass-lang.com/documentation/cli/dart-sass
Test: to check the changes, open a file (dist/index.html) and reload the page after your change in SCSS file. You will find the SCSS file in src/assets/scss/ folder. SCSS official documentation: https://sass-lang.com/guide