CSS basics - martindubenet/wed-dev-design Wiki

CSS nomenclature

CSS lexicon

CSS variables var()

Since Dart Sass compiler is the standard, interpolation is required for parsing Sass variables as CSS var()

 

/* First declaring the var */
:root {
  --value: #FEFEFE;      /* example.css */
  --value: #{$sass_var}; /* example.scss */
}

/* Then applying it */
.selector {
  color: var(--value);
  background: var(--value) url(image.png) center center;
}

New HSL relative lightness color variable : Comming but not yet

Color wheel

A recent W3C introduced in CSS COLOR 5 the relative color syntax where you can convert a declared var color to HSL format then use calc() to adjust the lightness. All this within a basic CSS file (no Sass lighten() required). Source

NO SUPPORT YET!!!

:root {
    --color-primary: #f00; /* any format you want here */
    --color-primary-darker: hsl(from var(--color-primary) h s calc(l - 5%)); 
    --color-primary-darkest: hsl(from var(--color-primary) h s calc(l - 10%)); 
}

Work around : Translate your original color to first HSL then lightning var(--l) by breaking it down in two variables that you then use

:root {
    --color:0, 100%; /*the base color*/
    --l:50%; /*the initial lightness*/
    
    --color-primary: hsl(var(--color),var(--l));
    --color-primary-darker: hsl(var(--color),calc(var(--l) - 5%));
    --color-primary-darkest: hsl(var(--color),calc(var(--l) - 10%)); 
}

 

Utility classes

Utility classes (sometimes referred to as «helper classes») help you work within the constraints of a system instead of littering your stylesheets with arbitrary values. They make it easy to be consistent with color choices, spacing, typography, shadows, and everything else that makes up a well-engineered design system. …Read more

Tail Wind library

A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

Useful links

Colors

  1. HTML colors by name : https://www.w3schools.com/colors/colors_names.asp
  2. Webapp to compare HEX colors : https://www.colortools.net/color_compare_colors.html
  3. Webapp to convert RGB -vs- HEX color values : https://rgbcolorcode.com/color/converter/
  4. Webapp to generate variations using SASS color function : http://scg.ar-ch.org/

Posts that address interesting CSS issues

css properties url
@media https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
accesskey https://blog.getbootstrap.com/2020/11/11/bootstrap-5-alpha-3/#docs-improvements
flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/
overflow-x, overflow-y https://css-tricks.com/popping-hidden-overflow/

Stuff I keep forgetting

Font shorthand

font-size and font-family are the minimum requirement for the shorthand to work, otherwise it'll just be a syntax error and do nothing.

* {
    font:  font-style  font-variant  font-weight  font-size/line-height  font-family;
}

Upper case

text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;
text-transform: none;

Flex display

CSS-Tricks Complete Guide to Flexbox is a must read.

Term Description
The flow of items VS containers Main = Horizontal (X) axis, left (main-start) to right (main-end),**Cross = Vertical** (Y) axis, top (cross-start) to bottom (cross-end).Via as diagram.
display: flex; Required on parent container
justify-content: center; Aligns on the main (X) axis, just like text-align:center.
align-items: stretch; Force to fill the available height on the cross (Y) axis.
align-self: flex-end; Sets a specific item to an distinct position at the bottom where the others are somewhere else.

Small utility class

.d-flex-center-center {
    display: flex;
    align-items: center;
    text-align: center;
}

Grids

CSS-Tricks Complete Guide to Grid is an other must read for this subject. Also they have an introduction to fr (fractions) unit that is pretty useful for creating grids via grid property.

.display-grid {
    display: grid;
    grid-row-gap: 1rem;
    grid-column-gap: 1rem;
    grid-template-columns: [title] 50% [definition] 50%;
    /* Responsive for above phone size (optional) */
    @media (min-width: 480px) {
        grid-template-columns: [title] 30rem [definition] auto;
    }
}
/* reset margins of dt and dd */
dl.display-grig dt+dd, dl.display-grig dd+dt { margin-top:0; }
dl.display-grig dd { margin-bottom:0; margin-left:0; }
<dl class="display-grid">
    <dt>Label</dt>
    <dd>Value</dd>
</dl>

Accesskey attribute layout

This attribute allow us to set a keyboard shortcut combination associated with the browser that we use. See each browser’s shortcut on Wikipedia for a reference. Bootstrap use it as a feature of their v.5 documentation. See how they integrated it.

*[accesskey] {
    position: relative;
}
*[accesskey]:after {
    content: 'Ctrl + /';  /* replace the latest by your accesskey value */
    position: absolute;
    top: .4rem;
    right: .4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.5rem;
    padding-right: .25rem;
    padding-left: .25rem;
    font-size: .75rem;
    border: 1px solid gray;
    border-radius: .125rem;
}

At root rule (sass)

This rule causes everything within it to be interpolated at the root of the document instead of using the normal nesting. We can NOT nest multiple an `@at-rule Reference

/* scss */
.selector {
  @at-root .parent #{&} { … }
  @at-root .sibling#{&} { … }
  @at-root #{&} .child { … }
}
/* compiled css */
.parent .selector { … }
.selector.sibling { … }
.selector .child { … }

At media queries (for responsive break points)

// Breakpoint values based on Bootstrap Grid
@media screen (min-width: 320px) { … } // mobile phone first but including ALL other screen devices
@media only screen and (max-width: 575px) { … } // mobile phone only (excluding giant phones in landscape orientation)
@media screen (min-width: 576px) { … } // mobile tablets and others
// 
@media speech { … }
@media screen { 
    .media-screen { display: block; }
    .media-print { display: none; }
}
@media print { 
    .media-screen { display: none; }
    .media-print { display: block; }
}

Media Speech

  1. Web Speech API Specification
  2. The SpeechRecognition Interface
  3. The SpeechSynthesis Interface
  4. Voice Driven Web Apps: Introduction to the Web Speech API

Line breaks

In HTML we rely on either the white space character (&nbsp;) or <br> and/or <pre>…</pre> tags to control rendering of text requiring controled line breaks. But since responsive design is a thing it is safer to rely on CSS to manage those special rendering requests within @media{} queries.

No wrap

white-space: nowrap;   /* brutal one liner */
white-space: pre;      /* keeps tabing and/or white space. Same as HTML <pre> tag. */
white-space: normal;   /* revert */

In depricated HTML formats we use to rely on the HTML tag <nobr>…</nobr> to force the rendering of text as a one liner like (at the risk of breaking the layout) nowrap does in CSS. So it makes sense to use this nomenclature as a utility class in your stylesheets : .nobr{ white-space: nowrap; }.

Break line within CSS content

To generate a <br> effect within a content string you need :

  1. Set white-space: pre;.
  2. Use the escaping character \A as a break line character.
.selector:after {
    content: 'First row \A second row';
    white-space: pre;
}

Disable a Click Event

The pointer-events property set whether or not an element should react to pointer events

.disabled,
*[disabled] {
    pointer-events: none;
    cursor: auto;
}

Quotation marks for latin characters (sass)

The language pseudo selector :lang is very useful for styling multi-lingual websites. It takkle the two first characters set in the parent HTML attribute (or meta) lang anywhere in the DOM structure. If any it reads all up to the (HTML5 required) <html lang="fr-CA"> declaration. The best of all, we don't need to replicate the DOM structure within our CSS alowing for a much cleaner stylesheet code.

French and Spanish commonly use a different set opening/closing character for quotation marks: «&nbsp;&nbsp;» instead of .

q {
	&:before {
		content: '\201c';
	}
	&:after {
		content: '\201d';
	}
	&:lang(es),
	&:lang(fr) {
		&:before {
			content: '\00ab\0020';
		}
		&:after {
			content: '\0020\00bb';
		}
	}
}

Shadow

.selector {
    box-shadow:   x  y  blurRadius  spreadRadius  hexColor;
    text-shadow:  x  y  blurRadius  hexColor;
}

Text orientation : Writing modes

This is very useful on tight <thead> layout where you can't trunkate titles. Simply aligning them vertically saves you so much space on a row!

writing-mode: vertical-lr;

// default is
writing-mode: initial;

Triangle shapes (sass)

// var
$cssTriangleDimension: 100px;

// style
.css-triangle {
    width: 0;
    height: 0;
    border: 0 solid transparent;

    // Up
    &.pointing-up {
            border-left-width: ($cssTriangleDimension /2);
            border-right-width: ($cssTriangleDimension /2);
            border-bottom-width: $cssTriangleDimension;
            // Set background-color
            border-bottom-color: red;
    }
    // Down
    &.pointing-down {
            border-left-width: ($cssTriangleDimension /2);
            border-right-width: ($cssTriangleDimension /2);
            border-top-width: $cssTriangleDimension;
            // Set background-color
            border-top-color: green;
    }
    // Right
    &.pointing-right {
            border-top-width: ($cssTriangleDimension /2);
            border-bottom-width: ($cssTriangleDimension /2);
            border-left-width: $cssTriangleDimension;
            // Set background-color
            border-left-color: orange;
    }
    // Left
    &.pointing-left {
            border-top-width: ($cssTriangleDimension /2);
            border-bottom-width: ($cssTriangleDimension /2);
            border-right-width: $cssTriangleDimension;
            // Set background-color
            border-right-color: blue;
    }
}

Remove glowing on clicked controls in Chrome and Webkit (sass)

a,
button {
    &:focus {
        outline: none;
    }
}
a:focus, button:focus { outline: none; }

SVG fill vs Background-color

Background-color property is supported for the <svg> tag itself. NOT for the child tags within the SVGs. To assign background colors SVGs use the fill property. This is supported for about any child tags within SVGs (ex: <path class="any" fill="…")

This works for inline SVG and JavaScript injected SVGs. But NOT for CSS { background-image: url(*.svg) }

svg.icon { background-color: transparent; }
svg.icon path { fill: Red; }
svg.icon .any { fill: transparent; }