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
+
+
This should be hidden in all browsers, apart from IE6
+
+
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.
+ 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
+
+
+
+
Multi-Column Form (with YUI Grids)
+
+
+ Multi-column forms such as the one below can be created by pulling down YUI Grids.
+
+
+
+
+
+
Stacked Form
+
+
+ Apply stacked label styling to any form by applying the k-form-stacked classname.
+
+
+
+
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!
+
+
+
+
+
+
+
+
+
+
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.
+ 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.
+
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.
+
+
+
+
#
+
Make
+
Model
+
Year
+
+
+
+
+
1
+
Honda
+
Accord
+
2009
+
+
+
2
+
Toyota
+
Camry
+
2012
+
+
+
3
+
Hyundai
+
Elantra
+
2010
+
+
+
+
+
Bordered Table
+
To add horizontal and vertical borders to all cells, add the k-table-bordered classname to the table element.
+
+
+
+
#
+
Make
+
Model
+
Year
+
+
+
+
+
1
+
Honda
+
Accord
+
2009
+
+
+
2
+
Toyota
+
Camry
+
2012
+
+
+
3
+
Hyundai
+
Elantra
+
2010
+
+
+
+
+
Table with Horizontal Borders
+
If you prefer to just have horizontal lines, add the k-table-horizontal classname to the table element.
+
+
+
+
#
+
Make
+
Model
+
Year
+
+
+
+
+
1
+
Honda
+
Accord
+
2009
+
+
+
2
+
Toyota
+
Camry
+
2012
+
+
+
3
+
Hyundai
+
Elantra
+
2010
+
+
+
+
+
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.
+
+
+
+
#
+
Make
+
Model
+
Year
+
+
+
+
+
1
+
Honda
+
Accord
+
2009
+
+
+
2
+
Toyota
+
Camry
+
2012
+
+
+
3
+
Hyundai
+
Elantra
+
2010
+
+
+
4
+
Ford
+
Focus
+
2008
+
+
+
5
+
Nissan
+
Sentra
+
2011
+
+
+
6
+
BMW
+
M3
+
2009
+
+
+
7
+
Honda
+
Civic
+
2010
+
+
+
8
+
Kia
+
Soul
+
2010
+
+
+
+
+
+
+
Nth Child Selector Styling
+
Here's a striped table that's zebra-styled using nth-child selectors.
+
+
+
+
#
+
Make
+
Model
+
Year
+
+
+
+
+
1
+
Honda
+
Accord
+
2009
+
+
+
2
+
Toyota
+
Camry
+
2012
+
+
+
3
+
Hyundai
+
Elantra
+
2010
+
+
+
4
+
Ford
+
Focus
+
2008
+
+
+
5
+
Nissan
+
Sentra
+
2011
+
+
+
6
+
BMW
+
M3
+
2009
+
+
+
7
+
Honda
+
Civic
+
2010
+
+
+
8
+
Kia
+
Soul
+
2010
+
+
+
+
+
+
+
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.