Kimserey's blog

Bundle Bootstrap using Webpack Few weeks ago I talked about LibMan which was a tools preinstalled on Visual Studio 2017 preview allowing local download of cdnjs minified css/js. Today I will show how we can configure Webpack with npm to manage libraries like Bootstrap and minify both css and js while applying all its good algorithm like tree shacking. Get started with Webpack Bundle js Bundle css Multiple configurations 1. Get started with Webpack The goal of Webpack is to make it easy for developers to bundle code together and reduce its size in order to provide the smallest functional possible file to serve to users. In this post, I will show how we can bundle Bootstrap 4.0, both its js and its sass source code in order to provide two bundle, bundle.js and bundle.css . Before we look into Webpack, lets look at the steps which would be required to provide the bundles. Bootstrap npm package comes with js modules which are separated by functionality. For example for the moda...

Create a navbar responsive display with flexbox and boostrap v4 Last week we saw how to setup vscode to compile sass. Today we will see how we can compile bootstrap sass files together with our own sass and define a grid layout for the collapsed nav in smaller screen using flexbox. Flexbox Bootstrap sass media directive Build the nav style We will be creating the style for the following navbar: 1. Flexbox Flexbox allows to control how elements are rendered in a responsive layout. We can control precisely how the space available is occupied by elements together with the order of appearance. There’s few settings for it which are applied to the container and the elements within the container. Refer to MDN documentation if you want more explanation https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes . In this tutorial, I will only use the following css properties: For the container: display: flex; flex-flow: row wrap; display:f...

Setup vscode to work with sass effortlessly Writing sass is very easy with code. Today we will see how we can leverage some NPM packages to compile SASS to CSS, watch file changes and live update the browser for an effortless style development. This post will be composed by 3 parts: 1. Setup vscode task 2. Create a Gulp build script 3. Use live-server for live reload The tasks are from the example of vscode documentation to compile sass https://code.visualstudio.com/docs/languages/css#_transpiling-sass-and-less-into-css . 1. Setup vscode task To use code tasks, we need to create a tasks.json file under the hidden /.vscode folder. | - .vscode - tasks.json | - style.scss | - index.html The tasks allow us to execute programs by selecting from the search bar CMD + shift + P , Run build task . If a default task is set, it can directly be triggered by CMD + shift + B . As a first example we can start by installing the sass compiler with node-sass . npm install -g node-sas...