Drndić Lab Website
This is the source code for the Drndić Lab Website.
Here are instructions for:
You'll need to have the following items installed before continuing.
Note that Windows is not an officially supported platform, although instructions exist to help with the installation.
- Install Ruby (Including development headers).
- Install Ruby Gems, Ruby's package manager (probably ships with Ruby).
- 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.
- Foundation uses Bower to manage updates to Foundation and the third-party libraries that Foundation is built on.
$ npm install -g bower grunt-cli
- Installing the Foundation CLI
$ gem install foundation
Getting started with the source
First, clone the repo and move to the directory.
$ git clone https://github.com/parkin/drndic-website.git $ 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.
- 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
$ grunt build
- Compile the website source using Jekyll. This takes the source code from this website and outputs the working website in the
_sitedirectory, by default. Use the command
$ jekyll build
- To view the site, start a server that serves from the
_sitedirectory. 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, serve.sh. 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.
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.
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
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.