Merge pull request #15 from Brightspace/dbatiste/update-sassy

Dbatiste/update sassy

.csslintrc

@@ -1,3 +0,0 @@
-{
-	"zero-units": false
-}

.gitignore

@@ -1,5 +1,4 @@
-deplui.sublime-project
-deplui.sublime-workspace
 node_modules/
 test/output
-typography.css
+typography.css
+typography-less.css

.npmignore

@@ -1,9 +1,12 @@
-.csslintrc
+.editorconfig
 .gitattributes
 .gitignore
 .npmignore
-.editorconfig
+.travis.yml
+.csslintrc
 node_modules
+karma.conf.js
 test
-gulpfile.js
 typography.css.less
+typography.css.scss
+typography-less.css

README.md

@@ -3,7 +3,7 @@
 [![Build status][ci-image]][ci-url]
 [![Dependency Status][dependencies-image]][dependencies-url]
 
-The **vui-typography** contains Less mixins and CSS that can be used to produce basic typography styles.
+Thise **vui-typography** contains Sass mixins and CSS that can be used to produce basic typography styles. LESS mixins are still include for backward compatibility, however these will likely be removed in a future version.
 
 For further information on this component and other VUI components, see the docs at [ui.valence.d2l.com](http://ui.valence.d2l.com/).
 

karma.conf.js

@@ -0,0 +1,67 @@
+// Karma configuration
+// Generated on Thu May 21 2015 11:15:06 GMT-0400 (Eastern Daylight Time)
+
+module.exports = function(config) {
+  config.set({
+
+    // base path that will be used to resolve all patterns (eg. files, exclude)
+    basePath: '',
+
+
+    // frameworks to use
+    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
+    frameworks: ['jasmine'],
+
+
+    // list of files / patterns to load in the browser
+    files: [
+      { pattern: 'typography.css', included: true },
+      'node_modules/jasmine-dom-matchers/matchers.js',
+      'test/**/*.js'
+    ],
+
+
+    // list of files to exclude
+    exclude: [
+    ],
+
+
+    // preprocess matching files before serving them to the browser
+    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
+    preprocessors: {
+    },
+
+
+    // test results reporter to use
+    // possible values: 'dots', 'progress'
+    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
+    reporters: ['progress'],
+
+
+    // web server port
+    port: 9876,
+
+
+    // enable / disable colors in the output (reporters and logs)
+    colors: true,
+
+
+    // level of logging
+    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+    logLevel: config.LOG_INFO,
+
+
+    // enable / disable watching file and executing tests whenever any file changes
+    autoWatch: false,
+
+
+    // start these browsers
+    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+    browsers: ['PhantomJS'],
+
+
+    // Continuous Integration mode
+    // if true, Karma captures browsers, runs the tests and exits
+    singleRun: true
+  });
+};

package.json

@@ -1,24 +1,42 @@
 {
   "name": "vui-typography",
-  "description": "LESS mixins and CSS for applying basic typography styles",
-  "version": "0.3.1",
-  "author": "D2L Corporation",
-  "license": "Apache-2.0",
+  "version": "0.4.0",
+  "description": "Mixins and CSS for applying basic typography styles",
+  "scripts": {
+    "clean": "rimraf typography.css && rimraf typography-less.css",
+    "lint:css": "csslint typography.css",
+    "prebuild": "npm run clean",
+    "build:less": "lessc typography.css.less > typography-less.css",
+    "build:sass": "node-sass --output-style expanded typography.css.scss typography.css",
+    "build": "npm run build:sass && npm run build:less",
+    "postbuild": "npm run lint:css",
+    "pretest": "npm run build",
+    "test": "karma start karma.conf.js"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/Brightspace/valence-ui-typography.git"
   },
-  "scripts": {
-    "test": "gulp && gulp test"
-  },
-  "devDependencies": {
-    "del": "^0.1.3",
-    "gulp": "^3.8.8",
-    "vui-helpers": "^0.5.1"
-  },
   "keywords": [
     "d2l",
     "valence-ui",
     "vui"
-  ]
+  ],
+  "author": "D2L Corporation",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/Brightspace/valence-ui-typography/issues"
+  },
+  "homepage": "https://github.com/Brightspace/valence-ui-typography",
+  "devDependencies": {
+    "csslint": "^0.10.0",
+    "jasmine-dom-matchers": "^0.1.0",
+    "karma": "^0.12.32",
+    "karma-phantomjs-launcher": "^0.1.4",
+    "karma-jasmine": "^0.3.5",
+    "karma-cli": "0.0.4",
+    "less": "^2.5.1",
+    "node-sass": "^3.1.1",
+    "rimraf": "^2.3.4"
+  }
 }

pxToEm.scss

@@ -0,0 +1,13 @@
+
+@function pxToEm($targetPx, $basePx) {
+	@if (unitless($targetPx)) {
+		$targetPx: $targetPx * 1px;
+	}
+	@if (unitless($basePx)) {
+		$basePx: $basePx * 1px;
+	}
+	@if ($targetPx / $basePx == 0) {
+		@return 0;
+	}
+	@return ($targetPx / $basePx) * 1em;
+}

typography.css.scss

@@ -0,0 +1,29 @@
+@import 'typography';
+
+.vui-typography {
+	@include vui-typography;
+}
+
+.vui-heading-1 {
+	@include vui-typography-heading1;
+}
+
+.vui-heading-2 {
+	@include vui-typography-heading2;
+}
+
+.vui-heading-3 {
+	@include vui-typography-heading3;
+}
+
+.vui-heading-4 {
+	@include vui-typography-heading4;
+}
+
+.vui-emphasis {
+	@include vui-typography-emphasis;
+}
+
+.vui-help {
+	@include vui-typography-help;
+}