OSF Style Guidelines

This project aims to bring together resources to build Design and Layout of OSF components. As you are working with OSF please use this project as reference for how elements on your page should look and how the HTML and CSS should be used. This is a collaborative project so feel free to suggest changes or Pull Requests.

Quick Start

• Clone the remote repo to your local

    $ git clone https://github.com/CenterForOpenScience/osf-style.git
    $ cd osf-style

• Install the dependent libraries (listed in package.json) with npm

    $ npm install

• Run gulp to view the website at http://localhost:8000/

    $ npm run gulp

With the help of gulp, every change in repo code will automatically be compiled and changed after saving.

Possible Issues

• If npm is not installed (-bash : npm: command not found), please install node.js in which it contains npm.

• If SASS is not installed (bash: sass: command not found), you should run the following command:

    $ sudo gem install sass

Click here for more details about installation of SASS.

Libraries Used Here

This Project relies on these technologies for its workflow so it's important to familiarize yourself before starting.

1. Npm Node package management, for server side dependencies and making gulp work. We will use it to install all the dependent libraries(such as Gulp) in package.json.

2. Gulp
   Builds the distribution by running important tasks including concatenation, minification(we are not doing this yet, but will), compiling less files.

3. Bootstrap
   Forms the basic design with flat colors taken from elsewhere. If you are working with html you need to use the Bootstrap syntax.

4. SASS Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.