 Okay, also erst mal Ohai und um die frühe Uhrzeit. Wir haben uns heute hier versammelt, um unsere Leiden zu schmälern. Kurzer Vorping. Hände hoch für Erfahrungen mit statischen Seitengeneratoren. Okay, warum verwendet man die? Kunde möchte seine Seite nicht aktualisieren aus fachlich Unkenntnis und oder TLDR, keine Zeit. Deswegen tut man solche Dinge statische Seitengeneratoren, gibt es Ommas in allen Sprachen, wo man sich vorstellen kann. Da nimmt man einfach das, was einem gerade gelegen ist und was man so spricht, wo man auch mal was erweitern kann, falls man was braucht. Und in meinem Fall Ruby, in diesem Fall Middleman. Middleman müsst ihr euch so vorstellen, wenn ihr schon mal einen statischen Seitengenerator angefasst habt, dann wisst ihr genau, wie das Ding funktioniert, weil die funktionieren im Prinzip alle gleich. Die Libraries, die da so Dinge tun, wie die Seite, an der man gerade baut, aktualisieren oder so, kommt alles aufs Gleiche raus. Dann nochmal kurz Hände hoch, SAS Framework, Less Framework, Erfahrungen. Ihr möcht meinen Zeug nicht from scratch hochziehen, ich brauche Zeug wie Farbdefinitionen in Variablen, so dass ich die überall nur reinkopieren muss und nicht 50 Files anfassen muss, wenn ich die Farbe von der Überschrift für alle Seiten ändern möchte, weil irgendjemand gerade meint, das wäre sinnvoll. Weil wir haben Winter und ich möchte ein zweites Style Sheet von meiner Seite und da muss ein Santa Claus drauf sein und so weiter, BlaFu. Und da ich scheiße bin im Vorträge halten, habe ich gedacht, wir tun jetzt Livecode. So, Test, Test, React is not a Framework. Okay, tut. Wie funktioniert das Ding? Also wir machen hier lediglich, wir holen uns das Jam, also Jam Install Middleman und dann machen wir Middleman init und dann haben wir unsere Files und ich habe da mal was vorbereitet, weil wir nur eine Stunde Zeit haben. Und dann starte ich den Server und dann geht es auch schon los auf meiner IP Port 4567, scheißegal kann man ändern, passt. Dann kann ich mir hier vorne aussuchen, ob ich da Hammel machen will. Ich finde, aufgrund der von Serb angewendeten Verschachtelungen an Rapperklassen finde ich das einfacher mit Hammel. Kann man allerdings auch ERB Files nehmen, also normales HTML schreiben und die Ruby Befehle einfach Handels üblich mit den normalen Text reinschreiben. So, was brauchen wir? SAS, wie funktioniert SAS? SAS ist wie gesagt einfach, ich lass mir das CSS generieren und kann da noch so Dinge tun wie Schleifen und Zeug und Blar und Variablen und erstmal importiere ich mir meinen kompletten Krempel. Der Serb Foundation bringt zum Beispiel normalized CSS mit, was praktisch ist, wenn man browser-spezifische normal CSS Assumes einfach überschreiben will und sagen will, ich möchte mal was, was mir das alles gleich setzt. Als zweites importieren wir uns die Settings, das ist bei Serb Foundation ziemlich heftig, eben auch der Grund, warum ich kein Bootstrap nehme, weil ich möchte einfach diverses Zeug, wenn schnell gehen muss, out of the box haben, wie zum Beispiel eine Off-Cannvas oder eine Image-Slide-Galerie, oder wer es braucht, Pricing-Tabellen, es sind so gut wie jedem Framework drin, so gut wie jede achtzigste Webseite braucht sie überhaupt, finde ich ja cool, Range-Slider, braucht ja auch nicht unbedingt. Wir gehen jetzt davon aus, dass wir eine Seite bauen für, lasst euch was einfallen, Blog oder so, ist ja egal. Eine Schlosserei, whatever, wir haben hier unheimlich viel was wir tun können und wie jetzt SAST funktioniert, ich importiere es einmal, importiere mir diese Settings zwischen. Ich kann hier, wenn ich möchte, die Default Styles oder was ja auch Sinn macht, die Default Styles von Serb Foundation überschreiben. Kurze Morgen, wir können einen schönen Film einstellen, mit viel Merken drascht, also mit einem schwarz auf Reise oder so was. Ja, ja, das geht, ja okay, okay, ich hoffe, ihr seht den Farbunterschied halbwegs. Auf jeden Fall sieht aus wie PHP so ein bisschen, aber das sind hier wirklich nur Variablen. Wenn ich die überschreibe, dann überschreibe ich die in allen Foundation Templates, die ich importiere. Das sind sogenannte Komponenten und die kann ich hier inkludieren, wenn ich möchte. Das heißt zum Beispiel, was immer Sinn macht, ich möchte ein Grid, weil wir möchten, dass unsere Webseite auch auf dem Mobilphone irgendwie hübsch aussieht. Eher so, schon wieder Alex D., zum Beispiel eher so als so, weil man möchte auf einem Mobilgerät nicht zoomen, um den Text lesen zu können. Ich möchte auf die Gerätbreite des Uses eingehen und im Prinzip löst das Serb Foundation wie alle anderen auch. Das heißt, ich hole mir mit Media Queries verschiedene Styles für verschiedene Auflösungen. Ja, wie gesagt, ich habe da Komponenten und die bringen auch ein bisschen, ja, was kippt mit. Ich habe da gestern was erwähnt, dass jQuery eigentlich eine Sache ist, die vom Orbit geblasen gehört, aber mein Gott, auch in Serb Foundation findet man es allerdings auch nicht für jede Komponente wichtig. Das heißt, wenn ich von Serb Foundation den Image Slider haben will, dann bin ich zwangsläufig daran gebunden. Font Awesome ist auch so eine Sache, die muss man nicht machen, allerdings Schriften auf manchen Geräten sind wirklich gruselig. Modernizer macht Sinn im Header, wird in Foundation auch hin und wieder verwendet. An ein paar Stellen allerdings vermissen sie so ein bisschen in der Dokumentation die Hinweise darauf. Das heißt, wenn man ein Modernizer selber bilden will, was eigentlich auch Sinn macht, weil man dann weiß, was man davon benutzt und nicht das ganze Ding in jedem Header Request auflösen muss, nicht riesen Files ausliefern muss, wenn man nur ein oder zwei Stücke davon braucht. Das ist eine Sache, die auch bei jQuery oft falsch gemacht wird. Und im Futter auch hier wieder auskommentiert mein ganzen Krempel, den ich entweder verwenden kann oder nicht. Dieser Unicall sorgt dann dafür, dass Foundation gebootstrapped wird, sobald alles geladen wurde. Ich mache das hier mal zu. Wir fangen jetzt hier mal an, was zu bauen. Also ein Grid. Ich hoffe ihr wisst halbwegs, wie das funktioniert. Ich habe zwölf Spalten auf meiner Seite. Die kann ich pro Gerät vergeben. Das heißt, ich habe zwölf Spalten. Ich weiß, dass meine Überschrift auf großen Bildschirmen nur drei Spalten breit ist. Und auf Mobilgeräten sechs und dann auf kleinen Mobilgeräten zwölf. Das wird über Media Queries realisiert. Ich kann hier die Standardfarben dieser Foundation vergibt, kann ich auskommentieren und dann durchweg benutzen. Also wer dafür hier eine Variable braucht, allerdings die Variablen zu verwenden, macht immer Sinn. Weil wenn man dann mal bis zum ersten Abgabe des Projekts eine Variable durchweg verwendet hat, dann kann man diese eine Variable überschreiben und nicht 50. Primary Color, das ist jetzt was, das wird von Foundation so verwendet. Ich kann diese eine Color, die wird durchgehend durch mein Projekt auch hin und wieder von den Standardstyles von Serb Foundation verwendet. Das heißt, wenn ich Überschriften habe, nimmt er diese Default Color. Genauso mit Secondary kann jetzt hier noch Ternary Color oder was weiß ich, was vergeben. Wir machen uns mal hier so einen grauen Hintergrund für unsere Seite. Dann machen wir noch so Dinge wie unsere Breakpoints vergeben, können wir machen. Ich habe jetzt hier mal so ein Standard-HTML vorbereitet, also auch der Header und so weiter. Kann man sich überlegen, wie man es möchte. In meinem Ruby kann ich von der jeweiligen Seite mit dem eigentlichen Inhalt, kann ich mir per YAML Front Matter Inhalt spezifische Daten vergeben, wie zum Beispiel hier. Ich möchte von meiner Seite ein Titel und kann dann in meinem Layout sagen, wenn der nicht gesetzt ist, nehme ich hier Trollololo, 404, ich habe nichts vergeben. Genauso mit den Description und den Keywords, you spin me right round. Wer schon mal einen Kollegen gefunden hat, der sein Laptop auf Arbeit nicht gesperrt hat, der tut da immer lustige Dinge mit ihm, das hier ist die Meatspin Variante. Ja, dann brauchen wir jetzt HTML, wir brauchen HTML, wir brauchen von SIRP Foundation, wie machen die Grid, so machen die Grid. Wie ich vorhin erwähnt habe, ich brauche was für große Bildschirme, 4 von 12 Spalten breites, was für kleine auch 4 von 12 Spalten oder andersrum ist. Es muss immer im Endeffekt 12 ergeben. Ich kann auch einfach Ende dahinter packen und so weiter, aber es sieht man alles, wenn man sich das hier durchliest. Also funktioniert 1 zu 1, genau wie bei allen anderen Frameworks auch. Das heißt, wenn ich hier solche Sachen nehme wie 960 Grid oder so, von den Klassenvergabe, es funktioniert im Prinzip alles gleich. Das heißt, ich gebe jetzt hier eine Row an, da gebe ich, wir machen das hier für kleine Bildschirme zuerst, weil Mobile First und so. Das sind Columns, die sind für kleine Bildschirme 12, also volle Breite breit und da mache ich ein H1 und dem gebe ich den InLight Welcome GPN. Während ich das Speicher lädt, lädt das Ding die Seite neu. Wie macht das das? Das macht das Ding einfach per Default, weil es eigentlich Sinn ergibt. Ich sage hier einfach in meinem Development Environment, ich will Live Reload drin haben. Einfach nur, weil Monitore sind günstig prinzipiell und erhöhen die Arbeitseffizienz und wenn man nicht so einen brutal großen Beamer hat, wie hier gerade, kann man alles auf 1 quetschen ansonsten. Was ich immer gern wieder tue, mit meinen 3 Monitoren, ist, ich öffne die Seite gleich in 4 oder 5 verschiedenen Größen, Code ist so vor mich hin und alles lädt sich auf einmal neu. Es gibt Javascript Libraries, die lassen das zu, dass man das auch gleich auf Mobilgeräten neu lädt. Schnickschnack. Wenn man nicht unbedingt Javascript baut und darauf abhängig ist, dass man klein spezifische Sachen accesst, wie zum Beispiel, ich möchte wissen, ob das Gerät vom User vibrieren kann oder so, oder einen ganzen anderen möglichen Krempel, den man mit HTML5 auslesen kann, das kann man tun. Wir tun es hier nicht, wir bauen eine stinknormale Webseite. Über Bower habe ich mir die Dependancies geholt, wer es nicht kennt, das ist so Node.js-Kram. Ich benutze Node.js eigentlich gar nicht mehr, ich bin auch ziemlich froh drum, weil mehr. Und das Einzige, was ich mir noch dazu verwende, ist mir die Frontend-Pakete zu holen, weil ehrlich gesagt, das noch kein anderer richtig hinbekommen hat, außer Bower. Dadurch wurde mir mein Krempel installiert in das Wenderverzeichnis, da habe ich, normalerweise kommt das in Bower-Komponent, das habe ich hier überschrieben. Hier wird mir der ganze Krempel reingezogen und in meiner Config-AB habe ich diese in Sprockets. Sprockets wiederum ist das Ding, was mir nachher aus dem SAS, das CSS, rausgeneriert mir die ganze Pfade zwischengeladen und dadurch kann ich hier in das SAS-File sagen, importiere mir das hier und muss nicht den kompletten Pfad für meine Arbeitsumgebung mit reinpacken. Das ist ja alles schön, was wir hier machen, aber wir wollen wissen, wie sieht das nachher aus, was kann ich da im Endeffekt richtig deployen. So wie wir den Server gestartet haben, können wir am Ende, wenn wir fertig sagen, importiere mir das Ding und dann fliegen da hinten keine SAS-Files raus, weil es keinen Sinn macht, sondern CSS und Javascript-Dateien, wo der Inhalt gleich richtig drin ist, wo ich, wenn ich den Server nochmal hier starte, sieht man das, wenn ich hier sage, ich lade mir den Quelltext, dann habe ich zum Beispiel in der SAS-Datei hier diese Formatierung, habe hier überall meine Pfadeschön drin und wenn ich wiederum auf das Bildverzeichnis gehe, dann sehe ich, dass ich das Minified habe, weil es Sinn ergibt, weil man dem User keine Line-Endings ausliefern muss. Den Browser ist es sowieso egal. Ja, also jetzt haben wir da eine Überschrift und jetzt haben wir unser erstes Grid und jetzt sagen wir, wir wollen eine neue Row und da wollen wir Columns haben, die für Small die halbe Bildschirmgröße ausfüllen und da machen wir jetzt ein paar Grafen rein und da schreiben wir rein, ja, Loren, so, funzt. Dann wollen wir das nur auf Halberbreite haben, daneben nichts, sondern sagen wir dahinter End und können direkt mit der nächsten Row anfangen. Ich kann auch so einfach mit der nächsten Row anfangen, aber die Rows ordentlich zu beenden ist eine Sache, die macht man so und das macht auch Sinn. Aber jetzt nehmen wir mal ein bisschen was Interessanteres, weil, wie man HTML und Inhalte packt, das interessiert uns ja hier nicht. Wir wollen ja wissen, was in Sub-Foundation so alles dabei ist, also machen wir eine Navi rein. Navi zum Beispiel gibt es hier ein paar. Navigation gibt es einmal als Off Canvas, gibt es in links und rechts, auch mit Sub-Navigation alles drin und dann gibt es noch die normale Top-Bar, die ist ein bisschen extensible, das heißt, die geht nach unten. Wenn man drüber fährt und unterstützt auch solche Sachen wie Formulare drin und ja, dazu gibt es eigentlich nicht mehr zu wissen. Das Ding wird dann fancy, wie man hier sieht, wenn ich das Sticky mache, das heißt, die bleibt oben, egal, wie lang mein Inhalt ist. Und was man sich von hier meistens rauskopiert von der Doc-Seite, ist das HTML und unten, wenn man die Settings nicht so wie ich komplett importiert hat, dann kann man diese Datei, wo hier die Überschreibungen stattfinden, auch einfach von vorne anfangen, den ganzen Load hier wegnehmen und nur das überschreiben, was man überschreiben möchte. Dann haben wir noch hier so ein paar Sachen, wie eine Icon-Bar, sieht man auch immer öfter im Webs, eine Side-Nav, für Unterseiten ganz praktisch und ja, noch andere Navigations-Elemente, die da einfach dazugehören, wie zum Beispiel Breadcrumbs. Wir nehmen uns jetzt einfach mal eine Top-Bar. Hier richtig schön mit Typen dabei, mit Rollen, weil Aria und Accessible und so, und wir sind ja blöd, wenn wir es schon haben, wenn wir es nicht verwenden. Wir sehen, okay, wir kriegen hier HTML, es ist doof, aber ich kann das ja optimal hier. An der Stelle habe ich mich gerade dagegen entschieden, aufgrund der Zeitknappheit das alles abzutippen, sondern mache aus meiner Hamelfall eine EAP-File. Ich muss das hier nicht so schreiben, das ist in den dynamischen Generatoren-Web, ist das so üblich, dass man das Format, was im Ende rauskommt, davor schreibt und danach alles dazwischen. Das heißt, ich kann hier auch eine All.css in meiner Seite inkludieren, das in scss schreiben und da eine erb-File dazwischenhängen, wenn ich z.B. Theming ermöglichen möchte. So, dann haben wir das, haben wir den restlichen Krempel hier mal weg. So, mit einmal neu öffnen, hat auch Sublime geblickt, was wir wollen. MySite heißt Ohai GPN. So, warum zeigt das hier so komisch an? Ganz klarer Fall, weil wir die File nicht inkludiert haben. Das heißt, wir machen die jenen hier und war es überhaupt die Top-Bar? Ja, es war die Top-Bar. Was brauchen wir noch? Sonst eigentlich nichts. Schon tut's zack. Menü tut nicht, warum tut Menü nicht? Richtig, weil wir noch die Javascript-File inkludieren müssen. Inkludieren wir, aber nicht so, sondern so. Speicheln, Neuladen. Tut immer noch nicht, cool. Bitte? Ja. Ach so, nee. Dropdown sind Dropdown-Buttons. Ohne Cash-Neuladen vielleicht. Ja, das sind die Demo-Getter. Die haben mich gestern schon getrollt. Das ist Sprockets. Sprockets geht davon aus, dass du hier diese Kommentarzeichen verwendest, um zu inkludieren, weil sonst wäre hier auch jQuery nicht drin. Wenn wir uns das mal angucken, weil wir sind ja Hipster, wir haben hier so ein F12-Menü nicht eine Schelle. Wir haben, wo geht denn das? Wo ist denn das? Element untersuchen, bla. Wir können in der Konsole hier auch Foundation Query in. Foundation is not defined, cool. Undefined, cool. Interesting. Wir können uns aber auch zur Not einfach die Quellen anschauen. Ja, also wie gesagt, das schönste Javascript ist es nicht unbedingt. Ich habe keine Ahnung. Was natürlich auch sein kann, ist, dass meine Fadefner die sind. Aber ich habe hier keinen Typo. Interesting. Ja, was gibt es Futter? Was ich zur Not noch machen kann, ist, ich kann mir das CSS oder das Javascript einfach anschauen. Haha, ja. Okay, cool. Ich habe hier eine Futter.js erstellt und inkludiere es im HTML nicht. Ja, dann kann es nicht tun. Am Schluss unseres Bodies machen wir ein Skriptag. Den geben wir oder wir nehmen einfach das, was mir mein statischer Seitengenerator ausspuckt und sagen, Javascript in Glutec Futter. Schon funktioniert es auch mit dem Nachbarn. Wie gesagt, das Ding kann hier auch Subnavi. Ich sage jetzt okay, meine Seite soll deutsch werden, ich will hier kein Back. Hier steht hier im HTML. Hier steht es nicht. Dann gucke ich mal in meine Settings-File rein. In der ich wie gesagt die Default-Sachen von Foundation überschreibe. Suche hier nach Topbar. Sieh jemand Back. Also gucken wir auf die Seite. Wo steht mein Back? Nirgendwo. Also habe ich die Möglichkeit, das direkt im HTML zu machen und zu sagen, okay, ich habe hier meine Topbar. Ich vergebe hier Data Options. Archcast und Backtext. Ja, richtig. Und wer schon mal Javascript gemacht hat, weiß auch, dass das Unterstriche statt Minus sind. Es gibt dann Haufen Plugins. Ich zum Beispiel für meinen Sublime Foundation machen wir mal Tabs. Was manchmal der Fall ist, dass dieses Feld hier fehlt. Manchmal fehlen da einfach, aber das ist nur Sublime Plugins spezifisch. Ich bin jetzt code technisch nicht so der Freund von VI. Ich benutze es eigentlich nur vor Obstgramm, aber kann man machen, wie man will. Also was auf jeden Fall hilfreich ist sich angucken. Ob das Plugin für den favorisierten Editor was taugt. Ich kopiere mir meistens gern das von der Seite, weil da die Aria Rollen drin sind, die fehlen im Sublime Text Plugin auch. So, jetzt haben wir da ASDF stehen. Kann ich jetzt hier noch die Dinger hier wegnehmen. So, das kann ich hier meine Sachen editieren. So, jetzt kommen wir aber mal zurück zu dem Zeug, was mittelman spezifisch ist, weil wir wollen ja nicht in dieser einen Inhaltsklasse unsere ganzen Inhalte reinpumpen. Was wir ja eigentlich wollen ist, wir wollen Hipster sein und mehrere Seiten haben und das Zeug irgendwie so inkludieren, dass ich es wieder verwenden kann. Also, habe ich meine Navigation definieren kann und sage hier zum Beispiel, ich habe einen Navigation JSON wäre doch ganz sinnvoll. So, da schreiben wir dann so Krempe rein wie zum Bleistift. Wir haben Items und das ist ein Array. Eins dieser Items wäre zum Bleistift. Ich brauche eine Url, die ist zum Beispiel Slash, die hat ein Label und das zum Beispiel Home. Ich habe ein Icon, machen wir jetzt hier nicht. Ich habe ein Weight von 1, dass es nicht die Frontweight Bold oder so, das Fett geschrieben ist, sondern einfach, weil es der erste Navigationspunkt ist. Ich mache noch einen Navigationspunkt, der ist Entropia Globemate so, Weight von 2. Wie mache ich das jetzt in meiner Datei? Ich sage hier einfach, ich bräuchte hier eigentlich ein ForEach, also kann ich das auch tun. Ich sage hier Data Navigation JSON heißt und da drin haben wir Entropia Items. Für jedes Item machen wir Nav-Item. Wenn wir Hammel hätten, bräuchten wir das Ent hier nicht, weil da macht man keine Ents, der mecker sogar, wenn man Ent nimmt. Wir machen hier ein L.I. Element rein, dem geben wir eine Klasse und da steht dann zum Beispiel drin, dass wenn Current Page ist von Mittelman das Element für die jeweilige Seite, auf der wir uns befinden, das ist die URL gleich von unserem Nav-Item. Die URL ist, dann wollen wir warum auch unser F weg, ich holen direkt und sagen in diesem Fall ist unsere Klasse Active ansonsten leer, bitte. Richtig. So, da kann man das hier ein if-else innerhalb von einer Zeile das ein sogenannter Tornory eigentlich was was man nicht macht, weil schlecht lesbar, aber kann man machen, muss man nicht. Wir können das jetzt hier noch verbessern und sagen, ja, genau. Also haben wir hier unser L.I. Element, das hat eine Klasse von Active, wenn die URL, die dort referenziert wird unsere URL, auf der wir uns gerade machen, machen wir das da weg. In diesem L.I. wollen wir ein Link, Text schließen macht natürlich Sinn, das ist das schöne, warum ich Hamel nehme, weil ich habe hier die gleichen Klammern und wenn mein Editor nicht intelligent genug ist mir das ordentlich darzustellen, dann habe ich ein Problem. In diesem Link wollen wir ein A haben, das hat eine Haare von naff item. Und was hatten wir noch in der vergeben Label, genau. Okay, interessant. Hab ich ein Syntax-Error Home und Clubmarte. Warum tut's nicht? Warum tut's nicht Demokötter, warum tut's nicht? Tristan, hab ich ein Syntax-Error Weißt du nicht. Datanavigation kommt noch nicht Jason dazu oder weiß er, dass es ein Jason falls sein soll? Er frisst für Datadefinitionen nur Jason falls, deswegen ist das implizit. Aber habe ich das Ding auch richtig items benannt? Ja, ich hab das Ding richtig items benannt. Interessant. Ich mach also das Default-Debugging ist Quail-Text angucken. Da steht noch mein alter Krempel drin. Warum? Diese Klammer habe ich geschlossen. Dieses Ding hier habe ich geschlossen. Wo? Hier. Das Gleich sagt bei Ruby aus, dass ich das Ding ausgeben will. Das sagt aus, dass ich ein Kommando ausführen möchte. Ihr merkt also auch da hier spielen so kleine Sachen wie sogar das Syntax-Highlighting, dass man verwendet eine harte Rolle. Das ist richtig ab und zu fordert das ein bisschen. Aber normalerweise würde ich hier daneben einen Sternhand zeigen. Stimmt, er hat sich aufgehängt. Cool. Sehr klasse. Wir haben in einer Fall einen Fehler. Manche Software ist da ein bisschen zimperlich. Schön, danke. Schon tut's auch mit dem Nachbarn. Unsere Entropia-Datei gibt's nicht. Aber unsere Home gibt's und deswegen wird sie hier auch Gehighlighter dargestellt, weil, wie gesagt, ich mich gerade auf der Klasse befinde. Das ist jetzt das Vorgehen zum Beispiel von Foundation. Man würde hier jetzt einfach an der Stelle, wenn einem dieses Blau nicht passt, würde man dieses Blau in der Settings CSS suchen und sagen Link Color Active Ne, halt. Link Background Active. Das ist die Primary Color, also geht von vornherein ganz hoch und sagt setz mir mal meine Primary Color auf, fällt jemand im Color Code von ekliges Rosa ein? Ja, wie hier wisst das nicht auswendig. Demandflausch. Bitte? Boah, du Satist. Cool. Ich finde das jetzt gar nicht so schlimm. Ah, ihr seid Klasse. Ich bin noch voll müde und so. Ja, dann können wir hier noch so Sachen machen, wie Schriftarten ändern, hier die Hover Color ändern, zum Beispiel, das ist gerade diese Fancyness von SAS, dass ich hier Funktionen anwenden kann. Diese Funktionen wiederum kommen entweder von SAS selber oder sie werden vom Framework definiert. Was das funktioniert, sind so nützliche Sachen wie Lower und Higher Bound ja was ich mir EMs oder Pixel in Rems umrechnen kann, was total unnützlich ist, weil ich mach das jetzt schon eine Weile und kann immer noch nicht mit Rems rumgehen, weil mehr EM-Kalk ist auch ganz nützlich und der restliche Krempel, der Valor Scaled, kommt zum Beispiel von SAS selber. SAS gibt mir die Möglichkeit hier Funktionen zu definieren und zum Beispiel zu sagen, dass ich meine Grundfarbe zum Beispiel hier die Primary Color erhellen möchte um 14% so würde man das dann schreiben. Man kann auch zum Beispiel die Visibility Scaling, also nicht die Visibility sondern die Opacity also die die Transparenz. Da passiert dann der richtig lustige Krempel und ansonsten kann ich hier noch sagen keine Ahnung, gibt's die weiße ein Browser, was pink ist? Nein weiße was das ist ne weiße auch nicht, doch klasse ja also wie gesagt so würde man das mit Sub Foundation machen. Dann packen wir da jetzt noch was drunter und sagen zum Beispiel wir wollen ein Tabellen haben nehmen wir uns den Code probieren ihn rein sieht komisch aus, warum weil ich die Pfeil nicht inkludiert habe sieht schon besser aus ich sehe von hier unten dass die Rows hier unterschiedliche Hintergrundfarben haben, ich weiß nicht ob man das sieht, aber ich kann ja auch einfach nach meinem Tabel suchen da da da da Even Row jede zweite soll nicht snow sondern pink wie derlich ich will doch das Scheiße aussieht ich meine wenn ich jetzt noch ein richtiger Satist wäre, dann würde ich ja hier sagen ok Head Padding ok ich brauch da mehr ich brauch da von der Tabelhead mehr Abstand machen wir hier so 50 Pixel warum macht das nicht macht es Sinn 150 Tabelhead Padding Hallo Gib ihm das Vorgehen es kommt natürlich drauf an wie viel Zeit du da rein steckst wenn du zum Beispiel ein CI-System laufen hast und das auf Staging dann siehst du ja gleich die Unterschiede das macht man eigentlich weniger normalerweise nimmst du so ein Screenshot Dienst wenn das eine kleinere Webseite ist dann liest du dir das Change Lock durch, das ist eigentlich so was man da so macht die haben das auch die wichtigsten Dinge stehen hier drin das macht man eigentlich auch mit jeder anderen Software, nur wichtige Änderungen stehen hier drin zum Beispiel wenn du die haben hier mal ein Modul unbenannt die machen Semantic Versioning ach du weißt doch das bringt nur jeder dritte richtig hin das Ding hieß mal Top Bar zusammengeschrieben und dann war das noch 4 oder 5 Unterversionen bis zur nächsten Major haben sie das so unbenannt und eine Kopie davon mit einer großen fetten deprecated Warning drüber so im Repo gelassen und mit der Major ist es dann rausgeflogen also die achten da schon ein bisschen drauf aber wir wissen ja alle Semantic Versioning ist eine Sache die man eigentlich tun sollte aber nur jeder ihr wisst was ich meine weil manchmal auch einfach mehr und Verpeilung und naja, ach das ist die Top Bar machen wir noch Buttons Buttons haben auch Mixins was sind Mixins Mixins sind Blöcke die ich in SAS verwenden kann ich sag hier zum Beispiel ich möchte in meiner Inhaltsdatei einen wir haben unsere Grids vergnordet die Navi ist da ist das natürlich die Navi hat da auch so coole Features wie zum Beispiel dass ich mit einer Klassendefinition definieren kann dass das Dingstick ist und das funktioniert einfach ist auch ziemlich cool so hier kann ich noch sagen also wenn ich das jetzt speichere dann habe ich hier einen Button aber ich hätte den gern und ich habe jetzt hier in SAS 2 Möglichkeiten ich habe zum Beispiel einen Style den möchte ich auf alle Buttons anwenden oder ich habe ein Style den möchte ich auf alle Buttons anwenden ich kann das auf zwei Arten tun einmal ich ändere hier in der Settings die Settings für Buttons die Implikation daraus ist jedem offensichtlich ich ändere damit alle Foundation oder beziehungsweise SAS gibt uns noch eine andere Möglichkeit und zwar durch Mixins und zwar ich gehe von den Default Settings aus und überschreibe nur diverse Dinge ich sage hier zum Beispiel ich gebe meinem Button die Klasse FU gehe in meinen SAS und schreibe nun SAS und überschreibe nichts so sage mein FU extended die Styles eines Default Buttons so jetzt habe ich für diesen einen Button jetzt und kann dann sagen background color flush wenn ich jetzt einen flushigen Button habe möchte ich daneben einen der nicht flushig ist zack dieses Extend oder auch ein Mixin wo ich zum Beispiel sagen kann ich möchte eine Funktion definieren und auf allen Elementen anwenden die es gibt Elemente im CSS die erfordern browser spezifische Präfixe mir fällt jetzt auch gerade kein Beispiel ein ich glaube Opacity war das eine ganze Zeit lang da kann ich eine Funktion definieren die die einfach vor alles davor packt ja ich habe hier gerade kein Beispiel da aber auf jeden Fall wer mehr darüber wissen möchte der geht nicht um diese kaputte Seite sondern sucht nach Sass dann landet er auch nicht auf einer Fishing-Seite geht in die Docs so hier wird das ziemlich gut erklärt du kannst Sass wiederum auch auf zwei verschiedene Arten schreiben also entweder du schreibst SCSS da kannst du Sachen verwenden wie durch ein Fragezeichen zieh ich mir die Definition vom Mutter-Element rein weil normalerweise kannst du im Mutter-Element nur die Kind-Elemente definieren aber wenn ich das unzeichen jetzt hinter diese Punkt-Zeit-Bar schreiben würde dann würde ich jedes Diff-ID-Main bei ID ist blöd weil die gibt es eh nur einmal im Dokument jede Klasse Main die Innen-Punkt-Zeit-Bar definiert wird überschreiben dadurch kann ich mir das hin und her referenzieren so wie ich gerade lustig bin wo haben wir Mixins Mixins haben wir hier und durch dieses Funktionen schreiben wird dann Sass auch richtig mächtig ich sage hier zum Beispiel ich nehme mir diesen Codeblock kennen wir alle von Clear Fixen es gibt so circa 50 verschiedene Versionen wie man Clear Fix schreiben kann und irgendwie 5 die richtig tun ich definiere mir hier ein Mix-In namens Clear Fix und das kann ich dann nachher mit Include inkludieren Include Large Text oder in dem Fall Include Clear Fix und ich habe nach diesem Element ein Clear Fix stehen ja und da gibt es dann noch so andere schöne Sachen wie das Extent was ich gerade gezeigt habe dass ich Serious Error ja ok man kann es vielleicht nicht lesen dass ich mir Styles von einer anderen Klasse einfach borge und hier mitnehme und dann hier überschreiben kann oder erweitern kann dann gibt es noch so Sachen wie Sass Sass CSS muss ich die Klammern machen und die Semi-Colons kann dafür Sachen wie das hier verwenden und dann gibt es noch Sass Sass also die SAS Dateientung da spare ich mir dann die Klammern und das Semi-Colon ist sowas wie Hamel also am Schluss vielleicht schwer lesbar muss man sich überlegen ob man es möchte ja wie gesagt die Extents kann man auch mehrmals machen und ja die Elemente in Sass selber oder besser gesagt in Foundations sind durch Mix ins Gelöst das heißt wenn ich weiß ich habe hier ein Mix in dann kann ich mir auch meine Buttons selber definieren indem ich hier einfach für ein Element das vielleicht ein ganz anderes ist zum Beispiel in Div die Standard-Definition von einem Button reinziehen und ja das ist im Prinzip auch schon alles ich glaube ja jetzt haben wir eh die Stunde rum und ich würde sagen gibt es noch Fragen wenn wir so ein Projekt anfangen was wird der Timer da automatisch generiert von diesem Sass einfach mal ein neues Projekt wir haben hier nichts wir haben hier die Standard Sachen weil die nicht davon ausgehen dass wir Sass verwenden wollen deswegen steht hier auch eine normale kommt hier eine normale CSS-File mit eine normale Javascript-File in dieser Javascript-File können wir dann dieses Brockets nutzen das ist wie gesagt dieses Autogenerier-Ding von was mit Ruby mitkommt da haben wir dann entweder hier die Möglichkeit mit Kommentar-Gleich-Require eine spezielle File oder alles was in diesem Verzeichnis landet das ist auch ganz praktisch weil der Minify da einfach alles was da reinkommt und in der Style Sheets-File steht normales HTML was ich in der Config gemacht habe ist lediglich Zeug auskommentiert entkommentiert wie hier den Output Style und das Live Reloading und ich habe meine Sprockets Paths hier oben reingepackt das sind die von denen ich hier die erstelle ich die erstelle ich vom scratch du gehst in das Verzeichnis rein du holst dir deine überbauer deine externen Libraries und machst dann so was hier machst dann hier entweder für jede Zeile einzeln Import Foundation Component das hast tickt so dass du das auch so machen kannst du kannst dir die File Extensions sparen und den Unterstrich davor das ist alles was ich gemacht habe ich habe das Directory gelistet habe mir alles rauskopiert habe so reingeschrieben und habe mir jedes jede Komponente die ich nicht brauche einfach auskommentiert nichts anderes habe ich gemacht und das ist auch sinnvoll und vorne weil manchmal bitte ich einfach zu faul und ich gebe es auch ehrlich zu die Change Logs zu lesen also kann es sein dass ein neues Element hinzugekommen ist das kann ich übersehen wenn ich es hier nicht drin habe und ich bin gerade voll drin dann verpeil ich es vielleicht und übersehe dieses Element und frag mich warum es beim Debug nicht klappt also kopiere ich es alles immer rein ok diese Source Verzeichnis ist bei Middleman normal für das wo man eigentlich entwickelt und wenn man dann wenn man sich die Dependencies über Bauer reingezogen hat hat in SourceVendor Foundation gibt es ein CSS File da ist ein fertig generiertes CSS drin da ist alles drin aber das wollen wir ja äußerst selten alles ausliefern weil wir äußerst selten alles brauchen außerdem weil wir Default Styles vielleicht überschreiben also nehmen wir das nicht wir nehmen direkt SAS und alles was wir da brauchen ist wir brauchen dieses Normalize extra aber deswegen wurde es auch vorher inkludiert dann brauchen wir die Functions CSS und dann können wir uns schon die Settings kopieren aber ansonsten wie gesagt bei Foundation ist normalerweise alles dabei was man für Foundation braucht das heißt auch im Javascript ist alles dabei ich habe im Javascript meine Wenders da sind zum Beispiel jQuery drin da ist Modernizer drin ich nehme das auch ich kann auch Modernizer von Hand bauen die liefern ihr eigenes Modernizer mit weil die selber wissen was von Modernizer brauchen die machen das falsch die dokumentieren das nicht so dass ich erstmal rauslesen müsste was in dem Modernizer überhaupt alles drin ist aber ich glaube beim Modernizer steht sogar im Versionheader nee, steht es nicht genau, das ist das Problem ich könnte mir jetzt auch mein eigenes Modernizer für mein Projekt bauen könnte ich tun aber dann, wie gesagt, müsste ich halt gucken was da von Foundation verwendet ansonsten auch das jQuery ist ziemlich dick aber die brauchen auch ziemlich viel davon das sind dann in dem Javascript von jQuery sind ein paar nette Sachen drin wo es auch mit jQuery interessant wird zum Beispiel eine Verzögerung wenn du mit dem Handy ganz nach Rechtskreus und so weiter weil es könnte auch jemand einfach das Bild so verschieben wollen weil du grad als Entwickler davon ausgehst, dass jeder Bild schon breiter als 360 pixel ist und einer mit 320 sieht nicht das komplette Bild sondern will das Bild verschieben um alles von diesem Bild zu sehen das sind so ein paar kleine Tricks dabei die auch von jQuery ziemlich intensiv oder die intensiv jQuery nutzen aber ansonsten das ist im Prinzip alles mit dem Foundation-Paket mit was du dir über Bower reinziehst sonst noch mal? ok cool dann