Ответы пользователя по тегу CSS
  • Как сделать так чтобы н была видна полоса прокрутки?

    stanislav-belichenko
    @stanislav-belichenko
    Backend PHP Developer
    Есть несколько способов. Можно использовать хитрые свойства css, но они для разных браузеров свои (взято отсюда):
    /* хром, сафари */
    .element::-webkit-scrollbar { width: 0; }
    
    /* ie 10+ */
    .element { -ms-overflow-style: none; }
    
    /* фф (свойство больше не работает, других способов тоже нет)*/
    .element { overflow: -moz-scrollbars-none; }

    Там же в комментариях я нашел такой вариант, правда код там изначально написан на SASS.

    Вот еще вариант, но это когда известны размеры (ширина). Хотя в целом ничто не мешает вам узнавать ее или под разные media делать разные заранее известные размеры вашего блока с прокруткой.
    Ответ написан
    Комментировать
  • Как настроить Gulp, чтобы корректно прописывал пути файлов?

    stanislav-belichenko
    @stanislav-belichenko
    Backend PHP Developer
    Вообще, тут нужно понимать, что все подобные задачи в Gulp решаются как правило за счет тех или иных плагинов для него. Так, конкретно для вашей задачи подойдет плагин gulp-modify-css-urls. Сначала вам необходимо установить его:
    npm install --save-dev gulp-modify-css-urls
    Параметр --save-dev укажите, если хотите, чтобы эта зависимость прописалась в ваш package.json в раздел dev. После этого вы можете модифицировать пути в файлах css с помощью примерно такого кода (взят из доков этого плагина):

    var gulp = require('gulp')
      , modifyCssUrls = require('gulp-modify-css-urls');
     
    /* style.css
    body {
      background-image: url('images/logo.png');
    }
    */
    gulp.task('modifyUrls', function () {
      return gulp.src('style.css')
        .pipe(modifyCssUrls({
          modify: function (url, filePath) {
            return 'app/' + url;
          },
          prepend: 'https://fancycdn.com/',
          append: '?cache-buster'
        }))
        .pipe(gulp.dest('./'));
    });
    /* style.css
    body {
      background-image: url('https://fancycdn.com/app/images/logo.png?cache-buster');
    }
    */

    В коде вроде бы все понятно прокомментировано, но если что, спрашивайте уточнение. В целом же, есть вариант и сразу писать LESS-файлы таким образом, чтобы потом не приходилось их редактировать. Но это, конечно, дело вкуса, да и так не слишком удобно разрабатывать код, конечно.
    Ответ написан
  • Как сделать js, css пакеты для Laravel?

    stanislav-belichenko
    @stanislav-belichenko
    Backend PHP Developer
    вообще composer для php

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

    видимо нужно создавать npm-пакеты, но тут уже я потерялся, пытаясь понять, как это для веб оформить


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

    вынести некоторые части js кода в отдельные пакеты, чтобы потом использовать в других проектах


    Еще раз по предыдущим пунктам - composer действительно собирает в основном для бекенда (условно движок), хотя и им можно забивать гвозди. NPM собирает для скорее опять же каких-то нужд бекенда, в том числе административных, например, через него ставится Bower. В том числе потому, что у него для каждого пакета в его папку подтягиваются все его зависимости, каждый раз для каждого пакета, даже если пакеты, от которых они зависят, являются общими.

    А вот тот же Bower можно и нужно использовать для подтягивания пакетов для фронта. Elixir, laravel-mix - это все сборщики, как и тот же Gulp, они занимаются не установкой пакетов, а их преобразованием - например, минифицируют и конкатенируют файлы стилей или скриптов, это совершенно иные задачи.

    Поэтому я бы вам предложил использовать Bower, но, опять же, не публиковать для него свои пакеты в общем доступе, если только они не имеют ценности для всего сообщества в целом (смысл загрязнять общую эко-среду), а использовать ваш личный Github или какой угодно другой ваш публичный сервер/etc. Подробнее о том, как устанавливать пакеты не из общего репозитория можно прочитать тут, но в целом там совсем всё просто:

    # Git endpoint
    $ bower install git://github.com/user/package.git
    # URL
    $ bower install http://example.com/script.js
    Ответ написан