“Responsive Kanban Templates (HTML & CSS)” Documentation by “Ahmed Yasser” v1.0

“Responsive Kanban Templates (HTML & CSS)”

Created: 1/10/2024
By: Ahmed Yasser
Email: ahmedreo4@gmail.com

Thank you for purchasing my product. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Table of Contents

  1. Template Folder Structure
  2. HTML Structure
  3. SASS and CSS Files Structure
  4. JavaScript
  5. Image Assets Structure

A) Template Folder Structure - top

HTML Structure

This is an overview of the main folders in the Kanban template:

  1. css

    Contains the compiled CSS files, including style.css, which applies all the styles for the template.

  2. img

    Holds all images and icons used in the template, keeping visual assets organized and easy to access.

  3. js

    Contains JavaScript files, including script.js and drag.min.js, which control functionality, such as drag-and-drop interactions.

  4. sass

    Contains SASS files, which are organized into modular components and compiled into CSS for styling the template.

  5. index.html

    The main HTML file that serves as the entry point for the template, linking all styles, scripts, and content together.

This folder structure keeps everything well-organized, making it easy to maintain and update different parts of the template.

B) HTML Structure - top

The HTML structure of the Responsive Kanban Templates consists of a well-organized layout designed to create a visually appealing and flexible board interface. Below is a breakdown of the key components:

  1. Wrapper (.wrapper): This is the main container that encompasses the entire board layout, providing a structure for the content and ensuring responsiveness across different screen sizes.
  2. Header (.header):
    1. Contains the logo or title of the board.
    2. Serves as an introductory element, providing context or branding for the overall layout.
  3. Board (.board): This section is the central part of the layout that holds various lists or columns, allowing for organized content display.
  4. List (.list): Each list represents a distinct section within the board.
    1. List Title (.list-title): Displays the name of the list, giving users an overview of its purpose.
    2. List Content (.list-content): Holds the individual task cards within the list.
  5. Card (.card): Represents individual items within a list. The structure and content of cards may vary depending on the specific template used.
HTML Structure

C) SASS and CSS Files Structure - top

Sass Structure

The main SASS file (sass/main.scss) serves as a central point for organizing styles across different parts of the Kanban template. It imports specific files to keep styles modular, making the codebase more maintainable and scalable. Here’s a breakdown of each import:

  1. base.scss:
    • This file typically contains foundational styles that apply throughout the entire layout, such as resets, global typography, color variables, and utility classes.
    • It establishes a consistent base styling, setting up defaults for elements to ensure visual harmony.
  2. components/header.scss:
    • Contains styles specifically for the header section, including layout, positioning, typography, and any additional header-specific styling.
    • Keeps header styles separate, allowing easy customization and modifications to the header without affecting other parts of the board.
  3. components/board.scss:
    • Contains styles related to the main board structure, including list and card layouts, spacing, and general styling for board elements.
    • Helps isolate board-specific design rules, supporting flexibility for different layouts within the board.

Compiled CSS Structure

The SASS file compiles into a single CSS file (css/style.css), which combines all styles from the imported SASS files into one. This results in a streamlined CSS file that applies consistent and modular styling across the entire layout, improving both load times and maintainability.

Customization

1. Using the SASS Files

Since the template is built with SASS, you can easily adjust variables, mixins, or individual component styles. Here’s how:

  1. Edit Variables in base.scss: use variables for colors, font sizes, and spacing, you can modify these variables to change the template's overall look (e.g., $primary-color, $font-size).

  2. Adjust Component Styles: you can go to specific component files (like header.scss or board.scss) to modify the styles of specific sections without affecting the rest of the template.

Once changes are made, you should recompile the SASS files to apply their customizations using following command:

sass sass/main.scss:css/style.css --style=compressed

2. Overriding CSS in a Custom CSS File

you can create a new CSS file (e.g., custom.css) and include it after the main style.css in index.html:

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

They can then override specific styles in custom.css without modifying the original CSS files. This method keeps original files intact and makes updates easier.

Summary

For straightforward customization, you can start by creating a custom.css file or adjusting SASS variables. This approach keeps their changes isolated, making it easier to maintain and upgrade the template in the future.

D) JavaScript - top

JavaScript setup is simple and modular, with a main file that brings together different functionalities for the Kanban template:

  1. script.js:
    • The main JavaScript file that includes other scripts for the Kanban template.
    • It loads drag.min.js to enable drag-and-drop functionality.
  2. drag.min.js:
    • A compact file responsible for making items draggable within the board.
    • Included in script.js for a smooth and interactive experience.
  3. components/board.scss:
    • Contains styles related to the main board structure, including list and card layouts, spacing, and general styling for board elements.
    • Helps isolate board-specific design rules, supporting flexibility for different layouts within the board.

E) Image Assets Structure - top

img folder contains all images and icons used in the Kanban template, This folder centralizes visual assets, making it easy to reference and manage images across the template.

Once again, thank you so much for purchasing these templates. As I said at the beginning, I'd be glad to help you if you have any general questions relating to this product on CodeCanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Ahmed Yasser

Go To Table of Contents