DEV Community

Jim Frenette
Jim Frenette

Posted on • Originally published at jimfrenette.com

CSS Flexbox with Sidebars Toggle

#css #webdev #webpack

This post documents how to create a fully responsive flexbox content layout that contains a pure CSS open/close toggle for the left and right sidebars. The CSS is built from Sass using Webpack with Autoprefixer. For development, a Webpack Dev Server is included.

Features

  • Pure CSS Sidebar toggle
  • Sass CSS preprocessor
  • PostCSS Autoprefixer
  • CSSnano
  • Webpack 4
  • Webpack Dev Server

responsive sidebars in flexbox
demo and edit this code in our online sandbox

Getting Started

Create an index.html file in the root of the project with the following HTML. This markup creates a layout with header, content and footer containers. The content container includes aside containers for the sidebars and checkbox inputs to toggle the sidebars open or closed.

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>
Enter fullscreen mode Exit fullscreen mode

Using Emmet, which is built into VS Code, you can create the index.html content by entering an exclamation mark on the first line then select the tab key.

Create a src/sass folder in the project. And in the sass folder create a style.scss file with the following 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; }
}
Enter fullscreen mode Exit fullscreen mode

Webpack

Webpack is going to be used to process the Sass as its saved into CSS and serve the HTML locally.

  • Pre-requisite – the Webpack module bundler example here requires Node.js.

Use your favorite Node.js bash command line to setup the project. Navigate to the project root and enter npm init. Accepting the defaults is fine.

npm init
Enter fullscreen mode Exit fullscreen mode

Now we're ready to install Webpack and other devDependencies into our project. In case you're wondering, the projects node_modules folder is where all of these packages get installed. For more information, visit npmjs.com and/or watch this introduction to npm video.

Install Webpack and its Command Line Interface.

npm install -D webpack webpack-cli
Enter fullscreen mode Exit fullscreen mode

Create a config folder for the webpack configuration files.

In this config folder, there will be three webpack configuration files, base.config.js, dev.config.js and prod.config.js.

First, create the config/base.config.js which holds the configuration common to both dev and production.

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'
      }
    ]
  }
}
Enter fullscreen mode Exit fullscreen mode

The mini-css-extract-plugin extracts the css from the bundle and outputs the css file after the loaders process the sass.

Install the plugin and loaders for the base configuration.

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
Enter fullscreen mode Exit fullscreen mode

Next, create the 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()
  ]
});
Enter fullscreen mode Exit fullscreen mode

Install the webpack-dev-server, write-file-webpack-plugin and webpack-merge.

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

npm install -D webpack-merge
Enter fullscreen mode Exit fullscreen mode

The write-file-webpack-plugin, like the mini-css-extract-plugin, outputs the css file for the in-memory webpack dev server. However, this plugin does not do anything unless it is used with the webpack-dev-server.

We are using webpack-merge to combine our separate webpack configuration modules.

We need a small configuration file for postcss. In the project root, create a file named postcss.config.js.

postcss.config.js 
module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}
Enter fullscreen mode Exit fullscreen mode

Create the 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 } }
    })
  ]
});
Enter fullscreen mode Exit fullscreen mode

Install the optimize-css-assets-webpack-plugin and uglifyjs-webpack-plugin to make our client side assets as small as possible for production.

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

npm install -D uglifyjs-webpack-plugin
Enter fullscreen mode Exit fullscreen mode

Supported Browsers

Add a browserslist property to the package.json file to define which vender prefixes to with the generated CSS. In this example, we target browsers greater than 2% according to global usage statistics and Internet Explorer versions greater than 9. [more info]

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

  ...
}
Enter fullscreen mode Exit fullscreen mode

npm-run-script

Add these webpack commands to the scripts property. These npm script commands are what we will run to kickoff the webpack dev server and watch or prod webpack build.

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"
  },

  ...
}
Enter fullscreen mode Exit fullscreen mode

Entrypoint JavaScript

Create a src/js/index.js javascript entrypoint file to import the style Sass for the webpack bundle.

index.js 
import '../sass/style.scss'
Enter fullscreen mode Exit fullscreen mode

Sidebar Toggle Sass

Create these three Sass partials for the sidebar toggle, src/sass/_toggle.scss, src/sass/_default-open.scss and src/sass/_default-closed.scss.

This is the _toggle.scss partial imported by the style.scss file.

_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[for=sidebar-1-toggle],
label[for=sidebar-2-toggle] {
  position: absolute;
  top: 0;
  display: block;
  padding: .25em 10px;
  font-size: 1.5em;
  cursor: pointer;
}

label[for=sidebar-1-toggle] {
  left: 0;
}

label[for=sidebar-2-toggle] {
  right: 0;
}

@media all and (max-width: 800px) {
  label[for=sidebar-1-toggle],
  label[for=sidebar-2-toggle] {
    display: none;
  }
  .sidebar-1,
  .sidebar-2 {
    display: block;
    width: 50%;
  }
}
Enter fullscreen mode Exit fullscreen mode

This is the _default-open.scss partial imported by the _toggle.scss.

_default-open.scss 
/**
  * Sidebars open by default
  */

.sidebar {
  width: 20%;
}

label[for=sidebar-1-toggle],
label[for=sidebar-2-toggle] {
  &:after {
    content: '\2013';
  }
}

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

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

This is the _default-closed.scss partial imported by the _toggle.scss file when uncommented.

_default-closed.scss 
/**
  * Sidebars closed by default
  */

.sidebar {
  display: none;
}

label[for=sidebar-1-toggle],
label[for=sidebar-2-toggle] {
  &:after {
    content: '+';
  }
}

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

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

Webpack Dev Server

For development, use npm run dev to launch the dev server, open the browser, watch for changes and build incrementally when changes are saved.

npm run dev
Enter fullscreen mode Exit fullscreen mode

Now test the development server and file watch build. Edit the _toggle.scss file and comment @import "default-open";, uncomment @import "default-closed";. Save the file, check the terminal output and refresh the browser.

For production, cancel the dev task Ctrl + C and run the build.

npm run build
Enter fullscreen mode Exit fullscreen mode
Source Code

Originally published at jimfrenette.com/2018/09/css-flexbox-with-sidebars-toggle

Top comments (0)

Read next

imsushant12 profile image

A Guide for Securing Your Node.js Application

Sushant Gaurav -

code42cate profile image

How to Dockerize and Deploy Fastify APIs

Jonas Scholz -

balrajola profile image

Top 10 Modern JavaScript Patterns for 2025

balrajOla -

mirzasaikatahmmed profile image

Unlocking VS Code: The Ultimate Cheatsheet for Developers

Mirza Saikat Ahmmed -