Skip to content

jimthoburn/fathomnet-ui

Repository files navigation

FathomNet User Interface

https://fathomnet-ui.tobbi.co

This is a space to document and test UI elements for the FathomNet project: https://fathomnet.org

It’s also a helpful place to work, while making changes to the CSS.

Deployment status

https://github.com/jimthoburn/fathomnet-ui/deployments

How to download the latest CSS

The individual CSS files for the project are combined into a single, downloadable file:
https://fathomnet-ui.tobbi.co/fathomnet-ui-v0.2.3-beta/fathomnet-ui.css

How to make changes

The website is published with GitHub Pages, and the files are generated with Jekyll.

As you make changes and commit/push them to GitHub, the website will automatically update.

For example, if you edit the icon page on GitHub, and then press the “Commit changes” button–you should see your changes on the icons page of the website within a few minutes.

How to edit the CSS

The single, downloadable CSS file is generated from individual CSS files, which can be found in these folders:

  1. elements
  2. components
  3. pages

For example, you can edit the CSS for the icons in this file: elements/icon.css

How to add a new CSS file

You can add a new file anywhere in the project, and then link to it from these two files:

  1. css/ui.css
  2. fathomnet-ui.css

How to develop locally

If you want to see a preview of your changes while you work, you can run a Jekyll server on your local machine. Installing Ruby and Jekyll is a good place to start.

After you have Jekyll installed, you can clone this project with Git or GitHub Desktop

git clone https://github.com/jimthoburn/fathomnet-ui.git

And then start running the Jekyll application like this...

bundle exec jekyll serve

Handy guides