Ghost/ghost/admin/app/README.md

31 lines
1.8 KiB
Markdown
Raw Normal View History

# Ghost Admin App
2014-02-23 17:56:45 +04:00
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.
2014-02-23 18:07:01 +04:00
2015-05-14 16:45:37 +03:00
## CSS
2014-02-23 18:07:01 +04:00
2015-05-14 16:45:37 +03:00
We use pure CSS, which is pre-processed for backwards compatibility by [Myth](http://myth.io). We do not follow any strict CSS framework, however our general style is pretty similar to BEM.
2014-02-23 18:07:01 +04:00
Styles are primarily broken up into 4 main categories:
2014-02-23 18:07:01 +04:00
* **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)
2014-02-23 18:07:01 +04:00
2015-05-14 16:45:37 +03:00
All of these separate files are subsequently imported and compiled in `app.css`.
2014-02-23 18:07:01 +04:00
## Front End Standards
2014-02-23 18:07:01 +04:00
* 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)
2015-05-14 16:45:37 +03:00
* Avoid over-nesting CSS. Never nest more than 3 levels deep.
* Use comments to explain "why" not "what" (Good: This requires a z-index in order to appear above mobile navigation. Bad: This is a thing which is always on top!)