Posts Tagged ‘ CSS

LESS mit Fluid-Templates verwenden in Typo3 4.5

TIPP: Um LESS optimal mit TYPO3 Fluid-Templates nutzen zu können empfehle ich die Verwendung des Fluid-Template-Manager (kurz FTM).

Um Templates und Designs schneller und effektiver zu entwickeln ist es zu empfehlen LESS zu verwenden.
LESS ist eine ähnliche Technik wie SASS bietet einem viele Möglichkeiten wie bspw. Variablen-Definition, Mixins, etc., welche die CSS-Erstellung beschleunigen und die Wiederverwendbarkeit erhöhen.
Vorallem bei der Verwendung vieler neuer CSS3-Features, wo oft jeder Browser sein eigenes Statement erwartet, ist es sinnvoll LESS-Mixins einzusetzen.

Alle Infos und die Dokumentation zu LESS findet Ihr hier:
http://lesscss.org/.

Viele brauchbare Mixins findet man hier:
http://lesselements.com/.

Starten wir nun um ‚mal eben‘ LESS in unser Typo3 einzubinden. Folge einfach den nächsten Punkten Schritt für Schritt:

  1. Als erstes wechseln wir in den Extension-Manager und installieren die notwendigen Extensions. Ich arbeite hier gerne mit der LESS Extension cs_less, da diese einen View-Helper mitbringt, mit dem man sein LESS direkt im Fluid-Template einbinden kann. Da diese jedoch wiederum Abhängigkeiten zu anderen Extensions hat, installieren wir diese beiden zuerst. Dies wären aktuell fed (1.4.12) und flux (1.4.1). Nach dem die beiden Extensions importiert und installiert sind, nur noch schnell die cs_less Exxtension hinterher installieren
  2. Nach dem die notwendigen Extensions vorhanden sind können wir beginnen unsere LESS-Dateien zu erstellen. Die erste nennen wir styles.less und legen sie in unserem fileadmin/templates/css/-Verzeichnis ab. Danach laden wir uns die less-elements runter, und legen die Datei elements.less in das gleiche Verzeichnis.
  3. In unsere styles.less importieren wir die less-elements und wenden zum testen einfach mal Gradient auf den Body-Tag an:
    @import "elements.less";
    body {
       .gradient(#F00, #F00, #FFF);
    }
    

    .gradient() ist an dieser Stelle ein Mixin, welches von den less-elements bereitgestellt wird. Das .gradient() Mixin ist mit einer Funktion vergleichbar, welche drei Parameter erwartet. Als Rückgabe fügt diese bei der Compilierung des LESS alle erforderlichen CSS-Statements für die jeweiligen Browser in das CSS ein.
    Das Ergebnis sieht wie folgt aus:

    body {
      background:#ff0000;
      background:-webkit-gradient(linear,left bottom,left top,color-stop(0,#ff0000),color-stop(1,#ffffff));
      background:-ms-linear-gradient(bottom,#ff0000,#ffffff);
      background:-moz-linear-gradient(center bottom,#ff0000 0%,#ffffff 100%);
    }
    
  4. Nun müssen wir nur noch den View-Helper der cs_less-Extension verwenden, um unser LESS einzubinden. An diesem Punkt gehen ich einfach mal davon aus, das eh schon Fluid als Template-Engine verwendet wird 😉
    Also öffnen wir uns die Layout-Datei unseres Fluid-Templates. Meine liegt bspw. unter /fileadmin/templates/layouts/main.html. Wir öffnen diese und fügen den folgenden Code hinzu:

    {namespace less=Tx_CsLess_ViewHelpers}
    <less:style href="fileadmin/templates/css/styles.less" />

    In der ersten Zeile definieren wir den Namespace, in dem unser View-Helper zu finden ist. Danach wird dieser einfach nur noch verwendet. Das Attribute href bekommt den Pfad zu unserer Less-Datei, alles andere passiert automatisch. Wenn man nun alle seine Styles über die LESS-Datei definiert, ist keine weitere CSS-Datei notwendig. Natürlich kann man auch normales CSS in der LESS-Datei verwenden, aber das kann man alles auf der LESS-Dokumentation nachlesen. 😉

Codeschnipsel: Cross-Browser CSS3 Box-Shadow

Wie man einen Cross-Browser CSS3 Box-Shadow erstellt.
Benutze -moz für Mozilla, -webkit für Chrome und Safari und -o für Opera:

.box-shadow {
  -moz-box-shadow: 10px 10px 10px #000; /* Firefox */
  -webkit-box-shadow: 10px 10px 10px #000; /* Safari, Chrome */
  -o-box-shadow: 10px 10px 10px #000; /* Opera */
  box-shadow: 10px 10px 10px #000; /* CSS3 */
}

Das Dojo-Toolkit mit TypoScript in Typo3 integrieren

Wenn Du das Dojo Toolkit in Typo3 benötigen, brauchen Sie nur die folgenden paar Zeilen TypoScript:

page.includeJS {

  # Dojo Configuraton
  file1 = fileadmin/templates/javascript/djConfig.js
 
  # Dojo-Libraries
  file3 = http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js
  file3.external = 1
  file3.type = text/javascript
}

 
In diesem Fall habe ich die Dojo-Konfiguration in einer separaten JavaScript-Datei:

var djConfig = {
  parseOnLoad: true,
  locale: 'de'
};

 
Aber Achtung, wie Du sicher weißt muss die Konfiguration vor der Dojo-Bibliothek integriert werden. Daher hat die ‚file‘-Variable geringere Nummer .. 😉

Im nächsten Schritt müssen wir das erforderliche CSS integrieren:

page.includeCSS {
  file2 = http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/nihilo/nihilo.css
  file2.external = 1
  file2.media = all
}

 
Achtung: Das CSS muss mit external=1 und media=all eingebunden werden!

Abschließend müssen wir die Dojo-Theme class ’nihilo‘ in den Body-Tag schreiben. Dies kann mit dem nächsten TypoScript vorgenommen werden:

page.bodyTagCObject = HTML
page.bodyTagCObject.value = <body class="nihilo">

 
Und das war’s .. Nun sollten Sie in der Lage sein Dojo in Ihrer Typo3 Website zu nutzen. 🙂

Der laufende Mann von Andrew Hoyer – Benutzt nur CSS3 & HTML5

Das ist heiß! 🙂

Der laufende Mann (Andrew Hoyer) auf dieser Seite: http://andrew-hoyer.com/experiments/walking/ , ist nur mit CSS3-Animationen und einfachem HTML umgesetzt. Du kannst hier mehr darüber lesen wie es umgesetzt wurde. Teste dieses Experiment auch auf einem iPhone, iPod oder iPad (oder Android-Gerät). 😉

Freie Webfonts mit Hilfe von Google Web Fonts einbinden

Die Verbreitung von Web-Fonts findet nach und nach immer mehr Verwendung auf vielen Websites. Lange haben viele Designer und Webentwickler auf Grund von mangelnder Browser-Unterstützung und Problemen mit den Urheberrechten der Schriftarten auf diese verzichtet, und stattdessen bspw. Headlines als Bild in Ihre Websites integriert.

Wichtige Punkte beim Verwenden von Web-Fonts sind somit, das es freie Fonts sein müssen (bspw. der Open Font License unterliegen) und nach Möglichkeit ein Format gewählt wird, das viele oder sogar alle Browser verstehen.

Wir wollen nun mit Hilfe von Google Web Fonts eine freie Schriftart in einem Website einbinden.
Als erstes öffnen wir die Google Web Fonts Website und suchen uns eine beliebige Schriftart aus. Haben wir uns für eine Schriftart entschieden, klicken wir unten rechts auf ‚Use‘.

Hier gehen wir einfach den Schritten nach, die uns Google Web Fonts vorgibt:
1. Die Stile auswählen die wir verwenden wollen
2. Den Zeichensatz auswählen der verwendet werden soll
3. Den vorgegebenen Code in den Header der Website einfügen. Alternative kann man sich hier auch die Fonts oben links herunterladen und auf dem eigenen Webspace ablegen.

<link href='http://fonts.googleapis.com/css?family=Marvel:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

 
4. Als letztes muss die Schriftart nur noch in den erforderlichen Stellen im CSS eingebunden werden.

.webFont {
  font-family: 'Marvel',Arial,Helvetica,sans-serif;
}

 

Achtung: Mit zu vielen Schriftarten kann man sein Webseite verlangsamen. Wähle daher besser nur die Schriftarten, die auch tatsächlich der auf Webseite benötigen werden. Achte also auf den Page-Load Tachometer 😉
 
Leider wird das TTF-Format vom Internet-Explorer erst ab Version 9 unterstützt. Ältere Versionen des Internet-Explorers verstehen nur sein eigenes Format Embedded OpenType, kurz EOT. Es gibt jedoch einen neuen Standard der dieses Problem langfristig lösen soll. Das Web Open Font Format, kurz WOFF. Bisher wird es jedoch nur von den aktuellsten Browser-Versionen unterstützt. Somit muss man, damit man sichergehen kann das jeder Besucher auch die Web-Font zu sehen bekommt, alle drei Format in seine Seite einbinden.
 

  IE Firefox Chrome Safari Opera
TTF 9 3.5 4 3.1 10
EOT 4
WOFF 9 3.6 5 5.1 11.1

 
Ein Online-Tool mit dem man TTF zu Web-Fonts (EOT, OTF, SVG, WOFF) konvertieren kann gibt es unter www.font2web.com
Nach dem man sich nun seine Web-Font in alle drei Formate konvertiert hat, geht es an die Einbindung ins System. Dies löst man mit dem folgenden CSS:

@font-face {
  font-family: 'Marvel';
  src: url('fonts/Marvel.eot#iefix') format('embedded-opentype'),
       url('fonts/Marvel.woff') format('woff'),
       url('fonts/Marvel.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
}

Include CSS files by using page.includeCSS under TypoScript

TIPP: Um noch leichter mit CSS unter Verwendung von LESS TYPO3 Fluid-Templates erstellen zu können empfehle ich die Verwendung des Fluid-Template-Manager (kurz FTM).

CSS-Dateien über TYPOScript einzubinden ist sehr einfach. Verwende dazu einfach das page.includeCSS. Hier ein kleines Beispiel:

page.includeCSS { 
  file1 = fileadmin/templates/css/style.css 
  file1.title = Default CSS
  file1.media = screen
  
  file2 = fileadmin/templates/css/print.css 
  file2.title = Print CSS
  file2.media = print
}

Insert Google Analytics JavaScript direct within TypoScript

TIPP: Um Google-Analytics noch leichter in jeden TYPO3 Fluid-Template nutzen zu können empfehle ich die Verwendung des Fluid-Template-Manager (kurz FTM).

Um CSS oder JavaScript in TYPOScript zu integrieren, Zum Beispiel das JavaScript für einen Google Analytics Tracking-Code, kann man den folgenden Code verwenden:

page {
  headerData {
    1 = TEXT
    1.value (
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-Y']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
}) ();

</script>
    )
  }
}