Bootstrap 4 has some advanced features that are really going to help you develop some slick applications and websites. In order to get the full potential out of the framework, I thought it would be a good idea to go over some skills I think you should know before moving forward.
Bootstrap 4 Prerequisites
Understand Flexbox
Flexbox is a new layout mode in CSS3 that allows you to create layouts without using floats or tables. As of now, some older browsers do not support CSS3, but it is important to understand and learn. It is the future!
Bootstrap 4 has an option to enable the use of Flexbox within the framework. When we start developing our Bootstrap 4 WordPress theme we will go over how to use the Bootstrap Flexbox options. This means it is important you understand what Flexbox is and how to use it.
You need to have an active subscription to view this content.
Using Bower with WordPress Theme Development
In this tutorial, you will learn how to use Bower to easily manage third-party libraries, frameworks, and other assets in your WordPress theme project.
We will use Bower to install the latest version of Bootstrap and then enqueue the CSS file in our WordPress theme. This will show you how quick and easy it is to add third-party libraries to your projects with Bower.
You need to have an active subscription to view this content.
Getting Gulp setup quickly within a WordPress Theme Project
I personally use the same Gulp file with minor changes in every WordPress theme development project I work on. This allows me to get my WordPress theme setup and running very quickly!
In this tutorial, I share my gulpfile.js file and go over some of the included Gulp tasks. You will also see how easy it is to get your WordPress theme setup with existing package.json and gulpfil.js files.
You need to have an active subscription to view this content.
Installing the Gulp Sass Plugin
This tutorial goes over how to install Gulp plugins as project dependencies. You will also learn how to use the command line to run a Gulp task to compile your WordPress theme Sass files.
Gulp is a powerful tool that can save you a lot of time while doing any type of development online.
You need to have an active subscription to view this content.
Installing Gulp
In this tutorial, I go over how to install Gulp within your WordPress theme development project. Moving forward we will be using several different Gulp tasks to automate and optimize our WordPress themes.
Bootstrap 4 uses a similar tool called Grunt that we will discuss in later tutorials.
You need to have an active subscription to view this content.
Installing Node
In order to start using Gulp and other tools you need to install Node on your computer. Once Node is installed, you will be able to use the Node Package Manager(NPM) to install other tools and dependencies.
You need to have an active subscription to view this content.
Getting familiar with the Command Line
In order to use Node, Gulp, Grunt, Bower, and other tools it is best to have a good understanding on how to use the command line. Using the command line will make you a better developer and save you a lot of time.
Moving forward, I will be using the command line to install tools that will help with WordPress theme development. These tutorials will help get you familiar with the command line.
You need to have an active subscription to view this content.
Gulp example within a WordPress Theme
Gulp is very powerful tool that will "Automate and enhance your workflow" tremendously! I really wish I would have started using it sooner. I didn't know what I was missing!
In this video, I go over how I use some Gulp tasks to do some cool tricks while developing WordPress themes.
You need to have an active subscription to view this content.
Compiling Sass with CodeKit
There are all kinds of ways to compile Sass to CSS. This tutorial goes over how to use a third-party application called CodeKit to compile your Sass styles. This is just one option, moving forward I will show you how to use Gulp.
You need to have an active subscription to view this content.