Umbraco 7 mit BootStrap 3 und SASS in Visual Studio 2013

Bootstrap SASS Integration

Öffnen Sie die Umbraco 7-Projekt in Visual Studio und starten Sie die Nuget Package Manager im Tools-Menü –> Library Package Manager –> Package Manager Console. Auf dem Package Manager Console-Bildschirm, geben Sie den Befehl für die Installation des Bootstrap-SASS Packets ein

pm> Install-Package twitter.bootstrap.sass 

Es wird die aktuelle Version des Packets installiert. Im Projektverzeichniss des Solution Explorer finden sich die neuen Bootstrap-SAAS-Dateien im Verzeichnis "sass" sowie im "scripts" Ordener

Einbetten eines SAAS Compilers in Visual Studio

Visual Studio 2013 ermöglicht die Bearbeitung von SAAS-Dateien von Hause aus. Die Kompilierung muss extern vorngenommen werden.

SassyStudio

Es existieren verschiedene Möglichkeiten SASS Dateien zu kompilieren. Im Folgenden wird Gebrauch gemach von der Extension SassyStudio Die Extension ist kostenlos über Visual Studio installierbar. Öffnen sie im Tools-Menü die Auswahl Extensions and Updates und suchens Sie dort nach dieser Extension. Nach der Installation ist ein Restart erforderlich.

Ruby

SassyStudio kompiliert SASS-Dateien unter Zurhilfenahme von Ruby. Eine Installation des Rub<-Packets ist also ebenfalls erforderlich. Den Installer für Ruby finden sie unter http://rubyinstaller.org/downloads/.

Nach der Installation von Ruby muss der Installationspfad in SassyStudio bekannt gegeben werden. Öfnnen sie im Tools-Menü den Eintrag Optionen und suchen sie nach "SassyStudio". Als oberstes Konfigurationsfeld findet sich dort der Ruby-Installationspfad. Tragen Sie hier zuvor in der Ruby-Installation festgelegten Pfad ein.

Smocketest

SASS Dateien werden nun entsprechend der Voreinstellung in den SassyStudio-Optionen bei Abspeicherung kompiliert. Öffnen Sie eine BootStrap-SCSS-Datei und nehmen Sie Änderungen vor. Nach Abspeicherung sollte im sass-Verzeichnis des Projekts eine neue (oder veränderte) BootStrap.css Datei vorhanden sein.

Undeclared Variable

Der Hinweis "Undeclared Variable" für Variablen, die in der Datei _variables.scss definiert sind, kann deaktiviert werden durch die Zeile

/// <reference path="_variables.scss" /> 

am Anfang einer scss Datei.

Einbindung in Umbraco

Umbraco findet Stylesheets im Ordner CSS der Visual Studio Projekte. Verschieben sie daher alle Ordner und dateien aus dem Ordner sass in diesen Ordner.

Nützliche Visual Studio Erweiterungen und Tools

ReSharper

Das Tool der Wahl ist der ReSharper von JetBrains. Der Resharper ergänzt die Funktionen des Visual Studios um z.B. Refactoring-Unterstützung oder Code Formatierung und vieles mehr.

http://www.jetbrains.com/resharper/

Code Maid

CodeMaid behebt Schwächen in Visual Studio hinsichtlich der Quellcodeformatierung. Stärken von Code Maid sind die Entfernung überflüssiger Leerzeilen und die Sortierung von Feldern, Properties und Methoden.

http://www.codemaid.net/

MVVM Light

Die MVVM Framework MVVM Light von Laurent Bugnion erlaubt eine einfache schnelle und produktive WPF Entwicklung.

http://www.galasoft.ch/mvvm

NuGet Package Manager

NuGet ist eine freie Open-Source Paketverwaltung für das .NET Framework. Die Erweiterung der Visual-Studio-Entwicklungsumgebung erleichtert die Installation zusätzlicher Komponenten für .NET-Projekte, die über den Lieferumfang des .NET Framework hinausgehen. Es gibt inzwischen hunderte solcher Zusatzkomponenten sowohl von Microsoft als auch von Drittanbietern beziehungsweise der Open-Source-Gemeinde.

http://docs.nuget.org/

Productivity Power Tools

Die Productivity Power Tools von Microsoft existieren in diversen Version für die einzelnen Visual Studio Versionen. Einige Features der Power Tools haben mittlerweile Einzug gehalten in die offiziellen Studio Versionen. Die aktuelle Tool-Sammlung enthält unter anderem eine erweiterte Scroll-Leiste, mit der man wichtige Artefakte sehen und zwischen ihnen navigieren kann, Importe für Visual Basic, Auto Completion, die automatisch das schließende Element einfügt, HTML Copy mit Support für das HTML Clipboard Format oder Column Guides, die eine vertikale Linie im Editor ziehen.

http://visualstudiogallery.msdn.microsoft.com/dbcb8670-889e-4a54-a226-a48a15e4cace?SRC=VSIDE

ILSpy

IlSpy ist ein Open Source .NET Assembly Browser und Decompiler. Er dekompiliert .NET DLLs zurück in Visual Basic oder C#. Die Ergebnisse kann man sich dann im eingebauten Viewer ansehen.

http://ilspy.net/

WinMerge

WinMerge ist ein Open-Source-Programm zum Unterscheiden und Zusammenführen von Dateien sowie Ordner. Das Windows-Tool stellt Unterschiede in einem visuellen Text-Format dar, das einfach zu verstehen und zu handhaben ist.

http://winmerge.org/?lang=de

Für die Nutzung innerhalb von Visual Studio müssen Anpassungen vorgenommen werden. Passen Sie unter “Tools –> Options –> Source Control –> Visual Studio Team Foundation Server” die “Configure User Tools …”, an und fügen Sie zwei neue Befehle für “Compare” und “Merge” Operationen hinzu.

Compare

Extension: .*
Operation: Compare
Command: C:\Program Files (x86)\WinMerge\WinMergeU.exe (Der Pfad zu WinMergeU.exe)
Argumente: /e /u /wl /dl %6 /dr %7 %1 %2

Merge

Extension: .*
Operation: Merge
Command: C:\Program Files (x86)\WinMerge\WinMergeU.exe
Argumente: /e /u /wl /dl %6 /dr %7 %1 %2 %4

Chocolatey

"Chocolatey NuGet is a Machine Package Manager, somewhat like apt-get, but built with Windows in mind." So stellt sich Chocolatey auf der Downloadseite vor. Chocolatey ist ein “Maschine Package Manager”, das bedeutet, dass man für seine Maschine einfach Tools runterladen und Updaten kann – direkt über die Konsole. Im Unterschied zu NuGet welches für Entwicklungsbibliotheken ausgelegt ist dient Chocolatey mehr dem Tooling.

http://chocolatey.org/

PreViewConfig

Source Code Pro

Viele Entwickler sind von dem kostenlosen Open-Source-Font „Source Code Pro“ von Adobe überzeugt. Der Font verfügt über sechs verschiedene Schriftschnitte und ist von der Schriftart „Source Sans“ abgeleitet. Es handelt sich um einen Monospace-Font; jedes Zeichen verfügt über die gleiche Breite.

http://sourceforge.net/projects/sourcecodepro.adobe/files/

GhostDoc

GhostDoc fügt automatisch Kommentare zur XML-Dokumentation hinzufügt; diese Kommentare werden entweder aus dem Code der Klassen und Schnittstellen oder aus Methoden, Eigenschaften und Parametern ausgelesen

Compare .NET Objects

Vergleicht zwei beliebige .NET beliebigen Objekte mithilfe von Reflektion und zeigt die Unterschiede zwischen den beiden Objekten an

https://comparenetobjects.codeplex.com/

Veröffentlichungen

1995

2000

2003

2004

2005

2007