Source for the Drndić Lab website.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Drndić Lab Website

This is the source code for the Drndić Lab Website.


It is built with Jekyll, a static-site generator, and uses Foundation as a responsive front-end framework.

Here are instructions for:



You'll need to have the following items installed before continuing.


Jekyll is used for static site generation. Basically, you write your website using Jekyll's formatting, and then use Jekyll to turn your simple code into the many pages of your website.

Note that Windows is not an officially supported platform, although instructions exist to help with the installation.

Instructions for installing Jekyll can be found here, summarized below.

  1. Install Ruby (Including development headers).
  2. Install Ruby Gems, Ruby's package manager (probably ships with Ruby).
  3. Install NodeJS, the javascript runtime.
  4. Install Jekyll (May need sudo).
$ gem install jekyll


Foundation is a responsive front-end framework. Basically, it comes with a bunch of CSS/SCSS styles that you can use to easly create sites that look good on both mobile and desktop environments.

Installation instructions are here (see libsass version), and are summarized below.

  1. Foundation uses Bower to manage updates to Foundation and the third-party libraries that Foundation is built on.

Grunt is a Javascript task runner. We use it to automate compiling our SASS files to CSS.

npm is the Node Package Manager, and should come with your installation of nodejs above.

$ npm install -g bower grunt-cli
  1. Installing the Foundation CLI
$ gem install foundation

Getting started with the source

First, clone the repo and move to the directory.

$ git clone
$ cd drndic-website

Next, install the node modules.

$ npm install

This should create the directory node_modules and populate it with the modules needed.

Then, install the bower components. Bower is used to to keep Foundation assets up to date within the project.

$ bower install

This should create the directory bower_components and populated it with the components needed.

Now, you should be ready to build the site.

Building and previewing the site

Jekyll takes this website source code and builds the full html pages for the entire site, and sticks those pages by default in the _site directory. So, if you want to actually see the website or see any changes you make, you need to rebuild the site. There are three steps in this process.

  1. Compile SASS files to CSS. This is done with libsass, and can be triggered with the following command. Note that at the moment, this only applies if you change any .scss file.
$ grunt build
  1. Compile the website source using Jekyll. This takes the source code from this website and outputs the working website in the _site directory, by default. Use the command
$ jekyll build
  1. To view the site, start a server that serves from the _site directory. There are many ways to do this, but one way is
$ jekyll serve

from the project's root directory. Then open a browser and go to http://localhost:4000/

These commands have been packaged into a simple script, Run this script with

$ ./

and it will build the SASS files, the site, start the server, and watch for any source code changes and rebuild automatically if changes are detected.

Making Changes


The master branch is the main branch for working code. If you are developing a new feature, you should not use the master branch. Instead, create a new branch and work there, merge it back into master once you've tested your new feature.

The publish branch is where I keep the code for the website after it has been built by Jekyll. That name is reserved, do not modify the publish branch.

Adding publication, news posts

In the folders publications/_posts, news/_posts, you'll find Markdown files that are the current posts. In each folder, there is also a .template file that contains the base template needed to define a new post in that folder (eg news/_posts/.template. So, to create a new post, simply copy an old post or copy .template.

Adding new members

Currently, the members are stored in a data YAML file, _data/members.yml. To add new members, just edit the file, see the current formatting.

Modifying the css

Currently, all of my css (it's actually sass) modifications are in scss/_settings.scss. So make any style changes in scss/_settings.scss for now. This file is included in scss/app.scss, which gets compiled to css/app.css by a grunt task.