⚡️

Level-Up With Modern CSS

Day One

Presented by Stephanie Eckles • @5t3ph

👋🏽👋🏼👋🏻

Hi! I'm Steph

Author of ModernCSS.dev and StyleStage.dev, and creator of SmolCSS.dev

 

List of all projects + newsletter sign-up:
thinkdobecreate.com

mom of two girls

enjoy baking

Lexi the "cowboy corgi"

🤔 ➡️ 🤩

What are you hoping to learn in this workshop?

What to Expect

  • A lot of live coding!
    • Let us know in Zoom chat if you're feeling lost
  • 🚨 You will likely not be able to "code along" and miss things if you try
    • A zip of the days progress will be provided as a link in the Google doc

What to Expect

  • Breaks
    • Will occur somewhere between 45 mins - 1 hr 15 mins after start
  • Asking Questions
    • ❓ is the emoji to use (:question: in Slack) to help identify questions for follow-up
    • Last 30 mins each day is for questions!
  • Technical Issues
    • ​Please reach out to a moderator

What to Expect

  • We're all here to learn!
    • There are a wide range of experience levels among participants
    • Examples will build up from foundational basics
  • Recording link and resource links will be added to the Google doc

🤔 🤔 🤔

What even IS "modern CSS"?

Add some thoughts in Zoom chat!

🤩⚡️💡

TL;DR:
All the stuff that eliminates the hacks we used to need

Example 1/3

Colorizing list bullets

ul {
  list-style: none;
  padding: 0;
}

li {
  position: relative;
  padding-left: 1em;
}

li::before {
  content: "•";
  color: blue;
  position: absolute;
  font-size: 1.1em;
  left: 0;
}
li::marker {
  color: blue;
}

Example 2/3

Sizing videos to 16:9 ratio

.video-container {
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
}

.video {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.video {
  aspect-ratio: 16/9;
}

Example 3/3

Reducing need for media queries

h1 {
  font-size: 2rem;
}

@media (min-width: 60rem) {
  h1 {
    font-size: 3rem;
  }
}

@media (min-width: 120rem) {
  h1 {
    font-size: 4rem;
  }
}
h1 {
  font-size: 
    clamp(
      2rem, 
      5vw + 1rem, 
      4rem
    );
}

🤩 😍 🏆

Not to mention grid layout, gaps in flexbox, scroll-snap, logical properties, :is(), and...

😉

But we'll get to a lot of those!

Day 1:

Setup + Color Design Tokens

  • Review Eleventy starter setup and build processing tooling
  • Expand Eleventy base setup
  • Create accessible color tokens
  • Add style reset and begin layout styles

🚨

If you had trouble with your Eleventy starter, please message me on Slack!

Eleventy Project Structure

Project Build Tooling

autoprefixer and stylelint

"scripts": {
    "watch:sass": "sass  --no-source-map --watch src/sass:public/css",
    "watch:eleventy": "npx @11ty/eleventy --serve",
    "build:sass": "sass  --no-source-map src/sass:public/css",
    "build:eleventy": "npx @11ty/eleventy",
    "postbuild": "postcss public/css/*.css -u autoprefixer cssnano -r --no-map",
    "start": "npm-run-all build:sass --parallel watch:*",
    "build": "npm-run-all build:sass build:eleventy",
    "lint": "stylelint src/sass/**/*.scss src/sass/**/**/*.scss src/sass/**/**/**/*.scss",
    "lint:fix": "npm run lint --fix"
  }

Project Build Tooling

autoprefixer and stylelint

"scripts": {
    "watch:sass": "sass  --no-source-map --watch src/sass:public/css",
    "watch:eleventy": "npx @11ty/eleventy --serve",
    "build:sass": "sass  --no-source-map src/sass:public/css",
    "build:eleventy": "npx @11ty/eleventy",
    "postbuild": "postcss public/css/*.css -u postcss-logical autoprefixer cssnano -r --no-map",
    "start": "npm-run-all build:sass --parallel watch:*",
    "build": "npm-run-all build:sass build:eleventy",
    "lint": "stylelint src/sass/**/*.scss src/sass/**/**/*.scss src/sass/**/**/**/*.scss",
    "lint:fix": "npm run lint --fix"
  }

Project Build Tooling

autoprefixer and stylelint

"scripts": {
    "watch:sass": "sass  --no-source-map --watch src/sass:public/css",
    "watch:eleventy": "npx @11ty/eleventy --serve",
    "build:sass": "sass  --no-source-map src/sass:public/css",
    "build:eleventy": "npx @11ty/eleventy",
    "postbuild": "postcss public/css/*.css -u autoprefixer cssnano -r --no-map",
    "start": "npm-run-all build:sass --parallel watch:*",
    "build": "npm-run-all build:sass build:eleventy",
    "lint": "stylelint src/sass/**/*.scss src/sass/**/**/*.scss src/sass/**/**/**/*.scss",
    "lint:fix": "npm run lint --fix"
  }

Project Build Tooling

autoprefixer and stylelint

💡 Recommended: add stylelint IDE plugin

✨

Goal #1:

Extend the base Eleventy site to serve as documentation for our CSS framework

Color Accessibility

  • Two contrast ratios:
    • 4.5:1 - "normal" text content in any context
    • 3:1 - UI components and "large" text
  • "Large text"
    • Bold and > 18.66px (1.167rem)
    • OR > 24px

Color Tokens

  • Can be generated using a11y-color-tokens
    Disclaimer: created by Steph
  • Generates contrasting pairs (foreground/background)
  • Outputs either CSS variables or Sass variables
  • Creates documentation in Markdown

Creating Color Tokens

{
  name: "primary",
  color: "hsl(258, 75%, 50%)"
}

Creating Color Tokens

{
  name: "primary",
  color: "hsl(258, 75%, 50%)"
}

Creating Color Tokens

{
  name: "primary",
  color: "hsl(258, 75%, 50%)"
}
$color-primary: hsl(258, 75%, 50%) !default;
$color-on-primary: hsl(260.9, 100%, 86.5%) !default;

$base-color-tokens: ("primary");

$color-tokens: (
  "color-primary": $color-primary,
  "color-on-primary": $color-on-primary
) !default;

@mixin color-tokens() {
  --color-primary: #{$color-primary};
  --color-on-primary: #{$color-on-primary};
}

Creating Color Tokens

{
  name: "primary",
  color: "hsl(258, 75%, 50%)"
}
$color-primary: hsl(258, 75%, 50%) !default;
$color-on-primary: hsl(260.9, 100%, 86.5%) !default;

$base-color-tokens: ("primary");

$color-tokens: (
  "color-primary": $color-primary,
  "color-on-primary": $color-on-primary
) !default;

@mixin color-tokens() {
  --color-primary: #{$color-primary};
  --color-on-primary: #{$color-on-primary};
}

Creating Color Tokens

$color-primary: hsl(258, 75%, 50%) !default;
$color-on-primary: hsl(260.9, 100%, 86.5%) !default;

Creating Color Tokens

{
  name: "primary",
  color: "hsl(258, 75%, 50%)",
  onColor: "hsl(0, 0%, 100%)",
}

CSS Custom Properties versus Sass Variables

/* Sass Variable */
$color-primary: hsl(258, 75%, 50%) !default;

/* CSS Custom Property */
:root {
  --color-primary: hsl(258, 75%, 50%);
}
  • CSS Custom Properties
    • can be altered dynamically client-side
    • can be modified via JavaScript 
    • allow contextually extending styles more flexibly than classes

CSS Custom Properties versus Sass Variables

  • Sass Variables
    • unchanged after being compiled to CSS
    • best for consistency of static variables
    • useful when using Sass features like mixins or color functions

CSS Custom Properties versus Sass Variables

✨🎨✨

Let's add our color tokens!

✨Browser Support✨

Day 1 // Level-Up With Modern CSS Workshop

By Stephanie Eckles

Made with Slides.com

Day 1 // Level-Up With Modern CSS Workshop

  • 265

More from Stephanie Eckles