Just one of the things I'm learning. https://github.com/hchiam/learning
https://www.youtube.com/watch?v=hnCmSXCZEpU
node --version
npm init -y
npm install [email protected] browser-sync gulp-sass --save-dev
# note: gulp v4 is very different!
npm install bootstrap jquery popper.js --save
mkdir src src/assets src/css src/js src/scss
touch src/index.html
touch src/scss/styles.scss
touch gulpfile.js
gulp- Bootstrap has cool utility classes to avoid creating repetitive CSS.
- Using npm and SCSS, you include only what you need; avoid getting the whole kitchen sink Bootstrap loaded onto your site.
- The YouTube tutorial also uses SCSS to customize beyond the cookie cutter Bootstrap styling.
- Just learn to use the documentation! There's so many elements, style customizations, and listeners that already exist to cover many use cases. I didn't know about the utility classes and
data-attributes that you can simply add in HTML! Examples: https://getbootstrap.com/docs/4.4/utilities/spacing/ or https://getbootstrap.com/docs/4.4/getting-started/theming/
https://codepen.io/hchiam/pen/NWGPwPy
-
placeholders AKA skeleton UI:
<p aria-hidden="true" class="placeholder-glow"><span class="placeholder col-7"></span><span class="placeholder col-4"></span></p> -
visually hidden but not hidden (and optionally focusable) to screen readers:
visually-hiddenandvisually-hidden-focusable -
but also for some reason inputs with floating labels like Material UI, which don't seem to be very accessible since not-filled visually look like filled-already