Верстка макета из Figma в XHTML + PrimeFaces + JavaServer Faces
Нужна качественная адаптивная + кроссбраузерная верстка
Макет: https://www.figma.com/file/F9N18MbDtHrSBYTaON0ftB/naVse
Технические требования для разработки верстки макета.
В связи с тем, что проект использует за основу фреймворк PrimeFaces (https://www.primefaces.org/) в дальнейшем PF и реализует в себе разметку JSF (https://uk.wikipedia.org/wiki/JavaServer_Faces, https://www.tutorialspoint.com/jsf/) есть ряд ограничений.
Макет.
- Верстку необходимо делать с учетом используемых компонентов PF см. документацию (https://www.primefaces.org/showcase/).
- Максимально использовать компоненты PF
- Важно! Изменять визуальное отображение PF компонентов по крайней необходимости.
- Использовать составные компоненты <ui:composition xmlns="http://www.w3.org/1999/xhtml" …> если это не главный шаблон.
- Отдельный компонент в отдельном файле.
- Все компоненты инклудить в мастершаблон <ui:include src="/components/[component_name].xhtml" />
- Описывать namespace в компонентах
<html xmlns:f="http://java.sun.com/jsf/core", xmlns:ui="http://java.sun.com/jsf/facelets", xmlns:p="http://primefaces.org/ui" …> - Использовать разметку XHTML
- Создать грамотную структуру папок проекта
- Минимум элементов, которые потребуют создания графических файлов
Стили.
- Использовать CSS-препроцессоры Sass (SCSS) (https://sass-lang.com/documentation).
- Разделить сущность на:
- Константы (constants.scss)
- Функции (functions.scss)
- Миксины (mixins.scss)
- Плэйсхолдеры (placeholders.scss)
- При стилизации компонента страницы учитывать вес селекторов.
- Верстку разделять на отдельные компоненты.
- Для media запросов использовать breakpoint system проекта:
- xxs: 320px;
- xs: 480px;
- sm: 640px;
- md: 768px;
- lg: 960px;
- xl: 1200px;
- xxl: 1440px;
Скрипты.
- Использовать модульный подход.
- Отдельный модуль в отдельном файле.
- В проекте подключен jQuery 3.5.1 использование $() допускается.
- Максимально не вмешиваться в работу встроенного компонента сторонними скриптами.
Компоненты PF используют логику работы описанную в Core PF
Шрифт.
- Важно! Использовать шрифт проекта Montserrat, sans-serif
- Важно! Использование стороннего шрифта не допускается.
Иконки, элементы навигации.
- Все иконки в макете должны соответствовать общепринятым размерам (16х16, 24х24, 32х32, 48x48 и т.д. кратность 8).
- Все иконки должны быть в формате .SVG. В 100% размере с оригиналом в макете
- Элементы навигации типа стрелок, иконок в отдельном .SVG формате на прозрачном фоне.
- По максимум использовать формат .SVG для оформления
Сборщик.
Сборка проекта производится под средством webpack 4.41.2
Материалы.
Минимальный комплект материала для передачи верстальщику
- Папка с компонентами содержащая XHTML файлы
- Папка с графическими материалами
- Папка SRC содержащая папки стилей и скриптов исходных файлов сборки такие как SCSS, JS
- Папка собранного проекта после обработки сборщиком.
Applications 1
-
12 days200 USD
1547 23 0 12 days200 USD
Здравствуйте! Меня заинтересовало Ваше предложение. Примеры работ http://www.victoryzorkina.pl.ua/ .Точные сроки и стоимость смогу сказать после обсуждения всех деталей. Пишите, буду рада сотрудничеству.
-
7 days111 USD
1144 39 3 4 7 days111 USD
Добрый день!
Сейчас свободный, готов выполнить ваш проект, пишите в личные сообщения - обсудим.
Также можете посмотреть портфолио выполненных робот, на моем сайте.
https://web-shum.com.ua/portfolio.html
-
12 days223 USD
2276 114 1 12 days223 USD
Здравствуйте. Специализируюсь на адаптивной верстке.
Создаю чистый, валидный, компактный и кроссбраузерный код
(scss+gulp, flexbox, оптимизация по google page speed, валидация, настройка форм, анимации и тд).
Работы в портфолио профиля. Буду рад сотрудничеству.
////////////////////////////////
Current freelance projects in the category HTML & CSS
Moved the website from OpenCart to the Khoroshop platformHello. There is a website on OpenCart, an online store. It is necessary to transfer the structure of the site to the GoodShop platform, select a design for the new site, and make it fully functional. HTML & CSS, Web Programming ∙ 15 hours 48 minutes back ∙ 25 proposals |
Need a strong WordPress / WooCommerce specialist for the refinement of the MARSPRO website.We are looking for a responsible freelancer or a small team for the quality completion and technical refinement of the MARSPRO company website. The website is already operational, but there are many minor and significant technical issues left by the previous developer. We need a… Content Management Systems, HTML & CSS ∙ 1 day 16 hours back ∙ 43 proposals |
Sandra Ice Cream - Kaleidoscop
92 USD
We have a small project, and we would like to know if you can prepare a video for us for an LED screen. The video will be used at our event. We will provide all necessary materials: design, brand book, dimensions, and technical requirements. Please let us know if you are… HTML & CSS ∙ 1 day 17 hours back ∙ 7 proposals |
WordPress block layoutHello. We need to do a redesign, specifically the layout of the blocks as shown in the mockup. The structure is not very different from what is currently done, except for the header and hero block. We need to redesign both the mobile and desktop versions. The website is on… HTML & CSS, Website Maintenance ∙ 1 day 22 hours back ∙ 68 proposals |
Development of a website according to the specifications on FramerYou need to create a website based on the parameters in the technical specification. https://docs.google.com/document/d/1ODO2C9Krb4AaMiJz9wfbNzWlAyA2FwCCHL8r0biajUY/edit?usp=sharing Please provide your actual rate based on this design. HTML & CSS, Javascript and Typescript ∙ 1 day 23 hours back ∙ 26 proposals |
Kyiv