From dbb805f448f4ee70f2bc0d42979adde5a8bdf649 Mon Sep 17 00:00:00 2001 From: Tilo Mitra Date: Thu, 9 May 2013 17:56:32 -0400 Subject: [PATCH] Initial drop --- .gitignore | 3 + Gruntfile.js | 219 +++++++++ HISTORY.md | 2 + LICENSE.md | 52 ++ README.md | 4 +- package.json | 11 + src/base/HISTORY.md | 2 + src/base/LICENSE.md | 7 + src/base/README.md | 27 ++ src/base/css/normalize-context.css | 238 +++++++++ src/base/css/normalize.css | 534 +++++++++++++++++++++ src/base/tests/manual/test.html | 354 ++++++++++++++ src/buttons/css/button-core.css | 27 ++ src/buttons/css/button.css | 81 ++++ src/buttons/tests/manual/button.html | 120 +++++ src/forms/HISTORY.md | 2 + src/forms/LICENSE.md | 40 ++ src/forms/README.md | 4 + src/forms/css/forms-core.css | 155 ++++++ src/forms/css/forms-responsive.css | 31 ++ src/forms/css/forms.css | 167 +++++++ src/forms/tests/manual/index.html | 343 +++++++++++++ src/grids/HISTORY.md | 2 + src/grids/README.md | 9 + src/grids/css/cssgrids-base.css | 24 + src/grids/css/cssgrids-responsive-base.css | 54 +++ src/grids/css/cssgrids-units.css | 147 ++++++ src/grids/tests/manual/responsive.html | 175 +++++++ src/menus/HISTORY.md | 2 + src/menus/README.md | 4 + src/menus/css/list-core.css | 111 +++++ src/menus/css/list-paginator.css | 31 ++ src/menus/css/list-responsive.css | 14 + src/menus/css/list.css | 83 ++++ src/menus/tests/manual/list.html | 208 ++++++++ src/tables/HISTORY.md | 2 + src/tables/README.md | 4 + src/tables/css/tables.css | 82 ++++ src/tables/tests/manual/index.html | 289 +++++++++++ 39 files changed, 3662 insertions(+), 2 deletions(-) create mode 100644 .gitignore create mode 100644 Gruntfile.js create mode 100644 HISTORY.md create mode 100644 LICENSE.md create mode 100644 package.json create mode 100644 src/base/HISTORY.md create mode 100644 src/base/LICENSE.md create mode 100644 src/base/README.md create mode 100644 src/base/css/normalize-context.css create mode 100644 src/base/css/normalize.css create mode 100644 src/base/tests/manual/test.html create mode 100644 src/buttons/css/button-core.css create mode 100644 src/buttons/css/button.css create mode 100644 src/buttons/tests/manual/button.html create mode 100644 src/forms/HISTORY.md create mode 100644 src/forms/LICENSE.md create mode 100644 src/forms/README.md create mode 100644 src/forms/css/forms-core.css create mode 100644 src/forms/css/forms-responsive.css create mode 100644 src/forms/css/forms.css create mode 100644 src/forms/tests/manual/index.html create mode 100644 src/grids/HISTORY.md create mode 100644 src/grids/README.md create mode 100644 src/grids/css/cssgrids-base.css create mode 100644 src/grids/css/cssgrids-responsive-base.css create mode 100644 src/grids/css/cssgrids-units.css create mode 100644 src/grids/tests/manual/responsive.html create mode 100644 src/menus/HISTORY.md create mode 100644 src/menus/README.md create mode 100644 src/menus/css/list-core.css create mode 100644 src/menus/css/list-paginator.css create mode 100644 src/menus/css/list-responsive.css create mode 100644 src/menus/css/list.css create mode 100644 src/menus/tests/manual/list.html create mode 100644 src/tables/HISTORY.md create mode 100644 src/tables/README.md create mode 100644 src/tables/css/tables.css create mode 100644 src/tables/tests/manual/index.html diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..ea90594 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +.DS_Store +build/ +node_modules/ diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 0000000..0324c21 --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,219 @@ +var path = require('path'), + parserlib = require('parserlib'); + +module.exports = function (grunt) { + +// -- Config ------------------------------------------------------------------- + +grunt.initConfig({ + + pkg: grunt.file.readJSON('package.json'), + + // -- Constants ------------------------------------------------------------ + + NORMALIZE_LIB: path.join(process.cwd(), '../', 'normalize.css'), + BASE_DIR : 'src/base/', + PREFIX : '.k', + + COMMENT: '/* THIS FILE IS GENERATED BY A BUILD SCRIPT - DO NOT EDIT! */\n', + LICENSE: [ + '/*! normalize.css v1.1.1 | MIT License | git.io/normalize */', + '/*! Copyright (c) Nicolas Gallagher and Jonathan Neal */', + '\n' + ].join('\n'), + + // -- CSSMin Config -------------------------------------------------------- + + cssmin: { + options: { + report: 'gzip' + }, + + base: { + files: { + 'build/base/base-min.css' : ['src/base/css/normalize.css'], + 'build/base/base-context-min.css': ['src/base/css/normalize-context.css'] + } + }, + + forms: { + files: { + 'build/forms/forms-min.css' : ['src/forms/css/*.css'], + 'build/forms/forms-nr-min.css': ['src/forms/css/forms-core.css', + 'src/forms/css/forms.css'] + } + }, + + grids: { + files: { + 'build/grids/grids-min.css' : ['src/grids/css/*.css'], + 'build/grids/grids-nr-min.css': ['src/grids/css/cssgrids-base.css', + 'src/grids/css/cssgrids-units.css'] + } + }, + + menus: { + files: { + 'build/menus/menus-min.css' : ['src/menus/css/*.css'], + 'build/menus/menus-nr-min.css': ['src/menus/css/list-core.css', + 'src/menus/css/list.css', + 'src/menus/css/list-paginator.css'] + } + }, + + tables: { + files: { + 'build/tables/tables-min.css': ['src/tables/css/*.css'] + } + }, + + buttons: { + files: { + 'build/buttons/buttons-min.css': ['src/buttons/css/*.css'] + } + } + } +}); + +// -- Main Tasks --------------------------------------------------------------- + +grunt.loadNpmTasks('grunt-contrib-cssmin'); + +grunt.registerTask('default', ['cssmin']); +grunt.registerTask('base', ['cssmin:base']); +grunt.registerTask('buttons', ['cssmin:buttons']); +grunt.registerTask('forms', ['cssmin:forms']); +grunt.registerTask('grids', ['cssmin:grids']); +grunt.registerTask('menus', ['cssmin:menus']); +grunt.registerTask('tables', ['cssmin:tables']); + +// -- Import Tasks ------------------------------------------------------------- + +grunt.registerTask('base-clean', 'Clean Source Tree', function () { + var files = grunt.file.expand(grunt.config('BASE_DIR') + 'css/*.css'); + + files.forEach(function (file) { + grunt.log.writeln('Deleting: '.red + file.cyan); + grunt.file['delete'](file); + }); +}); + +grunt.registerTask('base-import-css', 'Import Normalize CSS Files', function () { + var file = 'normalize.css', + src = path.join(grunt.config('NORMALIZE_LIB'), file), + dest = path.join(grunt.config('BASE_DIR'), 'css', file); + + if (!grunt.file.exists(src)) { + grunt.fail.fatal('Did you clone normalize.css yet?'); + } + + grunt.log.writeln('Copying: '.green + file.cyan + ' to ' + dest.cyan); + grunt.file.write(dest, grunt.config('COMMENT') + grunt.file.read(src)); +}); + +grunt.registerTask('base-import-tests', 'Import Normalize Tests', function () { + var file = 'test.html', + src = path.join(grunt.config('NORMALIZE_LIB'), file), + dest = path.join(grunt.config('BASE_DIR'), 'tests', 'manual', file); + + if (!grunt.file.exists(src)) { + grunt.fail.fatal('Did you clone normalize.css yet?'); + } + + grunt.log.writeln('Copying: '.green + file.cyan + ' to ' + dest.cyan); + grunt.file.copy(src, dest); +}); + +grunt.registerTask('base-create-context', 'Make context version', function () { + var context = grunt.config('COMMENT') + grunt.config('LICENSE'), + done = this.async(), + parser = new parserlib.css.Parser(), + raw = grunt.file.read(grunt.config('BASE_DIR') + 'css/normalize.css'); + + parser.addListener('startstylesheet', function () { + grunt.log.ok('Starting to parse style sheet...'); + }); + + parser.addListener('endstylesheet', function () { + var contextFile = path.join(grunt.config('BASE_DIR'), 'css', 'normalize-context.css'); + + grunt.log.ok('Finished parsing style sheet...'); + grunt.file.write(contextFile, context); + grunt.log.ok('Done creating context build!'); + done(); + }); + + // Fired right before CSS properties are parsed for a certain rule. Go + // through and add all the selectors to the `css` string. + parser.addListener('startrule', function (event) { + var prefix = grunt.config('PREFIX'); + + event.selectors.forEach(function (selector, i) { + var nextSelector = event.selectors[i + 1]; + + // If the selector does not contain the html selector, we can go + // ahead and prepend .k in front of it. + if (selector.text.indexOf('html') === -1) { + context += prefix + ' ' + selector.text; + } else if (selector.text.indexOf('html') !== -1) { + // If it contains `html`, replace the `html` with `.k`. Replace + // multiple spaces with a single space. This is for the case + // where `html input[type='button']` comes through as + // `html input[type='button']`. + context += selector.text.replace('html', prefix).replace(/ +/g, ' '); + } + + // If theres another selector, add a comma. + if (nextSelector) { + context += ',\n'; + } else { + // Otherwise, add an opening bracket for properties + context += ' {\n'; + } + }); + }); + + // Fired right after CSS properties are parsed for a certain rule. Add the + // closing bracket to end the CSS Rule. + parser.addListener('endrule', function (event) { + context += '}\n'; + }); + + // Fired for each property that the parser encounters. Add these properties + // to the `css` string with 4 spaces. + parser.addListener('property', function (event) { + // Add 4 spaces tab. + context += ' ' + event.property + ': ' + event.value + ';\n'; + }); + + // Do the parsing. + parser.parse(raw); + +}); + +grunt.registerTask('base-prep', 'Prep Normalize.css import', function () { + var normalize = grunt.config('NORMALIZE_LIB'); + + grunt.log.write('Looking for Normalize.css'.green); + + if (!grunt.file.exists(normalize)) { + grunt.log.writeln(''); + grunt.fail.fatal('Could not locate Normalize.css repo: ' + normalize + '\nDid you clone it as a sibling of the Kimono'); + } + + grunt.log.writeln('...OK'.white); +}); + +grunt.registerTask('base-all', [ + 'base-prep', + 'base-clean', + 'base-import', + 'base-create-context' +]); + +grunt.registerTask('base-import', [ + 'base-import-css', + 'base-import-tests' +]); + +}; diff --git a/HISTORY.md b/HISTORY.md new file mode 100644 index 0000000..bb11a9a --- /dev/null +++ b/HISTORY.md @@ -0,0 +1,2 @@ +Kimono Change History +===================== diff --git a/LICENSE.md b/LICENSE.md new file mode 100644 index 0000000..03cc2ef --- /dev/null +++ b/LICENSE.md @@ -0,0 +1,52 @@ +Software License Agreement (BSD License) +======================================== + +Copyright 2013 Yahoo! Inc. All rights reserved. + +Redistribution and use in source and binary forms, with or without +modification, are permitted provided that the following conditions are met: + + * Redistributions of source code must retain the above copyright + notice, this list of conditions and the following disclaimer. + + * Redistributions in binary form must reproduce the above copyright + notice, this list of conditions and the following disclaimer in the + documentation and/or other materials provided with the distribution. + + * Neither the name of the Yahoo! Inc. nor the + names of its contributors may be used to endorse or promote products + derived from this software without specific prior written permission. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND +ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED +WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE +DISCLAIMED. IN NO EVENT SHALL YAHOO! INC. BE LIABLE FOR ANY +DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES +(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; +LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND +ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS +SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. + + +Normalize.css License +===================== + +Copyright (c) Nicolas Gallagher and Jonathan Neal + +Permission is hereby granted, free of charge, to any person obtaining a copy of +this software and associated documentation files (the "Software"), to deal in +the Software without restriction, including without limitation the rights to +use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of +the Software, and to permit persons to whom the Software is furnished to do so, +subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS +FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR +COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER +IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN +CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/README.md b/README.md index 8a7ddf7..e4cb033 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,2 @@ -kimono -====== \ No newline at end of file +Kimono +====== diff --git a/package.json b/package.json new file mode 100644 index 0000000..de8d068 --- /dev/null +++ b/package.json @@ -0,0 +1,11 @@ +{ + "name": "Kimono", + "version": "0.0.1", + "private": true, + + "devDependencies": { + "grunt": "~0.4.1", + "parserlib": "~0.2.2", + "grunt-contrib-cssmin": "~0.6.0" + } +} diff --git a/src/base/HISTORY.md b/src/base/HISTORY.md new file mode 100644 index 0000000..6a88c70 --- /dev/null +++ b/src/base/HISTORY.md @@ -0,0 +1,2 @@ +Base Change History +=================== diff --git a/src/base/LICENSE.md b/src/base/LICENSE.md new file mode 100644 index 0000000..1d9e459 --- /dev/null +++ b/src/base/LICENSE.md @@ -0,0 +1,7 @@ +Copyright (c) Nicolas Gallagher and Jonathan Neal + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/src/base/README.md b/src/base/README.md new file mode 100644 index 0000000..ac95e83 --- /dev/null +++ b/src/base/README.md @@ -0,0 +1,27 @@ +Base +==== + +Base comprises of Normalize.css - a modern, HTML5-ready alternative to CSS resets. + +This component is a port of the original Normalize.css project, which can be +found at . + + +Differences +----------- + +Changes are minimal. Base uses Normalize v1.1.1. + + - Create a contextual normalize.css (normalize-context.css) toggled off a parent class-name (.k) + +License +======= + +Copyright (c) Nicolas Gallagher and Jonathan Neal + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.NECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. diff --git a/src/base/css/normalize-context.css b/src/base/css/normalize-context.css new file mode 100644 index 0000000..ee1b593 --- /dev/null +++ b/src/base/css/normalize-context.css @@ -0,0 +1,238 @@ +/* THIS FILE IS GENERATED BY A BUILD SCRIPT - DO NOT EDIT! */ +/*! normalize.css v1.1.1 | MIT License | git.io/normalize */ +/*! Copyright (c) Nicolas Gallagher and Jonathan Neal */ + +.k article, +.k aside, +.k details, +.k figcaption, +.k figure, +.k footer, +.k header, +.k hgroup, +.k main, +.k nav, +.k section, +.k summary { + display: block; +} +.k audio, +.k canvas, +.k video { + display: inline-block; +} +.k audio:not([controls]) { + display: none; + height: 0; +} +.k [hidden] { + display: none; +} +.k { + background: #fff; + color: #000; + font-size: 100%; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} +.k, +.k button, +.k input, +.k select, +.k textarea { + font-family: sans-serif; +} +.k body { + margin: 0; +} +.k a:focus { + outline: thin dotted; +} +.k a:active, +.k a:hover { + outline: 0; +} +.k h1 { + font-size: 2em; + margin: 0.67em 0; +} +.k h2 { + font-size: 1.5em; + margin: 0.83em 0; +} +.k h3 { + font-size: 1.17em; + margin: 1em 0; +} +.k h4 { + font-size: 1em; + margin: 1.33em 0; +} +.k h5 { + font-size: 0.83em; + margin: 1.67em 0; +} +.k h6 { + font-size: 0.67em; + margin: 2.33em 0; +} +.k abbr[title] { + border-bottom: 1px dotted; +} +.k b, +.k strong { + font-weight: bold; +} +.k blockquote { + margin: 1em 40px; +} +.k dfn { + font-style: italic; +} +.k hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} +.k mark { + background: #ff0; + color: #000; +} +.k p, +.k pre { + margin: 1em 0; +} +.k code, +.k kbd, +.k pre, +.k samp { + font-family: monospace , serif; + _font-family: 'courier new' , monospace; + font-size: 1em; +} +.k pre { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; +} +.k q { + quotes: none; +} +.k q:before, +.k q:after { + content: ''; + content: none; +} +.k small { + font-size: 80%; +} +.k sub, +.k sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +.k sup { + top: -0.5em; +} +.k sub { + bottom: -0.25em; +} +.k dl, +.k menu, +.k ol, +.k ul { + margin: 1em 0; +} +.k dd { + margin: 0 0 0 40px; +} +.k menu, +.k ol, +.k ul { + padding: 0 0 0 40px; +} +.k nav ul, +.k nav ol { + list-style: none; + list-style-image: none; +} +.k img { + border: 0; + -ms-interpolation-mode: bicubic; +} +.k svg:not(:root) { + overflow: hidden; +} +.k figure { + margin: 0; +} +.k form { + margin: 0; +} +.k fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} +.k legend { + border: 0; + padding: 0; + white-space: normal; +} +.k button, +.k input, +.k select, +.k textarea { + font-size: 100%; + margin: 0; + vertical-align: baseline; +} +.k button, +.k input { + line-height: normal; +} +.k button, +.k select { + text-transform: none; +} +.k button, +.k input[type="button"], +.k input[type="reset"], +.k input[type="submit"] { + -webkit-appearance: button; + cursor: pointer; +} +.k button[disabled], +.k input[disabled] { + cursor: default; +} +.k input[type="checkbox"], +.k input[type="radio"] { + box-sizing: border-box; + padding: 0; +} +.k input[type="search"] { + -webkit-appearance: textfield; + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + box-sizing: content-box; +} +.k input[type="search"]::-webkit-search-cancel-button, +.k input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} +.k button::-moz-focus-inner, +.k input::-moz-focus-inner { + border: 0; + padding: 0; +} +.k textarea { + overflow: auto; + vertical-align: top; +} +.k table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/src/base/css/normalize.css b/src/base/css/normalize.css new file mode 100644 index 0000000..5fc894c --- /dev/null +++ b/src/base/css/normalize.css @@ -0,0 +1,534 @@ +/* THIS FILE IS GENERATED BY A BUILD SCRIPT - DO NOT EDIT! */ +/*! normalize.css v1.1.1 | MIT License | git.io/normalize */ + +/* ========================================================================== + HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; +} + +/** + * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. + */ + +audio, +canvas, +video { + display: inline-block; + *display: inline; + *zoom: 1; +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4. + * Known issue: no IE 6 support. + */ + +[hidden] { + display: none; +} + +/* ========================================================================== + Base + ========================================================================== */ + +/** + * 1. Prevent system color scheme's background color being used in Firefox, IE, + * and Opera. + * 2. Prevent system color scheme's text color being used in Firefox, IE, and + * Opera. + * 3. Correct text resizing oddly in IE 6/7 when body `font-size` is set using + * `em` units. + * 4. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + background: #fff; /* 1 */ + color: #000; /* 2 */ + font-size: 100%; /* 3 */ + -webkit-text-size-adjust: 100%; /* 4 */ + -ms-text-size-adjust: 100%; /* 4 */ +} + +/** + * Address `font-family` inconsistency between `textarea` and other form + * elements. + */ + +html, +button, +input, +select, +textarea { + font-family: sans-serif; +} + +/** + * Address margins handled incorrectly in IE 6/7. + */ + +body { + margin: 0; +} + +/* ========================================================================== + Links + ========================================================================== */ + +/** + * Address `outline` inconsistency between Chrome and other browsers. + */ + +a:focus { + outline: thin dotted; +} + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* ========================================================================== + Typography + ========================================================================== */ + +/** + * Address font sizes and margins set differently in IE 6/7. + * Address font sizes within `section` and `article` in Firefox 4+, Safari 5, + * and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +h2 { + font-size: 1.5em; + margin: 0.83em 0; +} + +h3 { + font-size: 1.17em; + margin: 1em 0; +} + +h4 { + font-size: 1em; + margin: 1.33em 0; +} + +h5 { + font-size: 0.83em; + margin: 1.67em 0; +} + +h6 { + font-size: 0.67em; + margin: 2.33em 0; +} + +/** + * Address styling not present in IE 7/8/9, Safari 5, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +blockquote { + margin: 1em 40px; +} + +/** + * Address styling not present in Safari 5 and Chrome. + */ + +dfn { + font-style: italic; +} + +/** + * Address differences between Firefox and other browsers. + * Known issue: no IE 6/7 normalization. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/** + * Address styling not present in IE 6/7/8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/** + * Address margins set differently in IE 6/7. + */ + +p, +pre { + margin: 1em 0; +} + +/** + * Correct font family set oddly in IE 6, Safari 4/5, and Chrome. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, serif; + _font-family: 'courier new', monospace; + font-size: 1em; +} + +/** + * Improve readability of pre-formatted text in all browsers. + */ + +pre { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; +} + +/** + * Address CSS quotes not supported in IE 6/7. + */ + +q { + quotes: none; +} + +/** + * Address `quotes` property not supported in Safari 4. + */ + +q:before, +q:after { + content: ''; + content: none; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* ========================================================================== + Lists + ========================================================================== */ + +/** + * Address margins set differently in IE 6/7. + */ + +dl, +menu, +ol, +ul { + margin: 1em 0; +} + +dd { + margin: 0 0 0 40px; +} + +/** + * Address paddings set differently in IE 6/7. + */ + +menu, +ol, +ul { + padding: 0 0 0 40px; +} + +/** + * Correct list images handled incorrectly in IE 7. + */ + +nav ul, +nav ol { + list-style: none; + list-style-image: none; +} + +/* ========================================================================== + Embedded content + ========================================================================== */ + +/** + * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3. + * 2. Improve image quality when scaled in IE 7. + */ + +img { + border: 0; /* 1 */ + -ms-interpolation-mode: bicubic; /* 2 */ +} + +/** + * Correct overflow displayed oddly in IE 9. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* ========================================================================== + Figures + ========================================================================== */ + +/** + * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11. + */ + +figure { + margin: 0; +} + +/* ========================================================================== + Forms + ========================================================================== */ + +/** + * Correct margin displayed oddly in IE 6/7. + */ + +form { + margin: 0; +} + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct color not being inherited in IE 6/7/8/9. + * 2. Correct text not wrapping in Firefox 3. + * 3. Correct alignment displayed oddly in IE 6/7. + */ + +legend { + border: 0; /* 1 */ + padding: 0; + white-space: normal; /* 2 */ + *margin-left: -7px; /* 3 */ +} + +/** + * 1. Correct font size not being inherited in all browsers. + * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5, + * and Chrome. + * 3. Improve appearance and consistency in all browsers. + */ + +button, +input, +select, +textarea { + font-size: 100%; /* 1 */ + margin: 0; /* 2 */ + vertical-align: baseline; /* 3 */ + *vertical-align: middle; /* 3 */ +} + +/** + * Address Firefox 3+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +button, +input { + line-height: normal; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+. + * Correct `select` style inheritance in Firefox 4+ and Opera. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + * 4. Remove inner spacing in IE 7 without affecting normal text inputs. + * Known issue: inner spacing remains in IE 6. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ + *overflow: visible; /* 4 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * 1. Address box sizing set to content-box in IE 8/9. + * 2. Remove excess padding in IE 8/9. + * 3. Remove excess padding in IE 7. + * Known issue: excess padding remains in IE 6. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ + *height: 13px; /* 3 */ + *width: 13px; /* 3 */ +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/** + * Remove inner padding and search cancel button in Safari 5 and Chrome + * on OS X. + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Remove inner padding and border in Firefox 3+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * 1. Remove default vertical scrollbar in IE 6/7/8/9. + * 2. Improve readability and alignment in all browsers. + */ + +textarea { + overflow: auto; /* 1 */ + vertical-align: top; /* 2 */ +} + +/* ========================================================================== + Tables + ========================================================================== */ + +/** + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/src/base/tests/manual/test.html b/src/base/tests/manual/test.html new file mode 100644 index 0000000..26693d5 --- /dev/null +++ b/src/base/tests/manual/test.html @@ -0,0 +1,354 @@ + + + + + + Normalize CSS + + + + + +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ +
+

Heading 1 (in section)

+

Heading 2 (in section)

+

Heading 3 (in section)

+

Heading 4 (in section)

+
Heading 5 (in section)
+
Heading 6 (in section)
+
+ +
+

Heading 1 (in article)

+

Heading 2 (in article)

+

Heading 3 (in article)

+

Heading 4 (in article)

+
Heading 5 (in article)
+
Heading 6 (in article)
+
+ +
+
+

Heading 1 (in hgroup)

+

Heading 2 (in hgroup)

+
+ +
+ +

Text-level semantics

+ + + +

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

+ +
Address: somewhere, world
+ +
+ +
+ +

+ The a element example
+ The abbr element and abbr element with title examples
+ The b element example
+ The cite element example
+ The code element example
+ The del element example
+ The dfn element and dfn element with title examples
+ The em element example
+ The i element example
+ The img element example
+ The ins element example
+ The kbd element example
+ The mark element example
+ The q element inside a q element example
+ The s element example
+ The samp element example
+ The small element example
+ The span element example
+ The strong element example
+ The sub element example
+ The sup element example
+ The u element example
+ The var element example +

+ +

Embedded content

+ +

audio

+ + + + +

img

+ + + + +

svg

+ + + + + +

video

+ + + + +

Interactive content

+ +

details / summary

+
+ More info +

Additional information

+
    +
  • Point 1
    • +
  • Point 2
    • +
+
+ +

Grouping content

+ +

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

+ +

pre

+ + 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me.
+ + 
<html>
+    <head>
+    </head>
+    <body>
+        <div class="main"> <div>
+    </body>
+</html>
+ +

blockquote

+ +
+

Some sort of famous witty quote marked up with a <blockquote> and a child <p> element.

+
+ +
Even better philosophical quote marked up with just a <blockquote> element.
+ +

ordered list

+ +
    +
  1. list item 1
    2. +
  2. list item 1 +
      +
    1. list item 2
      2. +
    2. list item 2 +
        +
      1. list item 3
        2. +
      2. list item 3
        3. +
      +
      3. +
    3. list item 2
      4. +
    4. list item 2
      5. +
    +
    3. +
  3. list item 1
    4. +
  4. list item 1
    5. +
+ +

unordered list

+ + + +

description list

+ +
+
Description name
+
Description value
+
Description name
+
Description value
+
Description value
+
Description name
+
Description name
+
Description value
+
+ +

figure

+ +
+ +
Figcaption content
+
+ +

Tabular data

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Jimi Hendrix - albums
AlbumYearPrice
AlbumYearPrice
Are You Experienced1967$10.00
Axis: Bold as Love1967$12.00
Electric Ladyland1968$10.00
Band of Gypsys1970$12.00
+ +

Forms

+ +
+
+ Inputs as descendents of labels (form legend). This doubles up as a long legend that can test word wrapping. +

+

+

+

+

+

+

+ +

+

+

+

+ +

+

+
+ +
+ Inputs as siblings of labels +

+

+

+

+

+

+

+

+ +

+

+

+

+ +

+

+
+ +
+ Clickable inputs and buttons +

+

+

+

+

+ + +

+

+

+

+
+ +
+ box-sizing tests +
+
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+
+
+
+ + + diff --git a/src/buttons/css/button-core.css b/src/buttons/css/button-core.css new file mode 100644 index 0000000..72bd691 --- /dev/null +++ b/src/buttons/css/button-core.css @@ -0,0 +1,27 @@ +.k-button { + /* Structure */ + display: inline-block; + *display: inline; /*IE 6/7*/ + zoom: 1; + line-height: normal; + white-space: nowrap; + vertical-align: baseline; + text-align: center; + cursor: pointer; + -webkit-user-drag: none; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + + +/* Firefox: Get rid of the inner focus border */ +.k-button::-moz-focus-inner{ + padding: 0; + border: 0; +} + +a:focus { + outline: none; +} + diff --git a/src/buttons/css/button.css b/src/buttons/css/button.css new file mode 100644 index 0000000..79a075f --- /dev/null +++ b/src/buttons/css/button.css @@ -0,0 +1,81 @@ +.k-button { + font-size: 100%; + *font-size: 90%; /*IE 6/7 - To reduce IE's oversized button text*/ + *overflow: visible; /*IE 6/7 - Because of IE's overly large left/right padding on buttons */ + padding: 0.5em 1.5em 0.5em; + color: #444; /* rgba not supported (IE 8) */ + color: rgba(0, 0, 0, 0.80); /* rgba supported */ + *color: #444; /* IE 6 & 7 */ + border: 1px solid #999; /*IE 6/7/8*/ + border: none rgba(0, 0, 0, 0); /*IE9 + everything else*/ + background-color: #E6E6E6; + text-decoration: none; + -webkit-font-smoothing: antialiased; + + /* Transitions */ + -webkit-transition: 0.1s linear -webkit-box-shadow; + -moz-transition: 0.1s linear -moz-box-shadow; + -ms-transition: 0.1s linear box-shadow; + -o-transition: 0.1s linear box-shadow; + transition: 0.1s linear box-shadow; +} + + +.k-button-hover, +.k-button:hover { + + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#00000000', GradientType=0); + + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0,0,0, 0.05)), to(rgba(0,0,0, 0.05))); + background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.15)); + background-image: -moz-linear-gradient(top, rgba(0,0,0, 0.05) 0%, rgba(0,0,0, 0.05)); + background-image: -ms-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.15)); + background-image: -o-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.05)); + background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.05)); +} + +.k-button-active, +.k-button:active { + -webkit-box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset; + -moz-box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset; + box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset; +} + +.k-button[disabled], +.k-button-disabled, +.k-button-disabled:hover, +.k-button-disabled:active { + border: none; + background-image: none; + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); + filter: alpha(opacity=40); + -khtml-opacity: 0.40; + -moz-opacity: 0.40; + opacity: 0.40; + cursor: not-allowed; + box-shadow: none; +} + +.k-button-hidden { + display:none; +} + +/* Firefox: Get rid of the inner focus border */ +.k-button::-moz-focus-inner{ + padding: 0; + border: 0; +} + + +/* Sam */ +.k-button-primary, +.k-button-selected, +a.k-button-primary, +a.k-button-selected { + background-color: rgb(0, 120, 231); + color: #fff; +} + +.k-button:-moz-focusring { + outline-color: rgba(0, 0, 0, 0.85); +} diff --git a/src/buttons/tests/manual/button.html b/src/buttons/tests/manual/button.html new file mode 100644 index 0000000..bc303d3 --- /dev/null +++ b/src/buttons/tests/manual/button.html @@ -0,0 +1,120 @@ + + + + Button Manual Tests + + + + + + + + + + +

Regular Buttons

+ + An anchor Button + + +

Disabled Buttons

+ + An anchor Button + + +

Active Buttons

+ + An anchor Button + + +

Primary/Selected Buttons

+ + An anchor Button + + +

Customizing Buttons

+

+ + An anchor Button +

+

+ + Custom Button +

+ +

+ + Custom Button +

+ +

+ + + + + Start Playing Movie + +

+ + +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non + proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+ + diff --git a/src/forms/HISTORY.md b/src/forms/HISTORY.md new file mode 100644 index 0000000..1ddc1fb --- /dev/null +++ b/src/forms/HISTORY.md @@ -0,0 +1,2 @@ +Forms Change History +==================== diff --git a/src/forms/LICENSE.md b/src/forms/LICENSE.md new file mode 100644 index 0000000..4d3a826 --- /dev/null +++ b/src/forms/LICENSE.md @@ -0,0 +1,40 @@ +Software License Agreement (BSD License) +======================================== + +Copyright 2012 Yahoo! Inc. All rights reserved. +----------------------------------------------- + +Redistribution and use in source and binary forms, with or without +modification, are permitted provided that the following conditions are met: + * Redistributions of source code must retain the above copyright + notice, this list of conditions and the following disclaimer. + * Redistributions in binary form must reproduce the above copyright + notice, this list of conditions and the following disclaimer in the + documentation and/or other materials provided with the distribution. + * Neither the name of the Yahoo! Inc. nor the + names of its contributors may be used to endorse or promote products + derived from this software without specific prior written permission. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND +ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED +WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE +DISCLAIMED. IN NO EVENT SHALL YAHOO! INC. BE LIABLE FOR ANY +DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES +(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; +LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND +ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS +SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. + + +Normalize.css License +===================== + +Copyright (c) Nicolas Gallagher and Jonathan Neal +------------------------------------------------- + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/src/forms/README.md b/src/forms/README.md new file mode 100644 index 0000000..44da512 --- /dev/null +++ b/src/forms/README.md @@ -0,0 +1,4 @@ +Forms +===== + +Super simple CSS for HTML Form Elements. diff --git a/src/forms/css/forms-core.css b/src/forms/css/forms-core.css new file mode 100644 index 0000000..526c2cb --- /dev/null +++ b/src/forms/css/forms-core.css @@ -0,0 +1,155 @@ +/*! Copyright 2013 Yahoo! Inc. http://yuilibrary.com/license/ */ +/* This page lists core form styles adopted from Normalize.css. */ +/*! Copyright (c) Nicolas Gallagher and Jonathan Neal */ + +/*! normalize.css v1.1.0 | MIT License | git.io/normalize */ + +/* This page has Normalize.css form-specific style rules applied to a .k-form context */ + +/* ========== + Forms Core + =========*/ + +/* + * Corrects margin displayed oddly in IE 6/7. + */ + +.k-form { + margin: 0; +} + +/* + * Define consistent border, margin, and padding. + */ + +.k-form fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/* + * 1. Corrects color not being inherited in IE 6/7/8/9. + * 2. Corrects text not wrapping in Firefox 3. + * 3. Corrects alignment displayed oddly in IE 6/7. + */ + +.k-form legend { + border: 0; /* 1 */ + padding: 0; + white-space: normal; /* 2 */ + *margin-left: -7px; /* 3 */ +} + +/* + * 1. Corrects font size not being inherited in all browsers. + * 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5, + * and Chrome. + * 3. Improves appearance and consistency in all browsers. + */ + +.k-form button, +.k-form input, +.k-form select, +.k-form textarea { + font-size: 100%; /* 1 */ + margin: 0; /* 2 */ + vertical-align: baseline; /* 3 */ + *vertical-align: middle; /* 3 */ +} + +/* + * Addresses Firefox 3+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +.k-form button, +.k-form input { + line-height: normal; +} + +/* + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Corrects inability to style clickable `input` types in iOS. + * 3. Improves usability and consistency of cursor style between image-type + * `input` and others. + * 4. Removes inner spacing in IE 7 without affecting normal text inputs. + * Known issue: inner spacing remains in IE 6. + */ + +.k-form button, +.k-form input[type="button"], /* 1 */ +.k-form input[type="reset"], +.k-form input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ + *overflow: visible; /* 4 */ +} + +/* + * Re-set default cursor for disabled elements. + */ + +.k-form button[disabled], +.k-form input[disabled] { + cursor: default; +} + +/* + * 1. Addresses box sizing set to content-box in IE 8/9. + * 2. Removes excess padding in IE 8/9. + * 3. Removes excess padding in IE 7. + * Known issue: excess padding remains in IE 6. + */ + +.k-form input[type="checkbox"], +.k-form input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ + *height: 13px; /* 3 */ + *width: 13px; /* 3 */ +} + +/* + * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome. + * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome + * (include `-moz` to future-proof). + */ + +.k-form input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/* + * Removes inner padding and search cancel button in Safari 5 and Chrome + * on OS X. + */ + +.k-form input[type="search"]::-webkit-search-cancel-button, +.k-form input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* + * Removes inner padding and border in Firefox 3+. + */ + +.k-form button::-moz-focus-inner, +.k-form input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/* + * 1. Removes default vertical scrollbar in IE 6/7/8/9. + * 2. Improves readability and alignment in all browsers. + */ + +.k-form textarea { + overflow: auto; /* 1 */ + vertical-align: top; /* 2 */ +} diff --git a/src/forms/css/forms-responsive.css b/src/forms/css/forms-responsive.css new file mode 100644 index 0000000..00852d1 --- /dev/null +++ b/src/forms/css/forms-responsive.css @@ -0,0 +1,31 @@ +@media only screen and (max-width : 480px) { + .k-form button[type='submit'] { + margin: 0.7em 0 0; + } + + .k-form input[type='text'], .k-form button, .k-form label { + margin-bottom: 0.3em; + display: block; + } + + .k-group input[type='text'] { + margin-bottom: 0; + } + + .k-form-aligned .k-control-group label { + margin-bottom: 0.3em; + text-align: left; + display: block; + width: 100%; + } + + .k-form-aligned .k-controls { + margin: 1.5em 0 0 0; + } + + .k-form .k-help-inline { + display: block; + font-size: 80%; + padding: 0.2em 0 0.8em; /* increased bottom padding to make it group with its related input element */ + } +} diff --git a/src/forms/css/forms.css b/src/forms/css/forms.css new file mode 100644 index 0000000..907e30d --- /dev/null +++ b/src/forms/css/forms.css @@ -0,0 +1,167 @@ +.k-form input, +.k-form select { + padding: 0.5em 0.6em; + display: inline-block; + border: 1px solid #ccc; + font-size: 0.8em; + box-shadow: inset 0 1px 3px #ddd; + border-radius: 4px; + -webkit-transition: 0.3s linear border; + -moz-transition: 0.3s linear border; + -ms-transition: 0.3s linear border; + -o-transition: 0.3s linear border; + transition: 0.3s linear border; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + -webkit-font-smoothing: antialiased; +} + +.k-form input:focus, +.k-form select:focus { + outline: 0; + outline: thin dotted \9; /* IE6-9 */ + border-color: #129FEA; +} +.k-form .k-checkbox, +.k-form .k-radio { + margin: 0.5em 0; + display: block; +} +.k-form input[disabled], +.k-form select[disabled], +.k-form textarea[disabled], +.k-form input[readonly], +.k-form select[readonly], +.k-form textarea[readonly] { + cursor: not-allowed; + background-color: #eaeded; + color: #cad2d3; + border-color: transparent; +} +.k-form input:focus:invalid, +.k-form textarea:focus:invalid, +.k-form select:focus:invalid { + color: #b94a48; + border: 1px solid #ee5f5b; +} +.k-form input:focus:invalid:focus, +.k-form textarea:focus:invalid:focus, +.k-form select:focus:invalid:focus { + border-color: #e9322d; +} +.k-form select { + border: 1px solid #ccc; + background-color: white; +} +.k-form select[multiple] { + height: auto; +} +.k-form label { + margin: 0.5em 0 0.2em; + color: #999; + font-size:90%; +} +.k-form fieldset { + margin: 0; + padding: 0.35em 0 0.75em; + border: 0; +} +.k-form legend { + display: block; + width: 100%; + padding: 0.3em 0; + margin-bottom: 0.3em; + font-size: 125%; + color: #333; + border-bottom: 1px solid #e5e5e5; +} + +.k-form.k-form-stacked input[type='text'], +.k-form.k-form-stacked select, +.k-form.k-form-stacked label { + display: block; +} + +.k-form-aligned input, +.k-form-aligned textarea, +.k-form-aligned select, +.k-form-aligned .k-help-inline { + display: inline-block; + *display: inline; /* IE7 inline-block hack */ + *zoom: 1; + vertical-align: middle; +} + +/* aligned Forms */ +.k-form-aligned .k-control-group { + margin-bottom: 0.5em; +} +.k-form-aligned .k-control-group label { + text-align: right; + display: inline-block; + vertical-align: middle; + width: 10em; + margin: 0 1em 0 0; +} +.k-form-aligned .k-controls { + margin: 1.5em 0 0 10em; +} + +/* Rounded Inputs */ +.k-form .k-input-rounded { + border-radius: 20px; + padding-left:1em; +} + +/* Grouped Inputs */ +.k-form .k-group fieldset { + margin-bottom: 10px; +} +.k-form .k-group input { + display: block; + padding: 10px; + margin: 0; + border-radius: 0; + position: relative; + top: -1px; +} +.k-form .k-group input:focus { + z-index: 2; +} +.k-form .k-group input:first-child { + top: 1px; + border-radius: 4px 4px 0 0; +} +.k-form .k-group input:last-child { + top: -2px; + border-radius: 0 0 4px 4px; +} +.k-form .k-group button { + margin: 0.35em 0; +} + +.k-form .k-input-1 { + width: 100%; +} +.k-form .k-input-2-3 { + width: 66%; +} +.k-form .k-input-1-2 { + width: 50%; +} +.k-form .k-input-1-3 { + width: 33%; +} +.k-form .k-input-1-4 { + width: 25%; +} + +/* Inline help for forms */ +.k-form .k-help-inline { + display: inline-block; + padding-left: 0.3em; + color: #666; + vertical-align: middle; + font-size: 90%; +} diff --git a/src/forms/tests/manual/index.html b/src/forms/tests/manual/index.html new file mode 100644 index 0000000..fc5159f --- /dev/null +++ b/src/forms/tests/manual/index.html @@ -0,0 +1,343 @@ + + + + + + Forms CSS + + + + + + + + + + +
+ +

Kimono Forms CSS

+

Simple styling for HTML Form elements.

+ +
+ +
+ +

+ CSSForm is a YUI module that makes it easy to display good looking forms on your website. +

+ + + +

Default Form

+ +
+
+ A default inline form. + + + + +
+
+ +

Multi-Column Form (with YUI Grids)

+ +

+ Multi-column forms such as the one below can be created by pulling down YUI Grids. +

+ +
+
+ Legend + +
+
+ + +
+
+ + +
+
+ + +
+ +
+ + +
+ +
+ + +
+
+ + +
+
+ + +

Stacked Form

+ +

+ Apply stacked label styling to any form by applying the k-form-stacked classname. +

+
+
+ Legend + + + + + + + + + + + + + +
+
+ +

Aligned Form

+ +

Aligned forms are great for standard forms that look well-aligned. The labels are right-aligned against the form input controls.

+ +
+
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+
+ +

Grouped Inputs

+ +

Grouped inputs are great for grouping small sets of text-based input elements. They work well for sign-up forms, and look natural on mobile devices.

+ +
+
+ + + +
+
+ + + +
+
+ + + + +

Input Sizing

+ +

You can take advantage of YUI Grids and the k-input-block class to create fluid width inputs in practically any size that you want.

+ +
+
+
+
+
+
+
+ +
+
+
+ +
+
+ +
+ + +
+ +
+
+ +
+ + +
+ +
+
+ +
+
+ +
+
+ +
+ + +
+ +
+
+ +
+
+ +
+ +
+ +
+
+
+ +

Invalid Inputs

+

Add the required attribute to any form control.

+
+ +
+ +

Disabled Inputs

+

Add the disabled attribute to any form control.

+
+ +
+ +

Rounded Form

+

Add the k-input-rounded classname to any form control.

+ +
+ + +
+ + +

Selects

+
+ + + + +
+ +

Checkboxes and Radios

+
+ + + + +
+
+ + + + diff --git a/src/grids/HISTORY.md b/src/grids/HISTORY.md new file mode 100644 index 0000000..97d38a7 --- /dev/null +++ b/src/grids/HISTORY.md @@ -0,0 +1,2 @@ +Grids Change History +==================== diff --git a/src/grids/README.md b/src/grids/README.md new file mode 100644 index 0000000..94b5cf0 --- /dev/null +++ b/src/grids/README.md @@ -0,0 +1,9 @@ +Grids +===== + +This foundational grid provides a simple system for layout out content. The +basic components are "grids" and "units". A "grid" (k-g) contains one or +more "units" (k-u). The type of "unit" chosen describes how it should be +sized (e.g. "k-u-1-2" takes up half the grid, "k-u-1-3" takes up +one-third, et cetera). The only constrains for Kimono Grids are that all "units" +are children of a "grid". diff --git a/src/grids/css/cssgrids-base.css b/src/grids/css/cssgrids-base.css new file mode 100644 index 0000000..acf2c13 --- /dev/null +++ b/src/grids/css/cssgrids-base.css @@ -0,0 +1,24 @@ +.k-g { + letter-spacing: -0.31em; /* Webkit: collapse white-space between units */ + *letter-spacing: normal; /* reset IE < 8 */ + *word-spacing: -0.43em; /* IE < 8: collapse white-space between units */ + text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */ +} + +/* Opera as of 12 on Windows needs word-spacing. + The ".opera-only" selector is used to prevent actual prefocus styling + and is not required in markup. +*/ +.opera-only :-o-prefocus, +.k-g { + word-spacing: -0.43em; +} + +.k-u { + display: inline-block; + zoom: 1; *display: inline; /* IE < 8: fake inline-block */ + letter-spacing: normal; + word-spacing: normal; + vertical-align: top; + text-rendering: auto; +} diff --git a/src/grids/css/cssgrids-responsive-base.css b/src/grids/css/cssgrids-responsive-base.css new file mode 100644 index 0000000..2f4f921 --- /dev/null +++ b/src/grids/css/cssgrids-responsive-base.css @@ -0,0 +1,54 @@ +.k-g-r { + letter-spacing: -0.31em; + *letter-spacing: normal; + *word-spacing: -0.43em; +} + +/* Opera as of 12 on Windows needs word-spacing. + The ".opera-only" selector is used to prevent actual prefocus styling + and is not required in markup. +*/ +.opera-only :-o-prefocus, +.k-g-r { + word-spacing: -0.43em; +} + +.k-g-r img { + max-width: 100%; +} + +@media (min-width:980px) { + .k-visible-phone { + display: none; + } + .k-visible-tablet { + display: none; + } + .k-hidden-desktop { + display: none; + } +} +@media (max-width:480px) { + .k-g-r > [class ^= "k-u"] { + width: 100%; + } +} +@media (max-width:767px) { + .k-g-r > [class ^= "k-u"] { + width: 100%; + } + .k-hidden-phone { + display: none; + } + .k-visible-desktop { + display: none; + } +} +@media (min-width:768px) and (max-width:979px) { + .k-hidden-tablet { + display: none; + } + .k-visible-desktop { + display: none; + } +} diff --git a/src/grids/css/cssgrids-units.css b/src/grids/css/cssgrids-units.css new file mode 100644 index 0000000..bffccc0 --- /dev/null +++ b/src/grids/css/cssgrids-units.css @@ -0,0 +1,147 @@ +.k-u-1, +.k-u-1-2, +.k-u-1-3, +.k-u-2-3, +.k-u-1-4, +.k-u-3-4, +.k-u-1-5, +.k-u-2-5, +.k-u-3-5, +.k-u-4-5, +.k-u-1-6, +.k-u-5-6, +.k-u-1-8, +.k-u-3-8, +.k-u-5-8, +.k-u-7-8, +.k-u-1-12, +.k-u-5-12, +.k-u-7-12, +.k-u-11-12, +.k-u-1-24, +.k-u-5-24, +.k-u-7-24, +.k-u-11-24, +.k-u-13-24, +.k-u-17-24, +.k-u-19-24, +.k-u-23-24 { + display: inline-block; + zoom: 1; *display: inline; /* IE < 8: fake inline-block */ + letter-spacing: normal; + word-spacing: normal; + vertical-align: top; + text-rendering: auto; +} + +.k-u-1 { + display: block; +} + +.k-u-1-2 { + width: 50%; +} + +.k-u-1-3 { + width: 33.33333%; +} + +.k-u-2-3 { + width: 66.66666%; +} + +.k-u-1-4 { + width: 25%; +} + +.k-u-3-4 { + width: 75%; +} + +.k-u-1-5 { + width: 20%; +} + +.k-u-2-5 { + width: 40%; +} + +.k-u-3-5 { + width: 60%; +} + +.k-u-4-5 { + width: 80%; +} + +.k-u-1-6 { + width: 16.656%; +} + +.k-u-5-6 { + width: 83.33%; +} + +.k-u-1-8 { + width: 12.5%; +} + +.k-u-3-8 { + width: 37.5%; +} + +.k-u-5-8 { + width: 62.5%; +} + +.k-u-7-8 { + width: 87.5%; +} + +.k-u-1-12 { + width: 8.3333%; +} + +.k-u-5-12 { + width: 41.6666%; +} + +.k-u-7-12 { + width: 58.3333%; +} + +.k-u-11-12 { + width: 91.6666%; +} + +.k-u-1-24 { + width: 4.1666%; +} + +.k-u-5-24 { + width: 20.8333%; +} + +.k-u-7-24 { + width: 29.1666%; +} + +.k-u-11-24 { + width: 45.8333%; +} + +.k-u-13-24 { + width: 54.1666%; +} + +.k-u-17-24 { + width: 70.8333%; +} + +.k-u-19-24 { + width: 79.1666%; +} + +.k-u-23-24 { + width: 95.8333%; +} diff --git a/src/grids/tests/manual/responsive.html b/src/grids/tests/manual/responsive.html new file mode 100644 index 0000000..7fb7b51 --- /dev/null +++ b/src/grids/tests/manual/responsive.html @@ -0,0 +1,175 @@ + + + + + Responsive Grids Test + + + +
+ +

Kimono Responsive Grids

+

An example of making your Kimono Grids behave responsively.

+ +
+ +
+

How does it work?

+
+
+

Kimono Responsive Grids builds on top of the existing Kimono Grids implementation. It adds a single new class name called .k-g-r. You can use this instead of using .k-g as you normally do. All elements with a class name of .k-u-*-* will automatically become responsive if they are direct descendents of a .k-g-r.

+ +

The HTML

+

The first gist shows how regular Kimono grids are written. These grids are unresponsive. They'll always be one-thirds irrespective of the width of the screen. The second gist replaces the k-g with k-g-r, thereby making the one-third columns collapse to full width on lower screen widths.

+ +
+
+ + +

Features.

+
+
+
    +
  • Adds configurable media queries for different screen widths (Desktops, Landscape Tablets, Portrait Tablets, Phones)
    • +
  • Collapses elements to 100% if smaller than a certain width (767px by default)
    • +
  • Adjusts images to fit on smaller screens
    • +
  • Works with as many columns as you want (or as few)
    • +
+
+ +
+ +
+

Example.

+
+
+

Fast

+

YUI's lightweight core and modular architecture make it scalable, fast, and robust. Built by frontend engineers at Yahoo!, YUI powers the most popular websites in the world.

+
+
+ +
+
+

Complete

+

YUI's intuitive and well-documented API takes you from basic DOM handling to building performant and maintainable applications on desktop browsers, mobile devices, and servers.

+
+
+
+
+

Industrial Strength

+

A thriving community, a carefully architected infrastructure, and a comprehensive suite of tools help you code like a pro, from simple web pages to complex web applications.

+
+
+
+
+

Free and Open

+

YUI is free for all uses and is developed in the open on GitHub. Core team members can always be found in the forums and the #yui IRC channel on Freenode. Pull requests welcome!

+
+
+ +
+ test image +
+ +
+
+

Two-Fifth Column

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fermentum dui turpis. Duis nulla dolor, suscipit in venenatis vitae, auctor eu nibh. Proin lobortis arcu nec tellus vehicula vitae pellentesque nisi molestie. Aenean felis ligula, hendrerit id dictum sed, ornare nec leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec non lectus et quam porttitor dignissim vitae ac odio. Aenean mattis dui porta lacus egestas ultricies. Mauris vel dolor libero, sit amet rhoncus nibh.

+
+
+ +
+
+

Three-Fifth Column

+

Quisque ac magna eget est porta varius ut eget quam. Curabitur tincidunt gravida nisl, vitae luctus velit vulputate vel. Aliquam sed sodales orci. Proin varius placerat magna tristique tincidunt. Morbi non dignissim felis. Proin bibendum libero nec felis eleifend porttitor. Morbi auctor venenatis justo, molestie luctus mi pulvinar nec. Pellentesque vitae ornare lacus. Nulla hendrerit tempor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus facilisis cursus. Integer in lacinia dui. Phasellus ullamcorper, sem at congue pretium, velit sapien ornare mi, eu eleifend risus sapien ac eros.

+ +

Fusce accumsan, sem vitae tempus tempor, nulla lectus interdum felis, eget molestie urna mauris vel elit. Curabitur vel ipsum nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam viverra, augue et sollicitudin dignissim, lectus tellus imperdiet lectus, a tempor ipsum mauris vitae augue. Nullam vel nulla a purus cursus consequat. Nulla orci elit, malesuada nec egestas non, ornare quis nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

+
+
+
+
+

Grids on mobile

+
+
+

Thirds

+

This cell will be a grid even on mobile devices.

+
+
+
+
+

Thirds

+

This cell will be a grid even on mobile devices.

+
+
+
+
+

Thirds

+

This cell will be a grid even on mobile devices.

+
+
+
+
+
+
+

Thirds

+

This cell will be a grid even on mobile devices.

+
+
+
+
+

Thirds

+

This cell will be a grid even on mobile devices.

+
+
+
+
+

Thirds

+

This cell will be a grid even on mobile devices.

+
+
+
+
+
+
+

Thirds

+

This cell will be a grid even on mobile devices.

+
+
+
+
+

Thirds

+

This cell will be a grid even on mobile devices.

+
+
+
+
+

Thirds

+

This cell will be a grid even on mobile devices.

+
+
+
+ + +
+

Helper Classes

+
+
+

No Phones Allowed

+

Should be hidden on phones

+
+
+
+
+

No Tablets Allowed

+

Should be hidden on tablets

+
+
+
+
+

No big screens allowed.

+

Should be hidden on desktops/laptops

+
+
+
+ + diff --git a/src/menus/HISTORY.md b/src/menus/HISTORY.md new file mode 100644 index 0000000..e28348b --- /dev/null +++ b/src/menus/HISTORY.md @@ -0,0 +1,2 @@ +Menus Change History +==================== diff --git a/src/menus/README.md b/src/menus/README.md new file mode 100644 index 0000000..0b74e85 --- /dev/null +++ b/src/menus/README.md @@ -0,0 +1,4 @@ +Menus +===== + +Super simple CSS for HTML Menus. diff --git a/src/menus/css/list-core.css b/src/menus/css/list-core.css new file mode 100644 index 0000000..4bbb408 --- /dev/null +++ b/src/menus/css/list-core.css @@ -0,0 +1,111 @@ +.k-menu ul { + position: absolute; + visibility: hidden; +} + +.k-menu.k-menu-open { + visibility: visible; + z-index: 2; + width: 100%; +} + +.k-menu ul { + left: -10000px; + list-style: none; + margin: 0; + padding: 0; + top: -10000px; + z-index: 1; +} + +.k-menu > ul { position: relative; } + +.k-menu-open > ul { + left: 0; + top: 0; + visibility: visible; +} + +.k-menu li { position: relative; } + +.k-menu a, .k-menu .k-menu-heading { + display: block; + color: inherit; + line-height: 1.5em; + padding: 5px 20px; + text-decoration: none; + white-space: nowrap; +} + +.k-menu.k-menu-horizontal > .k-menu-heading { + display: inline-block; + margin: 0; + zoom: 1; + *display: inline; + vertical-align: middle; +} +.k-menu.k-menu-horizontal > ul { + display: inline-block; + zoom: 1; + *display: inline; + vertical-align: middle; +} + +.k-menu li a { padding: 5px 20px; } + +.k-menu-can-have-children > .k-menu-label:after { + content: '\25B8'; + float: right; + font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'DejaVu Sans', sans-serif; /* These specific fonts have the Unicode char we need. */ + margin-right: -20px; + margin-top: -1px; +} + +.k-menu-can-have-children > .k-menu-label { + padding-right:30px; +} + +.k-menu-separator { + background-color: #dfdfdf; + display: block; + height: 1px; + font-size: 0; + margin: 7px 2px; + overflow: hidden; +} + +.k-menu-hidden { display: none; } + +/* FIXED MENU */ +.k-menu-fixed { + position: fixed; + top:0; + left:0; + width: 100%; +} + + +/* HORIZONTAL MENU CODE */ + +/* Initial menus should be inline-block so that they are horizontal */ +.k-menu-horizontal li { + display: inline-block; + zoom: 1; + *display: inline; + vertical-align: middle; +} + +/* Submenus should still be display:block; */ +.k-menu-horizontal li li { + display: block; +} + +/* Content after should be down arrow */ +.k-menu-horizontal > .k-menu-children > .k-menu-can-have-children > .k-menu-label:after { + content: "\25BE"; +} +/*Add extra padding to elements that have the arrow so that the hover looks nice */ +.k-menu-horizontal > .k-menu-children > .k-menu-can-have-children > .k-menu-label { + padding-right:30px; +} + diff --git a/src/menus/css/list-paginator.css b/src/menus/css/list-paginator.css new file mode 100644 index 0000000..d5f4a8c --- /dev/null +++ b/src/menus/css/list-paginator.css @@ -0,0 +1,31 @@ +.k-paginator { + list-style: none; + margin: 0; + padding: 0; +} +.k-paginator li { + display: inline-block; + *display: inline; + /* IE 7 inline-block hack */ + *zoom: 1; + margin: 0 -0.35em 0 0; +} +.k-paginator .k-button { + border-radius: 0; + padding: 0.8em 1.4em; + vertical-align: top; + height: 1.1em; +} +.k-paginator .k-button:focus { + outline-style: none; +} +.k-paginator .prev, .k-paginator .next { + color: #C0C1C3; + text-shadow: 0px -1px 0px rgba(0,0,0, 0.45); +} +.k-paginator .prev { + border-radius: 2px 0 0 2px; +} +.k-paginator .next { + border-radius: 0 2px 2px 0; +} diff --git a/src/menus/css/list-responsive.css b/src/menus/css/list-responsive.css new file mode 100644 index 0000000..4688142 --- /dev/null +++ b/src/menus/css/list-responsive.css @@ -0,0 +1,14 @@ +/* RESPONSIVE */ + +@media (max-width: 480px) { + + .k-menu-horizontal { + width:100%; + } + + .k-menu-children li { + display: block; + border-bottom:1px solid block; + } + +} diff --git a/src/menus/css/list.css b/src/menus/css/list.css new file mode 100644 index 0000000..7cb49a0 --- /dev/null +++ b/src/menus/css/list.css @@ -0,0 +1,83 @@ +/* MAIN MENU STYLING */ + +.k-menu.k-menu-open, +.k-menu.k-menu-horizontal li .k-menu-children { + background: #ffffff; /* Old browsers */ + border-radius: 3px; + border: 1px solid #b7b7b7; +} + +/* remove borders for horizontal menus */ +.k-menu.k-menu-horizontal, .k-menu.k-menu-horizontal .k-menu-heading { + border: none; +} + + + +/* LINK STYLES */ + +.k-menu a { + border: 1px solid transparent; + border-left: none; + border-right: none; + +} + +.k-menu a, +.k-menu .k-menu-can-have-children > li:after { + color: #777; +} + +.k-menu .k-menu-can-have-children > li:hover:after { + color: #fff; +} + + + +/* HOVER STATES */ +.k-menu li a:hover { + background: #46b9e3; + color: #fff; + +} + +/* DISABLED STATES */ +.k-menu li.k-menu-disabled a:hover { + background: #fff; + color: #bfbfbf; +} + +.k-menu .k-menu-disabled > a { + background-image: none; + border-color: transparent; + cursor: default; +} + +.k-menu .k-menu-disabled > a, +.k-menu .k-menu-can-have-children.k-menu-disabled > a:after { + color: #bfbfbf; +} + +/* HEADINGS */ +.k-menu .k-menu-heading { + color: #565d64; + text-transform: uppercase; + font-size:90%; + margin-top:0.5em; + border-bottom-width: 1px; + border-bottom-style: solid; + border-bottom-color: #dfdfdf; +} + +/* ACTIVE MENU ITEM */ +.k-menu .k-menu-selected a { + font-weight: bold; + color: #000; +} + +/* FIXED MENU */ +.k-menu.k-menu-open.k-menu-fixed { + border-radius: 0; + border: none; + border-bottom: 1px solid #b7b7b7; +} diff --git a/src/menus/tests/manual/list.html b/src/menus/tests/manual/list.html new file mode 100644 index 0000000..5b26505 --- /dev/null +++ b/src/menus/tests/manual/list.html @@ -0,0 +1,208 @@ + + + + + + List CSS + + + + + + + + +
+ +

Kimono List CSS

+

Simple styling for HTML List elements.

+ +
+ +
+ +

+ gallerycss-csslist is a YUI Gallery module that makes it easy to display good looking lists on your website. +

+ +

Horizontal Menu

+ +

+ You can mark the active list element by adding the .k-menu-selected class to the list element. +

+ +
+ Site Title + +
+ +

Vertical Menu

+ +
+ Site Title + +
+ +
+ +
+ + +

Add Dropdowns to Menus

+ +

+ Adding dropdowns to menus requires the use of JavaScript. The Y.Menu module adds dropdown functionality and the ability to create JavaScript menus. It uses csslist to style these menus, so they look identical. +

+ + +
+ Site Title + +
+ + +

Fixed Menus

+ +

+ Fixed menus can be created by adding the k-menu-fixed class name to the wrapper. This will fix a menu to the top of the page. +

+ +

+ +

+ +
+ +
+ + + +
+ + + + diff --git a/src/tables/HISTORY.md b/src/tables/HISTORY.md new file mode 100644 index 0000000..0566907 --- /dev/null +++ b/src/tables/HISTORY.md @@ -0,0 +1,2 @@ +Tables Change History +===================== diff --git a/src/tables/README.md b/src/tables/README.md new file mode 100644 index 0000000..d504fcc --- /dev/null +++ b/src/tables/README.md @@ -0,0 +1,4 @@ +Tables +====== + +Super simple CSS for your ``s. diff --git a/src/tables/css/tables.css b/src/tables/css/tables.css new file mode 100644 index 0000000..4d917a3 --- /dev/null +++ b/src/tables/css/tables.css @@ -0,0 +1,82 @@ +/* +* CSS TABLES +* ========== +* Simple CSS for HTML Tables +* Author: tilomitra +*/ + +/* foundational CSS */ +.k-table { + /* Remove spacing between table cells (from Normalize.css) */ + border-collapse: collapse; + border-spacing: 0; + empty-cells: show; + border: 1px solid #cbcbcb; +} + +.k-table caption { + color: #000; + font: italic 85%/1 arial, sans-serif; + padding: 1em 0; + text-align: center; +} + +.k-table td, +.k-table th { + border-left: 1px solid #cbcbcb;/* inner column border */ + border-width: 0 0 0 1px; + font-size: inherit; + margin: 0; + overflow: visible; /*to make ths where the title is really long work*/ + padding: 6px 12px; /* cell padding */ +} +.k-table td:first-child, +.k-table th:first-child { + border-left-width: 0; +} + +.k-table thead { + background: #e0e0e0; + color: #000; + text-align: left; + vertical-align: bottom; + white-space: nowrap; +} + +/* +striping: + even - #fff (white) + odd - #edf5ff (light blue) +*/ +.k-table td { + background-color: transparent; +} +.k-table-odd td { + background-color: #f2f2f2; +} + +/* nth-child selector for modern browsers */ +.k-table-striped tr:nth-child(2n-1) td { + background-color: #f2f2f2; +} + +/* BORDERED TABLES */ +.k-table-bordered td { + border-bottom:1px solid #cbcbcb; +} +.k-table-bordered tbody > tr:last-child td, +.k-table-horizontal tbody > tr:last-child td { + border-bottom-width: 0; +} + + +/* HORIZONTAL BORDERED TABLES */ + +.k-table-horizontal td, +.k-table-horizontal th { + border-width: 0 0 1px 0; + border-bottom:1px solid #cbcbcb; +} +.k-table-horizontal tbody > tr:last-child td { + border-bottom-width: 0; +} diff --git a/src/tables/tests/manual/index.html b/src/tables/tests/manual/index.html new file mode 100644 index 0000000..e847eb4 --- /dev/null +++ b/src/tables/tests/manual/index.html @@ -0,0 +1,289 @@ + + + + + + + + +
+

gallerycss-csstables

+

+ Simple CSS for HTML Tables +

+
+ +

Default Table

+ +

Add the k-table classname to a table to style an HTML table similar to how a YUI 3 Datatable would be styled. This class adds appropriate padding and borders to table elements, and increases the emphasis on the header.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#MakeModelYear
1HondaAccord2009
2ToyotaCamry2012
3HyundaiElantra2010
+ +

Bordered Table

+

To add horizontal and vertical borders to all cells, add the k-table-bordered classname to the table element.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#MakeModelYear
1HondaAccord2009
2ToyotaCamry2012
3HyundaiElantra2010
+ +

Table with Horizontal Borders

+

If you prefer to just have horizontal lines, add the k-table-horizontal classname to the table element.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#MakeModelYear
1HondaAccord2009
2ToyotaCamry2012
3HyundaiElantra2010
+ +

Striped Table

+

Large tables are easier to parse visually if rows are easily distinguishable. Adding the k-table-odd class name to every other tr element changes the background of the row and creates a zebra-styled effect.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#MakeModelYear
1HondaAccord2009
2ToyotaCamry2012
3HyundaiElantra2010
4FordFocus2008
5NissanSentra2011
6BMWM32009
7HondaCivic2010
8KiaSoul2010
+ + + +

Nth Child Selector Styling

+

Here's a striped table that's zebra-styled using nth-child selectors.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#MakeModelYear
1HondaAccord2009
2ToyotaCamry2012
3HyundaiElantra2010
4FordFocus2008
5NissanSentra2011
6BMWM32009
7HondaCivic2010
8KiaSoul2010
+ + + +

Simple Table with plain header

+

To remove the styled header, simply add the k-thead-simple class name to the thead element. You can mix and match this with other table class names mentioned above.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#MakeModelYear
1HondaAccord2009
2ToyotaCamry2012
3HyundaiElantra2010
+ +