/
renath
/
dredexgrid
Обзор
Документация
Войти
/
renath
/
dredexgrid
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
docs/getting-started.html
246 строк
10 KB
Renatka
Перевёл на русский язык
13 ноя 2025, 12:33
13 ноя 2025, 12:33
1e2e8fc
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="en"> <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: 2rem 0; border-bottom: 1px solid #dee2e6; } .docs-sidebar { position: sticky; top: 2rem; } .nav-link { color: #495057; padding: 0.5rem 0; display: block; text-decoration: none; } .nav-link:hover, .nav-link.active { color: #007bff; } .code-example { background: #2d3748; color: #e2e8f0; padding: 1.5rem; border-radius: 0.25rem; margin: 1rem 0; overflow-x: auto; } .example-preview { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 0.25rem; padding: 1.5rem; margin-bottom: 2rem; } </style> </head> <body> <nav class="docs-nav"> <div class="container"> <div class="row"> <div class="col-6"> <h3>SimpleGrid</h3> </div> <div class="col-6 text-right"> <a href="index.html" class="btn btn-outline-primary btn-sm">Документация</a> <a href="#" class="btn btn-primary">Скачать SimpleGrid v1.0.0</a> </div> </div> </div> </nav> <div class="container"> <div class="row"> <!-- Sidebar --> <div class="col-md-3"> <div class="docs-sidebar"> <h5>Getting Started</h5> <nav> <a href="#installation" class="nav-link">Установка</a> <a href="#basic-template" class="nav-link">Базовый шаблон</a> <a href="#customization" class="nav-link">Кастомизация</a> <a href="#build-tools" class="nav-link">Инструменты сборки</a> </nav> </div> </div> <!-- Main content --> <div class="col-md-9"> <h1>Начало работы с SimpleGrid</h1> <p class="lead">Быстрое руководство по установке и использованию фреймворка</p> <section id="installation"> <h2>Установка</h2> <p>Есть несколько способов начать использовать SimpleGrid:</p> <h3>Способ 1: CDN (быстрый старт)</h3> <div class="code-example"> <pre><code><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/yourusername/simplegrid/dist/simplegrid.min.css"></code></pre> </div> <h3>Способ 2: Скачать файлы</h3> <p>Скачайте скомпилированные файлы CSS:</p> <div class="code-example"> <pre><code><link rel="stylesheet" href="css/simplegrid.css"></code></pre> </div> <h3>Способ 3: Установка через NPM</h3> <div class="code-example"> <pre><code>npm install simplegrid-css</code></pre> </div> <p>Затем импортируйте в ваш проект:</p> <div class="code-example"> <pre><code>import 'simplegrid-css/dist/simplegrid.css';</code></pre> </div> </section> <section id="basic-template"> <h2>Базовый HTML шаблон</h2> <p>Скопируйте этот код чтобы начать новый проект:</p> <div class="code-example"> <pre><code><!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="simplegrid.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-12"> <h1>Привет, мир!</h1> <p>Мой первый проект с SimpleGrid</p> <button class="btn btn-primary">Нажми меня</button> </div> </div> </div> </body> </html></code></pre> </div> </section> <section id="customization"> <h2>Кастомизация</h2> <p>Вы можете легко изменить переменные фреймворка под ваш проект:</p> <h3>Использование SCSS переменных</h3> <div class="code-example"> <pre><code>// Создайте файл custom.scss @import 'simplegrid/src/simplegrid'; // Переопределите переменные $primary: #ff6b6b; $secondary: #794afa; $font-family-base: 'Inter', sans-serif; // Импортируйте оригинальный фреймворк @import 'simplegrid/src/simplegrid';</code></pre> </div> <h3>Основные переменные для кастомизации</h3> <div class="code-example"> <pre><code>// Цвета $primary: #007bff; $secondary: #6c757d; $success: #28a745; // Типографика $font-family-base: 'Segoe UI', sans-serif; $font-size-base: 1rem; // Сетка $grid-columns: 12; $grid-gutter: 15px;</code></pre> </div> </section> <section id="build-tools"> <h2>Инструменты сборки</h2> <p>Если вы хотите собрать фреймворк из исходников:</p> <h3>Клонирование репозитория</h3> <div class="code-example"> <pre><code>git clone https://github.com/yourusername/simplegrid.git cd simplegrid npm install</code></pre> </div> <h3>Доступные команды</h3> <div class="code-example"> <pre><code># Разработка с отслеживанием изменений npm run watch # Сборка для разработки npm run build # Сборка для продакшена npm run build:min # Запуск документации локально npx serve docs</code></pre> </div> <h3>Структура проекта</h3> <div class="code-example"> <pre><code>simplegrid/ ├── dist/ # Скомпилированные файлы ├── src/ # Исходные SCSS файлы ├── docs/ # Документация ├── examples/ # Примеры использования └── package.json # Конфигурация проекта</code></pre> </div> </section> <section id="next-steps"> <h2>Следующие шаги</h2> <div class="row"> <div class="col-md-4"> <div class="example-preview text-center"> <h4>Изучите компоненты</h4> <p>Ознакомьтесь со всеми доступными компонентами</p> <a href="index.html#components" class="btn btn-outline-primary">Компоненты →</a> </div> </div> <div class="col-md-4"> <div class="example-preview text-center"> <h4>Примеры</h4> <p>Посмотрите готовые примеры макетов</p> <a href="examples.html" class="btn btn-outline-primary">Примеры →</a> </div> </div> <div class="col-md-4"> <div class="example-preview text-center"> <h4>Кастомизация</h4> <p>Настройте фреймворк под ваш проект</p> <a href="customize.html" class="btn btn-outline-primary">Кастомизация →</a> </div> </div> </div> </section> <div class="alert alert-info"> <strong>Нужна помощь?</strong> Создайте issue на <a href="https://github.com/yourusername/simplegrid/issues">GitHub</a> или напишите на email. </div> </div> </div> </div> <footer style="background: #f8f9fa; padding: 3rem 0; margin-top: 4rem;"> <div class="container text-center"> <p>© 2024 SimpleGrid. Создано с ❤️ для веб-разработчиков.</p> </div> </footer> </body> </html>