• Кто работал в CSSSR или с их шаблоном быстрого старта?

    mQm
    @mQm
    https://medium.com/@gearmobile
    я работал на шаблоне быстрого старта CSSSR. и даже есть у меня несколько версток, сделанных на нем. Олег абсолютно правильно сказал - у вас просто нет опыта работы с Jade. На самом деле там нет ничего сложного.

    Но позже я познакомился с таким шаблоном как TARS и он мне показался таким простым и прозразным по сравнению с шаблоном от CSSSR, что я с удовольствием забыл о последнем. ))

    Мое личное мнение - шаблон от CSSSR несколько запутан и специфичен. Но там нет ничего сложного, если разобраться.
    Ответ написан
    3 комментария
  • Почему 2 календаря блочат друг друга?Где с переменными накосячил?

    @Shaidulint
    По ссылке сказано легкий кроссбраузерный jQuery календарь
    У вас в коде не видно, что вы подключаете Jquery
    Ответ написан
    Комментировать
  • Как валидно писать значение url()?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега CSS
    Вот здесь мы очень подробно разобрали этот вопрос: Разница между background: url('...') и background: url(...)?
    Ответ написан
    Комментировать
  • Gulp.js - file to import not found or unreadable. В чем проблема?

    @JohnyM
    Еще пара вариантов решения проблемы.

    Вариант 1.
    Просто указываете в параметре includePaths путь к папке partials. Хотя мне не помогло.
    .pipe(sass({ includePaths : ['./src/assets/styles/partials/'] }))

    -------------------------------------------------------
    Вариант 2.
    Используйте gulp-ruby-sass вместо gulp-sass. (правда ruby-sass на порядок медленнее компилирует. сравнение компиляторов)
    -------------------------------------------------------

    И вариант 3 (конкретно под sublime 3).
    В настройках редактора есть параметр atomic_save, отвечающий за способ сохранения файла (по умолчанию false).

    Если установить "atomic_save: true", то каждый раз при сохранении файла, sublime будет создавать копию редактируемого файла, вносить все изменения в нее, а затем заменять старый файл этой копией.

    Этот способ, наверное, не самый правильный, но можт вам по душе будет именно такое решение (и ошибки нет, и ruby-sass не надо юзать, и ssd покупать).

    Прописывать в пользовательских настройках sublime'a.
    {
      atomic_save: true
    }
    Ответ написан
    2 комментария
  • Gulp, почему так много папок стало?

    Это нормально. После обновления NPM до версии 3, все зависимости (и зависимости зависимостей) устанавливаются в виде "плоской", а не древовидной структуры, как было раньше: https://github.com/npm/npm/releases/tag/v3.0.0
    Ответ написан
    4 комментария
  • Как назвать классы по БЭМ?

    ImEugene
    @ImEugene
    Вёрстка+JavaScript
    Раз вы читали про БЭМ, то особо вдаваться в теорию не буду и притяну пример за уши и опишу как бы я думал и именовал HTML-элементы на примере логотипа.

    Каждый сам выбирает по какой системе понимать: где блок, где элемент, а где модификатор. Как это делают в Яндексе описано в документации по БЭМ, я придержусь этого способа именования

    Классы стоит присваивать после того как вы определились: это блок или элемент? А может вообще модификатор.

    Расписываю на примере лого:
    Сначала я бы понял, что это блок в системе ценностей БЭМ и именовал класс так "logo" (блок -- самодостаточный элемент).
    Допустим, потом мне бы потребовалось на каких-либо страницах сайта флетовое (flat) лого. Получается, что я буду делать модификацию логотипа. Поняв, что это модификатор я бы добавил следующие классы: "logo logo_flat" -- класс блока "logo" и соответственно, класс модификатора "logo_flat"
    Далее, если бы мне потребовалось в логотипе разместить текст (название фирмы, слоган и т.п.). То я бы сначала разобрался -- это блок, это элемент или модификатор? Явно не модификатор (никакой CSS-модификации в существующие элементы не добавляется), значит блок или элемент. Согласно БЭМ-методологии, блок -- самодостаточная единица, а элемент не может существовать вне блока. Соответственно, текст внутри лого это элемент. Я бы в блоке лого разместил текст в HTML-элементе и присвоил класс "logo__company-name" (класс элемента включает в себя в качестве префикса название блока. Это связано с тем, что элемент может существовать только в контексте блока)
    Ответ написан
    2 комментария
  • Будет ли нормально работать фотошоп на интегрированной видеокарте?

    MaxDukov
    @MaxDukov
    впишусь в проект как SRE/DevOps.
    все будет нормально пруф
    Ответ написан
    Комментировать
  • Как использовать emmet+бэм?

    kudesa
    @kudesa
    Проектирую и верстаю адаптивные сайты
    Непонятно, какой редактор использует ТС, но в саблайме это настраивается в preference → package settings → emmet → settings-user
    "preferences": {
            "bem.elementSeparator": "__",
            "bem.modifierSeparator": "_",
            "bem.shortElementPrefix": "-",
    },

    И еще в snippets должен быть указан bem в filters, вот так
    "snippets": {
            "html" : {
                "filters" : "html, bem",
    }
    }

    и правильно писать нужно так
    .page-header>.__top-menu
    Ответ написан
    3 комментария
  • Base64 + Stylus = как сделать?

    @zenwarr
    Просто нужно присвоить url другую функцию, которая будет использоваться вместо нее. Если использовать gulp, то это делается вот так:

    gulpfile.js
    var gulp = require('gulp');
    var stylus = require('gulp-stylus');
    
    var styles_input = 'src/styles';
    var styles_output = 'css';
    
    gulp.task('stylus', function() {
      var stream = gulp.src(styles_input + '/*.styl')
          .pipe(stylus(
                {
                  url: 'embedurl'
                }))
          .pipe(gulp.dest(styles_output));
    });
    
    gulp.task('default', function() {
      gulp.start('stylus');
    });


    Здесь передается стандартная функция-замена url стилуса, которую accord, который занимается вызовом стилуса, обозвал embedurl, но можно, в том числе, написать свою замену.

    и, собственно, style.styl
    @charset "UTF-8";
    
    url = embedurl
    
    body
      background url(../img/site-logo.png)


    Получается вот что:
    @charset "UTF-8";
    body {
      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAAtCAYAAADr0SSvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjRDOUQ0NzhFMDgyRDExRTVBNjA2OTE1QkM5MzkxQkVFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjRDOUQ0NzhGMDgyRDExRTVBNjA2OTE1QkM5MzkxQkVFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NEM5RDQ3OEMwODJEMTFFNUE2MDY5MTVCQzkzOTFCRUUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NEM5RDQ3OEQwODJEMTFFNUE2MDY5MTVCQzkzOTFCRUUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4fRSEjAAAJGUlEQVR42uxd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");
    }
    Ответ написан
    Комментировать
  • Как открыть консоль хрома в новом окне?

    shpaker
    @shpaker
    Вольный хлебопашец
    Так же как и раньше. Зажимаем ЛКМ на кнопе смены положения и выбираем нужный режим. Хром 42 под Виндой.
    Ответ написан
    Комментировать
  • Какой нужен для планшетов media запрос?

    /* Smartphones (portrait and landscape) ----------- */
    @media only screen
    and (min-device-width: 320px)
    and (max-device-width: 480px) {
      /* Styles */
    }
    
    /* Smartphones (landscape) ----------- */
    @media only screen
    and (min-width: 321px) {
      /* Styles */
    }
    
    /* Smartphones (portrait) ----------- */
    @media only screen
    and (max-width: 320px) {
      /* Styles */
    }
    
    /* iPads (portrait and landscape) ----------- */
    @media only screen
    and (min-device-width: 768px)
    and (max-device-width: 1024px) {
      /* Styles */
    }
    
    /* iPads (landscape) ----------- */
    @media only screen
    and (min-device-width: 768px)
    and (max-device-width: 1024px)
    and (orientation: landscape) {
      /* Styles */
    }
    
    /* iPads (portrait) ----------- */
    @media only screen
    and (min-device-width: 768px)
    and (max-device-width: 1024px)
    and (orientation: portrait) {
      /* Styles */
    }
    
    /* Desktops and laptops ----------- */
    @media only screen
    and (min-width: 1224px) {
      /* Styles */
    }
    
    /* Large screens ----------- */
    @media only screen
    and (min-width: 1824px) {
      /* Styles */
    }
    
    /* iPhone 4 ----------- */
    @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
      /* Styles */
    }
    Ответ написан
  • Разница между background: url('...') и background: url(...)?

    ZloDeeV
    @ZloDeeV
    Верстаю в своё удовольствие
    Нет правильной причины не оборачивать строки в кавычки. По гайдлайнам CSS/SCSS - все строки оборачиваются в одинарные кавычки(их проще набрать на клавиатуре, чем двойные), для лучшей читаемости кода(подсветка кода срабатывает на содержимое кавычек) и для того, чтобы синтаксический анализатор не полыхнул пламенем при виде строки без кавычек.

    Комментарий Евгений Петров не соответствует действительности - CSS не требует, чтобы строки были помещены в кавычки, даже те, что содержат пробелы. Строка в кавычках является точным соответствием её двойника без кавычек. Просто в предложенном примере с data:uri в строке имеются другие кавычки и интерпретатор банально сходит с ума, такие символы нужно экранировать.
    Ответ написан
    32 комментария
  • В каком случаи использовать --save и --save-dev в NPM?

    k12th
    @k12th
    console.log(`You're pulling my leg, right?`);
    Компиляторы-транспиляторы-трансляторы (типа Coffee, LESS, Jade), тест-раннеры, стайл-чекеры и линтеры (mocha, chai, karma, (js|es)lint, jscs), плагины для таск-раннеров (grunt-contrib-watch, gulp-jade) — все это обычно ставится как --save-dev, потому что нужно только тем, кто контрибьютит в этот проект, работает с его кодом.

    Библиотеки и фреймворки (expressjs, jquery, backbone), на основе которых работает ваш код, без которых ваш код не запустится у его потребителя — ставятся как --save.
    Ответ написан
    Комментировать
  • Темные силы блокируют @media query - как быть?

    bootd
    @bootd Куратор тега CSS
    Гугли и ты откроешь врата знаний!
    после and пробел поставь!
    Ответ написан
    2 комментария
  • Ошибка в консоли отладчика, смертельно?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Ну или поставьте node-js, gulp и gulp-webserver. Заодно можно сразу подключить less/sass/stylus и вместо корявого prefixfree использовать более мение адекватный autoprefixer. Ну а там может дойдут руки и haml/jade освоить...
    Ответ написан
    1 комментарий
  • Формат записи multiple background в Stylus?

    mQm
    @mQm Автор вопроса
    https://medium.com/@gearmobile
    Запись должна быть такого вида:

    background url('../images/cat.jpg') 50px 48px no-repeat, url('../images/green.jpg') 90% 48px no-repeat, #ccc
    Ответ написан
    Комментировать
  • Какую базу данных выбрать для Node.js+socket.io?

    askhat
    @askhat
    SDE @ Akvelon
    1. Какая вам больше нравится. (Мне вот Mongo нравится, но я Postgres использую)
    2. Поставленая задача не требует 2-х БД
    3. Если вы замените БД на язык разметки и это возымеет хоть какой-то смысл - я навсегда брошу разработку и уйду в Тибет
    4. Ну да, вроде
    5. Работающая с Nodejs
    Ответ написан
    9 комментариев