- 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 Vostckowa
Занимаюсь фотографией и дизайном продолжительное время. Как и многие, столкнулась с распространенной проблемой: достойную оплату труда предлагают, в основном, зарубежные заказчики. В рунете почти никто не покупает, большая часть покупок идет из-за бугра. Да что рассказывать, и сами все знаете. Поэтому возникла идея создать своеобразный «мостик» между нашими русскими дизайнерами и иностранными заказчиками – площадку, где можно продать свои работы.
В результате получился вот такой ресурс: gfx-market.com. Предусмотрели два языка – русский и английский. Этим, собственно, сайт отличаются от других подобных ресурсов. Хотелось, чтобы наши дизайнеры могли легко находить зарубежных заказчиков и показывать миру свои графические работы. Английский язык не будет барьером. Ну, а заказчики, благодаря английскому, тоже смогут запросто общаться со специалистами. Т.е. ресурс направлен и на наших, и на иностранцев – на всех.
Идею ресурса помогали реализовывать несколько знакомых. Теперь прошу помощи у вас – поддержать мое начинание. Может быть, вы делаете дизайн шаблонов, флаеры и баннеры, создаете шрифты, делаете логотипы или этикетки. Одним словом всех, кто создает качественную графику, предлагаю к нам присоединиться и вместе развивать ресурс. По нашей задумке, графические работы будут продаваться иностранцам. Почти на 100% уверена, что это положительно отразится на продаже товара. Хотя бы потому, что платежеспособность иностранцев повыше. На сайте можно будет просматривать как последние загруженные файлы, так и самые популярные. Думаю, это поможет каждому найти своего покупателя.
По поводу стоимости: вы можете самостоятельно регулировать цену на графический товар. Посчитали, что это будет лишним стимулом для роста каждого из нас как профессионала. Каждый может постепенно повышать стоимость своих работ. Ну, или сразу ставить высокую цену, если работаете в этой сфере не первый год или чувствуете в себе силы заинтересовать потенциальных покупателей. Можно продавать все, что вы умеете делать в разных программках вроде Phtoshop, Illustrator, Lightroom и прочих.
Вопрос по выводу средств тоже решался максимально в пользу наших пользователей. Для любой версии сайта (на английском и на русском) можно выводить заработанные деньги на Skrill, PayPal и Webmoney. Для многих пользователей рунета, думаю, удобно, что можно выводить деньги не только на Webmoney. В дальнейшем для русской версии ресурса планируем добавить дополнительные способы вывода средств. От продажи своего товара вы получаете 75-85%, оставшиеся идут на развитие системы. Минимально можно выводить от 10$.
Понимаю также, что у всех исполнителей разный уровень. Поэтому есть как «плюшки» для лучших авторов – специальный топ, где вас быстро увидят заказчики, так и возможности для начинающих. Т.е. миссия ресурса – повышать уровень профессионализма наших дизайнеров и дать возможность реализовать свои мечты. Есть учебник – пользуйтесь, на здоровье! Также советую заглянуть на форум. На нем мы решили объединить всех участников ресурса – как продавцов, так и покупателей.
В общем, будем очень рады вашим предложениям и идеям. При создании ресурса старались сделать его максимально простым и удобным, чтобы акцент был на ваших работах. Лишних пунктов в меню нет – только самое главное. Ну, и цветовая гамма соответствующая. Предложениям по сайту будем рады. Вместе с командой постараемся реализовать толковые идеи. Ну, и заходите на огонёк. Сейчас, пока ресурс только начинает развиваться, надеюсь на поддержку.
-
-
By something more
Граждане разработчики!
Предлагаю объеденить усилия во имя общего блага! Я рисую — вы верстаете. В итоге — в два раза больше заказов, в два раза больше прибыль, обмен опытом и плюшки* (акция на плюшки ограниченна).
Рассмотрю все ваши предложения! Связаться со мной очень легко, написав в ЛС,
Телеграмм: @something_more ( https://t.me/something_more )
email: mganchenko@gmail.com
Skype: green_mish
Да прибудет с вами валидный код!
-
By d0ublezer0
Привет!
https://www.zebra-tara.ru/about
Внизу есть кнопка [Cкопировать], на неё навешен такой код:
var $j = jQuery.noConflict(); $j("#legal-copy").on("click", function (e) { var text = $j("#legal-info").text().trim(); var $scroll = $j("window").scrollTop(); var temp_element = $j('<textarea>').appendTo("#legal-copy").val(text).select(); $j("window").scrollTop($scroll); document.execCommand('copy'); temp_element.remove(); $j(this).text("Скопировано").prepend("<i class='fa fa-check-circle'></i> ").addClass("green-btn"); }); Как ни бьюсь - не удается избавиться от прокручивания к создаваемому элементу textarea в мобильном браузере. Он получает :focus и мобильный браузер прокручивает страницу.
Добавка ScrollTop мне не помогла
Как выкрутиться?
-
-
Обсуждения
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок 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
Alarr
Люди добрые, подскажите, почему дизайнеры делают макеты мобильной версии начиная с 750 пикселей, с огромными шрифтами и картинками? Но при этом, хотят чтобы оно всё круто выглядело на 320px.
Как же правильно делать, дизайн на 320, а потом пускай расширяется? Или 750, а верстальщик пускай сам придумывает, как оно будет сжиматься до 320, и расширяться до 980ти?
Как правильно делать дизайн мобильной версии, с какой шириной?
Link to comment
Share on other sites
5 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.