ashx3s

CSS Grid Gallery

• Link to accompanying codebase
• CSS Tricks Docs

HTML Plan

• The Layout is designed like this
• The two grid_items after the grid_item.tall will sit next to the tall item on full screen
• the grid_item.wide will span the whole available width (this is a necessary anchor to avoid breakpoints)

ashx3s

Figma to Tailwind

In this assignment, you will create a simple design system in figma. This system will include a color theme, typography, and a couple of custom components.

After creating your design system, you will use a plugin to export it for use in tailwind css.

Instructions

1. Pick one of the provided design outlines and fill out the required content.

• hex codes or hsl() values for each color

ashx3s

GraphQL Core Concepts

• Schema
• Queries
• Mutations
• Subscriptions

Schema

• Defines capabilities of api and how clients fetch and update data

ashx3s

Dark Mode Toggle Implementation

General Notes

• Starting Commit 34e6e2e050f98e7b7d85b833eb3194eea4bf6fc2
• Finished Commit aa56c01ea3d81d267376733c2a2d4c76d8099c7d
• Search Term: Vue darkmode toggle
• Article Used for Reference

Errors-Fixes

ashx3s

Jamstack Modular Tutorial

In this introductory tutorial we will use storyblok's cli to set up the CMS and basic frontend for a Jamstack website. Instead of focusing on building for specific site content, we will focus on practices and step by steps that address a very general workflow. This is a somewhat modular tutorial in that the different sections don't all necessarily need to follow one another, some steps are less dependent on others and I'll make notes on sections that aren't chronologically dependent by nature.

The following points are all top level. Each section is it's own exercise in order of how I think that they should be done.

• Learning Objectives
  • Understand how data is organized in a cms
  • Know how to deploy a website to netlify
• Become familiar with a headless cms to a statically generated frontend

ashx3s

Basic Storyblok Deployment

In this tutorial, we will deploy a storyblok website to netlify. We are going to focus on the content and storyblok editor as much as possible meaning bare minimal coding. To really get the power of jamstack websites and headless cms, you will want to explore code later. This session is designed to build familiarity with a cms workflow.

Overview

• Difficulty: Medium
• Tech Stack Links:
  • storyblok
• storyblok-cli instructions

ashx3s

Tailwind Setup

This is a useful step by step for getting

ashx3s

How to Set up Nuxt Bridge

This example uses tailwind css and storyblok cms.

Quick Steps

• these are the steps

1. install normal nuxt project with create-nuxt-app
2. upgrade to nuxt bridge following these steps

ashx3s

Storblok Content Types

• Check this doc

• Story blok has 2 types of components:

  • Content Type
    • ie: Post, Product, Page
  • Blok (nestable component)
    • ie: Hero, Grid, Full Width Image, section

• schema

ashx3s

Tailwind configuration Breakout Session

• Steps:

  • Add fonts to the tailwind.config.js file
  • Add 2 colors to the tailwind.config.js file
  • Add default font styles inside @layer base {} in your css file
  • to use tailwind properties in your css file, add them with @apply

• Example: