mirror of
https://github.com/TryGhost/Ghost-Admin.git
synced 2023-12-14 02:33:04 +01:00
First pass refactor of GUI readme redux
This commit is contained in:
John O'Nolan
parent
2ce27fd00f
commit
313b087bba
186
README.md
186
README.md
|
|
@ -1,162 +1,50 @@
|
|||
# [Ghost-UI](http://github.com/TryGhost/Ghost-UI)
|
||||
[Travis] [SauceLabs]
|
||||
|
||||
Ghost-UI is the user interface framework which is used to build the [Ghost](http://ghost.org) blogging platform, created and maintained by a [passionate group](http://github.com/TryGhost/Ghost-UI/contributors) of designers and front-end developers with the support and involvement of the Ghost community. It is structurally based on the [Bootstrap](http://getbootstrap.com) framework.
|
||||
|
||||
***Note: This repository is currently a reasonably broken work in progress. It's brand new, and we're just getting everything set up for the first time.***
|
||||
Ghost-UI is the Ember.js application used as a client-side admin for the [Ghost](http://ghost.org) blogging platform. This readme is a work in progress guide aimed at explaining the specific nuances of the Ghost Ember app to contributors whose main focus is on this side of things.
|
||||
|
||||
|
||||
## Table of Contents
|
||||
## Architecture
|
||||
|
||||
- [Quick Start](#quick-start)
|
||||
- [Bugs and Feature Requests](#bugs-and-feature-requests)
|
||||
- [Documentation](#documentation)
|
||||
- [Compiling CSS and JavaScript](#compiling-css-and-javascript)
|
||||
- [Contributing](#contributing)
|
||||
- [Community](#community)
|
||||
- [Versioning](#versioning)
|
||||
- [Copyright and License](#copyright-and-license)
|
||||
|
||||
|
||||
## Quick Start
|
||||
|
||||
Three quick start options are available:
|
||||
|
||||
- [Download the latest release](https://github.com/TryGhost/Ghost-UI/releases)
|
||||
- Install with [Bower](http://bower.io): `bower install ghost-ui`
|
||||
- Clone the repository: `git clone https://github.com/TryGhost/Ghost-UI.git`
|
||||
|
||||
|
||||
### What's Included
|
||||
|
||||
Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:
|
||||
ToDo: Explain the basic Ember app structure.
|
||||
|
||||
```
|
||||
ghost-ui/
|
||||
├── css/
|
||||
│ ├── ghost-ui.css
|
||||
│ └── ghost-ui.min.css
|
||||
├── js/
|
||||
│ ├── ghost-ui.js
|
||||
│ └── ghost-ui.min.js
|
||||
└── fonts/
|
||||
├── icons.eot
|
||||
├── icons.svg
|
||||
├── icons.ttf
|
||||
└── icons.woff
|
||||
client/
|
||||
├── assets/
|
||||
│ ├── ghost.css
|
||||
│ └── ghost.min.css
|
||||
├── things/
|
||||
│ ├── things.js
|
||||
│ └── things.min.js
|
||||
└── things/
|
||||
├── things.js
|
||||
└── things.js
|
||||
```
|
||||
|
||||
We provide compiled CSS and JS (`ghost-ui.*`), as well as compiled and minified CSS and JS (`ghost-ui.min.*`). Our icon-font is also included.
|
||||
## SASS
|
||||
|
||||
All CSS is written in SASS and compiled using grunt. We do not follow any strict CSS framework, however our general style is pretty similar to BEM.
|
||||
|
||||
Styles are primarily broken up into 4 main categories:
|
||||
|
||||
* **Helpers** - are pure-sass files. Variables/mixins/things which are generally never compiled to actual CSS, and are simply used to aid development.
|
||||
* **Patterns** - are base level visual styles for HTML elements (eg. Buttons)
|
||||
* **Components** - are groups of patterns used to create a UI component (eg. Modals)
|
||||
* **Layouts** - are groups of components used to create application screens (eg. Settings)
|
||||
* **Lib** - is where we store styles for 3rd party components.
|
||||
|
||||
All of these separate files are subsequently imported and compiled in `screen.scss`.
|
||||
|
||||
|
||||
## Bugs and Feature Requests
|
||||
## Front End Standards
|
||||
|
||||
Have a bug or a feature request? Please first read the [issue guidelines](https://github.com/TryGhost/Ghost-UI/blob/master/CONTRIBUTING.md#using-the-issue-tracker) and search for existing and closed issues. If your problem or idea is not addressed yet, [please open a new issue](https://github.com/TryGhost/Ghost-UI/issues/new).
|
||||
|
||||
|
||||
## Documentation
|
||||
|
||||
The documentation, included in this repo in the root directory, is built with [Jekyll](http://jekyllrb.com).
|
||||
|
||||
### Running Documentation Locally
|
||||
|
||||
1. If necessary, [install Jekyll](http://jekyllrb.com/docs/installation) (requires v1.x).
|
||||
- **Windows users:** Read [this unofficial guide](https://github.com/juthilo/run-jekyll-on-windows/) to get Jekyll up and running without problems. We use Pygments for syntax highlighting, so make sure to read the sections on installing Python and Pygments.
|
||||
2. From the root `/ghost-ui` directory, run `jekyll serve` in the command line.
|
||||
- **Windows users:** While we use Jekyll's `encoding` setting, you might still need to change the command prompt's character encoding ([code page](http://en.wikipedia.org/wiki/Windows_code_page)) to UTF-8 so Jekyll runs without errors. For Ruby 2.0.0, run `chcp 65001` first. For Ruby 1.9.3, you can alternatively do `SET LANG=en_EN.UTF-8`.
|
||||
3. Open <http://localhost:9001> in your browser.
|
||||
|
||||
Learn more about using Jekyll by reading its [documentation](http://jekyllrb.com/docs/home/).
|
||||
|
||||
|
||||
## Compiling CSS and JavaScript
|
||||
|
||||
Ghost-UI uses [Grunt](http://gruntjs.com/) with convenient methods for working with the framework. It's how we compile our code, run tests, and more. To use it, install the required dependencies as directed below and then check out the available Grunt commands.
|
||||
|
||||
|
||||
### Install Dependencies
|
||||
|
||||
From the command line:
|
||||
|
||||
1. Install Ruby and bundler globally with `gem install bundler`.
|
||||
2. Install Ruby dependencies with `bundle install`.
|
||||
3. Install `grunt-cli` globally with `npm install -g grunt-cli`.
|
||||
4. Navigate to the root `/Ghost-UI` directory, then run `npm install`. npm will look at [package.json](https://github.com/TryGhost/Ghost-UI/blob/master/package.json) and automatically install the necessary local dependencies listed there.
|
||||
|
||||
When completed, you'll be able to run the various Grunt commands provided from the command line.
|
||||
|
||||
**Unfamiliar with `npm`? Don't have node installed?** That's a-okay. [npm](http://npmjs.org/) is the node.js package manager, it allows you to install and easily manage development dependencies. [Download and install node.js](http://nodejs.org/download/) before proceeding.
|
||||
|
||||
|
||||
### Available Grunt Commands
|
||||
|
||||
#### $ grunt
|
||||
Run `grunt` to run tests locally and compile the CSS and JavaScript into `/dist`. **Uses [Sass](http://sass-lang.com/) and [UglifyJS](http://lisperator.net/uglifyjs/).**
|
||||
|
||||
#### $ grunt dist
|
||||
`grunt dist` creates the `/dist` directory with compiled files. **Uses [Sass](http://sass-lang.com/) and [UglifyJS](http://lisperator.net/uglifyjs/).**
|
||||
|
||||
#### $ grunt test
|
||||
Runs [JSHint](http://jshint.com) and [QUnit](http://qunitjs.com/) tests headlessly in [PhantomJS](http://phantomjs.org/) (used for CI).
|
||||
|
||||
#### $ grunt dev
|
||||
This is a convenience method for watching development files and automatically building them whenever they change.
|
||||
|
||||
### Hooking Ghost-UI up to Ghost
|
||||
|
||||
Want to see your Ghost-UI changes working live in your local development copy of [Ghost](http://github.com/TryGhost/Ghost)? Check out a copy of both repositories and follow these instructions:
|
||||
|
||||
#### Inside the Ghost-UI repo:
|
||||
|
||||
* `$ bower link`
|
||||
* `$ grunt dev`
|
||||
|
||||
#### Inside the Ghost repo:
|
||||
|
||||
* `$ bower link ghost-ui`
|
||||
* `$ grunt dev`
|
||||
|
||||
Now whenever you save a file in Ghost-UI - the changes will filter into the core Ghost repository.
|
||||
|
||||
### Troubleshooting Dependencies
|
||||
|
||||
Should you encounter problems with installing dependencies or running Grunt commands, uninstall all previous dependency versions (global and local). Then, rerun `npm install`.
|
||||
|
||||
|
||||
## Contributing
|
||||
|
||||
Please read through our [contributing guidelines](https://github.com/TryGhost/Ghost-UI/blob/master/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development. If your pull request contains JavaScript patches or features, you must include relevant unit tests.
|
||||
|
||||
|
||||
## Community
|
||||
|
||||
Keep track of development and community news.
|
||||
|
||||
- Follow [@TryGhost on Twitter](http://twitter.com/TryGhost)
|
||||
- Read and subscribe to [The Ghost Development Blog](http://dev.ghost.org)
|
||||
- Chat on IRC. On the `irc.freenode.net` server, in the `#ghost` channel
|
||||
- Participate in [The Ghost Forums](https://ghost.org/forum/) and meet fellow Ghost users
|
||||
|
||||
|
||||
## Versioning
|
||||
|
||||
`NB: Pre-1.0 we're playing it pretty fast and loose with Semver`
|
||||
|
||||
For transparency into our release cycle and in striving to maintain backward compatibility, Ghost-UI is maintained under the Semantic Versioning guidelines.
|
||||
|
||||
Releases will be numbered with the following format:
|
||||
|
||||
`<major>.<minor>.<patch>`
|
||||
|
||||
And constructed with the following guidelines:
|
||||
|
||||
- Breaking backward compatibility **bumps the major** while resetting minor and patch
|
||||
- New additions without breaking backward compatibility **bumps the minor** while resetting the patch
|
||||
- Bug fixes and misc changes **bumps only the patch**
|
||||
|
||||
For more information on SemVer, please visit <http://semver.org/>.
|
||||
|
||||
|
||||
## Copyright and License
|
||||
|
||||
Copyright (c) 2013-2014 Ghost Foundation - Released under the [MIT license](LICENSE).
|
||||
* 4 spaces for HTML & CSS indentation. Never tabs.
|
||||
* Double quotes only, never single quotes.
|
||||
* Use tags and elements appropriate for an HTML5 doctype (including self-closing tags)
|
||||
* Adhere to the [Recess CSS](http://markdotto.com/2011/11/29/css-property-order/) property order.
|
||||
* Always a space after a property's colon (.e.g, display: block; and not display:block;).
|
||||
* End all lines with a semi-colon.
|
||||
* For multiple, comma-separated selectors, place each selector on its own line.
|
||||
* Use js- prefixed classes for JavaScript hooks into the DOM, and never use these in CSS as per [Slightly Obtrusive JavaSript](http://ozmm.org/posts/slightly_obtrusive_javascript.html)
|
||||
* Avoid SASS over-nesting. Never nest more than 3 levels deep.
|
||||
* Use comments to explain "why" not "what" (Eg. This requires a z-index in order to appear above mobile navigation. Not: This is a thing which is always on top!)
|
||||
|
|
|
|||
Loading…
Reference in a new issue