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.
-
Clone the remote repo to your local
$ git clone https://github.com/caneruguz/osf-style.git $ cd osf-style -
Install the dependent libraries (listed in package.json) with npm
$ npm install -
Then run gulp script and the project dashboard could be found in
http://localhost:8000/$ npm run gulp
After that, click index.html in the list directory and now the guideline page will show in your browser.
With the help of gulp, every change in repo code will automatically be complied and changed after saving.
-
If npm is not installed (
-bash : npm: command not found), please install node.js in which it containsnpm. -
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.
This Project relies on these technologies for its workflow so it's important to familiarize yourself before starting.
-
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.
-
Gulp
Builds the distribution by running important tasks including concatenation, minification(we are not doing this yet, but will), compiling less files. -
Bootstrap
Forms the basic design with flat colors taken from elsewhere. If you are working with html you need to use the Bootstrap syntax. -
SASS Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.