9.0 KiB

Raw Permalink Blame History

File Structure

Understanding the project structure is key to working efficiently with Concept. This guide explains the organization of files and directories.

Project Root Structure

concept-modern/
├── src/                    # Source files (development)
├── dist/                   # Production build output
├── public/                 # Static public assets
├── docs/                   # Documentation files
├── scripts/                # Build and utility scripts
├── node_modules/           # Dependencies (git-ignored)
├── .gitignore             # Git ignore rules
├── package.json           # Project metadata and scripts
├── package-lock.json      # Locked dependency versions
├── vite.config.js         # Vite configuration
└── README.md              # Project documentation

Source Directory Structure

The src/ directory contains all development files:

src/
├── assets/                 # Static assets
│   ├── fonts/             # Custom fonts
│   └── images/            # Images and icons
├── config/                # Configuration files
│   └── navigation.js      # Sidebar navigation config
├── js/                    # JavaScript modules
│   ├── app.js            # Main application entry
│   ├── components/       # Reusable components
│   └── pages/            # Page-specific scripts
├── pages/                 # HTML pages
│   ├── apps/             # Application pages
│   ├── auth/             # Authentication pages
│   ├── dashboards/       # Dashboard variants
│   ├── ecommerce/        # E-commerce pages
│   ├── email/            # Email app pages
│   ├── misc/             # Miscellaneous pages
│   ├── tables/           # Table examples
│   └── ui-elements/      # UI component demos
├── partials/              # Handlebars partials
│   ├── components/       # Reusable components
│   └── layouts/          # Layout partials
├── scss/                  # Sass stylesheets
│   ├── components/       # Component styles
│   ├── layouts/          # Layout styles
│   ├── pages/            # Page-specific styles
│   ├── utilities/        # Utility classes
│   ├── _variables.scss   # Sass variables
│   └── main.scss         # Main stylesheet
└── index.html            # Main entry point

Key Directories Explained

`/src/assets/`

Static assets that are processed by Vite:

fonts/ - Custom web fonts (if not using CDN)
images/ - Images, icons, logos

assets/
├── fonts/
│   └── inter/            # Inter font files
└── images/
    ├── logo.png          # Application logo
    ├── avatars/          # User avatars
    └── products/         # Product images

`/src/js/`

JavaScript modules using ES6 syntax:

js/
├── app.js                 # Main app initialization
├── components/
│   ├── charts.js         # Chart.js wrapper
│   ├── datatables.js     # DataTables setup
│   ├── sidebar.js        # Sidebar functionality
│   └── tooltips.js       # Bootstrap tooltips
└── pages/
    ├── dashboard.js      # Dashboard-specific code
    ├── calendar.js       # Calendar page logic
    └── products.js       # Product page logic

`/src/pages/`

All HTML pages organized by feature:

pages/
├── dashboards/
│   ├── finance.html      # Finance dashboard
│   ├── sales.html        # Sales dashboard
│   └── influencer.html   # Influencer dashboard
├── apps/
│   ├── calendar.html     # Calendar application
│   └── chat.html         # Chat application
├── auth/
│   ├── login.html        # Login page
│   ├── signup.html       # Registration page
│   └── forgot-password.html # Password reset
└── ui-elements/
    ├── buttons.html      # Button examples
    ├── cards.html        # Card layouts
    └── forms.html        # Form elements

`/src/partials/`

Handlebars template partials for reusability:

partials/
├── layouts/
│   ├── base.hbs          # Base HTML structure
│   ├── main.hbs          # Main layout wrapper
│   ├── head.hbs          # HTML head section
│   ├── header.hbs        # Top navigation bar
│   ├── sidebar.hbs       # Side navigation
│   ├── footer.hbs        # Footer section
│   └── scripts.hbs       # Script includes
└── components/
    ├── breadcrumb.hbs    # Breadcrumb navigation
    ├── page-header.hbs   # Page title section
    └── card.hbs          # Reusable card component

`/src/scss/`

Organized Sass files following ITCSS methodology:

scss/
├── _variables.scss        # Global variables
├── main.scss             # Main entry point
├── layouts/
│   ├── _layout.scss      # Overall layout
│   ├── _sidebar.scss     # Sidebar styles
│   ├── _header.scss      # Header styles
│   └── _footer.scss      # Footer styles
├── components/
│   ├── _buttons.scss     # Button styles
│   ├── _cards.scss       # Card styles
│   ├── _forms.scss       # Form styles
│   └── _tables.scss      # Table styles
├── pages/
│   ├── _dashboard.scss   # Dashboard specific
│   ├── _login.scss       # Login page styles
│   └── _products.scss    # Product pages
└── utilities/
    ├── _helpers.scss     # Helper classes
    └── _animations.scss  # Animations

File Naming Conventions

HTML Files

Use kebab-case: product-details.html
Group by feature: pages/ecommerce/products.html

JavaScript Files

Use camelCase for files: productDetails.js
Use PascalCase for classes: ProductManager.js
Suffix with type: product.service.js

SCSS Files

Prefix partials with underscore: _buttons.scss
Match component names: _product-card.scss

Asset Files

Use kebab-case: user-avatar-default.png
Include dimensions: hero-banner-1920x600.jpg
Be descriptive: icon-shopping-cart.svg

Important Files

`vite.config.js`

Vite build configuration:

export default {
  root: 'src',
  build: {
    outDir: '../dist',
    rollupOptions: {
      input: {
        main: '/index.html',
        // Add pages here
      }
    }
  }
}

`package.json`

Project dependencies and scripts:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

`/src/config/navigation.js`

Centralized navigation configuration:

export const navigation = [
  {
    id: 'dashboard',
    label: 'Dashboard',
    icon: 'fa-chart-line',
    submenu: [...]
  }
]

Adding New Files

Adding a New Page

Create HTML file in appropriate directory:
```
src/pages/features/new-feature.html
```

Add to vite.config.js:

input: {
  'new-feature': '/pages/features/new-feature.html'
}

Create JavaScript if needed:
```
src/js/pages/new-feature.js
```
Create SCSS if needed:
```
src/scss/pages/_new-feature.scss
```

Adding a New Component

Create component JavaScript:
```
src/js/components/newComponent.js
```

Create component styles:

src/scss/components/_new-component.scss

Import in main files:

// In main.scss
@import "components/new-component";

Build Output Structure

After running npm run build, the dist/ directory contains:

dist/
├── assets/
│   ├── css/              # Compiled CSS files
│   ├── js/               # Compiled JS files
│   └── images/           # Optimized images
├── pages/                # All HTML pages
├── index.html            # Main entry point
└── [other pages].html    # Other built pages

Best Practices

Organization

Keep related files together
Use consistent naming conventions
Follow the established structure
Document new patterns

Performance

Lazy load large components
Optimize images before adding
Use code splitting for pages
Minimize third-party dependencies

Maintenance

Remove unused files
Keep dependencies updated
Document custom modifications
Use meaningful commit messages

Next Steps

Now that you understand the file structure:

Learn About Build Tools - Vite configuration details
Page Structure - How pages are constructed
Adding Components - Create new components
Customization Guide - Modify the template

Understanding the file structure is crucial for efficient development. Take time to explore the directories and familiarize yourself with the organization.

9.0 KiB Raw Permalink Blame History