docs/customize.html - master - renath/dredexgrid

docs/customize.html
676 строк26 KB
Renatka
Перевёл на русский язык
13 ноя 2025, 12:33
13 ноя 2025, 12:331e2e8fc
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Кастомизация - SimpleGrid</title>
    <link rel="stylesheet" href="../dist/simplegrid.css">
    <style>
        .docs-nav {
            background: #f8f9fa;
            padding: 1rem 0;
            border-bottom: 1px solid #dee2e6;
            margin-bottom: 2rem;
        }
        .customize-section {
            background: white;
            border-radius: 0.5rem;
            padding: 2rem;
            margin-bottom: 3rem;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .code-example {
            background: #1a1d23;
            color: #e2e8f0;
            padding: 1.5rem;
            border-radius: 0.375rem;
            margin: 1rem 0;
            overflow-x: auto;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 0.875rem;
        }
        .component-title {
            color: #2d3748;
            border-bottom: 2px solid #007bff;
            padding-bottom: 0.5rem;
            margin-bottom: 1.5rem;
        }
        .nav-brand {
            font-weight: 600;
            color: #007bff;
            text-decoration: none;
            font-size: 1.25rem;
        }
        .color-preview {
            width: 100%;
            height: 60px;
            border-radius: 0.375rem;
            margin-bottom: 0.5rem;
            border: 1px solid #e9ecef;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 500;
            font-size: 0.875rem;
        }
        .color-preview.light {
            color: #333;
        }
        .variable-table {
            width: 100%;
            border-collapse: collapse;
            margin: 1rem 0;
        }
        .variable-table th,
        .variable-table td {
            padding: 0.75rem;
            text-align: left;
            border-bottom: 1px solid #e9ecef;
        }
        .variable-table th {
            background: #f8f9fa;
            font-weight: 600;
        }
        .custom-demo {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 0.375rem;
            padding: 1.5rem;
            margin: 1rem 0;
        }
        .theme-preview {
            border: 2px solid #e9ecef;
            border-radius: 0.5rem;
            padding: 1.5rem;
            margin: 1rem 0;
            transition: all 0.3s ease;
        }
        .theme-preview:hover {
            border-color: #007bff;
        }
        .btn-demo-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 0.5rem;
            margin: 1rem 0;
        }
    </style>
</head>
<body>
    <nav class="docs-nav">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-6">
                    <a href="index.html" class="nav-brand">SimpleGrid</a>
                </div>
                <div class="col-6 text-right">
                    <a href="index.html" class="btn btn-outline-primary btn-sm">Документация</a>
                    <a href="examples.html" class="btn btn-outline-secondary btn-sm">Примеры</a>
                </div>
            </div>
        </div>
    </nav>

    <div class="container">
        <div class="row">
            <div class="col-12">
                <h1>Кастомизация</h1>
                <p class="lead">Научитесь настраивать SimpleGrid в соответствии с вашим брендом и дизайн-системой</p>
            </div>
        </div>

        <!-- SCSS Переменные -->
        <section class="customize-section">
            <h2 class="component-title">SCSS Переменные</h2>
            <p>SimpleGrid построен на Sass и использует переменные для легкой кастомизации. Все переменные имеют флаги <code>!default</code>, поэтому вы можете легко их переопределять.</p>

            <h3>Цветовые переменные</h3>
            <div class="row">
                <div class="col-md-3 col-sm-6 mb-4">
                    <div class="color-preview" style="background: #007bff;">$primary</div>
                    <code>$primary: #007bff</code>
                </div>
                <div class="col-md-3 col-sm-6 mb-4">
                    <div class="color-preview" style="background: #6c757d;">$secondary</div>
                    <code>$secondary: #6c757d</code>
                </div>
                <div class="col-md-3 col-sm-6 mb-4">
                    <div class="color-preview" style="background: #28a745;">$success</div>
                    <code>$success: #28a745</code>
                </div>
                <div class="col-md-3 col-sm-6 mb-4">
                    <div class="color-preview" style="background: #dc3545;">$danger</div>
                    <code>$danger: #dc3545</code>
                </div>
                <div class="col-md-3 col-sm-6 mb-4">
                    <div class="color-preview" style="background: #ffc107; color: #333;">$warning</div>
                    <code>$warning: #ffc107</code>
                </div>
                <div class="col-md-3 col-sm-6 mb-4">
                    <div class="color-preview" style="background: #17a2b8;">$info</div>
                    <code>$info: #17a2b8</code>
                </div>
                <div class="col-md-3 col-sm-6 mb-4">
                    <div class="color-preview light" style="background: #f8f9fa;">$light</div>
                    <code>$light: #f8f9fa</code>
                </div>
                <div class="col-md-3 col-sm-6 mb-4">
                    <div class="color-preview" style="background: #343a40;">$dark</div>
                    <code>$dark: #343a40</code>
                </div>
            </div>

            <h3>Все доступные переменные</h3>
            <table class="variable-table">
                <thead>
                    <tr>
                        <th>Переменная</th>
                        <th>Значение по умолчанию</th>
                        <th>Описание</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><code>$primary</code></td>
                        <td><code>#007bff</code></td>
                        <td>Основной цвет бренда</td>
                    </tr>
                    <tr>
                        <td><code>$secondary</code></td>
                        <td><code>#6c757d</code></td>
                        <td>Вторичный цвет</td>
                    </tr>
                    <tr>
                        <td><code>$success</code></td>
                        <td><code>#28a745</code></td>
                        <td>Цвет состояния успеха</td>
                    </tr>
                    <tr>
                        <td><code>$danger</code></td>
                        <td><code>#dc3545</code></td>
                        <td>Цвет состояния ошибки/опасности</td>
                    </tr>
                    <tr>
                        <td><code>$warning</code></td>
                        <td><code>#ffc107</code></td>
                        <td>Цвет состояния предупреждения</td>
                    </tr>
                    <tr>
                        <td><code>$info</code></td>
                        <td><code>#17a2b8</code></td>
                        <td>Цвет информационного состояния</td>
                    </tr>
                    <tr>
                        <td><code>$light</code></td>
                        <td><code>#f8f9fa</code></td>
                        <td>Светлый цвет фона</td>
                    </tr>
                    <tr>
                        <td><code>$dark</code></td>
                        <td><code>#343a40</code></td>
                        <td>Темный цвет текста</td>
                    </tr>
                    <tr>
                        <td><code>$font-family-base</code></td>
                        <td><code>'Segoe UI', sans-serif</code></td>
                        <td>Базовое семейство шрифтов</td>
                    </tr>
                    <tr>
                        <td><code>$font-size-base</code></td>
                        <td><code>1rem</code></td>
                        <td>Базовый размер шрифта</td>
                    </tr>
                    <tr>
                        <td><code>$line-height-base</code></td>
                        <td><code>1.5</code></td>
                        <td>Базовая высота строки</td>
                    </tr>
                    <tr>
                        <td><code>$grid-columns</code></td>
                        <td><code>12</code></td>
                        <td>Количество колонок сетки</td>
                    </tr>
                    <tr>
                        <td><code>$grid-gutter</code></td>
                        <td><code>15px</code></td>
                        <td>Ширина промежутков сетки</td>
                    </tr>
                    <tr>
                        <td><code>$breakpoints</code></td>
                        <td><code>(xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)</code></td>
                        <td>Точки останова для адаптивности</td>
                    </tr>
                </tbody>
            </table>
        </section>

        <!-- Базовая кастомизация -->
        <section class="customize-section">
            <h2 class="component-title">Базовая кастомизация</h2>
            
            <h3>Метод 1: Переопределение переменных</h3>
            <p>Создайте пользовательский SCSS файл, который импортирует SimpleGrid и переопределяет переменные:</p>
            
            <div class="code-example">
<pre><code>// custom.scss
@use 'simplegrid/src/variables' with (
  $primary: #8b5cf6,
  $secondary: #64748b,
  $success: #10b981,
  $font-family-base: 'Inter', sans-serif,
  $grid-gutter: 20px
);

@use 'simplegrid/src/simplegrid';</code></pre>
            </div>

            <h3>Метод 2: CSS Custom Properties</h3>
            <p>Переопределение с помощью CSS переменных (если используете скомпилированный CSS):</p>
            
            <div class="code-example">
<pre><code>/* custom.css */
:root {
  --primary: #8b5cf6;
  --secondary: #64748b;
  --font-family-base: 'Inter', sans-serif;
}

/* Если нужно переопределить скомпилированные стили */
.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
}</code></pre>
            </div>
        </section>

        <!-- Примеры тем -->
        <section class="customize-section">
            <h2 class="component-title">Примеры тем</h2>
            <p>Посмотрите, как разные конфигурации переменных могут создавать совершенно разные внешние виды:</p>

            <div class="row">
                <div class="col-md-6">
                    <div class="theme-preview">
                        <h4>Темная тема</h4>
                        <div class="code-example">
<pre><code>@use 'simplegrid/src/variables' with (
  $primary: #6366f1,
  $secondary: #94a3b8,
  $success: #10b981,
  $dark: #0f172a,
  $light: #f1f5f9
);</code></pre>
                        </div>
                        <div class="custom-demo">
                            <div class="btn-demo-grid">
                                <button class="btn btn-primary">Основная</button>
                                <button class="btn btn-secondary">Вторичная</button>
                                <button class="btn btn-success">Успех</button>
                            </div>
                            <div class="mt-2">
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Поле ввода">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="theme-preview">
                        <h4>Теплая тема</h4>
                        <div class="code-example">
<pre><code>@use 'simplegrid/src/variables' with (
  $primary: #f59e0b,
  $success: #059669,
  $danger: #dc2626,
  $font-family-base: 'Georgia', serif
);</code></pre>
                        </div>
                        <div class="custom-demo">
                            <div class="btn-demo-grid">
                                <button class="btn btn-primary">Основная</button>
                                <button class="btn btn-success">Успех</button>
                                <button class="btn btn-danger">Опасность</button>
                            </div>
                            <div class="mt-2">
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Поле ввода">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mt-4">
                <div class="col-md-6">
                    <div class="theme-preview">
                        <h4>Фиолетовая тема</h4>
                        <div class="code-example">
<pre><code>@use 'simplegrid/src/variables' with (
  $primary: #8b5cf6,
  $secondary: #a78bfa,
  $info: #06b6d4,
  $warning: #f59e0b
);</code></pre>
                        </div>
                        <div class="custom-demo">
                            <div class="btn-demo-grid">
                                <button class="btn btn-primary">Основная</button>
                                <button class="btn btn-ghost-primary">Прозрачная</button>
                                <button class="btn btn-soft-primary">Мягкая</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="theme-preview">
                        <h4>Монохромная тема</h4>
                        <div class="code-example">
<pre><code>@use 'simplegrid/src/variables' with (
  $primary: #374151,
  $secondary: #6b7280,
  $success: #374151,
  $danger: #374151,
  $font-family-base: 'SF Mono', monospace
);</code></pre>
                        </div>
                        <div class="custom-demo">
                            <div class="btn-demo-grid">
                                <button class="btn btn-primary">Основная</button>
                                <button class="btn btn-outline-primary">Контурная</button>
                                <button class="btn btn-ghost-primary">Прозрачная</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Продвинутая кастомизация -->
        <section class="customize-section">
            <h2 class="component-title">Продвинутая кастомизация</h2>

            <h3>Пользовательские компоненты</h3>
            <p>Добавьте свои собственные компоненты, создавая дополнительные SCSS файлы:</p>

            <div class="code-example">
<pre><code>// _custom-components.scss
.hero-section {
  background: linear-gradient(135deg, $primary 0%, darken($primary, 20%) 100%);
  color: white;
  padding: 4rem 0;
  text-align: center;
  
  .hero-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
  }
}

.card-feature {
  background: white;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  
  &:hover {
    transform: translateY(-5px);
  }
}

// Затем импортируйте в главном файле
@use 'custom-components';</code></pre>
            </div>

            <h3>Изменение точек останова</h3>
            <p>Настройте адаптивные точки останова:</p>

            <div class="code-example">
<pre><code>@use 'simplegrid/src/variables' with (
  $breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px,
    xxl: 1400px
  ),
  $container-max-widths: (
    sm: 540px,
    md: 720px,
    lg: 960px,
    xl: 1140px,
    xxl: 1320px
  )
);</code></pre>
            </div>

            <h3>Пользовательские цветовые карты</h3>
            <p>Добавьте свои собственные цветовые варианты:</p>

            <div class="code-example">
<pre><code>// Добавьте в ваш пользовательский файл
$custom-colors: (
  "purple": #8b5cf6,
  "pink": #ec4899,
  "indigo": #4f46e5,
  "teal": #14b8a6
);

// Создайте кнопки для пользовательских цветов
@each $color, $value in $custom-colors {
  .btn-#{$color} {
    background-color: $value;
    border-color: $value;
    color: white;
    
    &:hover:not(:disabled) {
      background-color: darken($value, 10%);
      border-color: darken($value, 10%);
    }
  }
  
  .btn-outline-#{$color} {
    color: $value;
    border-color: $value;
    
    &:hover:not(:disabled) {
      background-color: $value;
      color: white;
    }
  }
}</code></pre>
            </div>

            <h3>Кастомизация кнопок</h3>
            <p>Создайте свои собственные стили кнопок:</p>

            <div class="code-example">
<pre><code>// Пользовательские стили кнопок
.btn-neon {
  background: transparent;
  border: 2px solid $primary;
  color: $primary;
  text-shadow: 0 0 5px currentColor;
  box-shadow: 0 0 10px $primary;
  
  &:hover {
    background: $primary;
    color: white;
    box-shadow: 0 0 20px $primary;
  }
}

.btn-glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: inherit;
  
  &:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
  }
}</code></pre>
            </div>
        </section>

        <!-- Процесс сборки -->
        <section class="customize-section">
            <h2 class="component-title">Процесс сборки</h2>

            <h3>Использование Sass компилятора</h3>
            <p>Скомпилируйте вашу кастомную версию:</p>

            <div class="code-example">
<pre><code># Установите sass, если еще не установлен
npm install -g sass

# Скомпилируйте вашу кастомную версию
sass custom.scss dist/custom-grid.css --style=expanded

# Или минифицированную версию
sass custom.scss dist/custom-grid.min.css --style=compressed</code></pre>
            </div>

            <h3>Использование NPM скриптов</h3>
            <p>Добавьте скрипты в ваш package.json:</p>

            <div class="code-example">
<pre><code>{
  "scripts": {
    "build:custom": "sass custom.scss dist/custom-grid.css",
    "build:custom-min": "sass custom.scss dist/custom-grid.min.css --style=compressed",
    "watch:custom": "sass --watch custom.scss dist/custom-grid.css"
  }
}</code></pre>
            </div>

            <h3>Пример полной кастомной сборки</h3>
            <p>Полный пример настройки кастомной сборки:</p>

            <div class="code-example">
<pre><code>// custom.scss
@use 'simplegrid/src/variables' with (
  // Цвета
  $primary: #7c3aed,
  $secondary: #475569,
  $success: #059669,
  $danger: #dc2626,
  $warning: #d97706,
  $info: #0891b2,
  
  // Типографика
  $font-family-base: 'Inter', 'system-ui', sans-serif,
  $font-size-base: 1.125rem,
  
  // Layout
  $grid-gutter: 24px,
  $grid-columns: 12
);

// Импортируйте фреймворк
@use 'simplegrid/src/simplegrid';

// Ваши пользовательские компоненты
.rounded-lg {
  border-radius: 0.75rem;
}

.shadow-custom {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

// Пользовательские утилиты
.text-gradient {
  background: linear-gradient(135deg, variables.$primary, variables.$info);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}</code></pre>
            </div>
        </section>

        <!-- Лучшие практики -->
        <section class="customize-section">
            <h2 class="component-title">Лучшие практики</h2>

            <div class="row">
                <div class="col-md-6">
                    <h4>✅ Рекомендуется</h4>
                    <ul>
                        <li>Используйте семантические имена переменных</li>
                        <li>Храните кастомизацию в отдельных файлах</li>
                        <li>Тестируйте на разных точках останова</li>
                        <li>Используйте инструменты проверки контраста цветов</li>
                        <li>Документируйте ваши кастомизации</li>
                        <li>Создавайте тему, а не переопределяйте всё</li>
                    </ul>
                </div>
                <div class="col-md-6">
                    <h4>❌ Не рекомендуется</h4>
                    <ul>
                        <li>Изменять оригинальные исходные файлы</li>
                        <li>Использовать слишком много пользовательских цветов</li>
                        <li>Забывать о доступности (accessibility)</li>
                        <li>Переопределять всё - используйте наследование</li>
                        <li>Игнорировать мобильную адаптивность</li>
                        <li>Создавать слишком специфичные селекторы</li>
                    </ul>
                </div>
            </div>

            <h3>Рекомендации по доступности</h3>
            <div class="alert alert-warning">
                <strong>Важно:</strong> При кастомизации цветов убедитесь, что они соответствуют стандартам WCAG 2.1 AA по контрастности (4.5:1 для обычного текста, 3:1 для крупного текста).
            </div>

            <h3>Советы по производительности</h3>
            <ul>
                <li>Импортируйте только нужные компоненты</li>
                <li>Используйте сжатый вывод для продакшена</li>
                <li>Рассмотрите возможность очистки неиспользуемого CSS</li>
                <li>Минифицируйте ваш финальный CSS</li>
                <li>Используйте source maps для разработки</li>
            </ul>

            <h3>Советы по организации кода</h3>
            <div class="code-example">
<pre><code>// Рекомендуемая структура кастомного проекта
styles/
├── components/          # Пользовательские компоненты
│   ├── _buttons.scss
│   ├── _cards.scss
│   └── _navigation.scss
├── themes/             # Темы
│   ├── _dark.scss
│   └── _corporate.scss
├── utils/              # Утилиты
│   ├── _variables.scss # Переопределенные переменные
│   └── _mixins.scss
└── main.scss           # Главный файл</code></pre>
            </div>
        </section>

        <div class="row mt-5">
            <div class="col-12 text-center">
                <div class="alert alert-info">
                    <strong>Нужна помощь с кастомизацией?</strong> Изучите исходный код или создайте issue на GitHub.
                </div>
                <a href="getting-started.html" class="btn btn-primary">Начало работы</a>
                <a href="examples.html" class="btn btn-outline-primary">Посмотреть примеры</a>
                <a href="index.html" class="btn btn-ghost-primary">Документация</a>
            </div>
        </div>
    </div>

    <footer style="background: #f8f9fa; padding: 3rem 0; margin-top: 4rem;">
        <div class="container text-center">
            <p>&copy; 2024 SimpleGrid. Создано с ❤️ для веб-разработчиков.</p>
        </div>
    </footer>
</body>
</html>