jalla.ch

Mein Studium an der HSLU – T&A

Relaunch meines Blogs für das Modul ITEC

Hinterlasse eine Antwort

Obwohl dieser Blog seit gut einem Jahr online ist, hatte ich bisher noch keinen wirklichen Verwendungszweck dafür. Das war auch der Grund weshalb ich ein fertiges WordPress Theme und noch keinen Artikel geschrieben habe. Für das Modul “Internet Technologies” kurz ITEC mussten wir nun als Testat eine eigene Website mit modernen Webtechnologien erstellen. Ich nutzte diese Gelegenheit um diesen Blog zu reaktivieren und erstellte dafür ein eigenes Theme.

Dafür habe ich folgende Technologien und Frameworks verwendet:

  • Semantische HTML5 Tags (section, aside, nav, header, footer, …)
  • Responsive Design (Media Queries)
  • LESS CSS
  • semantic.gs (Grid System)
  • jQuery

An dieser Stelle möchte ich noch ganz kurz auf semantic.gs eingehen. Bevor ich mit der Implementierung des neuen Theme begann, habe ich mir überlegt, Twitter’s Bootstrap Framework zu verwenden. Ich habe bereits in anderen Projekten mit Bootstrap gearbeitet und bin eigentlich sehr davon begeistert, da man mit diesem Framework schöne Webseiten in kürzester Zeit erstellen kann. Was ich daran jedoch nicht mag, ist, wie man Bootstrap verwenden muss. Anstatt den HTML-Code aufgeräumt und semantisch zu halten, muss man diesen mit vielen Klassen “vollmüllen”. Deshalb, und weil ich eigentlich sowieso nur das Grid-System brauche, habe ich mich entschieden, mich nur nach einem Grid-System umzusehen. Nach ein paar Minuten googeln bin ich dann auf semantic.gs gestossen. Semantic.gs ist ein kleines und leichtes Grid-System, welches Responsive-Design und LESS unterstützt. Und wie man vom Namen unschwer erkennen kann, ist es auch noch semantisch, da man das Grid nicht im HTML mit Klassen aufbaut, sondern in CSS mithilfe von LESS. Das wäre zwar auch mit Boostrap möglich, jedoch ist es nicht dokumentiert, was für mich ein No-Go ist.

Hier ist ein kleines Beispiel wie man ein einfaches Layout mit Bootstrap erstellen würde und wie das gleiche mit semantic.gs und LESS aussieht.

Ein einfaches Grid mit Bootstrap

HTML

<section class="row">
	<article class="col-md-8">
		some content
	</article>
	<aside class="col-md-4">
		some content
	</aside>
</section>

CSS

article {
	/* stuff */
}

aside {
	/* stuff */
}

Ein einfaches Grid mit semantic.gs

HTML

<section>
	<article>
		some content
	</article>
	<aside>
		some content
	</aside>
</section>

CSS (LESS)

article {
	.column(8);
	/* stuff */
}

aside {
	.column(4);
	/* stuff */
}

Obwohl Bootstrap noch immer ein super CSS Framework ist, machte in meinem Fall semantig.cs mehr Sinn.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>