Jump to content
  • Sign Up

Новенький VPU дизайн


Recommended Posts

Я доработал идею дизайна и верстки без использования media queries исключительно на view port units.

 

Вот что получилось: https://revolvercmf.ru/

 

У сайта как таковой мобильной версии нет. Я просто использовал CSS 3 calc() и CSS 4 variables. Получилось не плохо и дизайн смотрится идентично на разных разрешениях экрана. PX и EM в архитектуре дизайна не используются вообще, а кроме того не использован сложный flex-box. Используются %, vw и vh. Прошу оценить верстку, интерфейс и дизайн(это основная тема оформления моего open source contents management framework).

Вот статья про VPU scalable  interface на английском:

https://revolvercmf.ru/en-US/vpu-intreface-scale-factor/

 

Edited by Full-R
Link to post
Share on other sites

Я оптимизировал верстку, но на CSS зависли 80 иконок для интерфейса в SVG завернутые в base_64. Применять их пока некуда, но может пригодятся. 

 

Вот что у меня получилось по результатам:

 

Отчет GT Metrix по оптимизации front-end в RevolveR CMF

 

security-headers-check-revolver-CMF.jpg

 

Я не знаю как победить Google Page Insights - он как будто игнорирует все хорошие манеры оптимизации специально. У меня сделан preload на графику и lazy load одновременно, а Google штрафует меня за анимацию загрузки контента и готовности DOM. Это не справедливо. В то же время GT Metrix, который использует тот же page insights показывает показатели 98%.

Подскажите что еще можно оптимизировать?

 

Edited by Full-R
Link to post
Share on other sites

Я убрал из стилей все статические величины. Больше нет ни каких PX, EM, PT и так далее. У прототипа VPU интерфейса работают только view port юниты и проценты. Шрифты выполнены также в VPU.

Вот  скриншоты работы прототипа при разных размерах окна браузера и в разрешениях 1024x768 и 1600x900. Также VPU интерфейс будет отлично смотреться на экранах 4k и 8k. Теперь сайты не будут слишком мелкими или вылазящими за пределы окна  браузера с горизонтальной прокруткой.

 

VPU-scale-interface-1.thumb.jpg.49406a09b1840e68be345b6ff32a7661.jpgVPU-scale-interface-1024.thumb.jpg.4daa9a2ad0cbead7031918cc9af6c7fc.jpgVPU-scale-interface-1600.thumb.jpg.21d7330e5653e08261f967889f1da0c3.jpg

 

Считаю, что интерфейсы основанные на View Port юнитах являются будущим верстки в свете непрерывного роста разрешений экрана устройств просмотра, а также великолепно оптимизируются под мобильные устройства. Пора media queries на свалку истории.

Edited by Full-R
Link to post
Share on other sites

Сделал переключение цвета в ночной режим автоматически с 20:00 до 8:00. Работает противоположный часовой пояс для стимуляции жизни 🙂 Что можно улучшить?

Тема теперь написана полностью на CSS variables и она является частью framework. Теперь можно почти не верстая получить свое оформление поменяв variables(их 40 для настройки цветов и оттенков). Я не могу себе позволить делать бесплатные разнообразные шаблоны так как это мой хлеб(система и так бесплатная). Если кому надо  пусть сами верстают и все переделывают под себя. Я думаю вынести эти vars в базу данных и сделать color picker'ы для того, чтобы настраивать дизайн.

 

NoGJ9yozwRk.thumb.jpg.c2c943e228b584855bfae0f1c567961c.jpg

 

lIQOr0InYMM.thumb.jpg.db3c4dac245bcfbd6aa7b9638bec6741.jpg

p.s.: форум какой-то мертвый стал.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Member Statistics

    47,173
    Total Members
    1,451
    Most Online
    ratus
    Newest Member
    ratus
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Свежие Темы

  • Последние сообщения

    • klierik
      В случае, когда используется float, margin работает как и прежде. Но, визуально, может казаться что это не так. Дело в том, что в таком случае блоки не имеют аналогичного влияния друг на друга из-за обтекания (float). Вот приблизительно то, о чём Вы говорите https://jsfiddle.net/klierik/bw418vqt/2/
    • denis_alekss
      Вот еще вариант один:   <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <script> let Person = function Pers(name, age, gender) { // Имя будет Pers this.name = name; this.age = age; this.gender = gender; }; Person.prototype.greet = function () { console.log("My name is " + this.name); } let Person2 = Person; Person2.prototype.goodbye = function () { console.log("Goodbye, " + this.name); } let Son = function (age, skils) { // Имя будет Son // Родительский конструктор вызывается до дочернего конструктора, // чтобы не было перезаписывания новых полей. Person.call(this, undefined, age, undefined); this.skils = skils || []; this.gender; } let Sunny = Son; Sunny.prototype = Object.create(Person.prototype); Sunny.prototype.constructor = Sunny; // Имя будет Son let a = new Person("Петя", 25, "female"); console.log(a); console.log(a.constructor.name); let b = new Son(18, ["рисует", "поет", "водит"]); console.log(b); console.log(b.name); </script> </body> </html>   Задался еще таким вопросом. Я передал аргументы конструктору Person создав объект а,   let a = new Person("Петя", 25, "female");  а как получить эти значения объекту b и вывести? Если написать так:     console.log(b.name);  получим undefined при выводе, а мне к примеру нужно унаследовать от родителя эти значения name, age, gender и вывести через потомка. Метод call дал возможность greet вызвать саму себя?
    • Full-R
      HTML элемент input должен содержать атрибут type: Атрибут type | htmlbook.ru
  • Popular Contributors

×
×
  • Create New...