Week 5
CSS Frameworks, compiling Sass with Gulp

# Frontend Frameworks

When we talk about frontend frameowrks there are two kinds of things that we could mean: Application Frameorks and Styling or CSS Framworks.

Application Framworks are more JavaScript with some CSS and are focused on data models, API communication and responding to interactive user events.

Styling Frameworks are meant to provide a head start on building out the common usecase widgets that we use to assemble websites and web applications.

For this class we will focus on the Styling Framworks. Next semester's Web Applications course will focus on Application Frameworks and Vue.js in particular.

# Styling Frameworks

# Bootstrap 4

From the docs ...

Build responsive, mobile-first projects on the web with the world's most popular front-end component library.

Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.

Documentation and download links at getbootstrap.com

# Bulma

Bulma is a lightweight open source CSS framework based on Flexbox. It uses clean sematically named classes with no JavaScript dependancies. Like Bootstrap, Bulma is easily customizable with an extensive set of Sass variables.

Documentation and download links at bulma.io

# Tailwind CSS

From the docs ...

Tailwind is different from frameworks like Bootstrap, Foundation, or Bulma in that it's not a UI kit. It doesn't have a default theme, and there are no built-in UI components.

On the flip side, it also has no opinion about how your site should look and doesn't impose design decisions that you have to fight to undo. If you're looking for a framework that comes with a menu of predesigned widgets to build your site with, Tailwind might not be the right framework for you.

Documentation and download links at tailwindcss.com

# Application Frameworks

# Vue.js

# React

# Angular

# In-class Exercise 5-1

For this exercise we will look at how to use a Javascript based task runner in the terminal environment to automate a repetetive set of multi-step instructions to prepare our final CSS file from our SCSS source files.

In particular we will configure it to:

• automatically watch the scss folder for any changed files
• when a source .scss file changes, trigger the Sass compiler
• take the output from the compiler and automatically add vendor prefixes
• then minimize the final CSS file size by removing all white-space
• finally place the resulting CSS file in the css/min folder

There are many options for task runners, including Grunt, Gulp and WebPack. Today we will look at Gulp.

I have prepared a GitHub repository with some starter code for you.

1. Accept the GitHub Classroom: Gulp Demo assignment.

2. Clone the repository to your computer.

3. Open the project folder in VS Code.

4. Open a new terminal window in VS Code.

We can see that this is a slightly refactored version of last week's Flexbox navbar example. The source *.scss files are in their own folder. The images have been moved to their own folder, and the index.html file now links to the minimized version of the main.css file: css/min/main.css.

5. Let's look at the package.json file to see the listed dependencies.

// other settings ...

"dependencies": {
    "autoprefixer": "^9.1.5",
    "cssnano": "^4.1.4",
    "gulp": "^3.9.1",
    "gulp-postcss": "^8.0.0",
    "gulp-sass": "^4.0.1"
  }

6. Use our node package manager in the terminal to download the node module libraries defined as project dependencies in the package.json file.

 npm install

npm install gulp-cli -g

7. OK, now we need to tell Gulp what to do. Let's look at the gulpfile.js

// Declare global scope variables.
const gulp = require('gulp') // load the gulp library
const sass = require('gulp-sass') // load the gulp-sass compiler library
const sassPath = './scss/**/*.scss' // the folder(s) with our Sass source files
const postcss = require('gulp-postcss') // load the postcss library
const autoprefixer = require('autoprefixer') // load the autoprefixer plugin
const cssnano = require('cssnano') // load the cssnano plugin

// Define a new task called 'sass' that we can call to compile Sass to CSS
gulp.task('sass', function () {
  // Create a plugins variable with the names and configuration parameters
  // of the PostCSS plugins that we want to use.
  const plugins = [
    autoprefixer({
      browsers: ['last 2 version']
    }),
    cssnano()
  ]
  // Now lets tell gulp what to do ...
  return gulp
    .src(sassPath) // where to find the Sass source files (use our variable)
    .pipe(sass()) // forward those files to the compiler
    .pipe(gulp.dest('./css')) // where to output the interim compiled css
    .pipe(postcss(plugins)) // apply the PostCSS plugins
    .pipe(gulp.dest('./css/min')) // where to output the final minimized CSS files
})

// Define a new default task (so we can just call 'gulp' on the command line)
// to automatically compile when we save changes to our Sass files
gulp.task('default', function () {
  gulp.watch(
    sassPath, // which files to watch for changes (use our variable)
    ['sass']) // an array of tasks to run when changes are detected.
})

8. We can run the Gulp task sass in the terminal like this ...

gulp sass

9. But more usefully we can run the default task that was defined to put Gulp in watch mode.

gulp

10. Make changes ... see it compile

Let's see gulp in action. It is now actively watching the contents of the scss folder for any changes. On line 10 of the main.scss file, update the navbar $height variable to be 90px and then save the file.

You should see output in the terminal showing that Gulp has started the 'sass' task and then finished the 'sass' task -- similar to this ...

[22:09:22] Starting 'sass'...
[22:09:23] Finished 'sass' after 312 ms

Let's make another change. Update the global variable $brand-color to be rebeccapurple and save. Again you should see Gulp running the 'sass' command.

11. Our gulp sass command produces two output files:

• css/main.css (the human readable version)
• css/min/main.css (the minimized version for the browser)

12. What is that .gitignore file all about?

This gives us a way to tell Git, "don't even bother looking here." There are often certain files or folders that we want to exclude from our source control (git). In this project example we want to exclude the entire contents of the node_modules folder, since this is where the third-party libraries that we linked with NPM are installed. This is not our code and does not belong in our repo.

13. Wrap up.

We made some changes. So, let's create a commit with the message, "Complete EX 5-1" and then Push to GitHub.

14. Submit the URL of this GitHub repo for In-class Exercise 5-1 on Bright Space.

# Add Gulp to your Midterm project

All you need to do is copy these three files from this demo project into the project folder for your Midterm project:

• package.json
• gulpfile.js
• .gitignore

Then in the terminal, in your Midterm project folder, run npm install to pull down the Gulp dependencies. Then you can run gulp in your Midterm project folder to compile your source Sass files (stored in the scss folder).

Be sure to update your HTML files to link to the new css/min/main.css file generated by Gulp.