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:` [`grid`](https://css-tricks.com/snippets/css/complete-guide-grid/). +for distributing items use `display:` [`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