Atom Package forken

Wenn man Änderungen an einem Atom Package vornehmen möchte, solle man es forken.

Die erforderlichen Schritte:

  1. Package per apm develop einbinden
  2. Package-Repository forken
  3. Repository-URL anpassen
  4. Atom starten

Im Einzelnen:

Der Atom Package Manager stellt den develop-Befehl zur Verfügung. Hierdurch wird das gewünschte Package-Repository nach ~/github/ geclont und es werden alle Abhängigkeiten installiert. Außerdem wird der Clone versymlinkt, sodass er in Atom genutzt werden kann.

$ apm develop file-types
Cloning https://github.com/execjosh/atom-file-types ✓
Installing modules ✓
/Users/kaischaper/.atom/dev/packages/file-types -> /Users/kaischaper/github/file-types

Nun sollte man das Package-Repository auf GitHub forken. Damit der eigene Fork genutzt wird, muss die Repository-URL angepasst werden:

$ cd ~/github/file-types/
$ git remote set-url origin git@github.com:kschaper/atom-file-types.git
$ git pull

Wenn Atom nun im Entwicklungsmodus gestartet wird, werden alle Packages genutzt, die per apm develop eingebunden werden.

$ atom --dev

Falls man den eigenen Fork auch in Atom’s “Normalmodus” nutzen möchte, muss man erst die original Version deinstallieren und dann einen entsprechenden Symlink anlegen, bevor man Atom startet:

$ apm uninstall file-types
$ cd /Users/kaischaper/github/file-types
$ apm link
$ atom

Man kann sich auch anzeigen lassen, welche Packages verlingt sind:

$ apm linked
/Users/kaischaper/.atom/dev/packages (1)
└── file-types -> /Users/kaischaper/github/file-types
/Users/kaischaper/.atom/packages (1)
└── file-types -> /Users/kaischaper/github/file-types

Tipp: Damit Änderungen am geforkten Package wirksam werden, muss das Fenster neu geladen werden: Entweder über Command Palette → Window: Reload oder per ctrl-alt-cmd-L.

Node.js deinstallieren

Bisher habe ich Node immer per Mac OS X Installer installiert. Zukünftig soll allerdings der Node Version Manager zum Einsatz kommen. Um Konflikte zu vermeiden, soll das alte Node deinstalliert werden.

Das Standardinstallationsverzeichnis ist /usr/local. Siehe Makefile: PREFIX ?= /usr/local. Wenn man eine Binary herunter lädt und entpackt, sieht man welche Dateien und Verzeichnisse in /usr/local landen. Löschen der Dateien:

$ cd /usr/local/ && sudo rm -rf ChangeLog LICENSE README.md \
bin/node include/node \
lib/dtrace lib/node_modules \
share/man/man1/node.1 \
share/systemtap

Zurb Foundation in Rails-Anwendung

Das Front-End-Framework Foundation von Zurb ähnelt vom Funktionsumfang sehr dem bekannteren Bootstap. Nachfolgend die nötigen Schritte, wie sich Foundation in einer Rails-Anwendung nutzen lässt.

Gem installieren

Die Einbindung erfolgt wie gewohnt per Ruby-Gem. Die neueste Versionsnummer erfährt man auf RubyGems.org oder per:

$ gem query -rn "^foundation-rails$"

*** REMOTE GEMS ***

foundation-rails (5.5.1.0)

Gemfile aktualisieren und schließlich installieren:

gem 'foundation-rails', '~> 5.5.1.0'
$ bundle install

Installation per Rake-Task

Foundation bringt einen Rake-Task mit, der die Installation automatisiert:

$ rails generate foundation:install

Hierbei werden folgende Dateien angepasst bzw. hinzugefügt:

app/assets/javascripts/application.js
app/assets/stylesheets/application.css
app/views/layouts/application.html.erb
app/assets/stylesheets/foundation_and_overrides.scss

Anschließend werden alle JavaScript-Dateien eingebunden, die Foundation mitbringt. Außerdem werden alle CSS-Dateien zusammen gefasst in einer großen CSS-Datei eingebunden. Besser wäre es, wenn ausschließlich benötigte Bestandteile eingebunden werden.

JavaScript

Eine Liste der JavaScript-Dateien, die Foundation mitbringt, findet sich im Gem:

$ cd path/to/rails-app/
$ cat $(bundle show foundation-rails)/vendor/assets/javascripts/foundation.js
//= require foundation/foundation
//= require foundation/foundation.abide
//= require foundation/foundation.accordion
//= require foundation/foundation...

Die Pfade der benötigten Komponenten kopiert man einfach in die eigene Anwendung. Außerdem muss die per Rake-Task eingefügte require-Direktive aus der app/assets/javascripts/application.js: entfernt werden.

//= require jquery
//= require jquery_ujs
//= require foundation/foundation
//= require foundation/foundation.abide
//= require foundation/foundation.accordion
//= require turbolinks

$(function(){ $(document).foundation(); });

SCSS

Eine Liste der SCSS-Dateien, die Foundation mitbringt, findet sich ebenfalls im Gem:

$ cd path/to/rails-app/
$ cat $(bundle show foundation-rails)/vendor/assets/stylesheets/foundation.scss

Bevor sich die gewünschten CSS-Dateien auswählen lassen, müssen ein paar Änderungen vorgenommen werden. Die per Rake-Task generierte foundation_and_overrides.scss wird entfernt.

$ rm app/assets/stylesheets/foundation_and_overrides.scss

An ihre Stelle treten die entsprechenden Dateien aus dem Gem:

$ mkdir app/assets/stylesheets/foundation
$ cp $(bundle show foundation-rails)/vendor/assets/stylesheets/foundation/_settings.scss \
./app/assets/stylesheets/foundation/_settings.scss
$ cp $(bundle show foundation-rails)/vendor/assets/stylesheets/foundation.scss \
./app/assets/stylesheets/foundation/_components.scss

Diese beiden Dateien müssen nun eingebunden werden:

$ vim ./app/assets/stylesheets/screen.scss
@import "foundation/_settings";
@import "foundation/_components";

In _components.scss findet sich die Liste aller Komponenten:

//@import "foundation/components/grid";
// @import "foundation/components/...
@import "foundation/components/type";
// @import "foundation/components/...

Über _settings.scss lässt sich Foundation komplett anpassen.

// ...
$base-font-size: 300%;
// ...

Zu guter Letzt müssen noch normalize.scss und screen.scss in application.scss eingebunden werden. application.css ist die Manifest-Datei von Rails’ Asset-Pipeline. Alle Dateien, die in screen.scss eingebunden werden, haben Zugriff auf die definierte SASS-Variablen und Funktionen, die Foundation mitbringt.

/*
 *= require normalize
 *= require screen
 */

Beispiel

Eine Rails-Anwendung mit den oben besprochenen Anpassungen findet sich auf GitHub unter kschaper/foundation-rails-example.