SAIT Web Developer

Fast Track - Fall 2021

CPNT 201 Day 7 - SASS, Minification, and CSS frameworks

Morning Reflection

  • Assignment 4 Check in
  • Open Questions
  • Make sure that everyone has node and npm installed

Assignment 5: Build Tools

Prep

Overview

  1. Intro to CSS Frameworks
  2. CSS Frameworks
  3. SASS
  4. Minification
  5. Lab Time

Intro to CSS Frameworks

  • CSS Frameworks help make site styles more maintainable and quicker to deploy.
  • There are lots of options and they cater to different developer needs/preferences
  • 3 of the most common tools:

SASS/SCSS

  • Definition
    A superset of css. Compatible with css and extends css functionality. Sass is also used to build css frameworks. It gives you the ability to nest css declarations, create defaults easily, and add logic to your stylesheets.

  • Example (nesting):

    header {
  display: flex;
  a.btn {
    background-color: blue;
    color: white;
    font-weight: 700;
    padding: 2px 4px;
    border-radius: 50px;
  }
  a.btn: hover {
    background-color: darkblue;
  }
}

  • Example (mixin):

    /* declare the mixin */
@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Then use the mixin like so: */
nav ul {
  @include reset-list;
}

  • Note that you can use tailwind inside of sass

  • Important syntax includes:

    • @function, @mixin, @include, and $variable-name (for custom variables)

Tailwind CSS

  • Definition
    A utility-first framework. Create your own components and styles effeciently. Great for developers' who want to have a lot of personalization to their stylesheets. Not as opinionated at Bootstrap.

  • Example: <a class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px4 rounded-full">button</a>

    • you can then turn this into a component in a css file by using the @apply directive

      .btn {
  @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px4 rounded-full;
}

    • Then your html markup would look like

      • <a class="btn">button</a>

Bootstrap CSS

  • Definition
    A component focused css framework. Includes javascript plugins and a responsive grid system. Bootstrap was created by Twitter. It's an older, heavier, and more opinionatedframework and sites that use it tend to look the same. However it is very powerful and easy to use.

  • Example:

    • <a class="btn btn-primary">button</a>

You can try these out in codepen by adding any of them to your css in the settings via the cdn.

  • For your projects, you will need to install the framework of choice with npm.

Tips to get Started

Activity: Experiment with a css framework in codepen

  • Fork or use one of your old codepens
  • Add a framework or sass preprocessor
  • follow the documentation and try implementing any of the following changes:
    • restyle a nav bar
    • style a button
    • style a card layou
  • NOTE you can use sass with bootstrap or tailwind. However it is considered best practice to use minimal custom css when using a framework

Install a Framework

For demonstration I will be using tailwind and sass/scss

  • You can install any of these with npm or yarn
  • Install guides can be found in the documentation and on npm's website
  • For a project specific install (generally use this) you would:
    1. go to the root of your project directory in your command line
    2. run npm install package-name
    3. Do any other configurations required
    4. Start coding

SASS Setup

  • create a main.scss file and edit your styles in there
  • To render the css file, you can use the vscode Live Sass Compiler plugin, and you can also add a build script to your package.json
  • Review this doc

How to compile in the commandline

Add this to the "scripts": {} part of your package.json

  • "scss": "node-sass --watch scss -o css"
    • this will compile the output of your sass to the css directory.
      • IMPORTANT this command assumes that you have a folder called scss/ inside of one called css. If you used different names, you have to change them in the command

Tailwind Setup

How to compile a tailwind file

Create a custom configuration

  • this will generate a tailwind.config.js file
    • npx tailwindcss init
    • to create a full complete configuration run
      • npx tailwindcss init --full

Activity: Set up tailwind css in a project

  • Create a new repository
  • Add tailwind css to it along with an html file
    • Use the install method that makes the most sense to you
  • Add some sample content (keep it small)
  • Stylize your sample content

Minification

  • This optimizes your code for production

  • install a minifier through a vscode extension

  • Minification
    A build process that reduces css and js file size by removing comments and whitespace. Will also reduce js variable/function names in advanced cases.

  • Minification plugin

Lab Time

  • Submit a link to your codepen or the repo created for your local tailwindcss activity to Brightspace for the daily activity
  • Work on Assignment 4 or 5
  • Rooms will be open for your choice

Extra Trophy Activity: Feature Branch

  • Create a feature branch on your assignment 4 repository
  • Use this branch to write your assignment 5 code
    • you can submit this branch or merge it into your main branch
      • (it will not interfere with assignment 4 as that is all based on specific commits)