| Docs

Getting Started

Welcome to Homelist, a responsive, mobile-friendly HTML CSS JavaScript and TypeScript template powered by Tailwind CSS and Flowbite UI. Homelist is designed for smooth SEO optimization, ensuring that your website works well on all devices.

Homelist is a real estate platform that helps consumers find their ideal property worldwide. With advanced search criteria, featured destinations, and professional property guides, we make it simple for consumers to find, compare, and connect with their ideal home or investment. Homelist is mobile-friendly, responsive, and customized for a smooth user experience.

Use Cases

• Property Listing: You can use the template for property listing websites.
• Real Estate: You can use the template for real estate websites.
• Property Selling: You can use the template for property selling websites.
• Property Renting: You can use the template for property renting websites.
• Property Buying: You can use the template for property buying websites. Or you can use it Buy, Sell & Rent websites at a time.

Where We Can Use It?

Where you can use this template? Here are some examples:

1. Static Site: You can use the template as a static site with just HTML, CSS & JavaScript.
2. Dynamic Site: You can use the template in PHP, NodeJs or any other server-side language.
3. ReactJs: Your can use the template in ReactJs, NextJs, GatsbyJs, etc. TypeScript & JavaScript both are supported.
4. Wordpress: You can use the template in Wordpress as a theme with customization.
5. Blade PHP: You can use the template in Laravel as a blade UI with customization.
6. VueJs: You can use the template in VueJs with Typescript & JavaScript both are supported.
7. Angular: You can use the template in Angular with Typescript & JavaScript both are supported.
8. Shopify: You can use the template in Shopify as a theme with customization.
9. Magento: You can use the template in Magento as a theme with customization. And other platforms, where your can put HTML, CSS and JavaScript.

Credits

We'd like to thank the following resources for providing the tools and resources that we used to create this template.

• Tailwind CSS : A utility-first CSS framework for rapidly building.
• Flowbite UI : A collection of responsive UI components for Tailwind CSS.
• Font Awesome : The web's most popular icon set and toolkit.
• SwiperJs : The most modern free mobile touch slider with hardware
• Odometer: Transition numbers with ease.
• AOS: Animate on scroll library.

Folder Structure

Homelist is extensively customized with HTML, TailwindCSS, JavaScript, and TypeScript. Here is the template's folder structure.

Let's discuss about folders and files.

assets:*

The /assets folder holds all the images, icons, and other files for the template. You can replace or add your own images and icons.

js:*

The js folder contains all the JavaScript & compiled JavaScript files used in the template. You can change the JavaScript files as per your need.

node_modules:

The /node_modules folder stores all the template's dependencies. You can install new ones using the npm install command. This folder isn’t included in the template and is created automatically. It doesn’t need to be uploaded to the server.

src:

The /src folder contains all the source files used in the template. You can change the source files as per your need. The folder include not compiled (typescript, tailwindcss, etc) files.

styles:*

The /styles folder includes all CSS and compiled CSS files used in the template. You can alter the CSS files to suit your needs. The folder also contains the compiled CSS file from TailwindCSS /styles/style.css.

HTML files:*

The .html files are in the root folder and can be customized as needed. The template uses HTML, CSS, and Tailwind CSS for styling. It's fully customizable with Flowbite and built with Vanilla TypeScript and JavaScript for functionality.

package.json:

The /package.json file lists all the template's dependencies. You can add new ones using the npm install command. It's included in the template but doesn't need to be uploaded to the server and can be deleted if not needed.

tailwind.config.js:

The tailwind.config.js file holds the TailwindCSS settings for the template. You can customize it as needed. It's included in the template but doesn't need to be uploaded to the server unless you want to modify TailwindCSS classes.

tsconfig.ts:

The /tsconfig.ts file holds the TypeScript settings for the template. You can customize it if needed. It's included but doesn't need to be uploaded to the server and can be deleted if you're not using TypeScript.

Installation

The Homelist template is easy to customize. You can update the logo, title, styles, JavaScript, colors, and even add new pages.

Change Logo

You will find the /assets/images/logo.png file in the assets folder. You can replace the logo with your own logo.

Change Title

You will find the <title> tag in every .html file in the root folder. You can change the title of the template in the <title> tag.

Customize Javascript

You can change the JavaScript files in the js folder. The main JavaScript file is index.js inside js folder. You can add new JavaScript files, edit the existing JavaScript files, etc.

You can change JavaScript through TypeScript, but you need to install Nodejs on your computer. Then run the following command to compile the TypeScript files. The main TypeScript file is /src/ts/index.ts, it will be compiled into /js/index.js file.

# Install dependencies
npm install                     
# Compile TypeScript files
npm run ts-build

Change Styles/CSS

We used TailwindCSS to style the template. You can change the styles in the styles folder. The main CSS file is styles.css inside styles folder. You can add new CSS files, edit the existing CSS files, etc.

Your need to flow the following steps to customize the template:

Step1: Install NodeJs from here NodeJs

Step2: Install required dependencies

# Install dependencies
npm install

Step3: Run the following command to compile the TailwindCSS files.

# Compile TailwindCSS files
npm run dev:css

Step4: Add TailwindCSS class inside the class attribute or /src/css/input.css file.

<link rel="stylesheet" href="styles/style.css" />

# Minify your CSS
npm run build:css

Customize Theme Color

The theme colors are defined in the src/css/input.css file. You can change the theme colors as per your need.

@layer base {
:root {
/* primary */
--primary-600: #5a1bff;
--primary-500: #3b71fe;
--primary-400: #628dfe;
--primary-100: #c4d4ff;
--primary-50: #d8e3ff;
--primary-10: #ebf1ff;
/* secondary */
--secondary-500: #ff5c00;
--secondary-400: #ff7d33;
--secondary-300: #ff9d66;
/* new */
--new-900: #0b0b0e;
--new-800: #969ba9;
--new-200: #b3b8c7;
--new-100: #f4f5f6;
/* nature */
--nature-800: #0e0f13;
--nature-600: #1c1e26;
--nature-500: #23262f;
--nature-400: #40434d;
--nature-300: #5d606c;
--nature-200: #797e8a;
--nature-100: #969ba9;
--nature-50: #a5a9b8;
/* Line */
--line-100: #f1f1f1;
/* utils */
--navbar-height: 48px;
/* shadows */
--shadow-1: 0px 16px 52px 0px #00000012;
--shadow-2: 0px 16px 60px -16px #00000014;
--shadow-3: 29px 43px 70px -10px #bdbdbd29;
--shadow-4: 0px 40px 64px -32px #0f0f0f1a;
--shadow-5: 0px 20px 30px -10px #00000014;
--shadow-6: 0px 20px 70px 0px #0067ff4d;
--shadow-7: 0px 10px 14px -5px #0000001a;
--shadow-8: 0px 0px 60px 0px #0000000d;
--shadow-9: 0px 5px 60px 0px #0000000d;
--shadow-10: 0px 20px 80px 0px #0808080d;
--shadow-11: 0px 4px 13px -2px #1310220f, 0px 4.8px 24.4px -6px #1310221a;
--swiper-navigation-size: 20px;
   }
      }

Change Placeholders

You can change the placeholder images in the /assets/images folder. The placeholder file name and it's size is same.