#Codekit grunt how to#

To begin with, we will need the rtlcss command installed. CK_OUTPUT_PATHS: List of the compiled files’ paths.CK_INPUT_PATHS: List of the sources of the compiled file including the imported ones.CodeKit also exposes two variables which can be used within such scripts within Hooks. Hooks allow us to run scripts–AppleScript or Shell (bash) scripts–every time CodeKit compiles files in a project. Hooks have been available to use since CodeKit 2, yet many people aren’t aware this feature exists, leaving it massively underused. Note: We’re working with RTLCSS in this example, but the principle can be used for many other tools. The last option there opens up the possibility of integrating it with CodeKit through Hooks.Ībove you’ll see an example of Arabic script written from right to left with two different fonts from Google Web Fonts. It is available for Gulp, Grunt, PostCSS in the form of a plugin, and a CLI (Command Line Interface). RTLCSS makes flipping CSS for a Right-to-Left writing system, like Arabic script, a breeze.

#Codekit grunt how to#

In this quick tip I’ll show you how to use CodeKit Hooks in order to extend CodeKit and add extra tools to your workflow. Until, that is, I needed to use RTLCSS, which is not part of CodeKit by default. All of this was sufficient and served me well.

CodeKit ships with a number of tools like JSHint, Uglify, Bower, Autoprefixer, and the usual CSS-Processor compilers.

Nonetheless, some of us are quite comfortable with our current tools and a workflow that may no longer be as hip as it once was.įor example, whilst others dive into PostCSS or Gulp, I’m still enjoying CodeKit as my go to app for personal projects projects that I work on without other developers involved. The number of design and development tools we have at our disposal grows with every passing month.