From 1965055ee6b0e1104d1d65ee6bbe66fee0547eb7 Mon Sep 17 00:00:00 2001 From: Chris Corwin Date: Wed, 4 Mar 2015 17:31:33 -0500 Subject: [PATCH] Checkbox and radio button style and markup work done in advance of deprecating the custom controls javascript. New grunt servedev task added to Gruntfile.js for LESS dev work. New markup examples added. Checkbox and radio button style and markup work done in advance of deprecating the custom controls javascript. New grunt servedev task added to Gruntfile.js for LESS dev work. New markup examples added. --- .gitignore | 8 +- Gruntfile.js | 53 +- index.css | 10 +- index.html | 3465 ++++++++++++++++---------- less/checkbox-no-js.less | 45 + less/checkbox.less | 54 +- less/forms.less | 168 ++ less/fuelux.less | 7 +- less/radio-no-js.less | 60 + less/radio.less | 20 + less/variables.less | 1 + markup/checkbox-inline-no-js.html | 12 + markup/checkbox-no-js-variations.txt | 14 + markup/checkbox-no-js.html | 12 + markup/radio-inline-no-js.html | 12 + markup/radio-no-js-variations.txt | 14 + markup/radio-no-js.html | 11 + 17 files changed, 2645 insertions(+), 1321 deletions(-) create mode 100644 less/checkbox-no-js.less create mode 100644 less/forms.less create mode 100644 less/radio-no-js.less create mode 100644 markup/checkbox-inline-no-js.html create mode 100644 markup/checkbox-no-js-variations.txt create mode 100644 markup/checkbox-no-js.html create mode 100644 markup/radio-inline-no-js.html create mode 100644 markup/radio-no-js-variations.txt create mode 100644 markup/radio-no-js.html diff --git a/.gitignore b/.gitignore index eb930b20a..48b4a201c 100644 --- a/.gitignore +++ b/.gitignore @@ -28,4 +28,10 @@ less/fuelux-no-namespace.less dev/dev.html # screenshots -page-at-timeout-* \ No newline at end of file +page-at-timeout-* + +# dev css and maps +dist/css/fuelux-dev.css +dist/css/fuelux-dev.css.map +dist/css/fuelux-fuelux-no-namespace.css.map + diff --git a/Gruntfile.js b/Gruntfile.js index acf72a47a..21beac140 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -274,6 +274,30 @@ module.exports = function (grunt) { } }, less: { + pre: { + options: { + strictMath: true, + sourceMap: true, + outputSourceFiles: true, + sourceMapURL: '<%= pkg.name %>-fuelux-no-namespace.css.map', + sourceMapFilename: 'dist/css/<%= pkg.name %>-fuelux-no-namespace.css.map' + }, + files: { + 'less/fuelux-no-namespace.less': 'less/fuelux.less' + } + }, + dev: { + options: { + strictMath: true, + sourceMap: true, + outputSourceFiles: true, + sourceMapURL: '<%= pkg.name %>-dev.css.map', + sourceMapFilename: 'dist/css/<%= pkg.name %>-dev.css.map' + }, + files: { + 'dist/css/fuelux-dev.css': 'less/fuelux.less' + } + }, dist: { options: { strictMath: true, @@ -283,10 +307,10 @@ module.exports = function (grunt) { sourceMapFilename: 'dist/css/<%= pkg.name %>.css.map' }, files: { - 'less/fuelux-no-namespace.less': 'less/fuelux.less', 'dist/css/fuelux.css': 'less/fuelux-namespace.less' } }, + minify: { options: { cleancss: true, @@ -296,7 +320,8 @@ module.exports = function (grunt) { files: { 'dist/css/<%= pkg.name %>.min.css': 'dist/css/<%= pkg.name %>.css' } - }, + } + }, prompt: { bump: { @@ -430,6 +455,7 @@ module.exports = function (grunt) { }, stoponerror: true, relaxerror: [//ignores these errors + 'Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.', 'Bad value X-UA-Compatible for attribute http-equiv on element meta.', 'Element head is missing a required instance of child element title.' ], @@ -459,12 +485,19 @@ module.exports = function (grunt) { }, //only watch and dist less, useful when doing LESS/CSS work less: { - files: ['fonts/**', 'less/**'], + files: ['fonts/**', 'less/**', '!less/fuelux-no-namespace.less'], options: { livereload: isLivereloadEnabled }, tasks: ['distcss'] }, + cssdev: { + files: ['Gruntfile.js', 'less/**', 'index.html', 'index-dev.html', 'dev.html', '!less/fuelux-no-namespace.less'], + options: { + livereload: isLivereloadEnabled + }, + tasks: ['distcssdev'] + }, //watch things that need compiled, useful for debugging/developing against dist dist: { files: ['fonts/**', 'js/**', 'less/**'], @@ -499,6 +532,10 @@ module.exports = function (grunt) { // CSS distribution task grunt.registerTask('distcss', 'Compile LESS into CSS', ['less', 'usebanner', 'delete-temp-less-file']); + // CSS distribution task (dev) + grunt.registerTask('distcssdev', 'Compile LESS into the dev CSS', ['less:pre', 'less:dev', 'delete-temp-less-file']); + + // Temporary LESS file deletion task grunt.registerTask('delete-temp-less-file', 'Delete the temporary LESS file created during the build process', function () { var options = { @@ -591,7 +628,7 @@ module.exports = function (grunt) { grunt.task.run(tasks); }); - // default serve task that runs tests and builds and tests dist by default (~20s). + // serve task that runs tests and builds and tests dist by default (~20s). grunt.registerTask('serveslow', 'Serve files. Run all tests. Does not build. (~20s)', function () { var tasks = ['connect:server', 'test', 'watch:source']; grunt.task.run(tasks); @@ -627,6 +664,14 @@ module.exports = function (grunt) { grunt.task.run(['connect:server', 'watch:less']); }); + // Complies the less files into the -dev versions, does not overwrite the main css files. + grunt.registerTask('servedev', 'Serve the files with no "dist" build or tests. Optional --no-less to also disable compiling less into css.', function() { + if (! grunt.option('no-less') ) { + grunt.task.run(['distcssdev']); + } + grunt.task.run(['connect:server', 'watch:cssdev']); + }); + // same as `grunt serve` but tests default to being off grunt.registerTask('servedist', 'Compile and serve everything, pass --test to run tests. (~7s)', function () { grunt.task.run(['dist']); diff --git a/index.css b/index.css index 955d1a18d..3122aaa6b 100644 --- a/index.css +++ b/index.css @@ -16,7 +16,15 @@ } #mainWrapper { - padding-bottom: 40px; + padding-bottom: 1.5rem; +} + +#mainWrapper section { + padding-bottom: 1.5rem; +} + +#mainWrapper section section { + padding-bottom: 1.5rem; } #myInfiniteScroll1, #myInfiniteScroll2 { diff --git a/index.html b/index.html index b2c942813..1b4a6a68e 100644 --- a/index.html +++ b/index.html @@ -47,579 +47,358 @@
-

Checkboxes

-
- -
- -
-
- -
-
- -
-
- -
+
+

Checkboxes

+
-
- - - - - - -

- -
- -
-
- -
+
+
+ +
+
+ +
+
+ +
+
+ +
+
- - - -
- -
- +
+ + + + +
+ +
+
+ +
+
+ +
+ + + +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ + +
-
- +
+ + + +
- - -
-
- - - - -
- -

Combobox

-
-
- - +
-
-
-
- - - - - - - - -
- -

Datepicker

-
-
- -
-
- -
- - +
+

Checkboxes (no javascript)

+
+
+ +
+ +
+ +
-
-
-
-
-
- - - - - - -
- -

Infinite Scroll

-
-
-

Hodor, hodor. Hodor. Hodor, hodor hodor hodor hodor, hodor. Hodor hodor, hodor, hodor hodor. Hodor! Hodor hodor, hodor - hodor hodor hodor? Hodor hodor HODOR! Hodor hodor, hodor. Hodor hodor... Hodor hodor hodor hodor?! Hodor hodor HODOR! Hodor hodor - hodor, hodor. Hodor hodor hodor! Hodor hodor - hodor... Hodor hodor hodor, hodor, hodor hodor. Hodor hodor - hodor; hodor hodor hodor hodor?! Hodor, HODOR hodor, hodor hodor? Hodor! Hodor hodor, hodor, hodor. Hodor hodor?

-

Hodor hodor HODOR! Hodor hodor hodor - hodor, hodor, hodor hodor. Hodor. Hodor hodor - hodor?! Hodor HODOR hodor, hodor hodor. Hodor. Hodor hodor - hodor HODOR hodor, hodor hodor hodor! Hodor. Hodor hodor hodor hodor hodor?! Hodor hodor HODOR! Hodor hodor hodor hodor, hodor, hodor hodor. Hodor! Hodor hodor, hodor; hodor hodor hodor, hodor, hodor hodor.

-

Hodor hodor hodor - hodor? Hodor hodor hodor hodor hodor hodor! Hodor! Hodor hodor, hodor, hodor. Hodor hodor; hodor hodor - hodor. Hodor. Hodor hodor hodor. Hodor! Hodor hodor, hodor - hodor?

-

Hodor hodor HODOR! Hodor hodor hodor; hodor hodor hodor! Hodor. Hodor hodor... Hodor hodor hodor hodor. Hodor, hodor, hodor. Hodor hodor - HODOR hodor, hodor hodor? Hodor, hodor. Hodor. Hodor, hodor - HODOR hodor, hodor hodor - hodor. Hodor hodor, hodor. Hodor hodor?! Hodor hodor... Hodor hodor hodor - hodor. Hodor.

-

Hodor, hodor. Hodor. Hodor, HODOR hodor, hodor HODOR hodor, hodor hodor hodor, hodor. Hodor hodor. Hodor. Hodor hodor - hodor... Hodor hodor hodor, hodor, hodor hodor. Hodor, hodor. Hodor. Hodor, hodor hodor hodor? Hodor hodor - hodor... Hodor hodor hodor?! Hodor, hodor hodor hodor; hodor hodor; hodor hodor hodor!

-
-
-

Hodor, hodor. Hodor. Hodor, hodor hodor hodor hodor, hodor. Hodor hodor, hodor, hodor hodor. Hodor! Hodor hodor, hodor - hodor hodor hodor? Hodor hodor HODOR! Hodor hodor, hodor. Hodor hodor... Hodor hodor hodor hodor?! Hodor hodor HODOR! Hodor hodor - hodor, hodor. Hodor hodor hodor! Hodor hodor - hodor... Hodor hodor hodor, hodor, hodor hodor. Hodor hodor - hodor; hodor hodor hodor hodor?! Hodor, HODOR hodor, hodor hodor? Hodor! Hodor hodor, hodor, hodor. Hodor hodor?

-

Hodor hodor HODOR! Hodor hodor hodor - hodor, hodor, hodor hodor. Hodor. Hodor hodor - hodor?! Hodor HODOR hodor, hodor hodor. Hodor. Hodor hodor - hodor HODOR hodor, hodor hodor hodor! Hodor. Hodor hodor hodor hodor hodor?! Hodor hodor HODOR! Hodor hodor hodor hodor, hodor, hodor hodor. Hodor! Hodor hodor, hodor; hodor hodor hodor, hodor, hodor hodor.

-

Hodor hodor hodor - hodor? Hodor hodor hodor hodor hodor hodor! Hodor! Hodor hodor, hodor, hodor. Hodor hodor; hodor hodor - hodor. Hodor. Hodor hodor hodor. Hodor! Hodor hodor, hodor - hodor?

-

Hodor hodor HODOR! Hodor hodor hodor; hodor hodor hodor! Hodor. Hodor hodor... Hodor hodor hodor hodor. Hodor, hodor, hodor. Hodor hodor - HODOR hodor, hodor hodor? Hodor, hodor. Hodor. Hodor, hodor - HODOR hodor, hodor hodor - hodor. Hodor hodor, hodor. Hodor hodor?! Hodor hodor... Hodor hodor hodor - hodor. Hodor.

-

Hodor, hodor. Hodor. Hodor, HODOR hodor, hodor HODOR hodor, hodor hodor hodor, hodor. Hodor hodor. Hodor. Hodor hodor - hodor... Hodor hodor hodor, hodor, hodor hodor. Hodor, hodor. Hodor. Hodor, hodor hodor hodor? Hodor hodor - hodor... Hodor hodor hodor?! Hodor, hodor hodor hodor; hodor hodor; hodor hodor hodor!

-
-
-
- - - -
- -

Loader

-
-
-
-
-
-
-
- - - - - -
- -

Pillbox

-
-
-
- -
-
-
-
-
-
    - -
  • - Item 1 - - Remove - -
    • -
  • - Item 2 - - Remove - -
    • -
  • - Item 3 - - Remove - -
    • -
  • - Item 4 - - Remove - -
    • -
  • - Item 5 - - Remove - -
    • +
    + + +
    -
  • - and more... - - - -
    • -
-
-
-
-
- - - - - - - - -
- -

Placard

-
-
-
- -
+
+ + +
-
+
+ + +
-
-
-
Header
- -
- Cancel - -
-
+ + -
-
-
-
-
Header
- -
- Cancel - -
-
-
-
-
- - - -
- -

Radio

-
- -
- -
-
- -
-
- -
-
- -
+
+ +
-
- - - - - - -

- -
- -
-
- -
+
+ + +
- - - +
+ + +
-
- -
- -
-
- -
- - -
-
- - - - -
- -

Repeater

-
-
-
-
- Awesome Repeater -
-
- - - - -
+
+ +
-
-
-
- - - + +
+ +
-
-
-
-
-
-
-
-
-
- - of items -
- - - -
- Per Page + + + + + + +
+ +
+ +
+ +
-
-
-
- - -
-
- -
- -
    -
    -
    -
    - - of -
    + + +
    + +

    Combobox

    +
    +
    + + +
    -
    -
    - - - -
    - -

    Scheduler

    -
    -
    -
    - -
    -
    -
    +
    + + + + + + + + +
    + + +
    +

    Datepicker

    +
    +
    + +
    - +
    - - + +
    - - - - - - - - - + + + + + + + + +
    SuMoTuWeThFrSa
    SuMoTuWeThFrSa
    - +
    -
    -
    - -
    - -
    - - -
    -
    -
    - -
    - -
    -
    - - - +
    + + + + + + +
    + + +
    +

    Infinite Scroll

    +
    +
    +

    Hodor, hodor. Hodor. Hodor, hodor hodor hodor hodor, hodor. Hodor hodor, hodor, hodor hodor. Hodor! Hodor hodor, hodor - hodor hodor hodor? Hodor hodor HODOR! Hodor hodor, hodor. Hodor hodor... Hodor hodor hodor hodor?! Hodor hodor HODOR! Hodor hodor - hodor, hodor. Hodor hodor hodor! Hodor hodor - hodor... Hodor hodor hodor, hodor, hodor hodor. Hodor hodor - hodor; hodor hodor hodor hodor?! Hodor, HODOR hodor, hodor hodor? Hodor! Hodor hodor, hodor, hodor. Hodor hodor?

    +

    Hodor hodor HODOR! Hodor hodor hodor - hodor, hodor, hodor hodor. Hodor. Hodor hodor - hodor?! Hodor HODOR hodor, hodor hodor. Hodor. Hodor hodor - hodor HODOR hodor, hodor hodor hodor! Hodor. Hodor hodor hodor hodor hodor?! Hodor hodor HODOR! Hodor hodor hodor hodor, hodor, hodor hodor. Hodor! Hodor hodor, hodor; hodor hodor hodor, hodor, hodor hodor.

    +

    Hodor hodor hodor - hodor? Hodor hodor hodor hodor hodor hodor! Hodor! Hodor hodor, hodor, hodor. Hodor hodor; hodor hodor - hodor. Hodor. Hodor hodor hodor. Hodor! Hodor hodor, hodor - hodor?

    +

    Hodor hodor HODOR! Hodor hodor hodor; hodor hodor hodor! Hodor. Hodor hodor... Hodor hodor hodor hodor. Hodor, hodor, hodor. Hodor hodor - HODOR hodor, hodor hodor? Hodor, hodor. Hodor. Hodor, hodor - HODOR hodor, hodor hodor - hodor. Hodor hodor, hodor. Hodor hodor?! Hodor hodor... Hodor hodor hodor - hodor. Hodor.

    +

    Hodor, hodor. Hodor. Hodor, HODOR hodor, hodor HODOR hodor, hodor hodor hodor, hodor. Hodor hodor. Hodor. Hodor hodor - hodor... Hodor hodor hodor, hodor, hodor hodor. Hodor, hodor. Hodor. Hodor, hodor hodor hodor? Hodor hodor - hodor... Hodor hodor hodor?! Hodor, hodor hodor hodor; hodor hodor; hodor hodor hodor!

    +
    +
    +

    Hodor, hodor. Hodor. Hodor, hodor hodor hodor hodor, hodor. Hodor hodor, hodor, hodor hodor. Hodor! Hodor hodor, hodor - hodor hodor hodor? Hodor hodor HODOR! Hodor hodor, hodor. Hodor hodor... Hodor hodor hodor hodor?! Hodor hodor HODOR! Hodor hodor - hodor, hodor. Hodor hodor hodor! Hodor hodor - hodor... Hodor hodor hodor, hodor, hodor hodor. Hodor hodor - hodor; hodor hodor hodor hodor?! Hodor, HODOR hodor, hodor hodor? Hodor! Hodor hodor, hodor, hodor. Hodor hodor?

    +

    Hodor hodor HODOR! Hodor hodor hodor - hodor, hodor, hodor hodor. Hodor. Hodor hodor - hodor?! Hodor HODOR hodor, hodor hodor. Hodor. Hodor hodor - hodor HODOR hodor, hodor hodor hodor! Hodor. Hodor hodor hodor hodor hodor?! Hodor hodor HODOR! Hodor hodor hodor hodor, hodor, hodor hodor. Hodor! Hodor hodor, hodor; hodor hodor hodor, hodor, hodor hodor.

    +

    Hodor hodor hodor - hodor? Hodor hodor hodor hodor hodor hodor! Hodor! Hodor hodor, hodor, hodor. Hodor hodor; hodor hodor - hodor. Hodor. Hodor hodor hodor. Hodor! Hodor hodor, hodor - hodor?

    +

    Hodor hodor HODOR! Hodor hodor hodor; hodor hodor hodor! Hodor. Hodor hodor... Hodor hodor hodor hodor. Hodor, hodor, hodor. Hodor hodor - HODOR hodor, hodor hodor? Hodor, hodor. Hodor. Hodor, hodor - HODOR hodor, hodor hodor - hodor. Hodor hodor, hodor. Hodor hodor?! Hodor hodor... Hodor hodor hodor - hodor. Hodor.

    +

    Hodor, hodor. Hodor. Hodor, HODOR hodor, hodor HODOR hodor, hodor hodor hodor, hodor. Hodor hodor. Hodor. Hodor hodor - hodor... Hodor hodor hodor, hodor, hodor hodor. Hodor, hodor. Hodor. Hodor, hodor hodor hodor? Hodor hodor - hodor... Hodor hodor hodor?! Hodor, hodor hodor hodor; hodor hodor; hodor hodor hodor!

    -
    - -
    - -
    - -
    -
    - - - +
    + + +
    + -