sidebars

CSS Flexbox with Sidebars Toggle

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 plugin is included.

Features

• Pure CSS Sidebar toggle
• Sass CSS preprocessor
• PostCSS Autoprefixer
• CSSnano
• Webpack 4
• Webpack Dev Server: webpack-plugin-serve
• Webpack CLI: webpack-nano

1. Requires Node.js

2. Download or clone this repsoitory.

3. Change directory to /uiCookbook/sidebars

4. Run npm install from a bash terminal or command prompt. This will read the package.json file and install the dependencies into the sidebars project folder.

npm install

• Dev

npm run dev

• Build

npm run build

Additional reading:

• jimfrenette.com/2018/12/new-webpack-development-server-plugin/

• jimfrenette.com/2018/09/css-flexbox-with-sidebars-toggle/