Advertisement
  1. Web Design
  2. CodeKit
Webdesign

Quick Tip: How to Extend CodeKit with “Hooks”

by
Difficulty:IntermediateLength:QuickLanguages:

The number of design and development tools we have at our disposal grows with every passing month. 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.

For 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. CodeKit ships with a number of tools like JSHintUglifyBowerAutoprefixer, and the usual CSS-Processor compilers. All of this was sufficient and served me well. Until, that is, I needed to use RTLCSS, which is not part of CodeKit by default.

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.

RTLCSS

RTLCSS makes flipping CSS for a Right-to-Left writing system, like Arabic script, a breeze. It is available for Gulp, Grunt, PostCSS in the form of a plugin, and a CLI (Command Line Interface). The last option there opens up the possibility of integrating it with CodeKit through Hooks.

An example of Arabic script

Above you’ll see an example of Arabic script written from right to left with two different fonts from Google Web Fonts. Credit goes to Michael Jasper

Note: We’re working with RTLCSS in this example, but the principle can be used for many other tools.

CodeKit Hooks

Hooks have been available to use since CodeKit 2, yet many people aren’t aware this feature exists, leaving it massively underused. Hooks allow us to run scripts–AppleScript or Shell (bash) scripts–every time CodeKit compiles files in a project. CodeKit also exposes two variables which can be used within such scripts within Hooks. We’ll take a look at these later on.

  • CK_INPUT_PATHS: List of the sources of the compiled file including the imported ones.
  • CK_OUTPUT_PATHS: List of the compiled files’ paths.

Using Hooks

To begin with, we will need the rtlcss command installed. Install the command through npm globally, so it will be accessible anywhere on our system.

Not sure what’s going on here? Check out:

CodeKit Project Settings

Assuming you have the project folder added in CodeKit (if not, drag your folder into the CodeKit window to get started), go to the Project Settings and scroll down to the Hooks Tab.

CodeKit Project Settings View

Click on the plus icon to create a new Hook, rename the Hook name for clarity, and select Shell Script where you see Run the following.

Create CodeKit Hooks

Select the conditions for when to run the Shell script. In this case, we would like it to run when the output ends with .css hence we set the condition to: 

  • Any of the following are true 
  • The output path of any processed file
  • ends with
  • .css
Hook Condition

The Script

Within the empty box, add the following script.

The first line of the script initializes the CK_OUTPUT_PATHS variable as an empty string. The second line will split the paths into an array. If we look into the Help page, we can see that CodeKit may pass colon seperated paths of files in the variable. For instance:

This may happen if we have imported a file within two or more files at once, hence the array. So we will be able to run the command line to each of the compiled files through the for loop.

Lastly, the o="${i/.css/.rtl.css}" line sets the output of our files processed with the rtlcss command. In this case, we will append the stylesheets with .rtl.css.

Run the Hooks

Add some changes to your SCSS, LESS, or Stylus stylesheets. Save, then once these files are compiled you should find a new stylesheet compiled with the .rtl.css extension.

Compiled Files in CodeKit

In our case the style rules within these files have also been converted to cater for RTL writing direction.

Code example by Mohammad Younes creator of RTLCSS

Conclusion

This was just a quick tip, to make you aware of the possibilities Hooks can give us. Try this example and see how you get on, or perhaps try another tool such as CSSNano. How else would you choose to extend CodeKit? Leave your tips and ideas in the comments!

Further Resources

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.