-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
74 lines (63 loc) · 3.96 KB
/
index.html
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="description" content="Hellosusy : ">
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css">
<title>Hello Susy</title>
</head>
<body>
<section>
<h1>Hello Susy</h1>
<h2>One day of layout-hacking, learning and happiness.</h2>
</section>
<section>
<h3>Installations-Party</h3>
<p>Wir haben uns mit der Installation des <a href="http://susydocs.oddbird.net/en/latest/">Susy2-Gridsystems</a> beschäftigt, das auf <a href="http://sass-lang.com/guide">SASS</a> und <a href="http://compass-style.org/reference/compass/">Compass</a> basiert.</p>
<p>Um die richtige Susy-Version zu bekommen und keine ältere, muss mindestens Ruby-1.9.3 vorhanden sein und mit <code><pre>gem install compass --pre</pre></code> die vorab-Version von Compass installiert werden. Häufig war es auch notwendig Susy <code><pre>gem install susy</pre></code> und Breakpoint <code><pre>gem install breakpoint</pre></code> manuell zu installieren, in einigen Fällen musste mit <code><pre>gem uninstall <PAKET-NAME></pre></code> das ein oder andere Paket noch deinstalliert werden, bevor ein neuer Anlauf erfolgreich war.</p>
<p>Schaut auch nochmal unter <a href="http://thesassway.com/guides">http://thesassway.com/guides</a> nach, ob da was cooles steht.</p>
</section>
<section>
<h3>Übung 1: komplexes Grid ohne Sinn und Verstand in drei Breakpoints</h3>
<p>In der ersten Übung haben wir versucht das Grid von Arnaud Guera (AG) aus dem <a href="http://www.zell-weekeat.com/susy2-tutorial/">Susy2-Tutorial</a> nachzubauen, nur dass wir unser 12-spaltiges Grid benutzt haben.</p>
<p><a href="vorlage/uebung1.html">Die Vorlage</a> sollte auf 3 breakpoints unterschiedlich layoutet sein und den <a href="uebungen/uebung1.html">Lösungsvorschlag</a> haben wir dann stückweise gemeinsam am Beamer korrigiert und funktionsfähig gemacht :) </p>
</section>
<section>
<h3>Übung 2: echtes Warenkorb-Layout in vier Breakpoints</h3>
<p>Als nächstes haben wir versucht anhand einer echten Layout-Vorlage von UX das Layout des Warenkorbs in allen 4 Breakpoints korrekt zu setzen - auch hier wieder kein Design, nur Layout.</p>
<p>Da <a href="vorlage/uebung2.html">die Vorlage</a> von mir anhand der Vorlage entstanden ist, haben einige Teilnehmer das Markup noch angepasst. <a href="01/uebung2.html">Der Lösungsvorschlag</a> war nur eine von mehreren gefundenen Möglichkeiten, das Layout hinzubekommen.</p>
</section>
<section>
<h3>Übung 3: Seitenrahmen um Werbebanner erweitern</h3>
<p>Die Aufgabe, einen Rand für die Werbung frei zu lassen, war dann am späten Nachmittag etwas zu viel, deswegen haben wir die Lösung einfach am Beamer gemeinsam erstellt :)</p>
<p>Auf <a href="14/otto-page-frame.html">Benes Vorlage</a> (gelb ist Content, rot ist Werbung, blau ist der Container) sollte ab einer bestimmten Breite die Werbung eingeblendet werden und der Content trotzdem noch bis zur Maximalgröße wachsen. Da die Lösung ja bereits im Shop zu besichtigen ist, <a href="01/otto-page-frame.html">war es nicht so aufwändig, das nochmal nachzubauen.</a></p>
</section>
<section>
<h3>Teilnehmer-Verzeichnisse</h3>
<p>Jeder Teilnehmer hat seine eigene Nummer, die mit einem Unterverzeichnis korrespondiert, das im GIT-Repository lebt. Hier der Einfachheit halber alle:</p>
<p>
<a href="01/">01</a>
<a href="02/">02</a>
<a href="03/">03</a>
<a href="04/">04</a>
<a href="05/">05</a>
<a href="06/">06</a>
<a href="07/">07</a>
<a href="08/">08</a>
<a href="09/">09</a>
<a href="10/">10</a>
<a href="11/">11</a>
<a href="12/">12</a>
<a href="13/">13</a>
<a href="14/">14</a>
<a href="15/">15</a>
<a href="16/">16</a>
<a href="17/">17</a>
<a href="18/">18</a>
<a href="19/">19</a>
<a href="20/">20</a>
</p>
</section>
</body>
</html>