css-examples

reference:

• YouTube: CSS Variables

• YouTube: Super Lightweight Scroll Animations with Sal.js - 2.8kb!

• Parcel Bundler + Bootstrap 4 + Font Awesome

• Parcel Bundler copy static resources assets files

• Project reference documentation

ui / ux "must have" topics

• color & contrast

• white space

• visual hierarchy

• complexity cs simplicity

• consistency

• scale

css "must have" topics

• css selectors

• css properties

• css values

• css units: css-property: valu e{unit}

  1. absolute: mm, cm, px, in, pt, pc

  2. relative: %, em, rm, vw, vh, vmin, vmax

• css multiple selectors

• css functions:

  1. rgba: background-color: rgba(0,0,0,0.4)

  2. calc: margin: calc(2em * 5em)

  3. …​

• css animations

  1. animation

  2. keyframes

  3. transitions between 2 css values

• css media queries

  1. @media only screen and (min-width: 650px) { /* scoped css rules…​ */ }

• css selectors weight

  1. by element selector == 1

  2. by class name selector == 100

  3. by id selector == 1000

other repositories

• Flexbox

• Css Grid

• GitHub: daggerok/vue-bulma-parcel-playground

• GitHub: daggerok/tachyons-example

• GitHub: daggerok/css-grid-layout-example

• https://github.com/daggerok/html-footer

Initially generated by using generator-jvm yeoman generator (java-parent-multi-project)