LINUX.ORG.RU
Форум — Development  

Базовый минимум html, css без js для пк/смартфона/TUI

 , ,


0

3

linux.org.ru, к примеру, хорошо выглядит как и в консольном браузере, как и на ПК, так и на смартфоне даже с отключенным js.

Есть какой-то небольшой набор базовых правил, чтобы всё было так аккуратно? Хочу себе на сайте также.

★

Последнее исправление: CrX (всего исправлений: 1)
← Zig 0.16 - async здорового человека
В LLVM 23 удалены опции оптимизации Os и Oz →

Особенность ЛОРа в том, что он очень сильно полагается на текст. Здесь картинок очень мало и их можно спокойно убрать.

kaldeon ★★
()
Ответ на: комментарий от kaldeon

он очень сильно полагается на текст. Здесь картинок очень мало

Ну-с, я и не планирую много картинок. Так что вопрос всё ещё актуален.

Jullyfish ★
() автор топика

Если сильно не мудрить со всякой эзотерикой в стилях, городить ветвисто дивы и фреймы, либо же слишком полагаться на жс, то должно сильно помочь с рендерингом в браузерах попроще.

Ну и хтмл код можешь посмотреть для ознакомления - структура страницы легко читается человеком.

Bfgeshka ★★★★★
()

Хочу себе на сайте также.

А наполнение сайта как делается, на чистом HTML?
Я бы предложил использовать Markdown и какой-нибудь генератор статических сайтов.
Или, если сервер позволяет, использовал бы Fossil. Там можно отключить всё лишнее.

dataman ★★★★★
()
Последнее исправление: dataman (всего исправлений: 2)
Ответ на: комментарий от dataman

А наполнение сайта как делается, на чистом HTML?

Нет, использую ThalassaCMS, там через CGI всё генерируется.

Все шаблоны, которые там прилагаются, к сожалению, на смартфоне не очень, хотя, в общем, по виду блоков (темы, комментарии, менюшки) не сильно отличается от LOR’а. Мне кажется для этого надо как-то css ковырять и правильно сделать div’ы, но не знаю с какого края за это схватиться. А в интернете слишком много всего. А LOR визуально выглядит идеально.

Jullyfish ★
() автор топика

Гуглить по словам адаптивная верстка, медиа запросы, css flex, css grid.

hippi90 ★★★★★
()
Ответ на: комментарий от Jullyfish

Я эту проблему попробовал решить, вписав в [html] в base/base.ini

shortheader = <?xml version="1.0" encoding="%[opt:site:enc]"?>
+...
+<meta name="viewport" content="width=device-width, initial-scale=0.7">
+...
+</head> <body %1%>

Ну и можешь варьировать initial_scale.

Как делать это нормально - хз.

rOgret
()

На l.o.r я давно пользуюсь принципом “mobile-first”, т.е. сначала делается базовая верстка под мобильник. Потом CSS с media запросами, который позволяет лучше использовать место на планшетах и десктопах.

Основной инструмент позиционирования элементов — CSS Grid.

maxcom ★★★★★
()
Ответ на: комментарий от maxcom

сначала делается базовая верстка под мобильник

А как проверяете? На моём смартфоне сайт относительно нормально открывается, а вот товарищ на своём открывал и прям всё мелкое…

Потом CSS с media запросами

Выглядит как нечто страшное и новомодное. Без него сильно хуже?

Основной инструмент позиционирования элементов — CSS Grid.

Понял, принял. Буду смотреть в эту сторону, благодарю!

Jullyfish ★
() автор топика
Ответ на: комментарий от rOgret

Я эту проблему попробовал решить, вписав в [html] в base/base.ini

Вроде на такое автор ругается и говорит использовать local.ini.

А какой шаблон используете?

Jullyfish ★
() автор топика
Ответ на: комментарий от Jullyfish

А как проверяете? На моём смартфоне сайт относительно нормально открывается, а вот товарищ на своём открывал и прям всё мелкое…

В основном в эмуляции мобильника в chrome dev tools, финально еще смотрю на личных устройствах.

maxcom ★★★★★
()

Правило простое, верстай как текст, а не как гуй софтины.

ya-betmen ★★★★★
()
Ответ на: комментарий от Jullyfish

Выглядит как нечто страшное и новомодное. Без него сильно хуже?

Без них нужна более простая верстка. Ну или еще можно использовать CSS Flex, но будет меньше контроля над тем, как это на разных разрешениях выглядит.

maxcom ★★★★★
()
Ответ на: комментарий от Jullyfish

Вроде на такое автор ругается и говорит использовать local.ini.

Ну, там некоторые вещи без редактирования base/* не сделать. Например, все шаблоны поддерживают только один pageset, для которого можно делать комментарии - pages. Ну и пришлось переписать парочку файлов, чтобы добавить поддержку нескольких. Мне пока лень узнавать у автора почему он сделал, так, как сделал, ну а просить его бросить все и пойти править все эти файлы не хочется.

А какой шаблон используете?

Использую smoky и woodpecker. Желания писать свой шаблон пока не появилось, поэтому я просто взял готовое и немного поменял под свои нужды.

rOgret
()
Ответ на: комментарий от rOgret

Например, все шаблоны поддерживают только один pageset

Ну и пришлось переписать парочку файлов, чтобы добавить поддержку нескольких.

Опа. Т.е. вы сделали эти pageset’ы и можно делать комментарии не только в pages?

Jullyfish ★
() автор топика
Ответ на: комментарий от Jullyfish

Сделал, но очень костыльно.

По-хорошему хотелось бы задавать табличку, аналогичную mainmenu, в которой бы указывались id, name, src, uri у pageset’ов, но это надо уже саму талассу менять и тут точно лучше написать об этом автору.

Могу скинуть куда-нибудь свой шаблон. Либо всё-таки напишу автору о pageset’ах.

rOgret
()
Ответ на: комментарий от rOgret

Про pageset он скорее всего знает, т.к. я его спрашивал как сделать комментарии на страничках my.site.net/path1/ my.site.net/path2, оказалось, что это как-то не тривиально и решили не заморачиваться.

Наверное, хороший вариант будет, это скинуть правки (хоть и кривые) base/base.ini туда в гостевую.

Jullyfish ★
() автор топика

linux.org.ru, к примеру, хорошо выглядит как и в консольном браузере, как и на ПК, так и на смартфоне даже с отключенным js.

Неистово плюсую. А если ещё и отображение аватарок отключить – так вообще совершенная строгость будет. (К сожалению, как модератор я себе этого позволить не могу.)

hobbit ★★★★★
()
Ответ на: комментарий от Jullyfish

Выглядит как нечто страшное и новомодное. Без него сильно хуже?

Сейчас это норма. Даже если не использовать «дуализм меню», «сокращение контента» (сокрытие блоков) и т.п.

Аккуратности можно добиться даже «на float-ах». Вопрос в том, что вы вкладываете в это слово. По-моему, вопрос в стартовом посте не раскрыт.

estic
()
Ответ на: комментарий от Jullyfish

Нет, использую ThalassaCMS, там через CGI всё генерируется.

Для любой нормальной CMS, точнее ее «головной» части (фронтальной части сайта/сервиса), если речь о «монолите», можно добавить «свой» шаблон (тему оформления). За основу берется готовый «HTML-шаблон» или создается новый (под заказ и т.п.).

estic
()
Ответ на: комментарий от Jullyfish

ThalassaCMS

Generates static HTML

хоть и

provides interactive features implemented fully server-side

Даже при использовании JAM-стека генераторы статических сайтов имеют много недостатков.

estic
()
Ответ на: комментарий от estic

Сейчас это норма.

Сейчас много чего ужасного в норме. Это не аргумент.

Вопрос в том, что вы вкладываете в это слово. По-моему, вопрос в стартовом посте не раскрыт.

Хороший вопрос. Честно, не знаю как это подробнее раскрыть. И, в любом случае, в какую сторону смотреть (css grid) мне указали.

Jullyfish ★
() автор топика
Ответ на: комментарий от Jullyfish

И, в любом случае, в какую сторону смотреть (css grid) мне указали.

Вам не только на это (css grid) указали. viewport, media queries, etc. - это все сопутствующие технологии. А для grid-макетов альтернативными можно считать flex(box), float-ы и т.п. «И т.п.» можно отбросить, т.к. верстка на основе таблиц - это прошлый век в прямом смысле слова.

estic
()

Использовать только спецификацию html5. Не смешивать спецификации html4 и html5. Стараться избегать тегов типа frame. (хотя по мне в нем нет ничего плохого, но где-то читал про такую рекомендацию) Допустим, использовать только div, не использовать td (таблицы, раньше были такие рекомендации). Но вроде как сейчас можно смешивать: класть div внуть table и т.д. И прочее. Об этом можно почитать. Использовать минимум тегов, цветов. Изначально упростить разметку. Использовать utf-8. Использовать тег viewport для адаптации. Вот моя ручная разметка: http://i92625up.beget.tech/news.php?p=13 Минимум кода.

Изначально настроить себя на философию того, что:

  1. Сайт должен быть прост, без сложного дизйана.
  2. Иметь минимум цветов.
  3. Цвета должны сочетаться между собой.
  4. Не раздражать и не утомлять зрение.
  5. Должна быть простая разметка с простыми тегами. https://html.spec.whatwg.org/multipage/introduction.html

Я учился по этому учебнику Владимира Городулина: http://iomas.vsau.ru/edu/html/book/html.html

Считаю его очень полезным. Но, наверное, он устарел.

Стоит проверять код валидтором: https://validator.w3.org/

AnonymUser ★
()
Последнее исправление: AnonymUser (всего исправлений: 3)
Ответ на: комментарий от AnonymUser
  1. Цвета должны сочетаться между собой.

Хех, у меня всегда вырвиглазно получается, чтобы я не делал. На текущий момент пришёл к сочетанию цветов #000000 для задника и #D78100 для цвета. Так у меня в терминале и на сайте.

Я учился по этому учебнику Владимира Городулина

За учебник спасибо, выглядит интересно.

Но, наверное, он устарел.

Я в этом вижу только преимущества.

Jullyfish ★
() автор топика
Ответ на: комментарий от Jullyfish

Те рекомендации, что я читал, были примерно такие (на тот момент 2000-е):

  1. не смешивать стили версии html.
  2. разделять по возможности код вёрстки и программный код.
  3. подбирать цвета для комфортного зрения (тут начинаешь ценить знания художников и искусствоведов).

Не смешивать div и table, похоже, в 2026 устаревшее правило, так как вроеде бы div внутри table используется для адаптивной вёрстки (даже у себя в коде нашел такое).

P.S. Когда работаешь с цветами, обычно хочется сделать так, как тебе кажется в данный момент привелекательным. Восприятие - относительно субъективная штука. Лучше учитывать то, что сайт больше будешь смотреть не ты, а пользователи.

Можно таких художеств накрутить, и они будут автору нравится (как творец любит своё творение), но окружающие будут в мягком шоке.

P.P.S. Дизайн, имхо, наглядный пример того, как один и тот же человек в силу своих убеждений может создать или рай или ад.

AnonymUser ★
()
Последнее исправление: AnonymUser (всего исправлений: 2)
← Zig 0.16 - async здорового человека
Development
В LLVM 23 удалены опции оптимизации Os и Oz →
  • Markdown
Пустая строка (два раза Enter) начинает новый абзац. Знак '>' в начале абзаца выделяет абзац курсивом цитирования.
Внимание: прочитайте описание разметки Markdown.
Используйте Ctrl-Enter для размещения комментария