Workflow CSS mit Compass (Windows 10)

  1. Googel: „ruby windows installer“
  2. rubyinstaller. downloads latest stable Version x64
  3. Git installieren um im Windows Explorer Bash/Command auszuführen
  4. rechts-Klick „Git bash here“
  5. Ruby updaten mit „gem update –system“
  6. „gem install compass“
  7. compass install Anleitung um Projekt anzulegen
  8. config.rb Rubydatei anlegen und im Root-Ordner speichern (wo compass ausgeführt werden soll)
  9. Beispiel um mehrere Dateien mit Unterordnern zu verarbeiten Stackoverflow: Compass with multiple input/output folders
    1. require 'compass/import-once/activate'
      # Require any additional compass plugins here.
      
      # Set this to the root of your project when deployed:
      # http_path = "/"
      # css_dir = "css"
      # sass_dir = "sass/**/*"
      # images_dir = "img"
      # javascripts_dir = "js"
      cid = ARGV[0] || "default"
      cid = cid.sub(/\.scss$/,'').sub(/^.*\//,'')
      puts "making with cid="+cid
      http_path ="/fcss/" + cid + "/"
      css_dir = "public/fcss/"+cid
      sass_dir = "sass"
      images_dir = "sass/img"
      generated_images_dir="public/fcss/"+cid+"/img"
      http_images_path="/fcss/"+cid+"/img/"
      output_style = :expanded #: :compressed
      
      # You can select your preferred output style here (can be overridden via the command line):
      # output_style = :expanded or :nested or :compact or :compressed
      
      # To enable relative paths to assets via compass helper functions. Uncomment:
      # relative_assets = true
      
      # To disable debugging comments that display the original location of your selectors. Uncomment:
      # line_comments = false
      # If you prefer the indented syntax, you might want to regenerate this
      # project again passing --syntax sass, or you can uncomment this:
      # preferred_syntax = :sass
      # and then run:
      # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
      

Chrome Console JavaScript ausführen und HTML Elemente beschriften

Chrome-Browser -> Einstellungsmenu -> Lesezeichen -> Lesezeichen-Manager -> Neues Lesezeichen anlegen -> Name des Lesezeichens angeben -> Code einfügen (hier würde man normalerweise eine URL eintragen), wichtig, der Inhalt des Lesezeichens muss mit javascript beginnen: javascript:


javascript:
divbox = $('div.class');
$( divbox ).each(function( index ) {
	classname =  $( this ).attr('class');
	divheight = $( this ).height();
	divwidth = $(this).width();
	vh = 0.0925925925925926*divheight;
	vw = 0.0520833333333333*divwidth;
	$(this).append(''
	+ classname
	+ ''
	+ divwidth + ' x ' + divheight + ' -- '
	+ ''
	+ vw + ' x ' + vh
	+  '');
  console.log( index + ": " + $( this ).attr('class') );
});

Website im Browser editierbar machen

zum Beispiel in den Google Developer Tools (durch drücken der Taste F12 bei geöffnetem Browser) in der Console folgendes Script eintippen und mit ENTER ausführen.

Chrome Console Script Edit Content
Chrome Console Script Edit Content

javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

oder dieses Script als Lesezeichen (z.B. im Chrome Lesezeichen Manager anlegen) speichern und anklicken, nachdem die zu editierende Seite geöffnet wurde.

Content Edit Lesezeichen
Content Edit Lesezeichen

live.js – entwickeln ohne „F5“-Refresh der Seite

livejs.com

Say goodbye to Alt-Tab. Live.js makes sure you’re always looking at the latest version of the page you’re working on, whether you’re writing HTML, CSS or Javascript.

will monitor the current page including local CSS and Javascript by sending consecutive HEAD requests to the server.

Quelle: http://livejs.com/ von Martin Kool

Brackets – quelloffener Code-Editor ür Web- und Frontend-Entwickler

brackets.io

Versprechen der Entwickler:

Ein moderner, quelloffener Code-Editor, der Webdesign versteht.

Mit tollen visuellen Tools und Unterstützung für Präprozessoren ist Brackets ein moderner Editor, der es dir leicht macht, im Browser zu designen. Er wurde von Vornherein für Web- und Frontend-Entwickler entwickelt.

Brackets ist ein einfacher, aber dennoch leistungsfähiger Editor. Er blendet dir hilfreiche Tools immer dann ein, wenn sie gerade passen, ohne dich jedoch von deiner kreativen Arbeit abzulenken. Du wirst es lieben, Code mit Brackets zu schreiben.

[..]Brackets ist quelloffen und wird von einer aktiven und leidenschaftlichen Community unterstützt.[..]

Quelle: http://brackets.io/

FAZIT:

Das Photoshop Plugin ist nützlich, so kann man direkt Farben, Abmaße, Schriften etc. aus der Photoshop-Datei ziehen was die Zusammenarbeit mit dem Designer sehr erleichert.
Der Editor scheint mir nur für kleine Projekte nützlich zu sein, muss man zwischen vielen Dateien hin und her wechseln wird es umständlich.
Die Einrichtung des Editors erfordert zunächst sehr viel Zeit und Recherche, da viele Standardfunktionen und fehlen und mühsam nachinstalliert werden müssen.
Für mich ist er somit leider nichts, vielleicht bin ich inzwischen auch vom Premium Editor „PHPStorm“ verwöhnt.

Logo oder Grafik scharf in allen Auflösungen und Zoom-Stufen darstellen

Wenn Sie eine Grafik (Firmenlogo, Icon oder Symbol etc.) bereits als Vektor-Grafik (aus Adobe Illustrator/InDesign o.a. Vektor-basierte Software) vorliegen haben, dann können sie die Möglichkeit in Erwägung ziehen diese Grafik als SVG in ihre Seite einzubinden, mehr über diese Technik erfahren Sie hier:

W3 Schools SVG Tutorial

SVG graphics do NOT lose any quality if they are zoomed or resized

Die Browser-Unterstützung (caniuse.com) ist mittlerweile sehr gut. Beim IE gibt es Schwierigkeiten bei der Skalierung („IE9-11 desktop & mobile don’t properly scale SVG files. Adding height, width, viewBox, and CSS rules seem to be the best workaround.“ (caniuse.com – Tipp).

Nützlicher weiterführender, ausführlicher Artikel: Wie Sie Ihre Website für Retina optimieren: Scharfe Bilder und trotzdem schnell (von digitalmobil.com)