Skip to content

Bootstrap mit nanoc

Unter anderem für den Relaunch meiner Homepage habe ich mich damit beschäftigt, wie ich das CSS-Framework Bootstrap am besten mit nanoc, meinem bevorzugten static site generator, zur Anwendung bringen kann.

Bootstrap bringt einen ganzen Haufen CSS, etwas Javascript und Glyphicon Halflings als Webfont mit. Webfont und Javascript können unverändert bleiben, das CSS hingegen sollte aus den LESS-Dateien kompiliert werden, um so mit wenigen Anpassungen in variables.less das Aussehen der Website zu personalisieren.

Meine nanoc-Quelldateien habe ich dementsprechend folgendermaßen strukturiert:

content/
 :
 :--bootstrap/
 :   :
 :   :--js/
 :   :
 :   :--fonts/
 :   :
 :   :--less/
 :    
 :--res/
     :
     :--css/
     :
     :--fonts/
     :
     :--js/

In content/bootstrap/js/ landet das Javascript aus Bootstraps dist/js/, in content/bootstrap/fonts/ die Schriften aus dist/fonts/, und die Dateien aus less/ kommen nach content/bootstrap/less/. Dabei müssen jedenfalls in meiner alten Version 3 von nanoc noch einige Dateien umbenannt werden, weil sich nur in der Endung unterscheiende Dateien unzulässig sind: aus bootstrap.min.js wird so bootstrap-min.js, bei den Schriftdateien wird die Endung auch in den Dateinamen übernomme, so dass aus glyphicons-halflings-regular.ttf dann glyphicons-halflings-regular-ttf.ttf wird.

Der Inhalt von content/bootstrap/js/ landet dann beim Kompilieren in content/res/js/, derjenige von content/bootstrap/fonts/ unter Entfernung der “doppelten” Endungen in content/res/fonts/, und aus content/bootstrap/less/bootstrap.less wird (unter Einbindung aller anderen LESS-Dateien) content/res/css/bootstrap.css kompiliert.

Fertig.

In den Rules sieht das dann ungefähr so aus:

#!/usr/bin/env ruby

#########################
### compilation rules ###
#########################

# compile Bootstrap CSS (only) from bootstrap.less
compile '/bootstrap/less/bootstrap' do
  filter :less
end
compile '/bootstrap/*' do
  nil
end

# main rule
compile '*' do
  [...]
end

#####################
### routing rules ###
#####################

# copy font files and move last -XXX to extension
route '/res/fonts/*/' do
  # /bootstrap/fonts/foo-eot/ -> /res/fonts/foo.eot
  item.identifier.sub('/bootstrap/less/','/res/css/').sub(/-[^-]+\/$/, '') + '.' + item[:extension]
end

# copy bootstrap files
route '/bootstrap/less/bootstrap' do
  item.identifier.sub('/bootstrap/less/','/res/css/').chop + '.css'
end
route '/bootstrap/less/*' do
  nil
end
route '/bootstrap/*/' do
  item.identifier.sub('/bootstrap/','/res/').chop + '.' + item[:extension]
end

# main rule
route '*' do
  [...]
end

Es geht sicherlich einfacher und weniger komplex, aber so geht es jedenfalls auch. :-)

Wenn man in seinem Git-Repository auch direkt einen bootstrap-Branch anlegt, kann man Bootstrap-Updates dort einspielen und in der Regel durch ein einfaches git checkout master; git merge bootstrap für die eigenen Seiten übernehmen.

Trackbacks

Keine Trackbacks

Kommentare

Ansicht der Kommentare: Linear | Verschachtelt

Noch keine Kommentare

Kommentar schreiben

HTML-Tags werden in ihre Entities umgewandelt.
Markdown-Formatierung erlaubt
Standard-Text Smilies wie :-) und ;-) werden zu Bildern konvertiert.
BBCode-Formatierung erlaubt
Gravatar, Favatar, Pavatar, Twitter, Identica, Identicon/Ycon Autoren-Bilder werden unterstützt.
Formular-Optionen
tweetbackcheck