- 0
-
Similar Content
-
By Full-R
В общем свежая безумная идея сделать интерфейс на VPU(view port units) таким образом чтобы избежать media queries.
Сейчас сделано определение мобильной версии браузера и на CSS4 vars сделаны переключатели масштаба элементов интерфейса.
Поскольку дизайн полностью масштабируется под размер окна и не нужны ни какие костыли и сетки, я хочу добавить в свой фреймворк такую опцию, как автоматическая генерация Android приложения, которое бы работало на Web View. У нас уже везде webkit и можно было бы сделать заготовку приложения, которая бы скрывала строку ввода адреса браузера, но оставляла возможность поменять URL, на который обращается приложение.
Я не пишу под андроид и мне бы очень не помешал пример такого приложения с возможностью на сервере через PHP поменять иконку и URL.
Интерфейс у меня написан полностью динамический на ECMA Script fetch и вместе с SVG графикой весит примерно 300Кб не сжатого сервером кода, что гораздо лучше, чем разрабатывать отдельное приложение для mobile web.
Мой проект RevolveR CMF: https://revolvercmf.ru/ (сайт сообщества, на котором пока ни чего нет - просто чтобы протестировать интерфейс на VPU и SPAx).
Видео обзор системы:
Дистрибутив для установки вот здесь: https://github.com/Full-Rx/RevolveR-framework/releases/tag/1.9.2.x
Группа на facebook тут: https://www.facebook.com/groups/331465761595917
Фреймворк позиционируется, как замена Drupal и предоставляет широкий спектр функций для создания сайта сообщества.
Интерфейс написан самостоятельный с чистого листа на ECMA Script 7, а backend реализован на PHP SPL 7.4. Для базы данных реализован мощный кэш с шифрованием и система оптимизирована под высокие нагрузки.
Сам интерфейс легко меняется с помощью CSS, что позволяет не сильно модифицировать шаблон при создании своей темы оформления.
Хочу подсказать как лучше реализовать View Port Unit интерфейс, который сейчас работает через calc просто подменяя значение переменной для масштабирования элементов под мобильные устройства. Дело в том, что сейчас уже не нужны ни какие media queries и grids(сетки), а также нет нужды во flex-box так как VPU прекрасно позволяют реализовывать интерфейс для любых дисплеев так, что он смотрится одинокого, как это сделано в операционной системе Windows, например.
Давайте покумекаем, как мы можем это использовать для современных интерфейсов, чтобы сэкономить себе время на создание верстки и дизайна. Мне кажется моя идея выгорает хотя бы экономией времени и денег на создании мобильного приложения.
-
By fcobra
Ищется верстальщик/фронтенд разработчик (HTML, CSS, JS) на новый проект. Работа сдельная.
Необходимые навыки:
- верстка адаптивного и отзывчивого дизайна (HTML5, CSS3, JS);
- установка и настройка стандартных jQuery (1.11+) плагинов;
- разработка JS при отсутствии подходящих плагинов (не обязательно, можем сделать сами).
Работа удаленная. Связь Skype, WhatsApp, Telegram.
Ориентировочный бюджет: до 50 000 рублей за проект.
Обязанности: сверстать frontend на основе шаблона в PSD и прототипа в Axure. Важно соблюдать указанные Вами сроки (либо заблаговременно предупреждать об их изменениях) и точность верстки. Не пропадать.
График работы: свободный график.
Писать на почту post@clubok.ru или Skype: autonet.ru, Всеволод.
-
By cyklop77
помогите пожалуйста поправить табы от бутстрапа3
в этом примере при уменьшении ширины окна вкладки выстраиваются в несколько этажей. мне же хотелось бы чтобы они всегда состояли из одного этажа, но имели возможность прокручиваться по горизонтали(это умеют табы от ng-material)
это мне нужно чтобы сделать трёхуровневые табы. для них критично чтобы каждый уровень состоял строго из одного этажа
-
By d0ublezer0
Привет!
Есть вот такая страница с фотками: http://apriori.leveler.ru/apriori/fotogalereya.html
Хотелось отойти от скучной сетки и для равномерного заполнения листа объектами я использовал FreeWall
Он изменяет размеры и расположение элементов для равномерного заполнения листа. Адаптивный.
Но он, гад, безбожно тормозит. Хотя на демосайте у них всё хорошо.
Вопрос - он ли тормозит? И как можно ускорить первоначальную прорисовку?
Может, есть более интересные альтернативы?
PhotoWall я пробовал - почему-то не подружились. Надо передавать массив картинок в JSON, мне это не оч удобно. да и ошибки в нем, не смог исправить
-
By noname1
Подскажите, пожалуйста, как привязать Easing эффекты на dropdown-menu?
Меню на основе http://geedmo.github.io/yamm3/
-
-
Обсуждения
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } } -
Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок. -
By Katerina23 · Posted
Да, подходит. Спасибо. -
<input type="number"> -
By Katerina23 · Posted
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-
Question
Ateiri
Всем привет!
Опять взываю умы верстки! Решил сделать небольшое приложение, которое должно без проблем запускаться в IE7+ и других браузерах.
Решил использовать bootstrap для ускорения работы (на деле вру, но отступать уже поздно), ну и В общем то IE7, 8 в сторонке лежат и ножкой дрыгают, что делать господа? Выкладываю скриншоты и соус.
Предположим 3 колонки:
https://www.dropbox.com/s/2y4vusiie3vvkj3/%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82%202014-01-24%2010.44.07.png
А вот результаты IE7-8 и Opera:
https://www.dropbox.com/s/wfwr43v2hrb2563/%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82%202014-01-24%2010.44.18.png
https://www.dropbox.com/s/5f89m07ipo5a2fi/%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82%202014-01-24%2010.44.31.png
Изменили масштаб в Opera:
https://www.dropbox.com/s/60uiwmp49phzyip/%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82%202014-01-24%2010.44.34.png
Соус:
https://www.dropbox.com/s/4fqfp39c22hctou/%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82%202014-01-24%2010.45.19.png
Я пробовал html5shiv js, ie7 bootsrap fix css, respond js, boxsizing.htc, ничего не получилось
Link to comment
Share on other sites
4 answers to this question
Recommended Posts
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.