Posted on by Johannes Heinen

[Symfony 2][Assetic] Sass, CompassFilter + Foundation Responsive Front-end Framework

Did you ever wonder how to enable 3rd party plugins (or so called “frameworks“) within the great compass toolset managed by assetic in your edgy symfony 2.1 project?

(If there is more extensive documentation available concerning assetic + CompassFilter, please stop reading on and let me know!)

If you take a look at the filter class itself (it is CompassFilter in the generic Assetic\Filter namespace), you should recognise several option values that you can use in your application wide config.yml file.

But first you have to install the framework plugin following these instructions.

Continue reading “[Symfony 2][Assetic] Sass, CompassFilter + Foundation Responsive Front-end Framework”

Posted on by Johannes Heinen

[Symfony 2] AsseticBundle, Less CSS & YUI Compressor unter OSX installieren

Das AsseticBundle ist ein Wrapper um Assetic, ein geniales Tool, um statische Assets für Webprojekte zu verwalten. AsseticBundle ist extrem einfach zu verwenden, einfach die entsprechende Filter-Chain via yaml konfigurieren, um mehr muss man sich nicht kümmern. Natürlich allerdings müssen die zugrundeliegenden Abhängigkeiten im Vorfeld installiert sein. In unserem Falle benötigen wir den Yui-Compressor als jar-File und Less CSS. Less ist ein node.js Modul, was bedingt, dass wir zuvor node.js installieren müssen.
Continue reading “[Symfony 2] AsseticBundle, Less CSS & YUI Compressor unter OSX installieren”

Posted on by Johannes Heinen

[Jquery]Namespaces via CSS-Selector adressieren

Vielleicht braucht es mal jemand, jedenfalls lassen sich “genamespacete” Tags in einer DOM (XML)document Instanz recht einfach mittels \: als Separator adressieren. Ein Beispiel: Ich möchte ein Dublin-Core Metadatum aus einem beliebigen Feed lesen:

(function($) {
$('item').each(function() { $(arguments[1]).find('dc\:creator').[...]() } );
})(jQuery);

Dies entspricht wohl rein syntaktisch nicht ganz dem entsprechendem CSS3-Proposal (einzusehen unter http://www.w3.org/TR/css3-selectors/#typenmsp). Ich habe beide Möglichkeiten interessehalber auch einmal in einem aktuellen FF3.6 und Chromium getestet:

<style type="text/css">
/*<![CDATA[*/
@namespace hanswurst url(https://www.meins.int)
hanswurst|kaese
{
color: red;
}
/*]]>*/
</style>
<hanswurst:kaese>
Hanswurst liebt käse
</hanswurst:kaese>

Ergebnis: Naja, klappt nicht. Eventuell hat jemand eine Idee oder kann mich korrigieren?

Posted on by Johannes Heinen

Kleines Addon, große Wirkung.

Check das aus. Dieses kleine, aber feine Addon erlaubt es, alle Stylesheets via Kontextmenu-Auswahl oder F9-Taste zu aktualisieren. Der Clou dabei: Das ganze geschieht on-the-fly, ohne dass ein Page-Reload nötig wäre. Jeder leidgeplagte RIA-Entwickler wird angesichts der offensichtlichen Macht dieses Addons in Ehrfurcht erstarren. Denn dadurch lässt sich der Zeitaufwand fürs CSS-Styling um mindestens 90% verringern, und dann macht diese Tätigkeit sogar wieder sowas wie Spaß.

Continue reading “Kleines Addon, große Wirkung.”