To receive notifications about scheduled maintenance, please subscribe to the mailing-list gitlab-operations@sympa.ethz.ch. You can subscribe to the mailing-list at https://sympa.ethz.ch

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 {
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
......@@ -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!
---
......
Markdown is supported
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