Developer tools and workflow

So, you want to work on the Phaidra front end (or, you don't, but you're here anyways).

Developer Tools

Node/npm

All of our front-end dependencies are described in package.json. If you want to install a new front-end dependencies, you should install it via npm with the --save-dev option.

Grunt

We use grunt to compile our code, specifically SASS into CSS. Check out gruntfile.js to see what commands are available.

Workflow

CSS

static/css/ is the home to our .scss files.

Setting up your workspace

To work on the CSS, I recommend having two panes open in tmux. One for running the grunt task, and one for editing your file.

Editing SCSS files

In one of your tmux panes, begin the grunt watch task (which is our default grunt task):

grunt

In your other tmux pane, open up an .scss file in your favorite text editor and start editing. We use directional.scss to make our SCSS/CSS RTL compatible, so be sure to consider this as you expand or edit the code.

When you save your file, you will notice your grunt pane begin compiling the code. Once it is done doing this, you can open your browser and see changes in the window.