Pyramid – Tachyons

CSS mischen

Der Umbau des Layout ist noch nicht vollendet! Diverse Techniken stehen zur Verfügung, um das Layout weiter anpassen zu können. Eine ganz besondere Lösungsstrategie verfolgt das Tachyons-Projekt, das hier vorgestellt werden soll.

Durch die Zuordnung einer oder mehrerer Klassen kann das vorhandene Layout nachträglich manipuliert werden. Eine Klasse ist ein Container, der einige bis viele CSS-Anweisungen unter einem Namen zusammenfasst bzw. gruppiert.

Es erleichtert den Einstieg in die »Wissenschaft« der Cascading Stylesheets (CSS). Auf der Projektseite können die Klassennamen und deren Wirkung nachgeschlagen werden. Am konkrenten Beispiel sollte das Prinzip schnell klar werden.

Download

Vor der Nutzung steht der Download und die Einbindung in die eigene HTML-Seite:

http://tachyons.io

Einbinden

Beide Dateien (w3.css und tachyons.min.css) wurden im Ordner static gespeichert und werden nun nicht mehr aus dem Web nachgeladen (Zeile 8), sondern vom eigenen Server ausgeliefert (Zeilen 9 und 10).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="de">
  <head>
    <title>W3.CSS Template</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"-->
    <link href="{{request.static_url('my_homepage:static/w3.css')}}" rel="stylesheet">
    <link href="{{request.static_url('my_homepage:static/tachyons.min.css')}}" rel="stylesheet">

    <!--
	<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto'>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	-->
	<style>

Tachyons einsetzen

Zum Zwecke der Anschauung werden nun die Bereiche farblich markiert, die im nächsten Schritt überarbeitet werden.

Die Bereiche für den Umbau definieren

  • Das Bild wird nicht geladen weil der relative Pfad nicht mehr stimmt.

  • Der Platz unter dem Bild, jetzt noch mit Adressangaben gefüllt, soll das Menü erhalten.

  • Der erste Block auf der rechten Seite soll die neuen Inhalte (content) aufnehmen.

Welche Klassen sind für die Farben definiert?

http://tachyons.io/docs/themes/skins/

Die dort gezeigten Kombinationen z.B. green gelten für die Farbe der Schrift, erhält die Klasse den Präfix bg wird daraus bg-green und gilt dann für den Hintergrund. Der führende Punkt ist ein Kennzeichen für eine CSS-Klasse. Wird diese im Attribut class eines HTML-Elements angewendet (eingetragen) wird der Punkt weggelassen.

Beispiele:

Der Bildbereich, ist aktuell nicht mehr gültig, auch die Syntax für die Einbindung eines eigenen Bildes ändert sich, weil hier die jinja2/Pyramid-Regeln gelten. Als Kommentar (alt) noch sichtbar und daraunter (neu) ein eigenenes Bild, das vorher auch im Ordner static abgelegt sein muss.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
      <!-- The Grid -->
      <div class="w3-row-padding">
	
	<!-- Left Column -->
	<div class="w3-third">
	  <div class="w3-white w3-text-grey w3-card-4">
  	    <div class="w3-display-container bg-yellow">
              <!--img src="/w3images/avatar_hat.jpg" style="width:100%" alt="Avatar"-->
	      <img class="logo img-responsive br-pill  w-50"
		   src="{{request.static_url('my_homepage:static/mein-bild.png') }}"
		   alt="Mein Bild">
              <div class="w3-display-bottomleft w3-container w3-text-black">
		<h2>Peter Koppatz</h2>
              </div>
            </div>
          </div>

Der zukünftige Menübereich soll den folgenden Bereich ersezten. Um den Bereich genauer abgrenzen zu können, wurde ein neues div-Element eingefügt.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
          <div class="w3-container">
	    <div class="w3-container">
	      <div class="bg-gold">
		<p><i class="fa fa-briefcase fa-fw w3-margin-right w3-large w3-text-teal"></i>Designer</p>
		<p><i class="fa fa-home fa-fw w3-margin-right w3-large w3-text-teal"></i>London, UK</p>
		<p><i class="fa fa-envelope fa-fw w3-margin-right w3-large w3-text-teal"></i>ex@mail.com</p>
		<p><i class="fa fa-phone fa-fw w3-margin-right w3-large w3-text-teal"></i>1224435534</p>
	      </div>
	      <hr>
	      

Auf der rechten Seite kann der Inhalt einer Seite platziert werden. Hier intressiert nur der obere Block, der zweite Block kann gleich oder später entfernt werden. Hier geht es erst einmal um die farbliche Markierung.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
	  <div class="w3-container w3-card w3-white w3-margin-bottom">
	    <div class="bg-light-yellow">
              <h2 class="w3-text-grey w3-padding-16"><i class="fa fa-suitcase fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Work Experience</h2>
              <div class="w3-container">
		<h5 class="w3-opacity"><b>Front End Developer / w3schools.com</b></h5>
		<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>Jan 2015 - <span class="w3-tag w3-teal w3-round">Current</span></h6>
		<p>Lorem ipsum dolor sit amet. Praesentium magnam consectetur vel in deserunt aspernatur est reprehenderit sunt hic. Nulla tempora soluta ea et odio, unde doloremque repellendus iure, iste.</p>
		<hr>
              </div>
              <div class="w3-container">
		<h5 class="w3-opacity"><b>Web Developer / something.com</b></h5>
		<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>Mar 2012 - Dec 2014</h6>
		<p>Consectetur adipisicing elit. Praesentium magnam consectetur vel in deserunt aspernatur est reprehenderit sunt hic. Nulla tempora soluta ea et odio, unde doloremque repellendus iure, iste.</p>
		<hr>
              </div>
              <div class="w3-container">
		<h5 class="w3-opacity"><b>Graphic Designer / designsomething.com</b></h5>
		<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>Jun 2010 - Mar 2012</h6>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p><br>
              </div>
	    </div>
	  </div>
	  <div class="w3-container w3-card w3-white">
            <h2 class="w3-text-grey w3-padding-16"><i class="fa fa-certificate fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Education</h2>
            <div class="w3-container">
              <h5 class="w3-opacity"><b>W3Schools.com</b></h5>
              <h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>Forever</h6>
              <p>Web Development! All I need to know in one place</p>
              <hr>
            </div>
            <div class="w3-container">
              <h5 class="w3-opacity"><b>London Business School</b></h5>
              <h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>2013 - 2015</h6>
              <p>Master Degree</p>
              <hr>
            </div>
            <div class="w3-container">
              <h5 class="w3-opacity"><b>School of Coding</b></h5>
              <h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>2010 - 2013</h6>
              <p>Bachelor Degree</p><br>
            </div>
	  </div>
	  
	  <!-- End Right Column -->

Nun sollten alle Bereiche, die für den Umbau vorgesehen sind, farblich sichtbar sein. Laden Sie dazu die Seite neu:

http://localhost:6543/qualifikationen

Sieht dann etwa wie hier gezeigt aus:

../../_images/result1.png