Search the Community

Привет! Недавно проходила первый этап на собесе с заданием и провалила. Нужно было создать копию отправленного изображения (прикреплено). Предполагаю, что ошибка была изначально в том, что требование "Use SASS variables by changing width and background, it has to change completely, the shape must be responsive (all its parts grow or shrink respectively)" не было выполнено. Фидбека не было, к сожалению. Работа проделана была только с html css. Но быть может были допущены другие другие ошибки? Буду признательна, если кто-нибудь укажет на них. Код ниже и по ссылке: https://codepen.io/qizqepml-th... ls/LYeYqjX <div class="wrapper"> <div class="circle"> <div class="panel panel--1"> </div> <div class="panel panel--2"> </div> <div class="panel panel--3"> </div> <div class="panel panel--4"> </div> <div class="circle--2"> </div> </div> </div> * { box-sizing: border-box; } body { background-color: #2b2b2b; } .wrapper { background-color: #2b2b2b; position: absolute; display: flex; align-items: center; justify-content: center; top: 50%; left: 50%; transform: translate(-50%, -50%); } .circle { height: 29vw; width: 29vw; border-radius: 50%; position: absolute; transform: rotateZ(25deg); background-color: #333333; } .panel { height: 17.5vw; width: 17.5vw; border-radius: 50%; border: 1.5vw solid #f14100; } .panel--1 { float: left; position: absolute; } .panel--2 { float: right; position: relative; } .panel--3 { bottom: 0; position: absolute; } .panel--4 { bottom: 0; right: 0; position: absolute; } .circle--2 { border: 1.5vw solid #f14100; position: relative; border-radius: 50%; height: 25vw; width: 25vw; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); outline: 10vw solid #2b2b2b; }

Всем привет народ! Очень надеюсь на вашу помощь! Дело в том что я создавал сайты по видео урокам некого Михаила Базарова. Вот собственно его видео уроки https://camouf.ru/video/new_store/phpstorm.html?PAGEN_2=2 Теперь конкретно о проблеме: Дело в том, что данный человек использует bootstrap и sass. Он компилирует все стили в сжатый css. В этом то и проблема. У меня не компилируется, а стили на сайте не работают. Что я сделал: установил Ruby, прописал в командной строке gem install sass, успешно установился. Перезагрузил компьютер и подключился к своему удаленному серверу через PhpStorm. Обмен между локальным и удаленным сервером идет успешно. Но на сайте не работают стили прописанные в sass Скрин https://imgur.com/a/vV6QZBV UPD: Оказалось что путь к файлам неверный, мог бы кто нибудь помочь настроить?

Здравствуйте! Не могу сделать импорт в sass. Не могу понять в чем дело? По урокам делал, как все показывали, но не выходит! Импорт для оптимизаций и адаптаций сайта

Мы -- аутсорс компания Z-Wolves Development, и сейчас американскому заказчику требуется на частичную занятость фронтенд для сайта на Drupal. Следующие задачи планируются: 80-90% Drupal 7 10-20% Drupal 8 Чистый Drupal, не decoupled/headless Front-End Skills: Разработка подтем по кастомному шаблону (D7; 80%) Разработка кастомных тем (D7 и D8; 20%) небольшие задачи по JS 80% SASS/Compass; 20% Grunt Английский язык intermediate и выше Работа удалённо, около 20 часов в неделю, обязательно наличие нескольких часов оверлэпа с США. Оплата почасовая, рейт 7$+, оформление договора с ИП/ООО. Способы связи: a.belousova@zwolves.com Skype live:a.belousova_2

Заранее прошу прощения если этот вопрос уже задавался, но, несмотря на обширное кол-во информации по теме, найти ответа на свой вопрос я не смогла. Суть в следующем: Например, у меня есть два отдельных scss файла - header.scss и footer.scss. Стили футера почти полностью совпадают со стилями хедера, за исключением пары свойств. Но если я прописываю в файле footer.scss @extend header - стили хедера не могут использоваться, т.к. это другой файл. Подскажите, как идеологически вернее делать в данной ситуации? Чтобы новый класс/элемент получал стили существующего класса из другого файла + добавлял свои или менял некоторые стили на свои.

Первый вопрос: - Нужно ли использовать эти кроссбраузерные плюшки для стилизации placeholder'a? Не устарели ли они? ::-webkit-input-placeholder {color:#c0392b;} ::-moz-placeholder {color:#c0392b;}/* Firefox 19+ */ :-moz-placeholder {color:#c0392b;}/* Firefox 18- */ :-ms-input-placeholder {color:#c0392b;} Второй вопрос - Использую Sass, как правильно стилизовать placeholder? Не могу понять куда писать этот код и как правильно он оформляется в sass &-form margin-top: 98px &_main-form input display: block margin: 0 auto height: 67px width: 370px padding: 29px 0 29px 36px По идее он должен писаться под паддингами, но коала ругается, так как у кроссбраузерных плюшек скобки и тд

Препроцессоры SASS и LESS. Автоматизация Front-end разработки (курс от команды webformyself) Ищу, где скачать бесплатно, желательно с торрентов Весь инет гуглом и яндексом перерыл, не нашел. Дайте ссыль, очень нуно

Как подключить библиотеку Bourbone русское руководство есть ?

Аутсорс-компания Z-Wolves Development ищет на проект из США верстальщика (фронт-енд разработчика) Требования: -- уверенные знания JS -- владение SASS/Gulp/Grunt -- опыт headless/decoupled Drupal-верстки (желательны примеры) -- pixel-perfect from PSDs, внимание к деталям -- английский не ниже Intermediate (готовы к устному и письменному общению с заказчиком и его командой) Работа удалённо, фулл-тайм, обязательно наличие нескольких часов оверлэпа с США. Оплата почасовая, от 10$/час Способы связи: a.belousova@zwolves.com Skype live:a.belousova_2

Доброго времени суток! Суть проекта: очень кратко: что-то вроде аггрегатора хостинг провайдеров. На самом деле это только звучит не особо, но по факту все намного интересней. Проект готов на 20-25%. В команде есть сильный и опытный back-end разработчик, дизайнер и маркетолог-идеолог Но у нас демократия: каждый делится своими мыслями как сделать продукт лучше. Есть потенциальные клиенты, которые готовы опробовать продукт и в дальнейшем им пользоваться, покупая ежемесячную подписку. Главная задача: выход на минимально живой продукт. Как только мы выйдем на MVP будет понятно насколько проект коммерчески успешен или неуспешен. В случае успеха (когда продажи пойдут) начинаем этап привлечения инвестиций. Кандидаты-инвесторы есть. В случае провала - расходимся и каждый может использовать проект в качестве портфолио, так как при любом исходе им будут пользоваться. Кого ищем: front-end разработчик с опытом работы с: - React (Redux) - Django - RESTApi - SASS - Git Желателен опыт работы от 2-3 лет и возможность посвящать проекту хотя бы 10-12 часов в неделю. Условия работы: - доля в компании 5-10% - доля в компании менее 5%, но с оплатой, небольшой, так как мы еще только проверяем гипотезу и платить будем из своего кармана. Этот проект может быть интересен тем, кто хочет влиться в интересный проект, возглавить его и научиться чему-то новому или просто взять долю и получать с нее доход, либо продать. Также, тем, кому нужно интересное портфолио. Если есть интерес, прошу свяжитесь со мной: https://t.me/Eugen2k

1. Как принято сдавать верстку, если пользуешься, например, pug и sass? До их появления я предоставляла html, css и т.п. Сейчас осваиваю инструменты, но из-за компиляции непонятно, какие файлы теперь отправляют клиенту? 2. В каком виде готовую верстку закачивают на сервер? Например, сайт без CMS: просто готовые html+css+js? Но тогда их менее удобно править при необходимости. Или на сервер как-то компилятор ставят? А если натягивать на CMS, то тогда как быть? Чувствую, для большинства участников форума это очевидные вещи. Подскажите, как хотя бы называется эта тема, чтобы погуглить. Всё, что находила сама — не по теме.

Всем привет! Такая ошибка - при сохранение стилей в основном файле sass все отлично, а вот если подключать отдельные файлы, например, _header.sass при сохранение выскакивает ошибка - Autoprefixer: Missed semicolon! Точка с запятой все стоит нормально, компилит если несколько раз нажать сохранить, но всегда выскакивает эта ошибка! Вот моя сборка: https://paste.ofcode.org/sLuKmekW88cFusdQPeFaPV ! Помогите пжл)

Привет форумчане! Раньше работал один и бед не знал в этом плане, но теперь попал в небольшую фирму, где каждый работает сам по себе, нет единого рабочего процесса. Я привык работать через Prepros, он многофункционален и требует минимальных знаний в "компиляторстве". Так вот, я хотел бы продолжить работать с препроцессором вместо чистого CSS, но проблема в том, что стили проекта могут также править и другие мои коллеги, и если они через какой нибудь фтп клиент внесут изменения в файл со стилями на сервере, то я потом не смогу с ним дальше работать, т.к. затру все их изменения. Можно ли как-то выйти из этой ситуации? Как вариант, можно мониторить изменения в файле стилей перед началом работы, но здесь есть риск ,что я однажды попросту забуду это сделать. Также, слыхал о возможности компиляции прямо на сервере. Прошу помочь в этом вопросе.

Добрый день. Вас приветствует команда студии разработки и продвижения freedots.ru Если вы Front-end разработчик и делаете круто, то высылайте свое портфолио на hr@freedots.ru и вместе мы поработаем над интересными проектами Основные требования: Опыт работы в отрасли не менее 2 лет. Знание языков разметки: HTML, CSS. Знание JS Знание препроцессоров LESS/SASS Знание фреймворков: Bootstrap/Foundation Знание библиотек: jquery.js, желательно знание js фреймворков: angular.js/vue.js Знание сборщиков проектов, таких как: webpack Расположение: Россия > Москва Занятость/ЗП: Занятость:фикс ЗП:40 000 - 60 000 руб. График: обсуждаемо С уважением, команда Freedots.

Буду дико благодарен тому, кто сможем помочь мне пошагово настроить среду разработки в редакторе Atom. Конкретно, нужно настройка gulp, sass и прочих смежных вещей, и следовательно, компиляцию в конце, чтобы всё это собиралось в файлы html/css/js и т.д. Готов подстроиться под удобные вам дни/часы. Можно по скайпу, в слаке, в общем, там, где вам удобно!

Помогите пожалуйста доверстать письмо. Вопросов несколько - буду выкладывать по степени формирования. Заранее спасибо всем кто не бросил начинающего. Пишу в Zurb Foundation 2, с помощью Inky и sass 1. Как сделать полосу во весь экран? (номер строки html кода: 144-151) 2. Мой SblimeText подсвечивает вопросы в строчках кода у body и table. Такая же история в конце кода с этими же тэгами. Если навести ничего не показывает, или редко ненадолго говорит об ошибке со скобками. Как побороть? basic.html app.scss

Имеется такая структура файлов: sass/ -- bootstrap/ (внутри каталог mixins и sass файлы- bootstrap/_mixins.scss, bootstrap/_variables.scss, bootstrap/_normilze.scss, и т.д.) -- _bootstrap.scss -- main.scss содержание файла main.scss: @import "bootstrap"; .element { with: 200px; @media (min-width: @screen-md-min) { width: 100px; } } Но компилятор ругается, что вместо @screen-md-min должно быть конкретное значение.Как добиться, чтобы можно было использовать брейкпоинты бутстрапа в Sass?

Кто нибудь использует ? Тщетно пытаюсь настроить уже не первый день. Нашёл вроде как верное решение для запуска компаса, но на импорте картинок ловлю ошибку, никакие варианты путей не работают. Ссылка на файлы https://github.com/Andrey7287/new-webpack

макет вёрстка (адаптивная до 320px) Использовал: jade+sass+gulp. Требуется критика вёрстки, любые пожелания, указание на ошибки/недочёты, также приветствуются. От себя несколько вопросов: 1) Google page speed даёт низкую оценку скорости: Как это исправить?? скрин 2) Валидатор постоянно ругается на подключённые через гугл шрифты, можно ли это как-то исправить? скрин ошибки

В интернете очень много различных бесплатных шаблонов на любой вкус, но почти все они идут без SASS или LESS файлов, в связи с чем затрудняется их кастомизация. Знает ли кто ресурсы, где можно найти шаблоны с исходниками стилей?

Адаптивная верстка IE10+ Для себя сделал вывод, меню лучше делать два: одно полноразмерное, другое для мобильных устройств. Правда, в ie8 не отображается ровным счетом ничего(пустая страница), что для меня пока загадка. Может кто знает ответ?

Всем доброго дня. Копаюсь в sass (scss), возник вопрос, ответ на который либо я не понимаю, либо не могу найти) Собственно такая структура .navigation ul li { span.inner > a span.icon_cat { display: inline-block; width: 24px; height: 24px; position: absolute; left: 7px; top: ; &.cars { @include sprite(url(../img/sprite.png), -14, 4); } } &:hover span.inner > a span.icon_cat.cars{ @include sprite(url(../img/sprite.png), -14, -22); } } сам вопрос такой: Допустим у меня 50 категорий, для каждой своя иконка, как видно из кода это спрайт. В таком варианте как сейчас мне нужно писать очень много (ну или копировать), то есть выглядит примерно так: .navigation ul li { span.inner > a span.icon_cat { display: inline-block; width: 24px; height: 24px; position: absolute; left: 7px; top: 0; &.cars { @include sprite(url(../img/sprite.png), -14, 4); } &.cars2 { @include sprite(url(../img/sprite.png), -14, 4); } &.cars3 { @include sprite(url(../img/sprite.png), -14, 4); } &.cars4 { @include sprite(url(../img/sprite.png), -14, 4); } } &:hover span.inner > a span.icon_cat.cars{ @include sprite(url(../img/sprite.png), -14, -22); } &:hover span.inner > a span.icon_cat.cars2{ @include sprite(url(../img/sprite.png), -14, -22); } &:hover span.inner > a span.icon_cat.cars3{ @include sprite(url(../img/sprite.png), -14, -22); } &:hover span.inner > a span.icon_cat.cars4{ @include sprite(url(../img/sprite.png), -14, -22); } } если честно я даже не особо понимаю как правильно объяснить, но примерно так: есть ли возможно обратиться к названию родительского класса, чтобы вместо &:hover span.inner > a span.icon_cat.cars{ @include sprite(url(../img/sprite.png), -14, -22); } писать &:hover тут что-то что заменит (span.inner > a span.icon_cat).cars{ @include sprite(url(../img/sprite.png), -14, -22); } Ну или может есть какой-то другой короткий способ записи? Подскажите пожалуйста

До сих пор верстал только с чистым css. хочу начать изучение Sass + Bootstrap (который ранее тоже не использовал) Никак не могу найти описания как правильно настроить рабочую среду без использования Ruby/Gulp/Bower, а с понятным Koala GUI. Где какие файлы размещать и какие файлы можно править в исходниках Бутстрапа, или нельзя никакие и нужно создать свои файлы, которые будут переписывать переменные Бутстрапа?

Может кто сталкивался с подобным, не могу импортировать другие sass файлы в основной (main.sass) К примеру подключение стилей файла reset.sass: @import "test/reset"После запуска компилятора, появляется ошибка Гуглил, предлагают вставить строчку includePaths: ['./styles'],либо плагины. Но почему-то всё равно не получается(( gulpfile var gulp=require("gulp");var sass=require("gulp-sass");gulp.task('sass', function() { return gulp.src('work-build/sass/*.sass') .pipe(sass({ includePaths: ['public-build/css'] //это строка, которой предлагали лечить данную проблему, но всё равно не работает, может я неправильно путь указываю })) .pipe(gulp.dest('public-build/css'));});gulp.task('watch', function(){ gulp.watch('work-build/sass/*.sass', ['sass']);});

Решил освоить SASS, очень мне нравится его идея, большое коммьюнити, все нравится, но столкнулся с проблемой, собственно ниже и опишу. Хочу сделать миксин медиазапросов есть 4 переменные, в них описаны размеры экрана, и создан несложный миксин. $screen_xs: 320px;$screen_s: 768px;$screen_m: 1024px;$screen_l: 1200px;$screen_xl: 1376px;@mixin mediaquery($media) { @if $media == screen_s { @media only screen and (max-width: $screen_s + 1) { @content; } } @else if $media == screen_m { @media only screen and (min-width: $screen_m + 1){ @content; } } @else if $media == screen_l { @media only screen and (min-width: $screen_l + 1) { @content; } } @else if $media == screen_xl { @media only screen and (min-width: $screen_xl + 1) { @content; } }}дальше я этот миксин подключаю, например, к боди, пример абстрактный. body{ background: $blue_grey; @include mediaquery(screen_s) { background: $lime;} @include mediaquery(screen_m) { background: $teal;} @include mediaquery(screen_l) { background: $orange;} @include mediaquery(screen_xl) { background: $pink;} color: $color_base; font-family: $font_base; @include flexbox; @include flex-direction(column); min-height: 100vh;}суть такая, что фон меняется в зависимости от разрешения. НА выходе мы имеем // outputbody { background: #607D8B; color: #cccccc; font-family: "Proxima Nova", Tahoma, helvetica, sans-serif; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: vertical; -moz-flex-direction: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; min-height: 100vh;}@media only screen and (max-width: 769px) { body {background: #CDDC39;}}@media only screen and (min-width: 1025px) { body {background: #009688;}}@media only screen and (min-width: 1201px) { body {background: #FF9800;}}@media only screen and (min-width: 1377px) { body {background: #E91E63;}}Казалось бы этого я и ждал, так и есть, результат достигнут, но теперь у меня есть другой элемент, который я хочу видоизменять в зависимости от экрана, и пишу следующее .size:after{ content: "Size XS"; @include mediaquery(screen_s) { content: "Size S";} @include mediaquery(screen_m) { content: "Size M";} @include mediaquery(screen_l) { content: "Size L";} @include mediaquery(screen_xl) { content: "Size XL";}}Код несложный, есть блок, я в псевдоэлементе :after меняю слова в зависимости от разрешения. Собственно тут я и сталкиваюсь с проблемой избыточности, у меня дублируется код. На выходе я получаю ОТДЕЛЬНЫЕ медиазапросы // output.size:after {content: "Size XS";}@media only screen and (max-width: 769px) { .size:after {content: "Size S";}}@media only screen and (min-width: 1025px) { .size:after {content: "Size M";}}@media only screen and (min-width: 1201px) { .size:after {content: "Size L";}}@media only screen and (min-width: 1377px) { .size:after {content: "Size XL";}}так как же мне избавиться от этой избыточности? делать как и раньше в отдельном месте прописывать разрешение и в него вставлять все элементы, стили которых необходимо менять? но тогда пропадает прелесть использования SASS