Frontend Design

Patterns & Conventions

Import Order in main.scss

// 1. Vendors (Bootstrap, third-party)
@import 'vendors/bootstrap';

// 2. Global settings
@import 'global/fonts';
@import 'global/typography';
@import 'global/alignments';

// 3. Objects (layouts)
@import 'objects/archive';
@import 'objects/sidebar';

// 4. Components (UI elements)
@import 'components/buttons';
@import 'components/header';
@import 'components/navigation';

Using Tailwind Utilities

Tailwind is integrated via PostCSS. Use utility classes directly in HTML/PHP:

<div class="flex items-center justify-between mt-4 mb-8">
    <h2 class="text-2xl font-bold">Title</h2>
    <button class="px-4 py-2 bg-blue-500 text-white rounded">Action</button>
</div>

Using Bootstrap Components

Bootstrap 5.2.3 is available. Import specific components:

// In vendors/_bootstrap.scss
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/modal";
@import "~bootstrap/scss/accordion";

Font Definitions

Project uses Montserrat and Font Awesome:

// In global/_fonts.scss
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/montserrat/Montserrat-Regular.woff2') format('woff2'),
         url('../fonts/montserrat/Montserrat-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

Component Styling Pattern

// In components/_component-name.scss
.component-name {
    // Base styles
    padding: 1rem;
    background: #fff;

    // Child elements
    &__header {
        font-size: 1.25rem;
        font-weight: 600;
    }

    &__content {
        margin-top: 0.5rem;
    }

    // States
    &--active {
        border-color: #007bff;
    }

    // Responsive
    @media (min-width: 768px) {
        padding: 2rem;
    }
}

Responsive Breakpoints

Tailwind breakpoints (from tailwind.config.js):

• sm: 640px
• md: 768px
• lg: 1024px
• xl: 1280px
• 2xl: 1536px

Bootstrap breakpoints:

• sm: 576px
• md: 768px
• lg: 992px
• xl: 1200px
• xxl: 1400px

Best Practices

1. Use BEM naming - .block__element--modifier pattern
2. Mobile-first - Write base styles for mobile, add breakpoints for larger screens
3. Prefer Tailwind - For utility/spacing classes, use Tailwind
4. Use Bootstrap - For complex components (modals, accordions, dropdowns)
5. Custom components - Create in src/scss/components/
6. Never edit assets/ - Only edit files in src/scss/
7. Run build - After changes: npm run development