From 0274795c3d0712178e69697ce7addebc9fcfda1a Mon Sep 17 00:00:00 2001
From: Florian Moser <git@famoser.ch>
Date: Wed, 13 Jan 2021 23:04:20 +0100
Subject: [PATCH] Work on css part of course

---
 web/css/remark.css         |  15 ++-
 web/illustrations.bmpr     | Bin 0 -> 39936 bytes
 web/images/css_spacing.png |   3 +
 web/web.html               | 189 ++++++++++++++++++++++++++++++++-----
 4 files changed, 183 insertions(+), 24 deletions(-)
 create mode 100644 web/illustrations.bmpr
 create mode 100644 web/images/css_spacing.png

diff --git a/web/css/remark.css b/web/css/remark.css
index 32db76c..5ffb122 100644
--- a/web/css/remark.css
+++ b/web/css/remark.css
@@ -3,4 +3,17 @@ h1, h2, h3 {
   font-family: serif;
   font-weight: normal;
 }
-.remark-code, .remark-inline-code { font-family: monospace; }
\ No newline at end of file
+.remark-code, .remark-inline-code { font-family: monospace; }
+
+.inverted { color: white; background: black; }
+
+.rectangle {
+  display: inline-block;
+
+  background: #9FCFF8;
+  width: 60px;
+  height: 20px;
+  padding: 50px;
+  margin: 20px;
+  border: 10px solid #FFE599;
+}
\ No newline at end of file
diff --git a/web/illustrations.bmpr b/web/illustrations.bmpr
new file mode 100644
index 0000000000000000000000000000000000000000..e7079ab015a4452d0b8ec115c82beab6aadb721c
GIT binary patch
literal 39936
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

literal 0
HcmV?d00001

diff --git a/web/images/css_spacing.png b/web/images/css_spacing.png
new file mode 100644
index 0000000..58bb6ad
--- /dev/null
+++ b/web/images/css_spacing.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:985f32763f78137a2010f741438336f367535fa853824a693b9ee7295a435909
+size 13250
diff --git a/web/web.html b/web/web.html
index 46b3c2a..861d667 100644
--- a/web/web.html
+++ b/web/web.html
@@ -47,7 +47,7 @@ Update the webpage more conveniently.
 **CSS**: Cascading Style Sheets to style HTML.  
 *Target: Know design basics and using a css framework.*
 
-**JavaScript**: Functionality directly in the browser .  
+**JavaScript**: Functionality directly in the browser.  
 *Target: Apply jQuery & friends.*
 
 **PHP**: Widely supported functionality on the server.  
@@ -302,7 +302,11 @@ class: center, middle
 
 ---
 
-# Design crashcourse
+class: center, middle
+
+```html
+<design-crashcourse>
+```
 
 Why? Because:
 <blockquote>
@@ -310,15 +314,6 @@ Users often perceive aesthetically pleasing design as design that’s more usabl
 <a href="https://www.nngroup.com/articles/aesthetic-usability-effect/" target="_blank">https://www.nngroup.com/articles/aesthetic-usability-effect/</a>
 </blockquote>
 
-Limits? Yes:
-<blockquote>
-form follows function. - Horatio Greenough
-</blockquote>
-
-Do not overdue it!  
-Each design element should have a purpose.
-
-
 ---
 
 # Typography - Typeface
@@ -363,7 +358,7 @@ There are other factors that affect readability, which we will see on the next s
 
 ---
 
-# Typography is about Balance!
+# Typography - Balance
 
 Balance font weight, font size, line length and line height.
 
@@ -380,8 +375,6 @@ Improve readability:
 
 # Spacing
 
-Content needs to breathe!
-
 Separate what does not belong together.  
 Separate little what does.  
 
@@ -429,25 +422,175 @@ Many color scheme generators out there, like [paletton](https://paletton.com)
 
 ---
 
-# Bootstrap
+class: center, middle
+
+```html
+</design-crashcourse>
+```
+
+---
+
+class: inverted
+
+# CSS basics
+
+```css
+body {
+  color: white;
+  background: black;
+}
+```
+
+choose a **selector** (like `body`)  
+for **properties** (like `color`)  
+override the default **value** (like `white`)
+
+---
+
+# CSS selector
+
+by element, class or id 
+```html
+<section class="content" id="introduction"></section>
+```
+```css
+section {
+  background: red
+}
+
+.content {
+  background: blue;
+}
+
+#introduction {
+  background: green;
+}
+```
+
+choose the most appropriate selector according to your structure (usually it ends up being the `class`).  
+
+---
+
+# Typography - Font Family
+
+```css
+body {
+  font-family: 'Times New Roman', Times, serif;
+  font-weight: bold;
+  font-style: italic;
+}
+```
+
+including your own font family with 
+```css
+@font-face {
+  font-family: 'Vegur';
+  src: url('Vegur-Bold.ttf') format('ttf');
+  font-weight: bold;
+  font-style: normal;
+}
+```
+
+Generate optimized font family files [transfonter.org](https://transfonter.org/).
 
+---
+
+# Typography - Size
+
+```css
+body {
+  font-size: 16px;
+  line-height: 1.2em;
+}
+```
+
+`em` is a relative unit to the current font size.  
+`rem` is a relative unit the `html` font size. 
+
+You can try out different combinations on [app.typeanything.io](https://app.typeanything.io/).
+
+---
+
+# Spacing
+
+```css
+.rectangle {
+  background: blue;
+  width: 60px;
+  height: 20px;
+  padding: 50px;
+  margin: 20px;
+  border: 10px solid yellow;
+}
+```
+```html
+<div class="rectangle"></div>
+```
+
+<div class="rectangle"></div>
+<img src="images/css_spacing.png" width="35%">
+
+---
+
+class: inverted
+
+# Color
+
+```css
+body {
+  color: #FFFFFF; 
+  background: rgb(0,0,0);
+}
+```
+
+use predefined [colors](https://developer.mozilla.org/de/docs/Web/CSS/Farben).  
+
+or specify own color (using additive light mixing).  
+use hex (like `#rrggbb`).  
+or rgb (like `rgb(red, green , blue)`).  
+or rgba (like `rgba(red, green , blue, opacity)`) representations.
 
 ---
 
-# Typography
+# Display
+
+
+```css
+body {
+  display: block;
+}
+```
+
+defines how element is placed (and elements around).
+
+TODO FACTCHECK
+`display: block` is the default and renders a full-width container.  
+`display: inline-block` renders as wide as the content.  
 
-explain em, rem
+for arranging items along a grid, use `display:`&nbsp[`grid`](https://css-tricks.com/snippets/css/complete-guide-grid/).  
+for distributing items use `display:`&nbsp[`flex`](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
+
+---
+
+# Position
+
+```css
+body {
+  position: absolute;
+  position: relative;
+  top: 0;
+}
+```
+
+---
+
+# Bootstrap
 
-https://app.typeanything.io/
+Good design is hard.
 
 
 
-Body text recommendations:
-- at least 16px font size
-- regular boldness
-- 10 - 15 words per line 
 
-Do not sacrifice readability to design!
 
 ---
 
-- 
GitLab