From 3231f66a82083921962812063f461f9074b3d477 Mon Sep 17 00:00:00 2001 From: Dave Batiste Date: Fri, 29 May 2015 12:07:03 -0400 Subject: [PATCH 1/2] Sassifying. Adding scss mixins for typography. Moving all the gulpiness to npm scripts and eliminating dependency on vui-helpers. --- .csslintrc | 3 - .gitignore | 5 +- .npmignore | 9 +- README.md | 2 +- gulpfile.js | 28 ------ karma.conf.js | 67 +++++++++++++++ package.json | 44 +++++++--- typography.css.scss | 29 +++++++ typography.scss | 205 ++++++++++++++++++++++++++++++++++++++++++++ 9 files changed, 341 insertions(+), 51 deletions(-) delete mode 100644 gulpfile.js create mode 100644 karma.conf.js create mode 100644 typography.css.scss create mode 100644 typography.scss diff --git a/.csslintrc b/.csslintrc index b88d884..e69de29 100644 --- a/.csslintrc +++ b/.csslintrc @@ -1,3 +0,0 @@ -{ - "zero-units": false -} \ No newline at end of file diff --git a/.gitignore b/.gitignore index 483d2ff..9dd8095 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,4 @@ -deplui.sublime-project -deplui.sublime-workspace node_modules/ test/output -typography.css \ No newline at end of file +typography.css +typography-less.css diff --git a/.npmignore b/.npmignore index 3860573..1115817 100644 --- a/.npmignore +++ b/.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 diff --git a/README.md b/README.md index cb016af..f05746f 100644 --- a/README.md +++ b/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/). diff --git a/gulpfile.js b/gulpfile.js deleted file mode 100644 index 088a4fb..0000000 --- a/gulpfile.js +++ /dev/null @@ -1,28 +0,0 @@ -var gulp = require( 'gulp' ), - del = require( 'del' ), - vui = require( 'vui-helpers' ); - -gulp.task( 'clean', function( cb ) { - del([ 'typography.css' ], cb); -} ); - -gulp.task( 'css', function () { - return vui.makeCss( - 'typography.css.less', - 'typography.css', - { lintOpts: '.csslintrc' } - ); -} ); - -gulp.task( 'default', [ 'clean' ], function() { - gulp.start( 'css' ); -} ); - -gulp.task( 'test', function () { - return vui.test( { - files: [ - 'test/unit/**/*Spec.js', - 'typography.css' - ] - } ) ; -} ); diff --git a/karma.conf.js b/karma.conf.js new file mode 100644 index 0000000..c94f64f --- /dev/null +++ b/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 + }); +}; diff --git a/package.json b/package.json index 384acbd..32a0ff9 100644 --- a/package.json +++ b/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" + } } diff --git a/typography.css.scss b/typography.css.scss new file mode 100644 index 0000000..2e24824 --- /dev/null +++ b/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; +} diff --git a/typography.scss b/typography.scss new file mode 100644 index 0000000..51bb74c --- /dev/null +++ b/typography.scss @@ -0,0 +1,205 @@ + +$vui-fontColor: #353535 !default; +$vui-fontFamily: Arial !default; +$vui-fontSize: 13px !default; +$vui-lineHeight: 1.54em !default; + +$vui-heading-fontColor: #666666 !default; +$vui-heading-fontWeight: normal !default; +$vui-heading-topMargin: 0 !default; +$vui-heading-rightMargin: 0 !default; +$vui-heading-bottomMargin: 15px !default; +$vui-heading-leftMargin: 0 !default; +$vui-heading-lineHeight: 25px !default; +$vui-heading1-fontSize: 23px !default; +$vui-heading2-fontSize: 19px !default; +$vui-heading3-fontSize: 17px !default; +$vui-heading4-fontSize: 15px !default; + +$vui-emphasis-fontColor: #666666 !default; +$vui-emphasis-fontStyle: italic !default; +$vui-emphasis-topMargin: 0 !default; +$vui-emphasis-rightMargin: 0 !default; +$vui-emphasis-bottomMargin: 20px !default; +$vui-emphasis-leftMargin: 0 !default; + +$vui-help-fontColor: #666666 !default; +$vui-help-fontSize: 11px !default; +$vui-help-fontStyle: italic !default; +$vui-help-fontWeight: normal !default; +$vui-help-lineHeight: 20px !default; +$vui-help-topMargin: 0 !default; +$vui-help-rightMargin: 0 !default; +$vui-help-bottomMargin: 20px !default; +$vui-help-leftMargin: 0 !default; + +@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; +} + +@mixin vui-typography( + $fontColor: $vui-fontColor, + $fontFamily: $vui-fontFamily, + $fontSize: $vui-fontSize, + $lineHeight: $vui-lineHeight + ) { + + color: $fontColor; + font-family: $fontFamily; + font-size: $fontSize; + font-weight: normal; + line-height: $lineHeight; + +} + +@mixin vui-typography-emphasis( + $fontColor: $vui-emphasis-fontColor, + $fontStyle: $vui-emphasis-fontStyle, + $topMargin: $vui-emphasis-topMargin, + $rightMargin: $vui-emphasis-rightMargin, + $bottomMargin: $vui-emphasis-bottomMargin, + $leftMargin: $vui-emphasis-leftMargin, + $baseFontSize: $vui-fontSize + ) { + + color: $fontColor; + font-style: $fontStyle; + margin: pxToEm($topMargin, $baseFontSize) + pxToEm($rightMargin, $baseFontSize) + pxToEm($bottomMargin, $baseFontSize) + pxToEm($leftMargin, $baseFontSize); + +} + +@mixin vui-typography-help( + $fontColor: $vui-help-fontColor, + $fontSize: $vui-help-fontSize, + $fontStyle: $vui-help-fontStyle, + $fontWeight: $vui-help-fontWeight, + $lineHeight: $vui-help-lineHeight, + $topMargin: $vui-help-topMargin, + $rightMargin: $vui-help-rightMargin, + $bottomMargin: $vui-help-bottomMargin, + $leftMargin: $vui-help-leftMargin, + $baseFontSize: $vui-fontSize + ) { + + color: $fontColor; + font-style: $fontStyle; + font-weight: $fontWeight; + font-size: pxToEm($fontSize, $baseFontSize); + line-height: pxToEm($lineHeight, $fontSize); + margin: pxToEm($topMargin, $fontSize) + pxToEm($rightMargin, $fontSize) + pxToEm($bottomMargin, $fontSize) + pxToEm($leftMargin, $fontSize); + +} + +@mixin vui-typography-heading( + $fontColor: $vui-heading-fontColor, + $fontWeight: $vui-heading-fontWeight + ) { + + color: $fontColor; + font-family: inherit; + font-weight: $fontWeight; + +} + +@mixin vui-typography-heading1( + $fontColor: $vui-heading-fontColor, + $fontWeight: $vui-heading-fontWeight, + $fontSize: $vui-heading1-fontSize, + $lineHeight: $vui-heading-lineHeight, + $topMargin: $vui-heading-topMargin, + $rightMargin: $vui-heading-rightMargin, + $bottomMargin: $vui-heading-bottomMargin, + $leftMargin: $vui-heading-leftMargin, + $baseFontSize: $vui-fontSize + ) { + + @include vui-typography-heading($fontColor, $fontWeight); + font-size: pxToEm($fontSize, $baseFontSize); + line-height: pxToEm($lineHeight, $fontSize); + margin: pxToEm($topMargin, $fontSize) + pxToEm($rightMargin, $fontSize) + pxToEm($bottomMargin, $fontSize) + pxToEm($leftMargin, $fontSize); + +} + +@mixin vui-typography-heading2( + $fontColor: $vui-heading-fontColor, + $fontWeight: $vui-heading-fontWeight, + $fontSize: $vui-heading2-fontSize, + $lineHeight: $vui-heading-lineHeight, + $topMargin: $vui-heading-topMargin, + $rightMargin: $vui-heading-rightMargin, + $bottomMargin: $vui-heading-bottomMargin, + $leftMargin: $vui-heading-leftMargin, + $baseFontSize: $vui-fontSize + ) { + + @include vui-typography-heading($fontColor, $fontWeight); + font-size: pxToEm($fontSize, $baseFontSize); + line-height: pxToEm($lineHeight, $fontSize); + margin: pxToEm($topMargin, $fontSize) + pxToEm($rightMargin, $fontSize) + pxToEm($bottomMargin, $fontSize) + pxToEm($leftMargin, $fontSize); + +} + +@mixin vui-typography-heading3( + $fontColor: $vui-heading-fontColor, + $fontWeight: $vui-heading-fontWeight, + $fontSize: $vui-heading3-fontSize, + $lineHeight: $vui-heading-lineHeight, + $topMargin: $vui-heading-topMargin, + $rightMargin: $vui-heading-rightMargin, + $bottomMargin: $vui-heading-bottomMargin, + $leftMargin: $vui-heading-leftMargin, + $baseFontSize: $vui-fontSize + ) { + + @include vui-typography-heading($fontColor, $fontWeight); + font-size: pxToEm($fontSize, $baseFontSize); + line-height: pxToEm($lineHeight, $fontSize); + margin: pxToEm($topMargin, $fontSize) + pxToEm($rightMargin, $fontSize) + pxToEm($bottomMargin, $fontSize) + pxToEm($leftMargin, $fontSize); + +} + +@mixin vui-typography-heading4( + $fontColor: $vui-heading-fontColor, + $fontWeight: $vui-heading-fontWeight, + $fontSize: $vui-heading4-fontSize, + $lineHeight: $vui-heading-lineHeight, + $topMargin: $vui-heading-topMargin, + $rightMargin: $vui-heading-rightMargin, + $bottomMargin: $vui-heading-bottomMargin, + $leftMargin: $vui-heading-leftMargin, + $baseFontSize: $vui-fontSize + ) { + + @include vui-typography-heading($fontColor, $fontWeight); + font-size: pxToEm($fontSize, $baseFontSize); + line-height: pxToEm($lineHeight, $fontSize); + margin: pxToEm($topMargin, $fontSize) + pxToEm($rightMargin, $fontSize) + pxToEm($bottomMargin, $fontSize) + pxToEm($leftMargin, $fontSize); + +} From 5ba7ec0f1464adc32c68a25fd31c0bca25be07f9 Mon Sep 17 00:00:00 2001 From: Dave Batiste Date: Fri, 29 May 2015 12:28:08 -0400 Subject: [PATCH 2/2] Moving pxToEm function out into its own scss file. --- pxToEm.scss | 13 +++++++++++++ typography.scss | 14 +------------- 2 files changed, 14 insertions(+), 13 deletions(-) create mode 100644 pxToEm.scss diff --git a/pxToEm.scss b/pxToEm.scss new file mode 100644 index 0000000..10d3d08 --- /dev/null +++ b/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; +} diff --git a/typography.scss b/typography.scss index 51bb74c..4d26249 100644 --- a/typography.scss +++ b/typography.scss @@ -1,3 +1,4 @@ +@import 'pxToEm'; $vui-fontColor: #353535 !default; $vui-fontFamily: Arial !default; @@ -33,19 +34,6 @@ $vui-help-rightMargin: 0 !default; $vui-help-bottomMargin: 20px !default; $vui-help-leftMargin: 0 !default; -@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; -} - @mixin vui-typography( $fontColor: $vui-fontColor, $fontFamily: $vui-fontFamily,