https://github.com/srph/djiyo
A Digital Ocean-esque CSS Starter Kit
https://github.com/srph/djiyo
boilerplate css sass starter-kit
Last synced: about 1 month ago
JSON representation
A Digital Ocean-esque CSS Starter Kit
- Host: GitHub
- URL: https://github.com/srph/djiyo
- Owner: srph
- License: mit
- Created: 2016-11-01T13:04:57.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2018-02-14T22:18:20.000Z (over 8 years ago)
- Last Synced: 2025-03-21T22:42:42.963Z (over 1 year ago)
- Topics: boilerplate, css, sass, starter-kit
- Language: CSS
- Homepage: http://djiyo.kierb.com
- Size: 24.4 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# djiyo [](https://img.shields.io/badge/progress-wip-blue.svg?style=flat-square)
A Digital-Ocean-esque CSS starter kit
This is not a framework and not meant to be extended. Rather, it's intended to be a reference or a starting point. It provides you a bunch of common components with pretty styling (similar to [**Digital Ocean**](https://digitalocean.com)'s design), written in an *opinionated* [**BEM**](http://getbem.com/).
## Installation
```bash
$ npm i -g djiyo
$ djiyo install /path/to/my/project/stylesheets
```
**Manual** — If you prefer, you may simply clone the repository, and copy all the files in the `stylesheets` directory to your project folder.
## Convention
It follows the [`.block__element--modifier` convention](http://getbem.com/) in [*kebab-case*](http://stackoverflow.com/questions/11273282/whats-the-name-for-snake-case-with-dashes/12273101#12273101). This project also loosely follows [code-guide](https://github.com/mdo/code-guide).
```css
// Block
.component {}
.my-component {}
.footer-nav {}
// Element
.component__another-component-inside-it {}
.my-component__another-component-inside-it {}
.footer-nav__section {}
// Modifier
.component--narrow {}
.my-component--large {}
.footer--dark {}
// Utilities
.u-whatever {}
.u-spacer {}
.u-pull-right {}
```