LINUX.ORG.RU

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

 , ,


0

3

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

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



Последнее исправление: CrX (всего исправлений: 1)

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

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

Bfgeshka ★★★★★
()

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

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

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

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

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

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

Jullyfish
() автор топика
Ответ на: комментарий от 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
() автор топика
Ответ на: комментарий от Jullyfish

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

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

maxcom ★★★★★
()
Ответ на: комментарий от 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
()