EntryPoint Documentation

Getting Started

This theme is built with HTML5, SCSS, Bootstrap 5, and JavaScript. Ensure you have the following dependencies installed before proceeding:

• Bootstrap 5: Included via the css/bootstrap.min.css and js/bootstrap.bundle.min.js files.
• SCSS: SCSS files for customization, compiled into CSS.
• JavaScript: A custom scripts.js file for validations and interactions.

Page Structure:

<!-- Web Fonts -->
    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700'>

    <!-- Bootstrap and Custom Styles -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/styles.css">

    <!-- JavaScript -->
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/scripts.js"></script>

Folder Structure

The project files and folders are organized as follows:

    entrypoint/
    ├── assets/
    │   ├── css/             # Compiled CSS files
    │   ├── scss/            # Source SCSS files 
    │   ├── js/              # JavaScript files
    │   └── images/          # Project images                    
    ├── pages/               # HTML pages (e.g. login-1.html, register-1.html) etc.
    ├── documentation/       # Documentation assets
    ├── index.html           # Main homepage
    └── success.html         # Success page after login
    

• assets/css/: Contains the compiled CSS files from SCSS.
• assets/scss/: Source SCSS files, organized with variables and components.
• js/: JavaScript for form validation and interactivity.
• docs/: Documentation assets, including custom styles.
• pages/: Includes authentication pages such as logins, registers, forgot-passwords etc.
• index.html: Project overview/homepage.

Customization

SCSS Customization

The SCSS files are modular and organized into the following structure:

• variables.scss: Define colors, fonts, and spacing.
• base.scss: Base styles, including resets.
• components.scss: Reusable components like buttons and forms.
• style.scss: The primary SCSS file that combines all other SCSS files.

To modify SCSS files, update the relevant .scss files and compile them to CSS:

CLI Option: If you prefer CLI, use the following command:
sass assets/scss/styles.scss assets/css/styles.css

SCSS Compilation using VS Code Plugin

1. Live Sass Compiler - Install the 'Live Sass Compiler' extension from the VS Code marketplace.

2. SCSS-to-CSS - Install the 'SCSS-to-CSS' plugin from the VS Code marketplace.

JavaScript Customization

All interactive behaviors are managed in scripts.js. Modify this file to:

• Customize form validation logic.
• Add new behaviors or interactivity to the pages.

// Example: Add custom validation logic
       document.querySelector('form').addEventListener('submit', function(e) {
          e.preventDefault();
    // Custom validation logic here
       });

Form Validation

The forms include JavaScript validation for:

• Email: Ensures proper format.
• Password: Minimum 8 characters.

Example code:

document.addEventListener('DOMContentLoaded', function () {
    const forms = document.querySelectorAll('form');
    forms.forEach(form => {
        form.addEventListener('submit', function (e) {
            e.preventDefault();
            const email = form.querySelector('input[type="email"]');
            const password = form.querySelector('input[type="password"]');
            if (!validateEmail(email.value)) {
                showInvalid(email, "Invalid email format.");
            }
            if (password.value.length < 8) {
                showInvalid(password, "Password must be 8+ characters.");
            }
        });
    });
});