CSS

up:: 05 Programming MOC

• CSS Obsidian Snippets
• CSS tweaks for Obsidian Publish
• CSS tweaks for Obsidian Bible Study
• Generate utility classes from a JSON: https://tokens2css.nanools.com

Notes

• CSS blend modes
• CSS Animations

Link hovers

• 6 Creative Ideas for CSS Link Hover Effects | CSS-Tricks - CSS-Tricks

Resources

• Transition.css - easy transitions with clip-path
• Home | Utopia
• CSS Shadow Palette Generator
• Multicolor CSS Gradients, JPG Downloads, 100% Free! | Gradienta
• CSS Shadow Gradients — Generator
• CSS talks you have to see
• Pico.css • Minimal CSS Framework for semantic HTML

Learning

• Learn grid or flexbox. Usually, grid is easier to get started with.
• Overview on getting started with CSS
• https://web.dev/learn/css/
• CSS Talk (recommended by Matthias Ott
• CSS Grid Generator

Principles

• Design for mobile first. It is much easier to scale for desktop than to reduce for mobile. Also, mobile is becoming very prevalent, e.g. is preferred by Google search.
• Connected to the above: Add complexity in media queries. That often means mobile-first. Don’t start with a desktop display: flex to set three columns, only to overwrite that with a media query for mobile. Go for the least overwrites possible. For a complex mobile navigation, add that in the media query.
• Matthias Ott: How I structure my CSS
• Seperate layout classes (eg. .columns) from classes that style content (eg. .clr-accent). Tip: this can be done via | symbol since it doesn’t get picked up. Example: <div class="columns | clr-400 inverse-background"></div>

CSS Syntax

selector {
  property: value;
}

Common selectors:

• Class: Attribute of HTML .class-name
• ID (unique): #id

Selector Combinations:

• Target specific selector: .anchestor .child
• Apply for both selectors: .big, .large

Inspiration

• CSS Properties Reference - CSS: Cascading Style Sheets | MDN
• Make it Personal | CSS-Tricks

Snippets

• Smooth Shadow
• CSS filter generator to convert from black to target hex color

Flexbox

• A Complete Guide to Flexbox | CSS-Tricks

Grid

Creates three evenly sized columns. Content overflows into additional rows.

grid-template-columns: repeat(3, 1fr);

Getting started on a new project

1. Add reset CSS Reset
2. Set up custom properties
3. Add utility classes

Setting up variables

From Kevin Powell (26:00)

:root {
--clr-primary-400: #fff;
 
--ff-primary: "Helevtica";
--ff-body: var(--ff-primary);
--ff-heading: var(--ff-primary);
 
--fw-regular: 400;
--fw-semi-bold: 500;
--fw-bold: 700;
 
--fs-400: 1rem;
}

ff stands for font-family. By setting body and headings (also can be named accent) seperately, it is easy to change later on.

clr stands for color. 100 is the lightest value, 900 the darkest.

fs stands for font-size. The numbers are based on the font-weight numbers. 400 is the body size.

Utility classes

On the bottom of reset.css

.text-primary-400 {
  color: var(--clr-primary-400);
}
.bg-primary-400 {
  background-color: var(--clr-primary-400);
}
.fw-bold {
  font-weight: var(--fw-bold);
}

rem and em

rem looks at the root. Use this for text. em multiplies the font-size of the element. Use this for margins and padding to grow automatically.

Set a container for content

From YouTube: Kevin Powell

“Tag”

.container {
--max-width: 1110px;
--padding: 1rem;
 
width: min(var(--max-width), 100% - (var(--padding) * 2));
margin-inline: auto;
}

Replace svgs

1. Find an icon (eg. on Material Design Icons) and copy scg
2. Encode via URL-encoder for SVG
3. Replace icon:

.vertical-three-dots {
  color: var(--text-faint);
}
 
.three-horizontal-bars {
  background-color: currentColor;
}
 
svg.three-horizontal-bars {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z' /%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z' /%3E%3C/svg%3E");
}

Aligning

How to Center in CSS

Resize svgs

transform: scale(.8);

Animate

Only transform and opacity are performant to animate.

Numbered rows

By SIRvb on Discord

.numbertable table.dataview.table-view-table tbody {
    counter-reset: rowNumber;
}
 
.numbertable table.dataview.table-view-table tr {
    counter-increment: rowNumber;
}
 
.numbertable table.dataview.table-view-table tr td:first-child::before {
    content: counters(rowNumber, ".", decimal-leading-zero) ". ";
    min-width: 1em;
    margin-right: 0.5em;
}

Responsive images

Learn how to create a responsive CSS grid layout - YouTube

img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
}

Grid auto-fit

Magically fits the columns.

grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));