Einstieg in Sass – SCSS zu CSS kompilieren

sass-watch

Die Umwandlung von SASS/SCSS-Dateien in CSS-Dateien nennt man Kompilierung (engl: compiling). Mit einigen simplen Befehlen in der Kommandozeile, oder mit Hilfe von Desktop-Apps könnt ihr festlegen, welche Dateien von Sass überwacht werden sollen. Wenn anschließend Änderungen am SCSS-Stylesheet vorgenommen werden, kompiliert Sass die Dateien im Hintergrund automatisch zu CSS. Ich beschreibe in diesem Beitrag wie die Kompilierung über die Kommandozeile funktioniert.

Beitrag zu Ende lesen

Sass über die Kommandozeile installieren

sass-terminal

Viele Web Designer schrecken davor zurück Sass einzusetzen, da sie Angst vor der Installation haben. Zunächst solltet ihr wissen, dass es zwei verschiedene Möglichkeiten der Installation gibt. Ihr könnt Sass über die Kommandozeile installieren, oder mit Hilfe einer Desktop-Anwendung. Die Einrichtung über eine Desktop-Anwendung ist natürlich komfortabler, aber auch die Installation über die Kommandozeile ist sehr unkompliziert und schnell erledigt. Ihr solltet diesen Weg zumindest in der Theorie zu verstehen. Die verschiedenen Funktionen der Desktop-Anwendungen werden dadurch klarer und ihr könnt Sass auch mal eben auf einem fremden System einrichten.

Beitrag zu Ende lesen

CSS Regions

css-regions

Es ist durchaus eine anspruchsvolle Aufgabe eine Website inhaltlich interessant, optisch ansprechend und responsive herzustellen. Komplexe und flexible Magazin-Layouts mit Infografiken, verschiedenen Text-Boxen, Marginalien usw. sind oft nur mit erheblichem Aufwand zu realisieren. Das Problem: Wir haben keine Möglichkeit zusammenhängende Inhalte nacheinander durch mehrere divs oder article-Elemente fließen zu lassen. CSS Regions bieten eine Lösung.

Beitrag zu Ende lesen

Flexible CSS-Hintergründe mit „background-size“ gestalten – Responsive Web Design

background-size-responsive-design

Die grafischen Elemente einer Website müssen flexibel gestaltet werden, um den Anforderungen im Responsive Webdesign zu entsprechen. Für die Gestaltung des Layouts nehmen Hintergrundgrafiken daher eine besondere Rolle ein. In diesem Video zeige ich euch welche Möglichkeiten Ihr habt CSS-Hintergründe zu skalieren oder zu transformieren und wie in diesem Zusammenhang die CSS-Eigenschaft background-size genutzt werden kann.

Beitrag zu Ende lesen

Responsive Webdesign mit Adobe Edge Reflow CC + Tutorial

adobe-edge-reflow

Responsive Webdesign stellt Designer vor eine Herausforderung: es müssen flexible Layouts auf Basis von Prozentwerten gestaltet werden, obwohl innerhalb der Grafikprogramme Pixelwerte verwendet werden. Designer müssen daher während der gesamten Gestaltungsphase im Hinterkopf haben, dass alle Spalten des Designs später in der Breite variabel sind. Der klassische Workflow stößt hier an seine Grenzen, da es wenig Sinn macht, zunächst unzählige statische Layouts zu entwerfen und diese anschließend in eine flexible Website umzuwandeln. Aus diesem Grund wird direkt zu Beginn des Projektes ein sog. interaktiver Prototyp erstellt, der die gesamte Flexibilität abbilden kann. Anschließend wird die Gestaltung der Website und die technische Umsetzung mit HTML, CSS und JavaScript parallel vorangetrieben. Edge Reflow CC bildet den Workflow im Responsive Webdesign ab und arbeitet eng mit Photoshop CC zusammen.

Beitrag zu Ende lesen

Starre Layouts in flüssige Layouts umwandeln – Responsive Webdesign Basics

fixed-fluid-website

Ein wichtiger Bestandteil einer responsive Website ist das flüssige Gestaltungsraster auf Basis von Prozent- oder em-Werten. Doch wie wandelt man ein auf Pixelwerten basierendes, evtl. bereits programmiertes Layout in ein flüssiges Raster um? Anhand eines leicht verständlichen Beispiel-Projekts möchte ich euch die grundlegende Vorgehensweise erklären.

Beitrag zu Ende lesen