webksde

Einstieg: Drupal & SASS + Compass (mit Prepro und Sassy)

Verfasst am 25. September 2013 um 07:25.

Der Einstieg in das Thema ist nicht ganz so leicht gemacht, daher hier eine kleine Zusammenfassung.

Die Grundsätzlichen Möglichkeiten mit dem CSS Preprocessor zu arbeiten: Lokale Ruby Installation aufsetzen (http://thesassway.com/beginner/getting-started-with-sass-and-compass) und die daraus generierten .css Files auf den Webserver laden (für die Entwicklung in meinen Augen völliger Käse, außer man bindet den entsprechenden FTP Folder als Netzlaufwerk ein. Die Möglichkeit der direkten „Portierung“ zu CSS Files bietet SASS). Vorteil dieser Variante ist schlicht und ergreifend, dass man die tatsächliche SASS Lib nutzt und nicht die PHP Portierung.

Wir wollten uns die zusätzliche Pflege lokaler Software und den Aufwand der Einrichtung allerdings schenken und setzen so auf die komplette online Variante mit den Modulen https://drupal.org/project/sassy, https://drupal.org/project/prepro und der Library https://github.com/richthegeek/phpsass.

Update: Inzwischen sind wir auf eine lokale Lösung mit Prepros umgestiegen, den Sync auf den Server erledigt unser Standard Tool WinSCP mit Hilfe der keepuptodate-Funktion, was inzwischen göttlich funktioniert. Die Entscheidung zum Umstieg erfolgte aufgrund etlicher Fehler in der PHP Portierung von SASS. Im kommerziellen Umfeld ist das nur mit Einschränkungen zu genießen.

Die Einrichtung…

… sollte jedem Drupalisten leicht von der Hand gehen: Module aktivieren, Lib in den vom Modul geforderten Ordner packen, aktivieren (nicht das Sassy Compass integration – Modul übersehen!), prepro konfigurieren. Dann die .SCSS / .Sass Files im .info file des Themes eintragen und loslegen.

Ein paar „Fakten“:

SCSS ist für Einsteiger einfacher zu erlernen
SASS ist etwas kompakter zu schreiben
Die PHPSass Portierung des eigentlichen Ruby Projekts Sass ist sicher nicht perfekt, aber läuft im großen und ganzen rund genug um damit arbeiten zu können.
Compass ist in der PHPSass portierung bereits enthalten (die schönste Erklärung zu Compass ist sicher der Vergleich zu Javascript und jQuery – Compass ist ähnlich hilfreich, stellt vordefinierte @mixins zur Verfügung. .

Schöne Dokumente zum Thema:

http://de.slideshare.net/nathansmith/drupal-compass
http://de.slideshare.net/mediacurrent/elegant-css-design-in-drupal-less-vs-sass
https://drupal.org/project/sassy & https://drupal.org/files/Making%20Drupal%20Sassy.pdf

Hilfreiche Tools

https://addons.mozilla.org/de/firefox/addon/firesass-for-firebug/ (Zeigt in Firebug die Zeile im .SCSS / .Sass Quellfile an, sofern @debug aktiviert ist (Prepro Einstellungen!)
http://sass-lang.com/try.html – Klappt etwas nicht wie erwartet, wunderbar zum testen ob EVTL. PHPSass schuld ist 😉

Verfügbare Editoren

Ich nutze Netbeans, welches in der aktuellen Dev Version (NetBeans IDE Dev (Build 201309191137)) SASS / SCSS ohne weitere Module unterstützt (die Alternative ist das folgende Plugin: http://plugins.netbeans.org/plugin/34929 – welches bei mir allerdings nur unzureichend funktionierte)
Empfohlen wird weiterhin http://www.sublimetext.com/

Du brauchst Unterstützung bei deinem Drupal Webdesign-Projekt? Sprich uns an.

Sidebar auf gleiche Höhe wie den Content bringen (jQuery)

Verfasst am 14. August 2013 um 08:43.

Das Problem besteht schon, solange es Webdesign gibt. Per CSS gibt es nur die bekannten Möglichkeiten per position:absolute; + top:0; + bottom:0; oder aber per background-image. Diese Möglichkeiten sind bei Flexiblen (responsive) Seiten allerdings oft unbrauchbar. Zudem hat die Absolute-Methode das Problem, dass hier die Sidebar keinesfalls länger sein darf als der Content, sonst überlappt diese in den Footer, oder sogar aus der Seite heraus.

Per jQuery ist das ganze natürlich kein wirkliches Problem:

/* Full Height Sidebar */
function fullHeightSidebar() {
  (function($) {

    jQuery(window).load(function (){ // execute when document.ready scripts are finished
      var heightContent = $('#content-column').height();
      var heightSidebar = $('.region-sidebar-second').height();

      if( heightContent > heightSidebar){
        $('.region-sidebar-second').css('height',heightContent);
      }
    });

  })(jQuery);
}

Hier ist das ganze schon in ein Resize Script gekapselt, dieses müsst Ihr bei euch ggf. ergänzen, damit es dann auch live, on resize, etc. funktioniert.

Facebook Cover Foto Qualität

Verfasst am 13. August 2013 um 15:38.

Zu diesem Thema wurde schon schwadroniert bis die Schwarte kracht, ich spare mir hier jetzt lange Ausführungen und verrate einfach die Lösung 😉

Das Coverphoto muss exakt die Maße 851×315 aufweisen (Stand 18.08.2013 – sobald Facebook skalieren muss, ist das Ergebnis MATSCH.)
In Photoshop unter Für Web- und Geräte Speichern als PNG-24 speichern.
Fertig. Das Ergebnis ist hier perfekt, kein Qualitätsverlust feststellbar.

Drupal: Custom Panel Layout Plugin (AT-Theme)

Verfasst am 31. Juli 2013 um 11:52.

Eine eigentlich einfache Sache, bei der aber kleine Unachtsamkeiten dazu führen können dass das Layout Plugin garnicht, oder nur unvollständig funktioniert.

Hier die Vorgehensweise:

Eine passende Basis für das zu erstellende Layout auswählen
Diese aus dem AT-Core Theme (layouts/panels) in das eigene Theme übernehmen (gleiche Unterordner)
Namen des Ordners und der Dateien entsprechend anpassen (z. B. two_col_brick zu two_col_custom)
Alle Dateien öffnen und dort per Suchen & Ersetzen ebenfalls den alten Namen durch den neuen ersetzen
Den Funktionsnamen auf das eigene Theme anpassen („adaptivetheme“ gegen den eigenen Themenamen ersetzen“)
Nun den *.tpl.php File anpassen wie er benötigt wird (es können natürlich neue Inhaltsbereiche / Variablen ergänzt werden ACHTUNG! Die Funktionsnamen dürfen eine Länge von 32 Zeichen nicht überschreiten! )
Als nächstes den *.inc File anpassen und die ggf. hinzugefügten Variablen aus dem letzten Schritt ergänzen
Optional: Das Thumbnail zur Voransicht des Layouts anpassen und austauschen
Den theme.info File bearbeiten. Einfach für jeden Gerätetyp unter „Responsive Panels“ entsprechend das eigene Layout anfügen
Weiterhin muss im theme.info File folgendes ergänzt werden: „plugins[panels][layouts] = layouts/panels“ (der Pfad kann im Grunde natürlich frei gewählt werden)
Cache leeren, Panel Layout auswählen, fertig!

Für NICHT AT-Panel-Layouts läuft das ganze im Grunde identisch, die Quelle ist nur eine Andere –> „/sites/all/modules/contrib/panels/plugins/layouts“

Neu Laden bei Drehung eines Mobilgeräts

Verfasst am 8. Juli 2013 um 15:42.

Kleines JavaScript Codeschnipsel zum neu laden bei Drehung des Mobilgeräts.

    // Reload on Orientation Change!
    $(window).bind("orientationchange", function(e) {
      location.reload();
    });

HTML 5 Video Export mit ffmpeg + GUI

Verfasst am 31. Mai 2013 um 14:10.

Da der Miro Video Converter bei mir kein funktionierendes .webm – Video für Firefox ausspuckte, habe ich mich mal neu umgesehen. Dabei habe ich zwei Dinge festgestellt: .ogv ist kein MUSS mehr, .webm und .mp4 reichen aus (+ FLV Fallback … wer´s braucht). Zweite Feststellung: ffmpeg [1] macht einen tollen Job und ist dank einem kleinen Zusatztool namens „ffmpeg-GUI“ [2] (vielen Dank an Thilo Brai) auch ohne Kommandozeile wunderbar zu bedienen.

ffmpegGUI.exe ausführen
ffmpeg.exe (im „bin“ folder) auswählen
webm als Format wählen
Per Drag and Drop das Quellvideo in das weiße Feld ziehen
Batch Datei exportieren und ausführen
Gleiches für mp4 wiederholen und das wars auch schon.

Weniger schick als Miro, dafür mehr Möglichkeiten und vor allem funktioniert es.

Linktipp: Photoshop Corner Editor (Script)

Verfasst am 13. Februar 2013 um 10:27.

Update 2019: Just try Affinity Designer instead, it has many cool editable shapes, including editable corners / border-radius.

Wer oft mit Photoshop arbeitet, und auch mal abgerundete Ecken nutzt wird das Problem kennen. Will man den Radius der Ecken nachträglich ändern, heißt es neu Zeichnen. Das kleine Script von David Jensen schafft Abhilfe. Zusätzlich bietet das Tool die Möglichkeit, die Art der Ecken anzupassen, wie im Bild zu sehen.

Viel Spaß damit!

How to use Icon Fonts

Verfasst am 18. Januar 2013 um 12:24.

Da ich das Thema Icon Fonts bis heute beharrlich ignoriert habe, es aber doch immer attraktiver wird, habe ich mich nun doch mal dazu durchgerungen die Geschichte in einem kommenden Projekt zu testen. Die Vorteile liegen auf der Hand: die Icons sind frei skalierbar, was insbesondere für die bei uns viel erstellten responsive Themes wichtig ist, und das Aussehen lässt sich rasant schnell per CSS anpassen.

Nun geht es natürlich zuerst an ein Screendesign, wo ich gleich vor dem Problem stand diese kryptischen Binärcodes, welche mir zu den Icons angezeigt werden einzutippen. Meine kläglichen Versuche lasse ich an dieser Stelle mal hinten runter fallen.

Der korrekte Weg ist, einfach Buchstaben, Zahlen oder Sonderzeichen manuell zuzuweisen. Ich generiere die Iconfont auf Fontellio.com (1), eine Seite die man nur über alle Maßen loben kann, da bleiben keine Wünsche offen.

Icon Font zusammenstellen (nötige Icons markieren)
Font oben einen Namen zuweisen
Auf den Tab „Edit Codes“ wechseln
Im oberen Feld die gewünschten Buchstaben, Zahlen oder Sonderzeichen eintragen
Font runterladen & installieren
Nun kann die Font schlicht und einfach ausgewählt und die Icons entsprechend per Text-Tool eingefügt werden

Nutzung in der Website

Als Beispiel soll uns das Suchfeld unserer Drupal Fachbereichsseite DROWL.de dienen, welche wir gerade neu gestalten. Hier haben wir auch gleich einen Sonderfall, da Input Elemente keine Pseudo Elemente gestatten (:before & :after), diese sind hier auf das umgebene Container Element anzuwenden.

Iconfont einbinden, in unserem Beispiel nutzen wir dazu einfach das Drupal Modul @font-your-face (2)
Konfiguration -> Benutzeroberfläche -> @-font-your-face-settings
Tab oberhalb „Import local fonts“ (entsprechendes Submodul muss aktiv sein!)
Unter Design -> @font-your-face einmal checken ob die Font drin ist

Nun geht es im CSS File weiter, hier einfach entsprechend (am beispiel für ein Input Field) folgendes definieren:

#YOUR-INPUT-FIELD-CONTAINER:before {
    content: "b"; /* Zugewiesener Buchstabe für das entsprechende Icon */
    display: inline-block;
    font-family: "drowl_iconfont"; /* Font-Family 1:1, wie beim @font-your-face Eintrag angegeben */
    font-size: 18px;
    left: 11px;
    position: absolute; /* Der Container braucht entsprechend position: relative! */
    top: 2px;
}

Es gibt für Drupal auch ein gesondertes Iconfonts Modul. Dieses liegt heute allerdings nur als Alpha Version vor, welche bei meinem Test Ihren Dienst nicht verrichtet hat. Aber wie man sieht, es geht auch sehr gut ohne. Viel Spaß beim Testen.

webks.de: Relaunch

Verfasst am 1. Januar 2013 um 11:10.

Ein hartes Stück Arbeit war das, aber es hat sich gelohnt. Unsere rundum erneuerte Unternehmenswebsite http://www.webks.de ist online. Wie auch schon einige unserer Kundenseiten, komplett responsive, dank CSS Media-Queries. Technisch setzen wir selbstverständlich auf eine Drupal 7 Lösung.

So selten man für die eigenen Websites inzwischen Zeit findet, folgt nun – möglichst zeitnah – ebenfalls der Relaunch unserer Drupal Themenseite DROWL.de. Selbstverständlich ebenfalls stark verschlankt und responsive.

Zum Ende natürlich noch ein frohes neues Jahr 2013, allen Lesern viel Erfolg und alles Gute im neuen Jahr!

Kleines 1140px Grid Helper Script

Verfasst am 30. Oktober 2012 um 16:33.

Nachdem ich vergeblich nach einer vernünftigen Lösung für das 1140px Grid gesucht habe, bin ich einfach selber tätig geworden. Ganz simples Script, das nur genau diesen einen Zweck erfüllt: Ein Hilfsgrid zur Ausrichtung über die Seite legen (wobei es hier – erst mal – einzig um die Desktopansicht geht!). Es nutzt exakt die Werte vom 1140px Grid, positioniert schlicht und ergreifend per jQuery 12 Div´s im Page-Container nebeneinander und fertig. Das Ganze ist natürlich per Trigger am rechten Rand ein- wie auszublenden.

Die bereits angebotenen Helper, sei es die Firefox Extension „GridFox“ oder auch diverse Bookmark- und Insitescripts, hatten alle Ihre Probleme mit diesem flexiblen Grid. Wenn sie mitunter auch noch so schön gemacht waren.

#grid-helper{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  display:none;
}
#grid-helper .grid-row{ 
  float:left;
  height:100%;
  width:4.85%;
  margin-right:3.8%;
  background-color:rgba(185,255,110,0.5);  
}
#grid-helper .grid-row.last{
  margin-right:0; 
} 

#grid-trigger{
  position:fixed;
  top:50%;
  right:0;
  margin-top:-50px;
  background:#000;
  color:#fff;
  padding:20px;
  cursor:pointer;
  opacity:0.1;
}
#grid-trigger:hover{
  opacity:1.0; 
}

function webks_customer_theme_grid_helper() {
  (function($) {

    $('#page').css('position','relative')
		$('#page').append('
');
		//Trigger
		$('body').append('Show / Hide');
		$("#grid-trigger").click(function() {
		  $('#grid-helper').toggle();
		});
		//Load Stylesheets
    $('').appendTo("head");
   
  })(jQuery);
}