В этом посте описано, как создать полностью адаптивный макет содержимого flexbox, который содержит переключатель открытия/закрытия на чистом CSS для левой и правой боковых панелей. CSS создан из Sass с использованием Webpack с Autoprefixer. Для разработки включен Webpack Dev Server.

Функции

  • Переключатель боковой панели на чистом CSS
  • Препроцессор CSS Sass
  • PostCSS Autoprefixer
  • CSSnano
  • Вебпак 4
  • Сервер разработки Webpack

Начиная

Создайте файл index.html в корне проекта со следующим HTML. Эта разметка создает макет с контейнерами заголовка, содержимого и нижнего колонтитула. Контейнер содержимого включает в себя боковые контейнеры для боковых панелей и флажки для открытия или закрытия боковых панелей.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" media="all" href="/dist/app.css">
</head>
<body>
    <div class="site">
        <header class="header">Header</header>
        <div class="content">
            <article class="main">
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
            </article>
            <input type="checkbox" id="sidebar-1-toggle">
            <label for="sidebar-1-toggle"></label>
            <aside class="sidebar sidebar-1">
                <div>Sidebar 1</div>
            </aside>
            <input type="checkbox" id="sidebar-2-toggle">
            <label for="sidebar-2-toggle"></label>
            <aside class="sidebar sidebar-2">
                <div>Sidebar 2</div>
            </aside>
        </div>
        <footer class="footer">Footer</footer>
    </div>
</body>
</html>
  • Используя Emmet, который встроен в VS Code, вы можете создать содержимое index.html, введя восклицательный знак в первой строке, а затем нажав клавишу табуляции.

Создайте папку src/sass в проекте. И в папке sass создайте файл style.scss со следующим css.

style.scss

body {
  min-width: 400px;
}

.site {
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  font-weight: bold;
  text-align: center;
}

.content {
  display: flex;
}

.header {
  background: tomato;
  padding: 10px;
}

.footer {
  background: lightgreen;
  padding: 10px;
}

.main {
  flex: 1;
  min-width: 0;
  text-align: left;
  background: deepskyblue;
  padding: 10px;
}

.sidebar > div {
  padding: 10px;
}

.sidebar-1 {
  background: gold;
}

.sidebar-2 {
  background: hotpink;
}

@media all and (max-width: 800px) {
  .content {
    flex-wrap: wrap;
  }
  .main {
    flex: 1 1 100%;
  }
}

@media all and (min-width: 801px) {
  .sidebar-1 { order: 1; }
  .main    { order: 2; }
  .sidebar-2 { order: 3; }
}

Вебпак

Webpack будет использоваться для обработки Sass, сохраненного в CSS, и локального обслуживания HTML.

  • Предварительное условие — для примера сборщика модулей Webpack здесь требуется Node.js.

Используйте вашу любимую командную строку Node.js bash для настройки проекта. Перейдите в корень проекта и введите npm init. Принятие значений по умолчанию в порядке.

npm init

Теперь мы готовы установить Webpack и другие devDependencies в наш проект. Если вам интересно, папка проектов node_modules — это место, где устанавливаются все эти пакеты. Для получения дополнительной информации посетите npmjs.com и/или посмотрите это введение в npm video.

Установите Webpack и его интерфейс командной строки.

npm install -D webpack webpack-cli

Создайте папку config для файлов конфигурации веб-пакета.

В этой папке конфигурации будет три файла конфигурации веб-пакета: base.config.js, dev.config.js и prod.config.js.

Во-первых, создайте config/base.config.js, который содержит конфигурацию, общую как для разработки, так и для производства.

base.config.js

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  context: path.resolve(__dirname, '../src'),
  entry: {
    app: './js/index.js'
  },
  plugins: [
    new MiniCssExtractPlugin
  ],
  module: {
    rules: [
      {
        test: /\.(css|scss)$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader' },
          {
            loader: 'sass-loader' }
        ]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  }
}

mini-css-extract-plugin извлекает css из бандла и выводит css файл после того, как загрузчики обработают sass.

Установите плагин и загрузчики для базовой конфигурации.

npm install -D mini-css-extract-plugin

npm install -D babel-loader @babel/core @babel/preset-env

npm install -D autoprefixer style-loader css-loader postcss-loader

npm install -D node-sass sass-loader

Затем создайте файл config/dev.config.js.

dev.config.js

const baseConfig = require('./base.config.js');
const merge = require('webpack-merge');
const writeFilePlugin = require('write-file-webpack-plugin');

module.exports = merge(baseConfig, {
  devtool: 'eval-source-map',
  plugins: [
    new writeFilePlugin()
  ]
});

Установите webpack-dev-server, write-file-webpack-plugin и webpack-merge.

npm install -D webpack-dev-server write-file-webpack-plugin

npm install -D webpack-merge

write-file-webpack-plugin, как и mini-css-extract-plugin, выводит файл css для сервера разработки webpack в памяти. Однако этот плагин ничего не делает, если он не используется с сервером webpack-dev-server.

Мы используем webpack-merge для объединения наших отдельных модулей конфигурации webpack.

Нам нужен небольшой конфигурационный файл для postcss. В корне проекта создайте файл с именем postcss.config.js.

postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

Создайте файл config/prod.config.js.

prod.config.js

const baseConfig = require('./base.config.js');
const merge = require('webpack-merge');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

module.exports = merge(baseConfig, {
  optimization: {
      minimizer: [
        new OptimizeCSSAssetsPlugin({})
      ]
  },
  plugins: [
    new UglifyJsPlugin({
      uglifyOptions: { output: { comments: false } }
    })
  ]
});

Установите optimize-css-assets-webpack-plugin и uglifyjs-webpack-plugin, чтобы сделать наши активы на стороне клиента как можно меньше для производства.

npm install -D optimize-css-assets-webpack-plugin

npm install -D uglifyjs-webpack-plugin

Поддерживаемые браузеры

Добавьте свойство browserslist в файл package.json, чтобы определить, какие префиксы продавца использовать для сгенерированного CSS. В этом примере мы ориентируемся на браузеры выше 2% согласно глобальной статистике использования и версии Internet Explorer выше 9. [подробнее]

package.json

{
  "name": "blank",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "browserslist": [
    "> 2%",
    "ie > 9"
  ],

  ...
}

npm-run-скрипт

Добавьте эти webpack команды в свойство scripts. Эти команды сценария npm — это то, что мы будем запускать, чтобы запустить сервер разработки веб-пакета и посмотреть или запустить сборку веб-пакета.

package.json

...

  "browserslist": [
    "> 2%",
    "ie > 9"
  ],
  "scripts": {
    "dev": "webpack-dev-server --mode=development --watch --progress --colors --config config/dev.config.js --open",
    "build": "webpack --mode=production --progress --hide-modules --config config/prod.config.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

  ...
}

Точка входа JavaScript

Создайте файл точки входа src/js/index.js javascript, чтобы импортировать стиль Sass для пакета webpack.

index.js

import style from '../sass/style.scss'

Боковая панель Переключить Sass

Создайте эти три элемента Sass для переключателя боковой панели: src/sass/_toggle.scss, src/sass/_default-open.scss и src/sass/_default-closed.scss.

Это партиал _toggle.scss, импортированный файлом style.scss.

_toggle.scss

/**
 * Sidebar toggle
 */

// uncomment for default closed sidebars
// @import "default-closed";
// uncomment for default open sidebars
@import "default-open";

/**
 * checkboxes open/close the sidebars
 * #sidebar-1-toggle and #sidebar-2-toggle
 */
 #sidebar-1-toggle, #sidebar-2-toggle {
  display: none;
}

label,
label {
  position: absolute;
  top: 0;
  display: block;
  padding: .25em 10px;
  font-size: 1.5em;
  cursor: pointer;
}

label {
  left: 0;
}

label {
  right: 0;
}

@media all and (max-width: 800px) {
  label,
  label {
    display: none;
  }
  .sidebar-1,
  .sidebar-2 {
    display: block;
    width: 50%;
  }
}

Это партиал _default-open.scss, импортированный _toggle.scss.

_default-open.scss

/**
 * Sidebars open by default
 */

.sidebar {
  width: 20%;
}

label,
label {
  &:after {
    content: '\2013';
  }
}

#sidebar-1-toggle:checked ~ label,
#sidebar-2-toggle:checked ~ label {
  &:after {
    content: '+';
  }
}

#sidebar-1-toggle:checked ~ .sidebar-1,
#sidebar-2-toggle:checked ~ .sidebar-2 {
  display: none;
  width: 0;
}

Это партиал _default-closed.scss, импортированный файлом _toggle.scss при раскомментировании.

_default-closed.scss

/**
 * Sidebars closed by default
 */

.sidebar {
  display: none;
}

label,
label {
  &:after {
    content: '+';
  }
}

#sidebar-1-toggle:checked ~ label,
#sidebar-2-toggle:checked ~ label {
  &:after {
    content: '\2013';
  }
}

#sidebar-1-toggle:checked ~ .sidebar-1,
#sidebar-2-toggle:checked ~ .sidebar-2 {
  display: block;
  width: 20%;
}

Сервер разработки Webpack

Для разработки используйте npm run dev для запуска сервера разработки, открытия браузера, отслеживания изменений и постепенной сборки при сохранении изменений.

npm run dev

Теперь протестируйте сервер разработки и сборку файлов. Отредактируйте файл _toggle.scss и прокомментируйте @import "default-open";, раскомментируйте @import "default-closed";. Сохраните файл, проверьте вывод терминала и обновите браузер.

Для производства отмените задачу разработки с помощью Ctrl + C и запустите сборку.

npm run build

"Исходный код"

Первоначально опубликовано на сайте jimfrenette.com 16 сентября 2018 г.