https://github.com/centerforopenscience/osf-style
Stylesheet and guidelines for OSF
https://github.com/centerforopenscience/osf-style
bootstrap css sass style-guide
Last synced: 5 months ago
JSON representation
Stylesheet and guidelines for OSF
- Host: GitHub
- URL: https://github.com/centerforopenscience/osf-style
- Owner: CenterForOpenScience
- License: apache-2.0
- Created: 2015-01-05T14:59:08.000Z (about 11 years ago)
- Default Branch: develop
- Last Pushed: 2019-03-04T20:40:35.000Z (almost 7 years ago)
- Last Synced: 2025-08-09T12:48:49.619Z (6 months ago)
- Topics: bootstrap, css, sass, style-guide
- Language: HTML
- Homepage: https://centerforopenscience.github.io/osf-style/
- Size: 1.73 MB
- Stars: 3
- Watchers: 9
- Forks: 27
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
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](https://github.com/haoyuchen1992/osf-style/blob/Edit-Readme/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](https://nodejs.org/download/) 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](http://sass-lang.com/install) 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](https://www.npmjs.org)
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](http://gulpjs.com/)
Builds the distribution by running important tasks including concatenation, minification(we are not doing this yet, but will), compiling less files.
3. [Bootstrap](http://getbootstrap.com/)
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](http://sass-lang.com/)
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.