ids/layout-sample.html at main · intuition-tech/ids · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Intuition Design System Template</title>
    <link rel="icon" type="image/png" href="images/favicon-inverted.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="css/colors.css" />
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/settings.css" />
    <link rel="stylesheet" href="css/layout.css" />
    <link rel="stylesheet" href="css/ids.css" />
    <link rel="stylesheet" href="css/gallery.css" />
    <link rel="stylesheet" href="css/navbar.css" />
  </head>

  <body class="ids">
    <header>Что-то в хедере</header>

    <main>
      <div class="ids__wrapper">
        <div class="ids__space XL"></div>
        <div class="ids__text-width">
          <h1>Новая страница</h1>
          <p>Intuition Design System, IDS – дизайн-система для вёрстки лендингов, онлайн-изданий и любых цифровых продуктов для веба, в основе которых лежат нарративы. Технически IDS представляет собой набор CSS-классов и JS-компонентов, разработанных с фокусом на простоту использования и максимальную гибкость настройки. Это не библиотека в традиционном понимании, а готовый шаблон вёрстки, который можно адаптировать под любые потребности проекта. Основная философия IDS заключается в том, что разработчики и дизайнеры получают полный контроль над кодом без необходимости изучать сложную документацию или бороться с ограничениями фреймворка. Дизайн-система создана для тех, кто ценит прямолинейность подхода и хочет сосредоточиться на создании качественного контента, а не на преодолении технических препятствий. IDS идеально подходит для создания сайтов, где важна типографика, читаемость текста и логичная структура информации.</p>

          <p>Вы не подключаете IDS в проект как зависимость, не расширяете классы, не переопределяете свойства через сложные конфигурационные файлы. Вместо этого вы просто копируете исходный код дизайн-системы и меняете его как захочется, без оглядки на совместимость версий и без страха получить ломающие апдейты. Такой подход исключает проблемы с конфликтами зависимостей и позволяет полностью контролировать поведение каждого компонента. Если у вас нет навыков разработчика, простейший способ начать проект – скачать архив репозитория, открыть файл index.html в редакторе кода и смело делать из него что-то своё. Для разработчиков IDS предлагает полную свободу действий: система работает в статике, имеет ноль зависимостей и использует ванильный JavaScript, что обеспечивает максимальную производительность и совместимость. Вы можете взять только нужные части системы, модифицировать их под свои задачи или использовать как основу для создания собственной дизайн-системы.</p>

        </div>
        <div class="ids__space XL"></div>
      </div>
    </main>

    <footer>© 2025</footer>
  </body>
</html>