Learn Alpine, Scss and Tweenmax

It's tempting to pick up a framework which has preselected flexbox or grid as the layout tool of choice, but it's important to learn when and why to use each method. This leads to slimmer stylesheets which results in better site performance, and less likelihood for "hacks" to make one method do what the other does inherently better.

Throughout this collection, we will be progressively styling a responsive landing page template while building your knowledge on when to select grid or flexbox for any layout scenario. Spoiler alert: sometimes the best solution is using both!

The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent.

flexbox

Create a Landing Page with CSS Grid and Flexbox

Welcome to this beginner level series on Alpine JS! 👋🏞

Alpine JS is a rugged, minimal framework for composing JavaScript behaviour in your markup. It brings declarative, reactive, data-driven nature of libraries like React or Vue to your HTML templates.

In this series, you will learn about Alpine's handy **directives**. You'll discover how to define a component scope with `x-data`, run code on mount with `x-init`, attach event listeners with `x-on`, display data with `x-text`, decide wether or not to show an element with `x-show`, iterate through data with `x-for`, retrieve a DOM element with `x-ref`, learn how to achieve _two-way data binding_ with `x-model`, and much more.

You'll also learn how **"modifiers"** can be applied and chained to directives to provide additional functionality: control the animation transition of entering and leaving DOM elements, debounce an event listener, etc.

We'll also touch on what Alpine calls **"magic properties"**, which give you access to native browser events (`$event`), reference to DOM elements (`$refs`), and more.

You'll gradually discover Alpine's API and syntax, from building simple tabs to a mini app that fetches a dog picture based on a "breed" search field. 🐶

**Get ready to breathe some fresh air** - it's time to walk into cool, green Alpine pastures! 🏞

Alpine.js offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost.

You get to keep your DOM, and sprinkle in behavior as you see fit.

alpine

Sprinkle declarative, reactive behaviour on your HTML with Alpine JS

CSS uses a global namespace for CSS Selectors that can easily result in style conflicts throughout your application when building an application using modern web components. You can avoid this problem by nesting CSS selectors or use a styling convention like BEM but this becomes complicated quickly and won’t scale.

CSS-in-JS avoids these problems entirely by generating unique class names when styles are converted to CSS. This allows you to think about styles on a component level with out worrying about styles defined elsewhere.

In this course, you will learn how to express popular SCSS (Sass) language features using latest JavaScript features. We will convert simple examples from SCSS to CSS-in-JS. As a designer or (S)CSS developer, you should be able to follow without extensive JavaScript knowledge, understanding SCSS is required though. We will not be using any particular CSSinJS libraries. Instead, we will focus on a base knowledge you need later if you use any CSSinJS library.

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

scss

Convert SCSS (Sass) to CSS-in-JS

Have you ever wished for access to conditionals or iteration when writing styles? How cool would it be to use functions to write styles? SCSS has that and more! SCSS is a superset of CSS. Any valid CSS is SCSS, they even have the same syntax. SCSS borrows features from other languages to write smarter, reusable and more readable styles. This course will focus on how to use SCSS’s more useful features, compare them against each other and assess when their usage is appropriate.

Learn the Best and Most Useful SCSS

Cascading Style Sheets bring order and beauty to our applications.

In this lesson we'll learn how to convert our Sass code to CSS code. We'll take a look at the sass watch command and use it to listen for changes within our Sass code.

The `sass` executable can be downloaded globally through npm by running `npm i -g sass`.

Converting Sass To CSS

In this lesson, we learn how the `x-init` directive in Alpine JS lets us run a JavaScript expression once the component has initiated.

We see the nuances that allow us to trigger that code before Alpine performs initial DOM updates, or after these updates have been made.

Focus in input field on page load with `x-init` in Alpine JS

In this lesson, we define a "count" state value with the `x-data` directive provided by Alpine JS. This defines a new scoped component, which can have access to this state.

We then display the "count" value in our HTML with the `x-text` directive, which updates an element's `innerText` value.

We also hook up buttons with click event listeners with `x-on:click`, which allows us to modify the count value as desired.

Update a count state value with the x-on event listener directive in Alpine JS

In this lesson, we create a set of tabs with Alpine JS, where only the content of the currently active tab is visible. To do this, we define an `activeTab` state value with `x-data. We then wire up our buttons to change the value of `activeTab` on click, and use `x-show` to determine if the tab content should be visible or not, based on the value of `activeTab`.

We also take control of the `class` attribute with `x-bind`, and we conditionally output an "active" class based on, you guessed it, the value of `activeTab`.

Toggle visibility and styles based on state with `x-show` and `x-bind` in Alpine JS

In this lesson, we move the component definition to a function, defined in a script tag in the HTML document.

We then iterate through an Array of Objects with the `x-for` directive in Alpine JS. We use a `<template>` tag to wrap the HTML element we want to repeat for each item, and put the `x-for` directive on that template tag.

We also define a "computed" property by adding a method on our function, which checks if a given ID matched the currently active tab id. This computed property allows us to determine wether or not to apply the "active" classname to our tab buttons.

Iterate through data with the `x-for` attribute in Alpine JS

In this lesson, we smoothen the transitions between tabs by applying a `transition` modifier to our `x-show` directive.

We see how we can ignore the leaving elements, and focus the animation on the entering elements. We tweak the transition duration and origin by chaining additional modifiers to our `x-show` directive.

Control enter and leave transitions with the `x-show.transition` modifier in Alpine JS

In this lesson, we see how the `x-model` directive makes achieving "two-way data binding" effortless in Alpine JS.

We see what it would take to recreate the same functionality with an `x-bind` directive for the input value, as well as an `@input` event listener which, thanks to an access to the browser's native events via the `$event` magic property, sets the state value to `$event.target.value`.

Keep a DOM input and state value in sync with the `x-model` directive in Alpine JS

In this lesson, we learn how to retrieve a DOM element via the `x-ref` directive in Alpine JS, which gives us a reference to the element it is applied on. In our case, an input field.

We can then use the `$refs` object, and reach for the ref we need to target.

This allows us to trigger the focus state of the input field, with the `.focus()` method.

Focus an input field on button click with `x-ref` and the `$refs` property in Alpine JS

In this lesson, we build a little app that fetches dog photos from the dog.ceo API, based on a "breed" search field. We want the API call to happen again when the search value changes, and to do so we use the `$watch` property from Alpine JS, which lets us define what state property we want to watch, and what callback function to run when a change happens.

We also use the `debounce` modifier on the `x-model` property to avoid firing an API call on each keystroke.

Refetch API data when a state value changes with the `$watch` property in Alpine JS

Welcome to this beginner level series on Alpine JS! 👋🏞

Alpine JS is a rugged, minimal framework for composing JavaScript behaviour in your markup. It brings declarative, reactive, data-driven nature of libraries like React or Vue to your HTML templates.

This is the series intro video. Let's get started!

Series Intro - Beginner Level Alpine JS

Manage the color palette used in your stylesheets by creating a map of variables and a function to access the values by key. This allows you to update the colors in one location to re-theme your application and eliminate manual find and replace.

Access Theme Color Values With Sass

Learn the fundamental difference between CSS grid and flexbox layout, and create utility classes for each `display` value. Then begin to apply and expand these concepts to style the landing page navigation.

Choose Between Grid or Flexbox for CSS Layout

Apply grid layout and see when it's necessary to break out a media query to overcome grid's lack of wrapping behavior. We'll also learn about a property that grid and flexbox share: `align-items`.

Use CSS Grid to Create Layout Columns

Grid offers us the easiest method to responsively center content. We'll use the grid property `place-content` to center the contents of `figure` to showcase our fictional product in use. Additionally, we'll learn about `object-fit` which is a modern technique that allows inline images to scale responsively within defined dimensions without distortion.

Responsively Center an Image and Caption with CSS Grid

View a preview of the form fields we'll be creating in this course, inclusive of custom CSS styles for text inputs, textareas, selects, multiselects, radio buttons, and checkboxes. Then get an overview of the base project and key parts of the Eleventy build process in regards to compiling with Dart Sass and use of Nunjucks for project template scaffolding. 

Prior experience with Eleventy or Nunjucks is not required, but you may also enjoy learning how to [create an Eleventy site from scratch](https://egghead.io/playlists/build-an-eleventy-11ty-site-from-scratch-bfd3?af=2s65ms) in less than 20 mins in my other egghead collection.

Course Introduction: Accessible Cross-Browser Form Field CSS Styles

We'll define the color palette and create the basic screen styles for our project in addition to Sass helpers for our form design system. 

We will set up Sass variables for the initial them and learn how to use the !default flag to allow our system to be easily overridden from project to project, making our form styles ultra transferable and reusable. You'll also learn how to leverage Sass color functions for ease of theming. We'll map the Sass variables to CSS variables so that as we build up our system we can use CSS variables for the most flexibility in our theming.

Initialize the Form Design System Setup with Sass and CSS Variables

We'll make a starting point for our form layout styles by creating `.form-group` which will add a bit of `margin` between fields. This will be our first design system component, and we'll also include styles for the `label` contained in this class.

Topics

Instructors

Content Type