CSS Basis … naja, so basic dann doch nicht.

Wir nutzen als Basis unser Markup von gestern. Bitte vorab noch mal alle Seiten validieren lassen.

2.1: Projektstruktur

Reorganisieren Sie Ihr Projekt wie folgt:

root/
│
├── index.html
│
├── persons/
│   └── lucas-cranach.html
│
└── assets/
│   └── images/
│
└── styles
│   └── reset.css
│   ├── fonts.css
│   ├── icons.css
│   ├── variables.css
│   ├── base.css
│   ├── components.css
└── fonts
    

2.2: Überführung der Design Tokens

Legen Sie nun wesentliche Angaben aus dem Figma File als Custom Properties in der variabels.css an: Farben, Größen, Schriften, Schriftschnitte, Zeilenabstände, etc..

3: Mobile First Layout

Wir versuchen in diesem Schritt möglichst nah an das mobile Layout/ Design zu kommen. Dazu gehen wir in folgenden Schritten vor und versuchen uns iterativ anzunähern:

• Schriften angleichen
• Farben angleichen
• Abstände angleichen
• Icons angleichen
• Komponenten erstellen

Versuchen Sie alle wiederkehrenden Werte als Custom Properties abzubilden.