ned4ded

Используя flexbox и делая все по PP приходится отказываться от justify-content, и использовать костыли в виде margin чтобы подогнать под макет, в свою очередь это здорово мешает при адаптации под меньшие разрешения, приходится постоянно перебивать размеры margin, с justify-content и flex-wrap адаптировать по сути и не надо оно само адаптируется но не подходит под PP c расхождением до 50-70 пикселей.

.custom-control-input:checked ~ .custom-control-label::before { ... }

let object = { test: 'hey' }

let another = object

object = null

console.log(another)
// { test: 'hey' }

div {
  background-image: url("first-image-url"), url("second-image-url");
}

app.get('/create', (req, res) => {
	res.render('name_of_ejs_file', req.query)
})

.b2 {
    width: calc(50% - 2px); // 2px можете убрать, когда уберете бордер у b3
    float: right;
}

├── datasets
│   └── meta.json
├── locales
│   ├── en
│   │   └── translation.json
│   └── ru
├── tasks
...
└── gulpfile.js

# Это упрощенная структура, 
# но если вам будет что-то непонятно, я напишу подробнее.

import gulp from 'gulp';
import fs from 'fs';
import path from 'path';
import i18next from 'i18next';
import config from '../gulpfile.config';
import engine from 'gulp-nunjucks-render';
import minify from 'gulp-htmlmin';
import Backend from 'i18next-sync-fs-backend';
import rename from 'gulp-rename';

i18next.use(Backend).init({
  debug: true,
  fallbackLng: ['en'],
  initImmediate: false,
  backend: {
    loadPath: config.paths.locales + '/{{lng}}/{{ns}}.json' // локали собираются по названиям из папки locales
  },
  ns: ['translation'],
  defaultNS: 'translation'
});

export function html(done) {
  const envHooks = [
    env => env.addFilter('__', function(key, ns) { // фильтр на поиск и выдачу информации по ключу в i18next
      if(!i18next.exists(key)) return 0;

      return i18next.t(key);
    }),
  ]

  const data = fs.readdirSync( config.paths.datasets ).reduce( (acc, filename) => {
    return { ...acc, [ path.basename( filename, '.json') ] : require('../' + config.paths.datasets + '/' + filename) };
  }, {});

  data.get = function(name) { 
    return this[name];
  }

  const [ def ] = i18next.options.fallbackLng;

  const rec = (arr) => {

    const [lng, ...rest] = arr;

    return i18next.changeLanguage(lng, (err) => {
      if(err) throw new Error(err);

      return gulp.src(config.paths.pages)
        .pipe(engine({
          data: {
            datasets: data,
          },
          path: ['src/pages/templates'],
          manageEnv: function(env) {
            return envHooks.forEach(fn => fn(env));
          },
        }))
        .pipe(minify({ collapseWhitespace: true }))
        .pipe(rename(function(path) {

          path.basename = lng === def ? path.basename : lng + '.' + path.basename;
        }))
        .pipe(gulp.dest(config.server.dest))
        .on('end', () => {
          return rest.length ? rec(rest) : done();
        });
    });
  }

  rec(['ru', 'en']); // если язык дефолтный, то страницы компилируются обычным образом, если нет - у них будет префикс с названием языка

  return;
};

<!--
datasets/features.json
[
  {
    "name" : "independent",
    "_descr" : "features.indep.descr"
  },
  {
    "name" : "secure",
    "_descr" : "features.secure.descr",
  },
]
-->

{% set features = datasets.get('features') %}

<ul class="page-home__features">
  {% for f in features %}
   <li>
    {{ feature.make(f) }}
   </li>
  {% endfor %}
</ul>

<!--
 locales/en/translation.json

  "pages" : {
    "home" : {
      "headings" : {
        "qualities": "a perfect solution for projects"
        }
      }
    }
-->

<code lang="html">
<h2 class="text-center font-weight-bold mb-4 mb-lg-6">
  {{ 'pages.home.headings.qualities' | __ }}
  <!-- фильтр зарегистрирован под названием __ -->
</h2>
</code>

// Дальше идет псевдокод, возможны синтаксические ошибки.

// event-bus.js
import Vue from 'vue'

export default new Vue()

// app.js
import Vue from 'vue'
import bus from './event-bus'

export default new Vue({
  created() {
     bus.$on('some-event', () => { console.log('hi!') })
  },

  components: {
    child: {
      methods: {
        triggerSomeEvent() {
          bus.$emit('some-event')
        }
      }
    }
  }
})

* ::-webkit-scrollbar {
    display: none;
}

* ::-webkit-scrollbar {
    display: block;
    background-color: hsl(240, 100%, 50%);
}