Как лучше всего делать статичный сайт-одностраничник в 2021-ом?

Всем привет.

Пусть я хочу сделать сайт, поясняющий как новый продукт устроен/работает. Текст, пара js-схем с разной степенью интерактивности, и контакт. Предельно кондовая задача.

Почему это не лендинг и почему я вообще задаю вопрос здесь? Потому что у сайта нет задачи быть продающим. Не думаем про воронку, про конверсию, сео и прочее. Сайт должен быть информативным в первую очередь. Т.к. ссылку на него я планирую давать клиентам напрямую.

Важен контент (например удобство встраивания анимированных SVG или чартов на d3/amcharts), адаптивность под устройства, и тот факт, что я хочу сделать таких сайтов много, переиспользовать элементы.

Держа в уме такие вводные - сабж - какие технологии рациональнее всего использовать?
Каждый отдельный сайт - небольшой. Насколько уместно использовать Uikit или Tailwind или это оверкилл? Мне нравится их изкоробочная адаптивность, но неужели чтобы эффективно пользоваться этими инструментами нужно как Нео помнить названия классов? Или расковыривать чужие проекты на детали? В отличие от ванильного CSS где под любую вёрстку есть вопрос на Stackoverflow - в случае с фреймворком нужно идти в официальные доки (ужас, не так ли?) и угадывать названия классов, если нужно сделать шаг влево или вправо от примера.

Есть ли годные WISYWIG-редакторы, генерирующие разметку под UiKit или Tailwind? Просто я с любопытством наблюдаю, как всё началось с написания сайтов в блоктноте, а кончилось... - написанием сайтов в блокноте, но с автокоплитом. А на дворе-то Figma.

Спасибо!
  • Вопрос задан
  • 514 просмотров
Решения вопроса 1
Zettabyte
@Zettabyte
Специалист по восстановлению данных
Возьмите какой-нибудь простой даже не framework, а т.н. "boilerplate", например:

Почти наверняка там внутри уже есть заготовки для всего, что вам потребуется. Даже раздувшийся в последнее время Bootstrap не будет нужен.

У Pure.css даже готовые шаблоны уже выложены: https://purecss.io/layouts/

Кстати из бонусов, такой сайт будет получать высокую оценку в google pagespeed и подобных сервисах.
Ответ написан
Пригласить эксперта
Ответы на вопрос 5
tundramani
@tundramani
сделай сайт в конструкторе
или стань программистом и тогда сам поймешь как делаются сайты
Ответ написан
Для простых сайтов есть конструкторы. Для более сложных - верстка руками. Для верстки есть инструменты упрощающие работу и разработку интерфейсов. Как раз упомянутые вами всякие UI киты и фреймворки. И так далее по нарастающей в зависимости от потребностей.
Ответ написан
saboteur_kiev
@saboteur_kiev
software engineer
Я не разработчик. Но парочку статик сайтов создал просто в текстовом редакторе, подгугливая CSS и JS решения без фреймворков и без библиотек.

Вопрос в том, как быстро и как часто надо сделать - если статичный простой сайт и разово, то проще сесть и за неделю-две-три сделать на чистом JS и CSS.
Ответ написан
dimon_durak
@dimon_durak
Дурак это не фамилия, дурак - это профессия
В 2021-ом для статического сайта лучше всего своя самделешная поделка.

Оно увлекает с самого начала, ведь надо выбрать UI, а это значит, что будет несколько вариантов готовых библиотек, что значит много чтения. Сначала документации, а лучше исходного кода, чтоб понять: как тебе удобнее собирать интерфейс?

Для начала, я могу порекомендовать раз, и два в качестве одного из ответов на вопрос "что выбрать" .
Ответ написан
NikitaTratorov
@NikitaTratorov
CTO
Мне кажется, что предлагаемые варианты не очень далеки от Bootstrap, но ни один не готов сравниться с качеством отладки адаптива и совместимости компонентов.
А если собирать Bootstrap со своими дополнительными стилями через webpack/gulp, то это даст не только возможность наделать своих компонент, но и собирать худой Bootstrap, не включая неиспользованные части в сборку.
Всё что будет клонироваться между проектами, это sass-файл с самописными компонентами и конфиг сборщика.
Это даже поддаётся автоматизации.

Еще лайвхак:
Компоненты можно писать используя комбинации нужных стилей BT через @extend
.study-container
  @extend .container-fluid
  @extend .p-0
  background: linear-gradient(to right, white 40%, #e5e5e5 60%)

.study-container_menu
  @extend .col-lg-3
  @extend .bg-white
  @extend .p-3
  @extend .p-lg-4
  @extend .pt-sm-4
  @extend .pt-lg-5

  a
    color: $gray-800
    @extend .d-block
    @extend .mb-3

    .iconify
      @extend .mr-2
      color: $color-primary

    &.active
      font-weight: bold
      color: $color-primary

  &:first-child.study-container_menu-block
    @extend .mt-0
    @extend .mb-0
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы