HomeProjectsArticlesNotesAbout

CSS

css
notes

CSS NOTES

Description

This document is meant as a running catch for notes pertaining to css.
The goal is to;

  1. take notes and thereby reinforce concepts
  2. by composing custom notes, develop a reference framework which maps onto my mental framework since I am the one composing it.

Table of Contents

Box Model

Def : The box model refers to the physical properties of an element's rectangular box.

  • margins
  • borders
  • padding
  • content width
  • content height (lynda.com, CSS: Page Layout)

Accessibility Best Practices

2018

SASS *Some browsers do not support em's, therefore it is a good practice to use some sort of mixen to convert em's to px"

// Rem output with px fallback
@mixin font-size($sizeValue: 1) {
  font-size: ($sizeValue * 16) * 1px;
  font-size: $sizeValue * 1rem;
}

Quick Reference

Images

object-fit

 {
  object-fit: fill;
  object-fit: contain;
  object-fit: cover;
  object-fit: none;
  object-fit: scale-down;
}

RESOURCES

REFERENCES

CSS: Page Layout, lynda.com

DEFINITIONS


LOG

2018-06-12 Quick reference started

  • images

TODO

  • []

More Articles

All Articles

Links

Home Articles Notes Projects About Style Guide Site Credits

Contact

ย connect@dev.lucaszapico.space

Location

๐ŸŒŽ Earth