Write A Responsive Blogger Template fast (with SASS and Git) ✤✤✤✤✤

Wie man ein Blogger Template schreibt, habe ich schon ein paar Mal erklärt. Doch vor einiger Zeit habe ich SASS in mein Leben gelassen und seit dem ist es auf meinen CSS Wegen zu meinem ständigen Begleiter geworden, so auch als ich ein bisschen am aktuellen KreaTief Design gearbeitet habe. Dabei habe ich für mich einen Workflow entwickelt, der die Arbeit am Template enorm vereinfacht und bei der Personalisierung von Templates viel mehr Möglichkeiten bietet als der Blogger Vorlagen Designer. Diesen Workflow möchte ich euch heute zeigen.

How a responsive blogger template is written is nothing I haven't talked about before. But a while ago I let SASS into my life and since then it has not left my side on my css adventures. It did not even leave, when I was working on the current bekreatief template. While I was working on that one, I created this workflow for myself, which I found to be so much easier and faster than how I did it before. Also it is so much easier to personalize my templates now, than using the template designer. How to write a responsive blogger template really fast, that's what this tutorial is about.




English Deutsch

Endergebnis dieses Tutorials ist mein Template Photosheet. Das ihr euch gerne ansehen dürft ^^

The result of this Tutorial is my template photosheet, which you are very welcome to have a look at ^^

Photosheet

Vorbereitungen

Da dies nicht mein erstes Template Tutorial ist, verweise ich einfach noch einmal auf mein letztes Tutorial zum Thema. Ich empfehle, dass ihr dieses zuerst lest, denn ich gehe davon aus, dass ihr diesen Workflow kennt. In diesem Tutorial geht es darum, den bestehenden Ablauf zu beschleunigen, indem wir Git und SASS verwenden.
Da dies ein SASS und Git Tutorial ist, gehe ich ausserdem davon aus, dass ihr wisst, wie GitHub funktioniert und euch mit Sass vertraut gemacht habt. Checkt dafür am besten die offizielle Website aus und beschäftigt euch mit der Dokumentation. Wenn ihr CSS könnt, braucht ihr maximal einen Tag, bis ihr SASS gelernt habt. Und ihr werdet es lieben!

Preparation

Since this is not my first template tutorial, and I am not going to repeat myself again, I'll just leave you a link to my last tutorial, which is a lot more detailed and introduces you to my old workflow. I recommend reading that first, because this tutorial here is more like an extension to the old one. We will speed the process up, by using Git and SASS.
Since this is a SASS and Git Tutorial, I assume you know how GitHub works and have an idea about SASS. For that check out the official website and read the documentation. If you are able to write CSS, you'll need a day max to learn SASS. And you're gonna love it!

Damit ihr SASS dann aber in CSS verwandeln könnt, müsst ihr es auf eurem Rechner installieren. Ich kenne viele CMD-Lover, selbst arbeite ich aber äusserst ungern mit dem Terminal, wenn es anders mindestens genauso schnell geht (für gewisse Dinge ist das Terminal ganz praktisch, ihr werdet sehen wann, aber dann muss das Tempo schon sehr viel schneller sein). Deswegen verwende ich für SASS eine App namens Prepros. Die installiert ihr einfach und dann könnt ihr es schon verwenden. Was ich ebenfalls total mag ist die Tatsache, dass autoprefixer mit nur einem Klick dabei ist. Autoprefixer sorgt dafür, dass unsere CSS die ganzen Prefixe bekommt und unser SASS Code bleibt damit frei von unnötigen Zeilen.

Für Git habe ich die letzten Monate immer Aptana Studio verwendet, in letzter Zeit zickt das Ding aber ständig rum, also habe ich beschlossen der Brackets Git Extension eine Chance zu geben und ich bin begeistert. Git mit meinem liebsten Editor zu verwenden ist absolut super! Die Erweiterung von Git findet ihr im Extension Manager, stellt sicher, dass ihr euch das ReadMe durchlest und Git installiert habt, ansonsten funktioniert das nicht. Oh und der Brackets Link für alle, die es insteressiert.

In order to be able to compile SASS into CSS you will need to install SASS. I know a lot of cmd-lovers, but I personally don't really like the terminal. If it does not take me a lot longer, I will go for the non-terminal solution. There are certain things I do with the terminal, but most of the times I can exclude it from my workflow. That's why I use an App to compile my SASS, which is called Prepros. Just install it and you can use it. What I also really like about it, is the fact that you can use Autoprefixer with just a single click. What Autoprefixer does is add all of the required vendor prefixes for you, so you do not have to care about them.

For Git I have been using Aptana Studio for the past few months, but lately my program sucked greatly, so I thought I'd give the Brackets Git Extension a try and I really like having Git with my favourite editor. You can find it in the extension manager of brackets. Make sure you read the ReadMe and install all of the requirements, otherwise it won't work. Oh and for everyone who doesn't know it yet the Brackets Link. I really like this Editor, because it is updated frequently and has all of the features I need.

Das sind die Apps, die ich verwende. Sie sind kostenlos und funktionieren in PC sowie Mac, selbstverständlich könnt ihr aber auch eure eigenen Programme verwenden.

Projektbeginn

Als erstes erstellen wir unser neues Projekt. Dafür erstellt ihr in eurem GitHub Ordner einen neuen Ordner, den ihr nach eurem Projekt benennt. Diesen öffnet ihr dann im Editor und initiiert das Projekt. Sobald ihr das habt, könnt ihr sehen, dass ein Master-Branch erstellt wurde.
Da wir die am Ende entstehende CSS hosten möchten, müssen wir für die Datei einen neuen Branch erstellen, den wir gh-pages nennen. Was dann passiert ist, dass wir unsere Files aufrufen können nach dem Schema http://benutzername.github.io/projektname/datei

Those are the Apps I use. They are free and work on PC and Mac. But of course you can use your own programs. Just use whatever you feel comfortable with.

Project Initiation

First we create our project. For that you create a folder in your GitHub folder, which you name after your project. Open this folder in the editor and initiate the project. As soon as you did that, you can see, that the master branch was created.
But since we want to host our CSS in the end, we need to create a new Branch which we name gh-pages. What happens then is we can open up the files using the URL http://username.github.io/projectname/file

Als nächstes erstellen wir die Files für unseren Sketch. Mittlerweile mache ich keine Box-Skizzen mehr, sondern erstelle mehr oder weniger Prototypen der Seite, die die Grundlook schon enthalten. Eine HTML-Page ist schnell geschrieben und wenn man während dem Stylen plötzlich das Markup verändern will, ist es in einem simplen Dokument viel schneller gemacht als in Blogger.
Wir erstellen für den HTML Prototyp ein einziges SASS-file. Später werden wir die einzelnen Komponenten aufteilen, doch für die Skizze reicht eine Datei.
Den Ordner fügen wir ausserdem Prepros hinzu. Wir wählen für unseren File Auto Compile aus, sodass Prepros jedes Mal die CSS neu kompiliert, sobald wir Änderungen im SASS machen. Ausserdem aktivieren wir Autoprefix und wählen compressed als Stil aus. Die Datei wird dadurch minimiert und sehr leicht.
Sobald die Files erstellt sind, committen wir sie.

Next we create the files for our Sketch. A while ago I started writing more detailed sketches, almost like prototypes of ma final page, which already contains some styles. A HTML-Page is written very fast and when you are changing markup, it is done much faster in pure HTML than XML.
For the HTML prototype we create one single SASS-file. Later on we will be splitting our SASS, but for the sketch it is totally fine to just have one file.
We add the folder to Prepros, check Auto Compile, so Prepros recompiles the CSS as soon as changes are made. Also add Autoprefix and choose a compressed output. This will minify our file.
As soon as the files are created, we commit them.

Und spätestens jetzt wird es Zeit in GitHub unser Projekt zu erstellen. Dann kopieren wir den HTTP link und fügen Git das Remote hinzu, damit wir unser lokales Projekt live pushen können.

And now is the last point to create the project in GitHub. As soon as the repository is started, copy the http link and add the Git Remote, so that we can push our local changes live.

Prototyp

Dann schreiben wir unsere Skizze. Wir beginnen mit HTML und schreiben dann unser SASS. Folgend könnt ihr euch mein HTML und SASS ansehen. Und live könnt ihr es euch auch ansehen.

Prototype

Then we write our sketch. We start with HTML and write then our SASS. Following you find my HTML and SASS. And of course you can see it live too.

Modulation

Sobald der Prototyp fertig ist, haben wir ein Bild davon, wie unser Projekt am Ende aussehen wird. Wir haben die meisten Variablen und Mixins und wissen welche Bereiche in den Style gehören. Also machen wir uns einen Plan, wie wir das Projekt aufteilen. CSS-Files können zum Teil sehr gross werden (mein momentanes Maximum ist fast 1900 Zeilen), wobei man schnell den Überblick verlieren kann. Ich schreibe für gewöhnlich ein Inhaltsverzeichnis, wenn ich CSS-Files schreibe und nummeriere alles durch, sodass man alles etwas schneller finden kann. SASS hat aber dieses tolle Ding, das man partials nennt. Man kann sozusagen Teil-Files erstellen, in denen jeweils nur ein kleiner Teil des Ganzen ist. Und zusammengesetzt wird das ganze dann mit imports. Ich habe einige Posts darüber gelesen, wie man das mit dem Ordnern am besten sinnvollsten machen soll. Am meisten überzeugt hat mich ein Artikel aus thesassway.com (link). Also teile ich meine Ordner nun in modules und partials auf. Die Files sind dann zum Teil sehr kurz, doch es ist alles sortiert und wenn ich etwas bestimmtes anpassen will, finde ich es schnell.
Meine Files und Ordner erstelle ich mit dem Terminal, einfach weil es so viel schneller ist, ein > zu schreiben, als eine Reihe von Tastenkombinationen. Im folgenden könnt ihr den Verlauf sehen und dann noch meine Filestruktur.

As soon as the prototype is done we have an image of what our project will look like in the end. We created most of the Variables and Mixins and what is part of the Style. So we just map out how to structure our Files. CSS files can get enormous. I usually write a table of content, but SASS has an easier option. It is called partials. Which means you can save chunks of code and just put them all together in the end. I read quite a few posts on how to structure. My favourite post was on thesassway.com (link) So that's pretty much how I structure. Some of the files only have a few lines, but at least it helps me being organized.
I create my files and folders with the terminal, because it is so much faster to just write > instead of a whole bunch of shortcuts. In the following you can see my structure.

Filestruktur

|-- modules/
|   |-- _all.scss [imports aller Module]
|   |-- _colors.scss [Farbvariabeln]
|   |-- _mixins.scss [Mixins]
|   |-- _typography.scss [Schriftvariabeln]
|
|-- partials/
|   |-- _base.scss [Modulimport, Globale Variabeln, Extendonly Klassen]
|   |-- _reset.scss [Reset Style]
|   |-- _general.scss [Generelle Styles]
|   |-- _header.scss [Header Style]
|   |-- _menu.scss [Menu Style]
|   |-- _articles.scss [Artikel Styles]
|   |-- _comments.scss [Kommentar Styles]
|
|-- main.scss [Haupt Sassfile, Import aller Partials]

Arbeit mit Five

Wie jedes Mal, verwende ich für den Blogger-Code five. Ich habe Oliver ein paar Änderungen vorgeschlagen, weil sie für mich zu den ersten Schritten gehören, ehe ich richtig anfange. So habe ich noch Labels hinzugefügt und im Header-Gadget den Untertitel eingefügt. Meine Ausgangslage findet ihr also in diesem Patch

Dieses Template wird dann Markuptechnisch dem Layout von meinem Prototyp angeglichen. In diesem Fall waren es keine Weltbewegenden Änderungen. Ich habe die ganzen Verlinkungen gemacht, vom CSS-File, Font Awesome sowie den Webfonts, die ich verwendet habe. Dann habe ich den Hauptcontainer hinzugefügt, einen um den Header herum, Eine Section für die Navigation eingefügt und dann noch die Grundlage für das Bildpreview auf der Startseite, das möchte ich euch kurz erklären.

Responsive Bildcontainer in jedem beliebigen Format

Die Idee war es, das erste Bild des Posts auf der Startseite in einem Grid darzustellen. Das musste dann natürlich noch responsive sein. Ich habe euch vor einer Weile vom padding-hack erzählt und wie ihr das mit SASS bewerkstelligen könnt (Link) das einzige Problem ist, dass man bei Blogger data-Tags nicht in CSS einbinden kann.
Ich hatte dieses Problem vor einigen Monaten schon einmal, als ich perfekt quadratische Previews auf meiner eigenen Startseite haben wollte und Oliver (von 5202) war dann so nett und hat mir mit einem Script ausgeholfen, weil meine jQuery-Kenntnisse gleich Null waren.

Das Preview habe ich über dem Post-Header eingefügt. jQuery und das Script stehen oberhalb des schliessenden Body-Tags

file strukcure

|-- modules/
|   |-- _all.scss [imports of all modules]
|   |-- _colors.scss [color variables]
|   |-- _mixins.scss [mixins]
|   |-- _typography.scss [font variables]
|
|-- partials/
|   |-- _base.scss [module import, global variables, extendonly classes]
|   |-- _reset.scss [eeset style]
|   |-- _general.scss [general styles]
|   |-- _header.scss [header style]
|   |-- _menu.scss [menu style]
|   |-- _articles.scss [article styles]
|   |-- _comments.scss [comment styles]
|
|-- main.scss [main sass file, Imports of all partials]

Working with Five

As alway I will use five for the blogger Code. I forked five and added everything in, which I usually do before even starting to write anything. I added Labels and the blogger description in the header. You can find my changes in this Patch.

The template will then be adjusted according to the HTML sketch. In this case it was not a lot of changes. I added the whole links to css and webfonts. Then I added the maincontainer, a header, a seaction for the navigation and the basis for the image preview on index pages.

Responsive image container in every format

The idea was, to have the first image of the posts in a grid. This should be responsive as well. I wrote a post about the padding hack a while ago, and showed you how to use it in combination with SASS (Link) the only problem was, that blogger data-tags can not be used in CSS.

I had this problem a few months ago, when I wanted square preview images in my blog and Oliver was nice enough to help me write some jQuery, because back then I didn't know the slightest bit about it.

I added the preview in the post header. jQuery and the script are placed above the closing body tag.

<b:if cond='data:blog.pageType == &quot;index&quot;'>
 <div class='prev_img'>
 <a expr:href='data:i.url'> 
 <img class='img' expr:src='data:i.firstImageUrl'/>
 </a>
 </div>
</b:if>

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'/>
 <script>
 function square(){
 $(&#39;.prev_img&#39;).find(&#39;img&#39;).each(function(n, image){
 var image = $(image);
 var thisurl = $(this).attr(&#39;src&#39;);
 image.parents(&#39;a&#39;).css(&#39;background-image&#39;, &#39;url(&#39; + thisurl + &#39;)&#39;);
 $(&#39;.prev_img img[src=&quot;&quot;]&#39;).parent().parent().remove();
 });
 }

 $(document).ready(function() {
 square();
 });
 </script>

Dann kam natürlich noch der Footer rein und das Markup ist mehr oder weniger vollständig.

SASS schreiben

Als nächstes wird der Style geschrieben. Ich werde nicht meinen kompletten Code erklären, sondern nur die wichtigsten Files.

Then just add the footer and markup is done.

Writing SASS

Next we write out style. I am not going over everything, just focus on the most important things.

Modules/_all.scss

In all werden alle Module importiert. So müssen wir in unserem base partial nur einen import schreiben und haben direkt alle drin. In den Modulen schreiben wir SASS, welches keinen CSS-Output gibt. Das heisst Variabeln und Mixins. Im Grunde ist das Ziel der Module, dass sie in einem neuen Projekt wiederverwendet werden können, ohne grosse Änderungen. So müssen wir Fonts und Farben womöglich anpassen, aber im Grunde bleibt sich das hier gleich

In _all.scss all of the modules are imported. So in our base partial we only need a single import and everything's there. In the modules we write SASS, that does not output actuall CSS. This means variables and mixins. Basically the goal of the modules is to be universal and reuseable, without hassle. So you may have to change fonts and colors, but the main stuff can be left the same.

Modules/_colors.scss

Hier kommen alle unseren Farben rein. Ihr seht, dass ich dabei eine Variable für schwarz und weiss definiert habe. Dies sind allerdings in wahrheit beide grau. Einmal in sehr hell und einmal in wahnsinnig dunkel. Der Grund ist, dass schwarz auf weiss ein sehr starker Kontrast ist, der auf Dauer unangenehm werden kann. Deswegen verwende ich stets diese beiden Farben. Ansonsten habe ich in diesem Projekt nur noch eine weitere Farbe, weil es ein sehr neutrales Ergebnis werden soll.

Here we add all our colors. You can see I addedd custom white and black which are basically shades of gray. It is easier on the eyes to use grays because the contrast is a bit more manageable. Otherwise not a lot of colors, because the end result is supposed to be very neutral.

Modules/_typography.scss

Und hier definiere ich die Schriften.

And here defining fonts.

Modules/_mixins.scss

Das ist das spannendste aller Files. Mixins sind der Grund, warum SASS so unglaublich schnell geschrieben ist. Ihr schreibt ganze Folgen von CSS und diese könnt ihr dann einfügen. Das ganze funktioniert ebenfalls mit Variabeln. Wer Autoprefixer nicht verwendet, schreibt dann zum Beispiel mixins mit den ganzen Vendor-Prefixen. Ich habe hier nur drei. Einmal ein Flex-box-mixin, weil mir das meist zu viel Geschreibe ist, mein paddin-hack mixin und noch die rowMachine. Dies ist ein Mixin, welches ich in einem CSS-Tricks Screencast (link) gefunden habe. Es ist absolut wundervoll, wenn es darum geht Breiten für Grids zu berechnen. Ihr könnt es wie Chris mit floats verwenden, oder wie ich mit Flexbox kombinieren. Und es gibt bestimmt noch mehr Möglichkeiten. Ich bin begeistert von Mathe in SASS, einfach weil ich es hasse jedes Mal, wenn ich etwas ändern will, alles neu berechnen zu müssen. Also wird bei mir jede noch so einfache Rechnung stets mit Variabeln gemacht, damit Anpassungen in Windeseile ausgeführt werden können.

This ist the most exciting files. Mixins are the reason why I love SASS and why it is written so fast. I wrote one for the padding hack, flexbox and a row machine, which I found in a CSS-Tricks Screencast (link). It basically allows you to generate widths for grids.

Partials/_base.scss

In der Base passiert ganz viel. Als erstes laden wir unsere ganzen Module rein. Und dann kreieren wir hier die globalen Variabeln. Hier kommen alle Variabeln rein, die im Gesamtcode Verwendung finden. Ausserdem auch die extendonly klassen, die im Grunde ähnlich sind wie Mixins, nur ohne Variabelnübergabe, sozusagen. Dieses File ist grundsätlich das einzige, das bei Änderungen angepasst werden muss. Der ganze Rest wird einmal geschrieben und dann kann man es in Ruhe lassen. Ausser man braucht richtig grosse Änderungen.

In the base file we place all of our modules, extend onlys, which are basically like mixins, but without the variables. And global variables. This ensures that changes can be made really quickly, changing just one variable in the file.

Partials/_articles.scss

In diesem File habe ich das Grid geschrieben. Seht euch besonders den Teil an, in dem die rowMachine Verwendung findet. Ich habe das Template für bis zu fünf Posts nebeneinander geschrieben. Entsprechend des Werts in der Variable für die Anzahl, wird ein anderes Set an Media Queries geladen.

In this file I wrote the grid. See the rowmachine part. I created the template up to a width of five posts next to each other. Depending on the variable value, a bunch of media queries will be loaded.

Main.scss

Und in unserem Main-File passiert fast gar nichts und trotzdme alles. Hier werden die ganzen Partials zusammengefügt und ein grosses CSS-File entsteht am Ende. Partials werden von SASS nicht kompiliert. Wenn ihr einen CSS-Output haben wollt, müsst ihr alle partials in einem richtigen SASS-File haben.

And in the main file we just import everything. Here our partials will be put together and compiled into one single css-file.

Und im Grunde ist es das.
Der Prozess geht so wahnsinnig schnell. Auch während des Developements. Wenn ihr von Anfang an die generierte CSS-Datei in eurem Blog verlinkt, sobald ihr das Markup habt. Könnt ihr die Änderungen praktisch umgehend sehen, nachdem ihr sie gepushed habt.

Ich hoffe das hier war für einige von euch hilfreich. Versucht es einmal, ihr werdet schockiert sein, wie viel schneller es geht. Sobald ihr drin seid, läuft es ratzfatz. Photosheet hat vom Moment, als ich das Git Repository gestartet habe, bis zum fertigen Template in zwei Stunden geschrieben. Mit Overwrite hat es etwas länger gedauert, aber wenn ihr ein Template für euch alleine schreibt, braucht ihr das ja nicht.

And that's it, basically.
The process is really fast. Also while developing. Just include the css from the start. As soon as changes are pushed you will be able to see them. Photosheet was written within two hours, which is like more than half the time I needed when writing templates with CSS only.