Фриланс: заказать «sass»

При использовании единиц измерения rem верстальщики зачастую выставляют базовый размер шрифта, равный 10 пикселям. В таком случае всё сводится к простым вычислениям, для которых не нужен калькулятор:
10px -> 1rem23px -> 2.3remи так далее.
Такой подход хоть и имеет право на существование, но связан с одной проблемой: браузеры позволяют выставлять минимальный размер шрифта в своих настройках. При этом он выставляется не для тега html, что позволило бы пересчитать все единицы rem на странице, а просто насильно увеличивается размер шрифта. Это приводит к порой страшным результатам, особенно, если стоит не стандартное значение свойства line-height. Слипшиеся строки вам гарантированы.
Если мы всё же хотим использовать единицы rem и при этом высчитывать значения от реального базового размера шрифта, то нам понадобится конвертер px в rem.
В этом задании вам необходимо написать функцию px-to-rem, которая принимает на вход значения в пикселях, а на выходе возвращает значение в rem. На вход функции может поступать любое количество значений, разделённых пробелом. Это позволит писать адекватный SASS код в тех свойствах, где может быть не одно значение.
Возвращённое значение из функции обязательно должно быть в виде строки. Это позволит при любом наборе данных иметь на выходе значения, которые имеют одинаковый тип данных.
Примеры
$rem-base: 16px;

.px-20 {
padding-left: px-to-rem(20px);
padding-right: px-to-rem(20px);
}

.card {
padding: px-to-rem(20px 15px 30px 45px);
}После компиляции должен получится следующий CSS код:

.px-20 {
padding-left: 1.25rem;
padding-right: 1.25rem;
}

.card {
padding: 1.25rem 0.9375rem 1.875rem 2.8125rem;
}ПодсказкиДля перевода значения в строку можно воспользоваться интерполяцией.Для деления используйте функции math.div() из пространства sass:math. Само пространство уже подключено в файле app.scss Свернуть

Мы агенство, которое фокусируется на разработке веб приложений и сайтов на основе javascript фреймворков. Ищем исполнителя для расширения команды.
Требования
- хорошие знания верстки (HTML, CSS, Sass, Less, styled-components)
- работа со сборщиками webpack, gulp
- react.js - умения написать хотя бы простое приложение с роутингом и stateless, statefull компонентами
- умение работать с git (ветки и PR)
- будет плюсом умение работать с другими АПИ и node.js - express

Описание задачи:
На данные момент нужно закончить наш менеджер задач. Сделан на React + Firebase. Сервер - node.js cloud functions.

Материалы по проекту - только после прохождения технического собеседования. Просьба прикрепить резюме к предложению.
Оплата по договоренности. Свернуть

Ищем Fullstack разработчика

Мы стартап в сфере финансовых технологий. Особенностью которого является несколько пользовательских интерфейсов и использование open banking. Помимо этого выполняем все стандартные банковские услуги: выпуск карты, транзакции, платежи, аналитика счета и многое другое.
В настоящее время на этапе тестирования, готовимся к запуску.

Что мы ждем от кандидата:
– Умение прогнозировать сроки выполнения поставленных задач;
– Навыки работы в изменяющейся среде, способность переключаться между задачами;
– Самостоятельность и готовность взять ответственность за целое направление продукта;
– Умение работать в команде, воспринимать конструктивную критику и чужие идеи;
– Английский язык на уровне чтения технической документации.

В знаниях Frontend ожидаем:
– Уверенные знания TypeScript;
– Хорошие знания модели событийного цикла (event loop);
– Опыт разработки SPA на React + Redux;
– Знание семантических элементов HTML5;
– Опыт кроссбраузерной адаптивной и отзывчивой верстки с использованием CSS3;
– Опыт использования SCSS / SASS / Less;
– Желательно (но необязательно) использование методологии BEM.

В области Backend:
– Опыт разработки на Node.js;
– СУБД (PostgreSQL), умение писать запросы без ORM;
– Желателен опыт использования ORM (Sequelize/TypeORM);
– Опыт разработки REST API с использованием ExpressJs.

Обязательно:
– Опыт работы с Git;
– Опыт работы с Docker.

Будет плюсом:
– Опыт работы с Kubernetes;
– Понимание процессов автоматизации CI/CD;
– Опыт работы с Linux;
– Привычка покрывать код unit тестами. Свернуть

Необходима фронтенд веб разработка игровых интерфейсов (cef) по готовым ui ux макетам.
Необходимо знания: js, Vue, vuex, JS, pug, npm
Sass (SCSS), Webpack
системами контроля версий (GIT) Свернуть

Есть вот такая верстка ссылка
У нее в мобильной версии нужно сделать анимацию для меню.
На мобильном экране изначально должно быть открыто полное меню с квадратиками, но при скроллинге оно должно плавно сворачиваться в кнопку.
Кнопка фиксирована на странице как и сейчас и при скроллинге остается поверх страницы, а при клике на нее меню с квадратиками плавно разворачивается.
При скроллинге вверх, когда доскроллили до начала экрана, меню с квадратиками должно разворачиваться опять автоматически.
Переходы между развернутям меню с квадратиками и кнопкой должны быть плавными и с анимацией, использовать нужно scss/sass, javascript, без jquery, без сторонних библиотек Свернуть

Добрый день. Нужно сделать адаптивную верстку по макетам из Figma.

Сверстать нужно будет небольшую CRM (Почти на всех страницах используется одна таблица и если её стилизовать, то потом можно просто переиспользовать)

В работе нужно использовать SASS + Nuxt.js + bootstrap-vue (Оттуда брать компоненты и их стилизовать)

Цена договорная. Желательно посмотреть на ваше портфолио

Срок работы: 1 месяц.

После отклика скинем ссылку на макет Свернуть

Приветствую.
на сайте необходимо испраить
1. работа со стилями - оформление кнопок, правки оформления.
2. работа со страницами WooCommerce - вывести/спрятать блоки информации
3. работа с библиотекой скриптов Magnific Popup - подправить отображение, добавить эффекты
4. еще несколько вопросов оформления на динамической странице, - стили на sass

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

Прошу оценить стоимость и сроки.

Сайт:
    ссылка
Движок:
    ocStore 2.3

Задание:

Улучшить показатель CLS (Совокупное смещение макета) до значения менее 0,25 для проблемных страниц из Google Search Console:
    ссылка

Примеры таких страниц
    ссылка

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

Однако после изучения отчета сервиса Google Page Speed по странице
    ссылка
оказалось, что в случае этой страницы это вот такие блоки:
    ссылка
    
Подробнее:

1.
На сайте не должно быть страниц со значением CLS для мобильного вида >=0.25

2.
Измерение CLS на каждой отдельной странице производится посредством Google PageSpeed Insights.
    ссылка

Особенности:
A. Кроссбраузерность.
Результаты работ должны одинаково выглядеть в основных браузерах (в том числе
старых версий): Firefox 53.0.3, Firefox ESR 52.9.0, Firefox, Chrome,
Safari.

B. Адаптивная вёрстка.
Сайт использует адаптивную вёрстку, необходимо чтобы после выполнения задач, в мобильной версии всё
было читабельно и никуда не съезжало.
  Устройство посетителя считается мобильным в случаях когда:
    Ширина экрана браузера менее 768px (если CSS-правилами сайта не определено иное).
    User-Agent браузера позволяет определить что устройство мобильное.
  Вышеуказанные условия должны реагировать на resize окна браузера (мобильные элементы
после ресайза должны быть такими же как после полной перезагрузки с
изначально мобильным разрешением).

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

C. Пояснение по адаптиву.
Адаптивность вёрстки мобильного варианта подразумевает, что не существует какого-то
отдельного html-кода для мобильной верстки, дублирующего десктопные
элементы. Вместо этого, один единственный вариант вёрстки, в зависимости
от размера экрана, отображается как десктопный, либо как адаптивный
вариант. Т.е. для десктопного вида и для мобильного вида шапки+меню не
должно быть двух разных блоков html-кода. Один и тот же html должен
отображаться по-разному в зависимости от разрешения экрана..

D. Нельзя использовать h1, h2, h3.
Для вёрстки новых элементов нельзя использовать теги h1 h2 h3 и т.д., поскольку это вредно с точки зрения SEO.

E. Минимум javascript.
Задачи должны быть выполнены с минимально возможным применением javascript.
Если какие-то задачи могут быть решены средствами PHP/HTML/CSS, то они
должны быть решены с помощью PHP/HTML/CSS.

G. Поломки.
Выполнение данной задачи не должно сломать какой-либо другой функционал. Если в
процессе работы вы что-то сломаете, то исправление поломки
осуществляется вами безвозмездно.

H. Результат.
Результат задачи должен быть представлен в том конечном виде, который описан в ТЗ.
Варианты "оно в принципе готово, просто зайдите туда-то, нажмите то-то,
затем ещё туда и туда и вот сюда" крайне не приветствуются. Если после
выполнения работ нужно обновить кэш модификаторов сайта - обновите. Если
нужно будет обновить кэш браузера - измените html-код таким образом,
чтобы файл сам обновился либо смените режим кэширования для этого файла.
Посетители сайта обновлять кэш не будут, но зато увидят поехавшую
вёрстку. Закладывайте это дополнительно в стоимость задачи.

I. SCSS/SASS/препроцессоры.
Следует избегать использования технологий, предполагающих стадию компиляции,
поскольку они усложняют и без того запутанный процесс разработки,
повышая её стоимость. Выгоды от их использования нивелируются негативным
экономическим эффектом.

J. Никакого дебага на продакшене.
На продакшене не должно появляться никаких заглушек и прочего. В случаях
острой необходимости произвести дебаг именно на продакшене, выводите
дамп внутрь HTML-комментария, либо оборачивайте в <?php
if($_SERVER == 'ВАШ-IP-АДРЕС') { ?>.

Пожалуйста оцените стоимость и сроки выполнения. Свернуть

Стек проекта: Node.js, Express, Socket.io, Vue.js, SASS, HTML
web3.0 библиотека для взаимодействия с блокчейном

О проекте: ссылка
Задачи: ссылка
Проект срочный, предпочтение отдаю разработчику, который готов начать уже сегодня. Просьба сориентировать по цене и срокам.
P. S. Если по задачам нужно более подробное объяснение, то пишите по каким, всё объясню. Отклик начинайте с решения примера два плюс 4 равно сколько? Отклик без ответа вероятнее всего удалится. Свернуть

Есть 3 точки входаФронтБекКонсольДля сборки React и npm.Пробовали сделать сами, но встали на том, что Yii2 через exec вызывает команду sass. Свернуть

Есть макет в Figma с наличием двух вариантов под десктопную и мобильную версию. Хеадер и футер (выделены красной рамкой) уже реализованы — верстать не нужно, необходимо сверстать только тело страницы.

1. Вёрстка должна быть адаптивной для двух ширин:
- от 0 до 991px — мобильная версия
- от 992px и шире — десктопная версия
1. Все стили описываются в main.sass и media.sass
1. Преимущественно для разметки использовать флексбоксы
1. Все растровые изображения должны быть встроены с помощью lazyload, можно использовать сниппет по аналогии с уже реализованными частями
1. Разметка должна быть логично разбита по блокам с помощью fileinclude, по аналогии с реализованными частями
1. На странице должны быть реализованы интерактивные элементы:
- переключение табы для скриншотов
- блоки "Show more", раскрывающие скрытую часть текста
- карусели для отзывов на slick.js, есть примеры
1. Вёрстка должна быть одинаково рабочей в современных браузерах и будет проверяться в последних стабильных релизах Safari, Mozzila, Chrome. Плюс в Safari/Chrome на iOS и Mozzila/Chrome в Android.

Для разработки нужно использовать рабочий проект с настроенным билдом (gulp, sass, fileinclude). Свернуть

Создать адаптивную вёрстку страницы catalog.html

Для разработки нужно использовать рабочий проект с настроенным билдом (gulp, sass, fileinclude).

На входе вам будет предоставлен доступ в репозиторий на GitHub, работу нужно будет выполнить в указанной ветке. Репозиторий подготовлен, проект запускается. Вёрстка необходима для конкретной страницы, примеры реализации в репозитории есть.

Есть макет в Figma с наличием двух вариантов под десктопную и мобильную версию. Хеадер и футер (выделены красной рамкой) уже реализованы — верстать не нужно, необходимо сверстать только тело страницы.

1. Вёрстка должна быть адаптивной для двух ширин:
- от 0 до 991px — мобильная версия
- от 992px и шире — десктопная версия
1. Все стили описываются в main.sass и media.sass
1. Преимущественно для разметки использовать флексбоксы
1. Все растровые изображения должны быть встроены с помощью lazyload, можно использовать сниппет по аналогии с уже реализованными частями
1. Разметка должна быть логично разбита по блокам с помощью fileinclude, по аналогии с реализованными частями
1. На странице должны быть реализованы интерактивные элементы:
- переключение табы для скриншотов
- блоки "Show more", раскрывающие скрытую часть текста
- карусели для отзывов на slick.js, есть примеры
1. Вёрстка должна быть одинаково рабочей в современных браузерах и будет проверяться в последних стабильных релизах Safari, Mozzila, Chrome. Плюс в Safari/Chrome на iOS и Mozzila/Chrome в Android.

Во вложении скриншоты макета Figma для визуального ознакомления. Реальный макет по запросу. Свернуть

Прошу оценить стоимость и сроки.

Сайт:
ссылка
Движок:
Yii 1.1.19

Задание:

Выполнить рекомендацию Google PageSpeed Insights
ссылка
для мобильного вида главной страницы, страниц категорий и страницы товара, например
ссылка
ссылка
ссылка

Подробнее:

1.
Главная страница должна проходить аудит
ссылка
по данному пункту (этот пункт не должен появляться в отчёте Google PageSpeed)

2.
Страницы категорий должны проходить аудит
ссылка
по данному пункту (этот пункт не должен появляться в отчёте Google PageSpeed)

3.
Страницы товаров должны проходить аудит
ссылка
по данному пункту (этот пункт не должен появляться в отчёте Google PageSpeed)

Особенности:
A. Кроссбраузерность.
Результаты работ должны одинаково выглядеть в основных браузерах (в том числе
старых версий): Firefox 53.0.3, Firefox ESR 52.9.0, Firefox, Chrome,
Safari.

B. Адаптивная вёрстка.
Сайт использует адаптивную вёрстку, необходимо чтобы после выполнения задач, в мобильной версии всё
было читабельно и никуда не съезжало.
Устройство посетителя считается мобильным в случаях когда:
Ширина экрана браузера менее 768px (если CSS-правилами сайта не определено иное).
User-Agent браузера позволяет определить что устройство мобильное.
Вышеуказанные условия должны реагировать на resize окна браузера (мобильные элементы
после ресайза должны быть такими же как после полной перезагрузки с
изначально мобильным разрешением).

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

C. Пояснение по адаптиву.
Адаптивность вёрстки мобильного варианта подразумевает, что не существует какого-то
отдельного html-кода для мобильной верстки, дублирующего десктопные
элементы. Вместо этого, один единственный вариант вёрстки, в зависимости
от размера экрана, отображается как десктопный, либо как адаптивный
вариант. Т.е. для десктопного вида и для мобильного вида шапки+меню не
должно быть двух разных блоков html-кода. Один и тот же html должен
отображаться по-разному в зависимости от разрешения экрана..

D. Нельзя использовать h1, h2, h3.
Для вёрстки новых элементов нельзя использовать теги h1 h2 h3 и т.д., поскольку это вредно с точки зрения SEO.

E. Минимум javascript.
Задачи должны быть выполнены с минимально возможным применением javascript.
Если какие-то задачи могут быть решены средствами PHP/HTML/CSS, то они
должны быть решены с помощью PHP/HTML/CSS.

G. Поломки.
Выполнение данной задачи не должно сломать какой-либо другой функционал. Если в
процессе работы вы что-то сломаете, то исправление поломки
осуществляется вами безвозмездно.

H. Результат.
Результат задачи должен быть представлен в том конечном виде, который описан в ТЗ.
Варианты "оно в принципе готово, просто зайдите туда-то, нажмите то-то,
затем ещё туда и туда и вот сюда" крайне не приветствуются. Если после
выполнения работ нужно обновить кэш модификаторов сайта - обновите. Если
нужно будет обновить кэш браузера - измените html-код таким образом,
чтобы файл сам обновился либо смените режим кэширования для этого файла.
Посетители сайта обновлять кэш не будут, но зато увидят поехавшую
вёрстку. Закладывайте это дополнительно в стоимость задачи.

I. SCSS/SASS/препроцессоры.
Следует избегать использования технологий, предполагающих стадию компиляции,
поскольку они усложняют и без того запутанный процесс разработки,
повышая её стоимость. Выгоды от их использования нивелируются негативным
экономическим эффектом.

J. Никакого дебага на продакшене.
На продакшене не должно появляться никаких заглушек и прочего. В случаях
острой необходимости произвести дебаг именно на продакшене, выводите
дамп внутрь HTML-комментария, либо оборачивайте в <?php
if($_SERVER == 'ВАШ-IP-АДРЕС') { ?>.

Пожалуйста оцените стоимость и сроки выполнения. Свернуть

Здравствуйте.

Есть готовый дизайн для сайта-блога:
ссылка

Нужно сверстать 5 страниц и натянуть их на вордпресс. БЭМ, Gulp, Sass, ACF и все, должно быть достаточно. Страницу записи собрать на ACF flexible content.

От вас прошу сбросить свои последние работы, стоимость и сроки. Взяться можно хоть сейчас. Если дочитали до сюда, то добавьте к сообщению - жареный карась. Свернуть

Необходимо сверстать страницы интернет-магазина на основании готового дизайна в Figma, мобайл/десктоп с использованием БЭМ. 

Требования:
- Опыт работы от 1 года
- Обязательно наличие портфолио
- HTML/CSS/SASS
- Adobe Photoshop, Illustrator, Figma
- GIT/Bitbucket
- Gulp, NPM
- PHP, JavaScript (jQuery)
- Знание и соблюдение основ СЕО в верстке
- Опыт создания и поддержки шаблонов для CMS: WordPress, Opencart, Drupal, MODx, OkayCMS
- Внимание к деталям, ответственность‚ исполнительность‚ аккуратность, пунктуальность
- Умение разбираться в чужок коде

Страницы: 
ГлавнаяКатегория/Результаты поиска/Сравнение товаровТоварОформление заказаКонтентная страницаЛичный кабинет
В заявке, пожалуйста укажите приблизительный бюджет и ссылки на три последние работы, желательно интернет-магазины. Свернуть

Здравствуйте, задание такое. Нужно сделать иконки в svg формате по примеру. НОВИЧКИ приветствуются!
Иконки должны быть круглые, фон основной цвет, и текст сокращенный (к примеру JS)
Иконки:
HTML, CSS, JS, SASS, GULP.
Для GULP - нужно круг со стаканчиком с трубочкой, где написано GULP(можете посмотреть в интернете) Свернуть

Ищется адекватный верстальщик, способный сверстать макет.
От вас требуется умение:
-использовать SASS/SCSS + gulp для сборки и оптимизации стилей;
-не писать лишнего, не лишних кучу js-библиотек, если они не нужны;
-умеете пользоваться Git;
Отлично будет, если вы сможете скинуть пример вашей верстки.
Задача:
Сверстать страницу (см. приложение). Макеты дектопа, планшета, мобилки в Figma.
С нашей стороны:
- отправляем вам предоплату чтобы вы не нервничали, что мы вас бросим на половине пути. Готовы разбить названную вами сумму на удобные вам куски.
- проверяем результат по завершении. Не вносим миллионы правок в работе.. Если ок - скидываем верстать вам весь проект.
- хотим чтобы вы сделали это оперативно, в течении пары дней;
Если вы дочитали до этого момента и уверены в себе - пишите в телеграмм jbiketg. Скинем макет, если есть примеры вашего кода - с удовольствием посмотрим Свернуть

Имеются макеты сайта каталога. Необходимо их сверстать и натянуть на последнюю версию WP с применением минимума плагинов.

Желательна верстка по BEM. Также большим плюсом будет, если планируете использовать сборщик (webpack или gulp) и писать стили на sass. Свернуть

Здравствуйте, нужно верстать этот макет
ПК: ссылка
МОБ: ссылка
Требования:
1. CSS препроцессор - SCSS
2. Сетка CSS FlexBoxGrid.
3. В макетах не использовать JS, только верстка предоставленного макета.
4. Использование методологии верстки BEM.
5. Использовать Mixins
6. Использовать библиотеки sass-mq/mq для адаптива
Примеры стилистики наименования классов:
hm- - это префикс, который будет использоваться во все классах CSS которые относятся к БЭМ.
hm-table - Блок
hm-table__tr - элемент
hm-table__tr--is-color-green или hm-table__tr--isСolorGreen. Только выбрать один метод наименования и применять его по всему сайту.
Хотелось бы узнать цену и сроки. Спасибо Свернуть

Необходимо создать сайт (3 основных страницы, возможно будет еще 1-2 очень похожая на одну из предыдущих)

Сделать необходимо на фреймворке yii2 или laravel. База данных mysql
Верстка лейаута, создание базы данных, проектирование базы данных, подключение шрифтов, настройка npm компиляции стилей sass или less (желательно) и другие подобные сопутствующие моментыФронт:
СтраницыГлавнаяСтраница список (ЖК, квартиры, дома, участки). Все в одном месте. Список будет сортируемымДетальная страница (конкретного ЖК, квартиры, в общем объекта). Формы обратной связи (сама форма, с валищацией и после успешной отправки формы заверстать сообщение об успешной отправки). С формы поиска заявки должны отправляться на почту и создаваться в базе данных, доступ к которым можно получать через админку

Админка:
Сайт предполагает по большому счету 3 страницы (первый этап) и возможность их админить из собственной панели
Дизайн будет позже. Пока дизайна нет, предварительно желаемый функционал представлен в файле ниже
ТЗ тут Свернуть