Convert Sass to Myth

.npmignore

@@ -15,7 +15,6 @@ content/data/**
 node_modules/**
 **/*.db*
 *.db*
-.sass*
 .af*
 .git*
 .groc*

CONTRIBUTING.md

@@ -227,7 +227,7 @@ If you're still stuck, please come join us in [slack](https://ghost.org/slack) a
 
 
 ### Developer Tips
-Whilst developing, you can take advantage of the [Grunt toolkit](https://github.com/TryGhost/Ghost/wiki/Grunt-Toolkit) to automatically compile assets, such as handlebars templates, sass and ember scripts. Some useful commands include:
+Whilst developing, you can take advantage of the [Grunt toolkit](https://github.com/TryGhost/Ghost/wiki/Grunt-Toolkit) to automatically compile assets, such as handlebars templates, styles and ember scripts. Some useful commands include:
 
 - `grunt dev` => Watch for changes and automatically rebuild assets
 - `grunt prod` => Build assets for the production environment

core/client/.gitignore

@@ -9,7 +9,6 @@
 /bower_components
 
 # misc
-/.sass-cache
 /connect.lock
 /coverage/*
 /libpeerconnection.log

core/client/Brocfile.js

@@ -17,18 +17,23 @@ app = new EmberApp({
     outputPaths: {
         app: {
             js: assetLocation('ghost.js')
-            // css: see config/environment.js (sassOptions)
         },
         vendor: {
             js:  assetLocation('vendor.js'),
             css: assetLocation('vendor.css')
         }
     },
+    mythOptions: {
+        source: './app/styles/app.css',
+        inputFile: 'app.css',
+        browsers: 'last 2 versions',
+        outputFile: 'ghost.css'
+    },
     hinting: false,
-    fingerprint: disabled,
-    sourcemaps: disabled // see https://github.com/ember-cli/ember-cli/issues/2912
+    fingerprint: disabled
 });
 
+// 'dem Scripts
 app.import('bower_components/loader.js/loader.js');
 app.import('bower_components/jquery/dist/jquery.js');
 app.import('bower_components/ic-ajax/dist/globals/main.js');
@@ -50,16 +55,18 @@ app.import('bower_components/nprogress/nprogress.js');
 app.import('bower_components/ember-simple-auth/simple-auth.js');
 app.import('bower_components/ember-simple-auth/simple-auth-oauth2.js');
 app.import('bower_components/google-caja/html-css-sanitizer-bundle.js');
-app.import('bower_components/nanoscroller/bin/javascripts/jquery.nanoscroller.js');
 app.import('bower_components/jqueryui-touch-punch/jquery.ui.touch-punch.js');
 app.import('bower_components/codemirror/lib/codemirror.js');
-app.import('bower_components/codemirror/lib/codemirror.css');
-app.import('bower_components/codemirror/theme/xq-light.css');
 app.import('bower_components/codemirror/mode/htmlmixed/htmlmixed.js');
 app.import('bower_components/codemirror/mode/xml/xml.js');
 app.import('bower_components/codemirror/mode/css/css.js');
 app.import('bower_components/codemirror/mode/javascript/javascript.js');
 app.import('bower_components/xregexp/xregexp-all.js');
 app.import('bower_components/password-generator/lib/password-generator.js');
 
+// 'dem Styles
+app.import('bower_components/nprogress/nprogress.css');
+app.import('bower_components/codemirror/lib/codemirror.css');
+app.import('bower_components/codemirror/theme/xq-light.css');
+
 module.exports = app.toTree();

core/client/app/README.md

@@ -3,36 +3,17 @@
 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.
 
 
-## Architecture
+## CSS
 
-ToDo: Explain the basic Ember app structure.
-
-```
-client/
-├── assets/
-│   ├── ghost.css
-│   └── ghost.min.css
-├── things/
-│   ├── things.js
-│   └── things.min.js
-└── things/
-    ├── things.js
-    └── things.js
-```
-
-## 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.
+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.
 
 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`.
+All of these separate files are subsequently imported and compiled in `app.css`.
 
 
 ## Front End Standards
@@ -45,5 +26,5 @@ All of these separate files are subsequently imported and compiled in `screen.sc
 * 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!)
+* 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!)