Commit 0274795c authored by Florian Moser's avatar Florian Moser
Browse files

Work on css part of course

parent e59ec596
...@@ -3,4 +3,17 @@ h1, h2, h3 { ...@@ -3,4 +3,17 @@ h1, h2, h3 {
font-family: serif; font-family: serif;
font-weight: normal; font-weight: normal;
} }
.remark-code, .remark-inline-code { font-family: monospace; } .remark-code, .remark-inline-code { font-family: monospace; }
\ No newline at end of file
.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
...@@ -47,7 +47,7 @@ Update the webpage more conveniently. ...@@ -47,7 +47,7 @@ Update the webpage more conveniently.
**CSS**: Cascading Style Sheets to style HTML. **CSS**: Cascading Style Sheets to style HTML.
*Target: Know design basics and using a css framework.* *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.* *Target: Apply jQuery & friends.*
**PHP**: Widely supported functionality on the server. **PHP**: Widely supported functionality on the server.
...@@ -302,7 +302,11 @@ class: center, middle ...@@ -302,7 +302,11 @@ class: center, middle
--- ---
# Design crashcourse class: center, middle
```html
<design-crashcourse>
```
Why? Because: Why? Because:
<blockquote> <blockquote>
...@@ -310,15 +314,6 @@ Users often perceive aesthetically pleasing design as design that’s more usabl ...@@ -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> <a href="https://www.nngroup.com/articles/aesthetic-usability-effect/" target="_blank">https://www.nngroup.com/articles/aesthetic-usability-effect/</a>
</blockquote> </blockquote>
Limits? Yes:
<blockquote>
form follows function. - Horatio Greenough
</blockquote>
Do not overdue it!
Each design element should have a purpose.
--- ---
# Typography - Typeface # Typography - Typeface
...@@ -363,7 +358,7 @@ There are other factors that affect readability, which we will see on the next s ...@@ -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. Balance font weight, font size, line length and line height.
...@@ -380,8 +375,6 @@ Improve readability: ...@@ -380,8 +375,6 @@ Improve readability:
# Spacing # Spacing
Content needs to breathe!
Separate what does not belong together. Separate what does not belong together.
Separate little what does. Separate little what does.
...@@ -429,25 +422,175 @@ Many color scheme generators out there, like [paletton](https://paletton.com) ...@@ -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!
--- ---
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment