yamlcss 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/.travis.yml +12 -0
- data/Gemfile +10 -0
- data/Gemfile.lock +56 -0
- data/LICENSE.txt +59 -0
- data/Rakefile +23 -0
- data/Readme.md +120 -0
- data/VERSIONS.md +5 -0
- data/bin/yamlcss +6 -0
- data/lib/yamlcss.rb +22 -0
- data/lib/yamlcss/engine.rb +7 -0
- data/lib/yamlcss/generator.rb +84 -0
- data/lib/yamlcss/version.rb +4 -0
- data/vendor/assets/stylesheets/_iehacks.scss +3 -0
- data/vendor/assets/stylesheets/_yaml.scss +3 -0
- data/yaml/Gruntfile.js +199 -0
- data/yaml/License.txt +36 -0
- data/yaml/Readme.md +64 -0
- data/yaml/changelog.md +307 -0
- data/yaml/config.rb +25 -0
- data/yaml/demos/css/custom-grids.css +27 -0
- data/yaml/demos/css/flexible-columns.css +26 -0
- data/yaml/demos/css/flexible-grids.css +26 -0
- data/yaml/demos/css/rtl-support.css +31 -0
- data/yaml/demos/css/screen/screen-custom-grids.css +41 -0
- data/yaml/demos/css/screen/screen-rtl-support.css +182 -0
- data/yaml/demos/custom-grid.html +129 -0
- data/yaml/demos/flexible-columns.html +124 -0
- data/yaml/demos/flexible-grid.html +142 -0
- data/yaml/demos/rtl-support.html +127 -0
- data/yaml/docs/assets/css/icons/external_link.png +0 -0
- data/yaml/docs/assets/css/icons/hcalendar.png +0 -0
- data/yaml/docs/assets/css/icons/hcard.png +0 -0
- data/yaml/docs/assets/css/icons/icon-geo.png +0 -0
- data/yaml/docs/assets/css/icons/icon-hatom.png +0 -0
- data/yaml/docs/assets/css/icons/icon-haudio.png +0 -0
- data/yaml/docs/assets/css/icons/icon-hcalendar-add.png +0 -0
- data/yaml/docs/assets/css/icons/icon-hcalendar-download.png +0 -0
- data/yaml/docs/assets/css/icons/icon-hcalendar.png +0 -0
- data/yaml/docs/assets/css/icons/icon-hcard-add.png +0 -0
- data/yaml/docs/assets/css/icons/icon-hcard-download.png +0 -0
- data/yaml/docs/assets/css/icons/icon-hcard.png +0 -0
- data/yaml/docs/assets/css/icons/icon-hresume.png +0 -0
- data/yaml/docs/assets/css/icons/icon-rel-tag.png +0 -0
- data/yaml/docs/assets/css/icons/icon-xfn.png +0 -0
- data/yaml/docs/assets/css/icons/xfn/xfn-child.png +0 -0
- data/yaml/docs/assets/css/icons/xfn/xfn-colleague-met.png +0 -0
- data/yaml/docs/assets/css/icons/xfn/xfn-colleague.png +0 -0
- data/yaml/docs/assets/css/icons/xfn/xfn-friend-met.png +0 -0
- data/yaml/docs/assets/css/icons/xfn/xfn-friend.png +0 -0
- data/yaml/docs/assets/css/icons/xfn/xfn-me.png +0 -0
- data/yaml/docs/assets/css/icons/xfn/xfn-parent.png +0 -0
- data/yaml/docs/assets/css/icons/xfn/xfn-small.png +0 -0
- data/yaml/docs/assets/css/icons/xfn/xfn-spouse.png +0 -0
- data/yaml/docs/assets/css/icons/xfn/xfn-sweetheart-met.png +0 -0
- data/yaml/docs/assets/css/icons/xfn/xfn-sweetheart.png +0 -0
- data/yaml/docs/assets/css/layout-min.css +3 -0
- data/yaml/docs/assets/css/layout.css +3262 -0
- data/yaml/docs/assets/images/demo-custom-grid.png +0 -0
- data/yaml/docs/assets/images/demo-flex-column.png +0 -0
- data/yaml/docs/assets/images/demo-flex-grid.png +0 -0
- data/yaml/docs/assets/images/demo-rtl.png +0 -0
- data/yaml/docs/assets/images/yaml-solo-transparent-small.png +0 -0
- data/yaml/docs/assets/images/yaml-solo-transparent.png +0 -0
- data/yaml/docs/assets/js/domscript.js +209 -0
- data/yaml/docs/assets/js/jquery.gridbuilder.js +131 -0
- data/yaml/docs/assets/js/snippet/ZeroClipboard.swf +0 -0
- data/yaml/docs/assets/js/snippet/jquery.snippet.css +116 -0
- data/yaml/docs/assets/js/snippet/jquery.snippet.js +782 -0
- data/yaml/docs/assets/js/snippet/jquery.snippet.min.css +40 -0
- data/yaml/docs/assets/js/snippet/jquery.snippet.min.js +12 -0
- data/yaml/docs/assets/js/snippet/snippet.css +296 -0
- data/yaml/docs/index.html +3845 -0
- data/yaml/lib/html5shiv/html5shiv-printshiv.js +11 -0
- data/yaml/lib/html5shiv/html5shiv.js +8 -0
- data/yaml/lib/jquery-1.10.1.min.js +6 -0
- data/yaml/lib/jquery-migrate-1.2.1.min.js +2 -0
- data/yaml/package.json +20 -0
- data/yaml/sass/docs/assets/css/_screen.scss +786 -0
- data/yaml/sass/docs/assets/css/layout.scss +28 -0
- data/yaml/sass/static-build/add-ons/accessible-tabs/tabs.scss +15 -0
- data/yaml/sass/static-build/add-ons/microformats/microformats.scss +18 -0
- data/yaml/sass/static-build/add-ons/rtl-support/core/base-rtl.scss +20 -0
- data/yaml/sass/static-build/add-ons/rtl-support/forms/gray-theme-rtl.scss +16 -0
- data/yaml/sass/static-build/add-ons/rtl-support/navigation/hlist-rtl.scss +18 -0
- data/yaml/sass/static-build/add-ons/rtl-support/navigation/vlist-rtl.scss +18 -0
- data/yaml/sass/static-build/add-ons/rtl-support/screen/typography-rtl.scss +16 -0
- data/yaml/sass/static-build/core/base.scss +19 -0
- data/yaml/sass/static-build/core/iehacks.scss +19 -0
- data/yaml/sass/static-build/forms/gray-theme.scss +14 -0
- data/yaml/sass/static-build/navigation/hlist.scss +16 -0
- data/yaml/sass/static-build/navigation/vlist.scss +16 -0
- data/yaml/sass/static-build/print/print.scss +15 -0
- data/yaml/sass/static-build/screen/grid-960gs-12.scss +15 -0
- data/yaml/sass/static-build/screen/grid-960gs-16.scss +15 -0
- data/yaml/sass/static-build/screen/grid-blueprint.scss +15 -0
- data/yaml/sass/static-build/screen/grid-fluid-12col.scss +15 -0
- data/yaml/sass/static-build/screen/screen-FULLPAGE-layout.scss +15 -0
- data/yaml/sass/static-build/screen/screen-PAGE-layout.scss +15 -0
- data/yaml/sass/static-build/screen/typography.scss +16 -0
- data/yaml/sass/yaml-sass/_yaml-var-globals.scss +39 -0
- data/yaml/sass/yaml-sass/_yaml-var-typography.scss +80 -0
- data/yaml/sass/yaml-sass/add-ons/accessible-tabs/_tabs.scss +139 -0
- data/yaml/sass/yaml-sass/add-ons/accessible-tabs/jquery.tabs.js +266 -0
- data/yaml/sass/yaml-sass/add-ons/microformats/_microformats.scss +179 -0
- data/yaml/sass/yaml-sass/add-ons/microformats/icons/external_link.png +0 -0
- data/yaml/sass/yaml-sass/add-ons/microformats/icons/hcalendar.png +0 -0
- data/yaml/sass/yaml-sass/add-ons/microformats/icons/hcard.png +0 -0
- data/yaml/sass/yaml-sass/add-ons/microformats/icons/icon-geo.png +0 -0
- data/yaml/sass/yaml-sass/add-ons/microformats/icons/icon-hatom.png +0 -0
- data/yaml/sass/yaml-sass/add-ons/microformats/icons/icon-haudio.png +0 -0
- data/yaml/sass/yaml-sass/add-ons/microformats/icons/icon-hcalendar-add.png +0 -0
- data/yaml/sass/yaml-sass/add-ons/microformats/icons/icon-hcalendar-download.png +0 -0
- data/yaml/sass/yaml-sass/add-ons/microformats/icons/icon-hcalendar.png +0 -0
- data/yaml/sass/yaml-sass/add-ons/microformats/icons/icon-hcard-add.png +0 -0
- data/yaml/sass/yaml-sass/add-ons/microformats/icons/icon-hcard-download.png +0 -0
- data/yaml/sass/yaml-sass/add-ons/microformats/icons/icon-hcard.png +0 -0
- data/yaml/sass/yaml-sass/add-ons/microformats/icons/icon-hresume.png +0 -0
- data/yaml/sass/yaml-sass/add-ons/microformats/icons/icon-rel-tag.png +0 -0
- data/yaml/sass/yaml-sass/add-ons/microformats/icons/icon-xfn.png +0 -0
- data/yaml/sass/yaml-sass/add-ons/microformats/icons/xfn/xfn-child.png +0 -0
- data/yaml/sass/yaml-sass/add-ons/microformats/icons/xfn/xfn-colleague-met.png +0 -0
- data/yaml/sass/yaml-sass/add-ons/microformats/icons/xfn/xfn-colleague.png +0 -0
- data/yaml/sass/yaml-sass/add-ons/microformats/icons/xfn/xfn-friend-met.png +0 -0
- data/yaml/sass/yaml-sass/add-ons/microformats/icons/xfn/xfn-friend.png +0 -0
- data/yaml/sass/yaml-sass/add-ons/microformats/icons/xfn/xfn-me.png +0 -0
- data/yaml/sass/yaml-sass/add-ons/microformats/icons/xfn/xfn-parent.png +0 -0
- data/yaml/sass/yaml-sass/add-ons/microformats/icons/xfn/xfn-small.png +0 -0
- data/yaml/sass/yaml-sass/add-ons/microformats/icons/xfn/xfn-spouse.png +0 -0
- data/yaml/sass/yaml-sass/add-ons/microformats/icons/xfn/xfn-sweetheart-met.png +0 -0
- data/yaml/sass/yaml-sass/add-ons/microformats/icons/xfn/xfn-sweetheart.png +0 -0
- data/yaml/sass/yaml-sass/add-ons/rtl-support/core/_base-rtl.scss +177 -0
- data/yaml/sass/yaml-sass/add-ons/rtl-support/forms/_gray-theme-rtl.scss +34 -0
- data/yaml/sass/yaml-sass/add-ons/rtl-support/navigation/_hlist-rtl.scss +42 -0
- data/yaml/sass/yaml-sass/add-ons/rtl-support/navigation/_vlist-rtl.scss +45 -0
- data/yaml/sass/yaml-sass/add-ons/rtl-support/screen/_typography-rtl.scss +30 -0
- data/yaml/sass/yaml-sass/add-ons/syncheight/jquery.syncheight.js +112 -0
- data/yaml/sass/yaml-sass/core/_base.scss +15 -0
- data/yaml/sass/yaml-sass/core/_iehacks.scss +426 -0
- data/yaml/sass/yaml-sass/core/base-modules/_accessibility.scss +48 -0
- data/yaml/sass/yaml-sass/core/base-modules/_columns.scss +27 -0
- data/yaml/sass/yaml-sass/core/base-modules/_float-handling.scss +32 -0
- data/yaml/sass/yaml-sass/core/base-modules/_forms-core.scss +296 -0
- data/yaml/sass/yaml-sass/core/base-modules/_grids-core.scss +55 -0
- data/yaml/sass/yaml-sass/core/base-modules/_normalization.scss +165 -0
- data/yaml/sass/yaml-sass/core/base-modules/_print-core.scss +36 -0
- data/yaml/sass/yaml-sass/core/js/yaml-focusfix.js +70 -0
- data/yaml/sass/yaml-sass/forms/_gray-theme.scss +475 -0
- data/yaml/sass/yaml-sass/mixins/_yaml-mixins-core.scss +248 -0
- data/yaml/sass/yaml-sass/navigation/_hlist.scss +106 -0
- data/yaml/sass/yaml-sass/navigation/_vlist.scss +129 -0
- data/yaml/sass/yaml-sass/print/_print.scss +61 -0
- data/yaml/sass/yaml-sass/screen/_grid-960gs-12.scss +4 -0
- data/yaml/sass/yaml-sass/screen/_grid-960gs-16.scss +4 -0
- data/yaml/sass/yaml-sass/screen/_grid-blueprint.scss +4 -0
- data/yaml/sass/yaml-sass/screen/_grid-fluid-12col.scss +4 -0
- data/yaml/sass/yaml-sass/screen/_screen-FULLPAGE-layout.scss +171 -0
- data/yaml/sass/yaml-sass/screen/_screen-PAGE-layout.scss +165 -0
- data/yaml/sass/yaml-sass/screen/_typography.scss +485 -0
- data/yaml/yaml/add-ons/accessible-tabs/jquery.tabs.js +266 -0
- data/yaml/yaml/add-ons/accessible-tabs/tabs.css +136 -0
- data/yaml/yaml/add-ons/microformats/icons/external_link.png +0 -0
- data/yaml/yaml/add-ons/microformats/icons/hcalendar.png +0 -0
- data/yaml/yaml/add-ons/microformats/icons/hcard.png +0 -0
- data/yaml/yaml/add-ons/microformats/icons/icon-geo.png +0 -0
- data/yaml/yaml/add-ons/microformats/icons/icon-hatom.png +0 -0
- data/yaml/yaml/add-ons/microformats/icons/icon-haudio.png +0 -0
- data/yaml/yaml/add-ons/microformats/icons/icon-hcalendar-add.png +0 -0
- data/yaml/yaml/add-ons/microformats/icons/icon-hcalendar-download.png +0 -0
- data/yaml/yaml/add-ons/microformats/icons/icon-hcalendar.png +0 -0
- data/yaml/yaml/add-ons/microformats/icons/icon-hcard-add.png +0 -0
- data/yaml/yaml/add-ons/microformats/icons/icon-hcard-download.png +0 -0
- data/yaml/yaml/add-ons/microformats/icons/icon-hcard.png +0 -0
- data/yaml/yaml/add-ons/microformats/icons/icon-hresume.png +0 -0
- data/yaml/yaml/add-ons/microformats/icons/icon-rel-tag.png +0 -0
- data/yaml/yaml/add-ons/microformats/icons/icon-xfn.png +0 -0
- data/yaml/yaml/add-ons/microformats/icons/xfn/xfn-child.png +0 -0
- data/yaml/yaml/add-ons/microformats/icons/xfn/xfn-colleague-met.png +0 -0
- data/yaml/yaml/add-ons/microformats/icons/xfn/xfn-colleague.png +0 -0
- data/yaml/yaml/add-ons/microformats/icons/xfn/xfn-friend-met.png +0 -0
- data/yaml/yaml/add-ons/microformats/icons/xfn/xfn-friend.png +0 -0
- data/yaml/yaml/add-ons/microformats/icons/xfn/xfn-me.png +0 -0
- data/yaml/yaml/add-ons/microformats/icons/xfn/xfn-parent.png +0 -0
- data/yaml/yaml/add-ons/microformats/icons/xfn/xfn-small.png +0 -0
- data/yaml/yaml/add-ons/microformats/icons/xfn/xfn-spouse.png +0 -0
- data/yaml/yaml/add-ons/microformats/icons/xfn/xfn-sweetheart-met.png +0 -0
- data/yaml/yaml/add-ons/microformats/icons/xfn/xfn-sweetheart.png +0 -0
- data/yaml/yaml/add-ons/microformats/microformats.css +167 -0
- data/yaml/yaml/add-ons/rtl-support/core/base-rtl.css +167 -0
- data/yaml/yaml/add-ons/rtl-support/core/base-rtl.min.css +3 -0
- data/yaml/yaml/add-ons/rtl-support/forms/gray-theme-rtl.css +44 -0
- data/yaml/yaml/add-ons/rtl-support/navigation/hlist-rtl.css +48 -0
- data/yaml/yaml/add-ons/rtl-support/navigation/vlist-rtl.css +54 -0
- data/yaml/yaml/add-ons/rtl-support/screen/typography-rtl.css +38 -0
- data/yaml/yaml/add-ons/syncheight/jquery.syncheight.js +112 -0
- data/yaml/yaml/core/base.css +705 -0
- data/yaml/yaml/core/base.min.css +3 -0
- data/yaml/yaml/core/iehacks.css +468 -0
- data/yaml/yaml/core/iehacks.min.css +3 -0
- data/yaml/yaml/core/js/yaml-focusfix.js +70 -0
- data/yaml/yaml/forms/gray-theme.css +676 -0
- data/yaml/yaml/navigation/hlist.css +109 -0
- data/yaml/yaml/navigation/vlist.css +144 -0
- data/yaml/yaml/print/print.css +42 -0
- data/yaml/yaml/screen/grid-960gs-12.css +164 -0
- data/yaml/yaml/screen/grid-960gs-16.css +212 -0
- data/yaml/yaml/screen/grid-blueprint.css +308 -0
- data/yaml/yaml/screen/grid-fluid-12col.css +164 -0
- data/yaml/yaml/screen/screen-FULLPAGE-layout.css +184 -0
- data/yaml/yaml/screen/screen-PAGE-layout.css +196 -0
- data/yaml/yaml/screen/typography.css +486 -0
- data/yamlcss.gemspec +30 -0
- metadata +314 -0
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
.sh_acid .sh_sourceCode{background-color:#eee;color:#000;font-weight:400;font-style:normal;}.sh_acid .sh_sourceCode .sh_type{color:#8080c0;font-weight:700;font-style:normal;}.sh_acid .sh_sourceCode .sh_comment{color:#ff8000;font-weight:400;font-style:normal;}.sh_acid .sh_sourceCode .sh_number{color:purple;font-weight:700;font-style:normal;}.sh_acid .sh_sourceCode .sh_preproc{color:#0080c0;font-weight:700;font-style:normal;}.sh_acid .sh_sourceCode .sh_function{color:#046;font-weight:400;font-style:normal;}.sh_berries-dark .sh_sourceCode{background-color:#80bfff;color:#400080;font-weight:400;font-style:normal;}.sh_berries-dark .sh_sourceCode .sh_type{color:#3f2bf0;font-weight:400;font-style:normal;}.sh_berries-dark .sh_sourceCode .sh_comment{color:#df0959;font-weight:400;font-style:italic;}.sh_berries-light .sh_sourceCode{background-color:#d7ffff;color:#47406d;font-weight:400;font-style:normal;}.sh_berries-light .sh_sourceCode .sh_type{color:#8b51c0;font-weight:400;font-style:normal;}.sh_berries-light .sh_sourceCode .sh_comment{color:#9c3caf;font-weight:400;font-style:italic;}.sh_bipolar .sh_sourceCode{background-color:#000;color:#d149a6;font-weight:400;font-style:normal;}.sh_bipolar .sh_sourceCode .sh_type{color:#aadd8b;font-weight:700;font-style:normal;}.sh_bipolar .sh_sourceCode .sh_comment{color:#35d6e5;font-weight:400;font-style:italic;}.sh_bipolar .sh_sourceCode .sh_preproc{color:#07f6bf;font-weight:400;font-style:normal;}.sh_bipolar .sh_sourceCode .sh_function{color:#d51993;font-weight:700;font-style:normal;}.sh_blacknblue .sh_sourceCode{background-color:#000;color:#2346d5;font-weight:400;font-style:normal;}.sh_blacknblue .sh_sourceCode .sh_type{color:#c06cf8;font-weight:700;font-style:normal;}.sh_blacknblue .sh_sourceCode .sh_comment{color:#6fb2c4;font-weight:400;font-style:italic;}.sh_blacknblue .sh_sourceCode .sh_number{color:#c4ac60;font-weight:400;font-style:normal;}.sh_blacknblue .sh_sourceCode .sh_preproc{color:#8080ff;font-weight:400;font-style:normal;}.sh_blacknblue .sh_sourceCode .sh_function{color:#1c96ed;font-weight:400;font-style:normal;}.sh_bright .sh_sourceCode{background-color:#fff;color:#401e7a;font-weight:400;font-style:normal;}.sh_bright .sh_sourceCode .sh_type{color:#f7b92c;font-weight:400;font-style:normal;}.sh_bright .sh_sourceCode .sh_comment{color:#38ad24;font-weight:400;font-style:normal;}.sh_bright .sh_sourceCode .sh_number{color:#32ba06;font-weight:400;font-style:normal;}.sh_bright .sh_sourceCode .sh_preproc{color:#5374b0;font-weight:400;font-style:normal;}.sh_bright .sh_sourceCode .sh_function{color:#d11ced;font-weight:400;font-style:normal;}.sh_contrast .sh_sourceCode{background-color:#ed6104;color:#00f;font-weight:400;font-style:normal;}.sh_contrast .sh_sourceCode .sh_number{color:#971ad8;font-weight:400;font-style:normal;}.sh_contrast .sh_sourceCode .sh_preproc{color:#7b44e0;font-weight:400;font-style:normal;}.sh_contrast .sh_sourceCode .sh_function{color:#fff700;font-weight:700;font-style:normal;}.sh_darkblue .sh_sourceCode{background-color:#000040;color:#C7C7C7;font-weight:400;font-style:normal;}.sh_darkblue .sh_sourceCode .sh_type{color:#60ff60;font-weight:400;font-style:normal;}.sh_darkblue .sh_sourceCode .sh_comment{color:#80a0ff;font-weight:400;font-style:normal;}.sh_darkblue .sh_sourceCode .sh_number{color:#42cad9;font-weight:400;font-style:normal;}.sh_darkblue .sh_sourceCode .sh_preproc{color:#ff80ff;font-weight:400;font-style:normal;}.sh_darkness .sh_sourceCode .sh_number{color:#619de7;font-weight:400;font-style:normal;}.sh_darkness .sh_sourceCode .sh_preproc{color:#1da3cf;font-weight:400;font-style:normal;}.sh_darkness .sh_sourceCode .sh_function{color:#f34627;font-weight:400;font-style:normal;}.sh_desert .sh_sourceCode{background-color:#af947e;color:#fffdec;font-weight:400;font-style:normal;}.sh_desert .sh_sourceCode .sh_type{color:#fef8bc;font-weight:400;font-style:normal;}.sh_desert .sh_sourceCode .sh_comment{color:#a00000;font-weight:400;font-style:italic;}.sh_desert .sh_sourceCode .sh_number{color:#3e3f25;font-weight:400;font-style:normal;}.sh_desert .sh_sourceCode .sh_preproc{color:#833914;font-weight:400;font-style:normal;}.sh_desert .sh_sourceCode .sh_function{color:#f3d266;font-weight:700;font-style:normal;}.sh_dull .sh_sourceCode{background-color:#bfbfbf;color:#656565;font-weight:400;font-style:normal;}.sh_dull .sh_sourceCode .sh_type{color:#3241c6;font-weight:400;font-style:normal;}.sh_dull .sh_sourceCode .sh_comment{color:#d11d20;font-weight:400;font-style:italic;}.sh_dull .sh_sourceCode .sh_number{color:#16930d;font-weight:400;font-style:normal;}.sh_dull .sh_sourceCode .sh_preproc{color:#003;font-weight:400;font-style:normal;}.sh_dull .sh_sourceCode .sh_function{color:#38255c;font-weight:400;font-style:normal;}.sh_easter .sh_sourceCode{background-color:#ffff80;color:#2C7B34;font-weight:400;font-style:normal;}.sh_easter .sh_sourceCode .sh_type{color:#ed0f55;font-weight:700;font-style:normal;}.sh_easter .sh_sourceCode .sh_comment{color:#24c815;font-weight:400;font-style:italic;}.sh_easter .sh_sourceCode .sh_number{color:#e11a70;font-weight:400;font-style:normal;}.sh_easter .sh_sourceCode .sh_preproc{color:#1583b1;font-weight:400;font-style:normal;}.sh_easter .sh_sourceCode .sh_function{color:#1d45d6;font-weight:400;font-style:normal;}.sh_emacs .sh_sourceCode .sh_type{color:#208920;font-weight:400;font-style:normal;}.sh_emacs .sh_sourceCode .sh_comment{color:#ac2020;font-weight:400;font-style:italic;}.sh_golden .sh_sourceCode{background-color:#000;color:#db0;font-weight:400;font-style:normal;}.sh_golden .sh_sourceCode .sh_type{color:#ffed8a;font-weight:400;font-style:normal;}.sh_golden .sh_sourceCode .sh_comment{color:#978345;font-weight:400;font-style:italic;}.sh_golden .sh_sourceCode .sh_preproc{color:#fda;font-weight:400;font-style:normal;}.sh_golden .sh_sourceCode .sh_function{color:#db0;font-weight:700;font-style:normal;}.sh_greenlcd .sh_sourceCode{background-color:#003400;color:#0b0;font-weight:400;font-style:normal;}.sh_greenlcd .sh_sourceCode .sh_type{color:#00ed00;font-weight:400;font-style:normal;}.sh_greenlcd .sh_sourceCode .sh_function{color:#c0ff73;font-weight:400;font-style:normal;}.sh_ide-anjuta .sh_sourceCode .sh_type{color:navy;font-weight:400;font-style:normal;}.sh_ide-anjuta .sh_sourceCode .sh_comment{color:red;font-weight:400;font-style:italic;}.sh_ide-anjuta .sh_sourceCode .sh_preproc{color:#678000;font-weight:400;font-style:normal;}.sh_ide-codewarrior .sh_sourceCode .sh_type{color:#4c73a6;font-weight:400;font-style:normal;}.sh_ide-codewarrior .sh_sourceCode .sh_comment{color:#b30000;font-weight:400;font-style:normal;}.sh_ide-devcpp .sh_sourceCode .sh_comment{color:navy;font-weight:400;font-style:italic;}.sh_ide-eclipse .sh_sourceCode .sh_comment{color:#717ab3;font-weight:400;font-style:normal;}.sh_ide-eclipse .sh_sourceCode .sh_preproc{color:#3f5fbf;font-weight:400;font-style:normal;}.sh_ide-kdev .sh_sourceCode .sh_type{color:#600000;font-weight:400;font-style:normal;}.sh_ide-kdev .sh_sourceCode .sh_comment{color:#bfbfbf;font-weight:400;font-style:italic;}.sh_ide-msvcpp .sh_sourceCode .sh_comment{color:green;font-weight:400;font-style:italic;}.sh_kwrite .sh_sourceCode .sh_type{color:#830000;font-weight:400;font-style:normal;}.sh_kwrite .sh_sourceCode .sh_comment{color:#838183;font-weight:400;font-style:italic;}.sh_kwrite .sh_sourceCode .sh_number{color:#2928ff;font-weight:400;font-style:normal;}.sh_kwrite .sh_sourceCode .sh_preproc{color:#008200;font-weight:400;font-style:normal;}.sh_kwrite .sh_sourceCode .sh_function{color:#010181;font-weight:400;font-style:normal;}.sh_navy .sh_sourceCode{background-color:#000035;color:#008bff;font-weight:400;font-style:normal;}.sh_navy .sh_sourceCode .sh_type{color:#e1e72f;font-weight:400;font-style:normal;}.sh_navy .sh_sourceCode .sh_comment{color:#fb0;font-weight:400;font-style:italic;}.sh_navy .sh_sourceCode .sh_number{color:#f87ff4;font-weight:400;font-style:normal;}.sh_nedit .sh_sourceCode .sh_comment{color:#000;font-weight:400;font-style:italic;}.sh_nedit .sh_sourceCode .sh_preproc{color:#27408b;font-weight:400;font-style:normal;}.sh_night .sh_sourceCode{background-color:#004;color:#d0f;font-weight:400;font-style:normal;}.sh_night .sh_sourceCode .sh_type{color:#f1157c;font-weight:700;font-style:normal;}.sh_night .sh_sourceCode .sh_number{color:#8ee119;font-weight:400;font-style:normal;}.sh_night .sh_sourceCode .sh_preproc{color:#0b0;font-weight:400;font-style:normal;}.sh_night .sh_sourceCode .sh_function{color:#ff06cd;font-weight:700;font-style:normal;}.sh_pablo .sh_sourceCode .sh_type{color:#00c000;font-weight:700;font-style:normal;}.sh_pablo .sh_sourceCode .sh_comment{color:gray;font-weight:400;font-style:normal;}.sh_pablo .sh_sourceCode .sh_function{color:#ff22b9;font-weight:400;font-style:normal;}.sh_peachpuff .sh_sourceCode{background-color:#ffdab9;color:#000;font-weight:400;font-style:normal;}.sh_peachpuff .sh_sourceCode .sh_type{color:#2e8b57;font-weight:700;font-style:normal;}.sh_peachpuff .sh_sourceCode .sh_comment{color:#406090;font-weight:400;font-style:normal;}.sh_peachpuff .sh_sourceCode .sh_preproc{color:#cd00cd;font-weight:400;font-style:normal;}.sh_peachpuff .sh_sourceCode .sh_function{color:#521cc7;font-weight:400;font-style:normal;}.sh_rand01 .sh_sourceCode{background-color:#fff;color:#121b28;font-weight:400;font-style:normal;}.sh_rand01 .sh_sourceCode .sh_type{color:#c42638;font-weight:700;font-style:normal;}.sh_rand01 .sh_sourceCode .sh_number{color:#0da344;font-weight:400;font-style:normal;}.sh_rand01 .sh_sourceCode .sh_preproc{color:#620ac6;font-weight:400;font-style:normal;}.sh_the .sh_sourceCode .sh_type{color:#808;font-weight:400;font-style:normal;}.sh_typical .sh_sourceCode .sh_number{color:#a900a9;font-weight:400;font-style:normal;}.sh_typical .sh_sourceCode .sh_preproc{color:#00b800;font-weight:400;font-style:normal;}.sh_vampire .sh_sourceCode{background-color:#000;color:red;font-weight:400;font-style:normal;}.sh_vampire .sh_sourceCode .sh_type{color:#F35E1E;font-weight:700;font-style:normal;}.sh_vampire .sh_sourceCode .sh_function{color:#7bc710;font-weight:400;font-style:normal;}.sh_whatis .sh_sourceCode{background-color:#000;color:#0f0;font-weight:400;font-style:normal;}.sh_whatis .sh_sourceCode .sh_function{color:#e721d3;font-weight:400;font-style:normal;}.sh_whitengrey .sh_sourceCode{background-color:#fff;color:#696969;font-weight:400;font-style:normal;}.sh_whitengrey .sh_sourceCode .sh_type{color:#696969;font-weight:400;font-style:normal;}.sh_whitengrey .sh_sourceCode .sh_comment{color:#1326a2;font-weight:400;font-style:italic;}.sh_whitengrey .sh_sourceCode .sh_preproc{color:#470000;font-weight:400;font-style:normal;}.sh_zellner .sh_sourceCode .sh_preproc{color:#a020f0;font-weight:400;font-style:normal;}.sh_acid,.sh_berries-dark,.sh_berries-light,.sh_bipolar,.sh_blacknblue,.sh_bright,.sh_contrast,.sh_darkblue,.sh_darkness,.sh_desert,.sh_dull,.sh_easter,.sh_emacs,.sh_golden,.sh_greenlcd,.sh_ide-anjuta,.sh_ide-codewarrior,.sh_ide-devcpp,.sh_ide-eclipse,.sh_ide-kdev,.sh_ide-msvcpp,.sh_kwrite,.sh_matlab,.sh_navy,.sh_nedit,.sh_neon,.sh_night,.sh_pablo,.sh_peachpuff,.sh_print,.sh_rand01,.sh_the,.sh_typical,.sh_vampire,.sh_vim-dark,.sh_vim,.sh_whatis,.sh_whitengrey,.sh_zellner{background:none;border:0 none;margin:0;padding:0;}.sh_acid .sh_sourceCode .sh_keyword,.sh_acid .sh_sourceCode .sh_date,.sh_acid .sh_sourceCode .sh_time,.sh_acid .sh_sourceCode .sh_file,.sh_acid .sh_sourceCode .sh_difflines,.sh_acid .sh_sourceCode .sh_property{color:#bb7977;font-weight:700;font-style:normal;}.sh_acid .sh_sourceCode .sh_string,.sh_acid .sh_sourceCode .sh_regexp,.sh_acid .sh_sourceCode .sh_url,.sh_acid .sh_sourceCode .sh_ip,.sh_acid .sh_sourceCode .sh_name,.sh_acid .sh_sourceCode .sh_newfile,.sh_acid .sh_sourceCode .sh_value{color:#a68500;font-weight:400;font-style:normal;}.sh_acid .sh_sourceCode .sh_specialchar,.sh_acid .sh_sourceCode .sh_oldfile{color:#f0f;font-weight:700;font-style:normal;}.sh_acid .sh_sourceCode .sh_symbol,.sh_acid .sh_sourceCode .sh_cbracket{color:#ff0080;font-weight:700;font-style:normal;}.sh_acid .sh_sourceCode .sh_variable,.sh_acid .sh_sourceCode .sh_selector{color:#0080c0;font-weight:400;font-style:normal;}.sh_berries-dark .sh_sourceCode .sh_keyword,.sh_berries-dark .sh_sourceCode .sh_date,.sh_berries-dark .sh_sourceCode .sh_time,.sh_berries-dark .sh_sourceCode .sh_file,.sh_berries-dark .sh_sourceCode .sh_difflines,.sh_berries-dark .sh_sourceCode .sh_property{color:#3f2bf0;font-weight:700;font-style:normal;}.sh_berries-dark .sh_sourceCode .sh_string,.sh_berries-dark .sh_sourceCode .sh_regexp,.sh_berries-dark .sh_sourceCode .sh_url,.sh_berries-dark .sh_sourceCode .sh_ip,.sh_berries-dark .sh_sourceCode .sh_name,.sh_berries-dark .sh_sourceCode .sh_newfile,.sh_berries-dark .sh_sourceCode .sh_value{color:#c40000;font-weight:400;font-style:normal;}.sh_berries-dark .sh_sourceCode .sh_specialchar,.sh_berries-dark .sh_sourceCode .sh_oldfile{color:#77379a;font-weight:400;font-style:normal;}.sh_berries-dark .sh_sourceCode .sh_number,.sh_berries-light .sh_sourceCode .sh_number{color:#20755a;font-weight:400;font-style:normal;}.sh_berries-dark .sh_sourceCode .sh_preproc,.sh_berries-light .sh_sourceCode .sh_preproc{color:#0628cb;font-weight:400;font-style:normal;}.sh_berries-dark .sh_sourceCode .sh_symbol,.sh_berries-dark .sh_sourceCode .sh_cbracket,.sh_contrast .sh_sourceCode .sh_comment,.sh_emacs .sh_sourceCode .sh_number,.sh_emacs .sh_sourceCode .sh_preproc,.sh_emacs .sh_sourceCode .sh_function,.sh_ide-anjuta .sh_sourceCode .sh_function,.sh_ide-codewarrior .sh_sourceCode .sh_number,.sh_ide-codewarrior .sh_sourceCode .sh_function,.sh_ide-devcpp .sh_sourceCode .sh_type,.sh_ide-devcpp .sh_sourceCode .sh_function,.sh_ide-eclipse .sh_sourceCode .sh_number,.sh_ide-eclipse .sh_sourceCode .sh_function,.sh_ide-kdev .sh_sourceCode .sh_function,.sh_ide-msvcpp .sh_sourceCode .sh_string,.sh_ide-msvcpp .sh_sourceCode .sh_regexp,.sh_ide-msvcpp .sh_sourceCode .sh_specialchar,.sh_ide-msvcpp .sh_sourceCode .sh_number,.sh_ide-msvcpp .sh_sourceCode .sh_function,.sh_ide-msvcpp .sh_sourceCode .sh_url,.sh_ide-msvcpp .sh_sourceCode .sh_ip,.sh_ide-msvcpp .sh_sourceCode .sh_name,.sh_ide-msvcpp .sh_sourceCode .sh_oldfile,.sh_ide-msvcpp .sh_sourceCode .sh_newfile,.sh_ide-msvcpp .sh_sourceCode .sh_value,.sh_matlab .sh_sourceCode .sh_type,.sh_matlab .sh_sourceCode .sh_specialchar,.sh_matlab .sh_sourceCode .sh_number,.sh_matlab .sh_sourceCode .sh_function,.sh_matlab .sh_sourceCode .sh_oldfile,.sh_nedit .sh_sourceCode .sh_function,.sh_print .sh_sourceCode .sh_string,.sh_print .sh_sourceCode .sh_regexp,.sh_print .sh_sourceCode .sh_specialchar,.sh_print .sh_sourceCode .sh_number,.sh_print .sh_sourceCode .sh_url,.sh_print .sh_sourceCode .sh_ip,.sh_print .sh_sourceCode .sh_name,.sh_print .sh_sourceCode .sh_oldfile,.sh_print .sh_sourceCode .sh_newfile,.sh_print .sh_sourceCode .sh_value,.sh_the .sh_sourceCode .sh_specialchar,.sh_the .sh_sourceCode .sh_function,.sh_the .sh_sourceCode .sh_oldfile,.sh_vim .sh_sourceCode .sh_function,.sh_whitengrey .sh_sourceCode .sh_function{color:#000;font-weight:400;font-style:normal;}.sh_berries-dark .sh_sourceCode .sh_function,.sh_berries-light .sh_sourceCode .sh_function{color:#901164;font-weight:700;font-style:normal;}.sh_berries-dark .sh_sourceCode .sh_variable,.sh_berries-dark .sh_sourceCode .sh_selector{color:#a91ea7;font-weight:400;font-style:normal;}.sh_berries-light .sh_sourceCode .sh_keyword,.sh_berries-light .sh_sourceCode .sh_date,.sh_berries-light .sh_sourceCode .sh_time,.sh_berries-light .sh_sourceCode .sh_file,.sh_berries-light .sh_sourceCode .sh_difflines,.sh_berries-light .sh_sourceCode .sh_property{color:#2cae1e;font-weight:700;font-style:normal;}.sh_berries-light .sh_sourceCode .sh_string,.sh_berries-light .sh_sourceCode .sh_regexp,.sh_berries-light .sh_sourceCode .sh_specialchar,.sh_berries-light .sh_sourceCode .sh_url,.sh_berries-light .sh_sourceCode .sh_ip,.sh_berries-light .sh_sourceCode .sh_name,.sh_berries-light .sh_sourceCode .sh_oldfile,.sh_berries-light .sh_sourceCode .sh_newfile,.sh_berries-light .sh_sourceCode .sh_value{color:#5f81b3;font-weight:400;font-style:normal;}.sh_berries-light .sh_sourceCode .sh_symbol,.sh_berries-light .sh_sourceCode .sh_cbracket{color:#d2073b;font-weight:400;font-style:normal;}.sh_berries-light .sh_sourceCode .sh_variable,.sh_berries-light .sh_sourceCode .sh_selector{color:#0628cb;font-weight:700;font-style:normal;}.sh_bipolar .sh_sourceCode .sh_keyword,.sh_bipolar .sh_sourceCode .sh_date,.sh_bipolar .sh_sourceCode .sh_time,.sh_bipolar .sh_sourceCode .sh_file,.sh_bipolar .sh_sourceCode .sh_difflines,.sh_bipolar .sh_sourceCode .sh_property{color:#ee85e2;font-weight:700;font-style:normal;}.sh_bipolar .sh_sourceCode .sh_string,.sh_bipolar .sh_sourceCode .sh_regexp,.sh_bipolar .sh_sourceCode .sh_specialchar,.sh_bipolar .sh_sourceCode .sh_url,.sh_bipolar .sh_sourceCode .sh_ip,.sh_bipolar .sh_sourceCode .sh_name,.sh_bipolar .sh_sourceCode .sh_oldfile,.sh_bipolar .sh_sourceCode .sh_newfile,.sh_bipolar .sh_sourceCode .sh_value{color:#9ef457;font-weight:400;font-style:normal;}.sh_bipolar .sh_sourceCode .sh_number,.sh_golden .sh_sourceCode .sh_number,.sh_greenlcd .sh_sourceCode .sh_number,.sh_navy .sh_sourceCode .sh_string,.sh_navy .sh_sourceCode .sh_regexp,.sh_navy .sh_sourceCode .sh_specialchar,.sh_navy .sh_sourceCode .sh_symbol,.sh_navy .sh_sourceCode .sh_function,.sh_navy .sh_sourceCode .sh_cbracket,.sh_navy .sh_sourceCode .sh_url,.sh_navy .sh_sourceCode .sh_ip,.sh_navy .sh_sourceCode .sh_name,.sh_navy .sh_sourceCode .sh_oldfile,.sh_navy .sh_sourceCode .sh_newfile,.sh_navy .sh_sourceCode .sh_value,.sh_night .sh_sourceCode .sh_string,.sh_night .sh_sourceCode .sh_regexp,.sh_night .sh_sourceCode .sh_url,.sh_night .sh_sourceCode .sh_ip,.sh_night .sh_sourceCode .sh_name,.sh_night .sh_sourceCode .sh_newfile,.sh_night .sh_sourceCode .sh_value,.sh_vampire .sh_sourceCode .sh_specialchar,.sh_vampire .sh_sourceCode .sh_variable,.sh_vampire .sh_sourceCode .sh_oldfile,.sh_vampire .sh_sourceCode .sh_selector,.sh_vim-dark .sh_sourceCode .sh_function{color:#fff;font-weight:400;font-style:normal;}.sh_bipolar .sh_sourceCode .sh_symbol,.sh_bipolar .sh_sourceCode .sh_cbracket{color:#348fef;font-weight:400;font-style:normal;}.sh_bipolar .sh_sourceCode .sh_variable,.sh_bipolar .sh_sourceCode .sh_selector{color:#72d42c;font-weight:700;font-style:normal;}.sh_blacknblue .sh_sourceCode .sh_keyword,.sh_blacknblue .sh_sourceCode .sh_date,.sh_blacknblue .sh_sourceCode .sh_time,.sh_blacknblue .sh_sourceCode .sh_file,.sh_blacknblue .sh_sourceCode .sh_difflines,.sh_blacknblue .sh_sourceCode .sh_property{color:#1ededc;font-weight:700;font-style:normal;}.sh_blacknblue .sh_sourceCode .sh_string,.sh_blacknblue .sh_sourceCode .sh_regexp,.sh_blacknblue .sh_sourceCode .sh_url,.sh_blacknblue .sh_sourceCode .sh_ip,.sh_blacknblue .sh_sourceCode .sh_name,.sh_blacknblue .sh_sourceCode .sh_newfile,.sh_blacknblue .sh_sourceCode .sh_value{color:#cfc631;font-weight:400;font-style:normal;}.sh_blacknblue .sh_sourceCode .sh_specialchar,.sh_blacknblue .sh_sourceCode .sh_symbol,.sh_blacknblue .sh_sourceCode .sh_cbracket,.sh_blacknblue .sh_sourceCode .sh_oldfile{color:#ccc6c6;font-weight:400;font-style:normal;}.sh_blacknblue .sh_sourceCode .sh_variable,.sh_blacknblue .sh_sourceCode .sh_selector{color:#ecea26;font-weight:400;font-style:normal;}.sh_bright .sh_sourceCode .sh_keyword,.sh_bright .sh_sourceCode .sh_date,.sh_bright .sh_sourceCode .sh_time,.sh_bright .sh_sourceCode .sh_file,.sh_bright .sh_sourceCode .sh_difflines,.sh_bright .sh_sourceCode .sh_property{color:#ff3030;font-weight:700;font-style:normal;}.sh_bright .sh_sourceCode .sh_string,.sh_bright .sh_sourceCode .sh_regexp,.sh_bright .sh_sourceCode .sh_specialchar,.sh_bright .sh_sourceCode .sh_url,.sh_bright .sh_sourceCode .sh_ip,.sh_bright .sh_sourceCode .sh_name,.sh_bright .sh_sourceCode .sh_oldfile,.sh_bright .sh_sourceCode .sh_newfile,.sh_bright .sh_sourceCode .sh_value{color:#1861a7;font-weight:400;font-style:normal;}.sh_bright .sh_sourceCode .sh_symbol,.sh_bright .sh_sourceCode .sh_cbracket{color:#3030ee;font-weight:400;font-style:normal;}.sh_bright .sh_sourceCode .sh_variable,.sh_bright .sh_sourceCode .sh_selector,.sh_emacs .sh_sourceCode .sh_variable,.sh_emacs .sh_sourceCode .sh_selector,.sh_ide-anjuta .sh_sourceCode .sh_variable,.sh_ide-anjuta .sh_sourceCode .sh_selector,.sh_ide-devcpp .sh_sourceCode .sh_number,.sh_ide-eclipse .sh_sourceCode .sh_string,.sh_ide-eclipse .sh_sourceCode .sh_regexp,.sh_ide-eclipse .sh_sourceCode .sh_specialchar,.sh_ide-eclipse .sh_sourceCode .sh_url,.sh_ide-eclipse .sh_sourceCode .sh_ip,.sh_ide-eclipse .sh_sourceCode .sh_name,.sh_ide-eclipse .sh_sourceCode .sh_oldfile,.sh_ide-eclipse .sh_sourceCode .sh_newfile,.sh_ide-eclipse .sh_sourceCode .sh_value,.sh_ide-kdev .sh_sourceCode .sh_number,.sh_ide-msvcpp .sh_sourceCode .sh_type,.sh_ide-msvcpp .sh_sourceCode .sh_preproc,.sh_matlab .sh_sourceCode .sh_keyword,.sh_matlab .sh_sourceCode .sh_date,.sh_matlab .sh_sourceCode .sh_time,.sh_matlab .sh_sourceCode .sh_file,.sh_matlab .sh_sourceCode .sh_variable,.sh_matlab .sh_sourceCode .sh_difflines,.sh_matlab .sh_sourceCode .sh_selector,.sh_matlab .sh_sourceCode .sh_property,.sh_pablo .sh_sourceCode .sh_specialchar,.sh_pablo .sh_sourceCode .sh_oldfile,.sh_the .sh_sourceCode .sh_keyword,.sh_the .sh_sourceCode .sh_date,.sh_the .sh_sourceCode .sh_time,.sh_the .sh_sourceCode .sh_file,.sh_the .sh_sourceCode .sh_variable,.sh_the .sh_sourceCode .sh_difflines,.sh_the .sh_sourceCode .sh_selector,.sh_the .sh_sourceCode .sh_property,.sh_typical .sh_sourceCode .sh_type,.sh_vim-dark .sh_sourceCode .sh_comment,.sh_vim .sh_sourceCode .sh_comment,.sh_zellner .sh_sourceCode .sh_type{color:#00f;font-weight:400;font-style:normal;}.sh_contrast .sh_sourceCode .sh_keyword,.sh_contrast .sh_sourceCode .sh_type,.sh_contrast .sh_sourceCode .sh_date,.sh_contrast .sh_sourceCode .sh_time,.sh_contrast .sh_sourceCode .sh_file,.sh_contrast .sh_sourceCode .sh_difflines,.sh_contrast .sh_sourceCode .sh_property,.sh_darkblue .sh_sourceCode .sh_function,.sh_neon .sh_sourceCode .sh_function,.sh_night .sh_sourceCode .sh_keyword,.sh_night .sh_sourceCode .sh_date,.sh_night .sh_sourceCode .sh_time,.sh_night .sh_sourceCode .sh_file,.sh_night .sh_sourceCode .sh_difflines,.sh_night .sh_sourceCode .sh_property,.sh_vampire .sh_sourceCode .sh_keyword,.sh_vampire .sh_sourceCode .sh_date,.sh_vampire .sh_sourceCode .sh_time,.sh_vampire .sh_sourceCode .sh_file,.sh_vampire .sh_sourceCode .sh_difflines,.sh_vampire .sh_sourceCode .sh_property,.sh_whatis .sh_sourceCode .sh_type{color:#fff;font-weight:700;font-style:normal;}.sh_contrast .sh_sourceCode .sh_string,.sh_contrast .sh_sourceCode .sh_regexp,.sh_contrast .sh_sourceCode .sh_specialchar,.sh_contrast .sh_sourceCode .sh_url,.sh_contrast .sh_sourceCode .sh_ip,.sh_contrast .sh_sourceCode .sh_name,.sh_contrast .sh_sourceCode .sh_oldfile,.sh_contrast .sh_sourceCode .sh_newfile,.sh_contrast .sh_sourceCode .sh_value{color:#11f80c;font-weight:400;font-style:normal;}.sh_contrast .sh_sourceCode .sh_symbol,.sh_contrast .sh_sourceCode .sh_cbracket,.sh_golden .sh_sourceCode .sh_variable,.sh_golden .sh_sourceCode .sh_selector{color:#dedede;font-weight:700;font-style:normal;}.sh_contrast .sh_sourceCode .sh_variable,.sh_contrast .sh_sourceCode .sh_selector{color:#11f80c;font-weight:700;font-style:normal;}.sh_darkblue .sh_sourceCode .sh_keyword,.sh_darkblue .sh_sourceCode .sh_date,.sh_darkblue .sh_sourceCode .sh_time,.sh_darkblue .sh_sourceCode .sh_file,.sh_darkblue .sh_sourceCode .sh_difflines,.sh_darkblue .sh_sourceCode .sh_property{color:#ffff60;font-weight:400;font-style:normal;}.sh_darkblue .sh_sourceCode .sh_string,.sh_darkblue .sh_sourceCode .sh_regexp,.sh_darkblue .sh_sourceCode .sh_url,.sh_darkblue .sh_sourceCode .sh_ip,.sh_darkblue .sh_sourceCode .sh_name,.sh_darkblue .sh_sourceCode .sh_newfile,.sh_darkblue .sh_sourceCode .sh_value{color:#ffa0a0;font-weight:400;font-style:normal;}.sh_darkblue .sh_sourceCode .sh_specialchar,.sh_darkblue .sh_sourceCode .sh_oldfile{color:orange;font-weight:400;font-style:normal;}.sh_darkblue .sh_sourceCode .sh_symbol,.sh_darkblue .sh_sourceCode .sh_cbracket{color:#d8e91b;font-weight:700;font-style:normal;}.sh_darkblue .sh_sourceCode .sh_variable,.sh_darkblue .sh_sourceCode .sh_selector,.sh_darkness .sh_sourceCode .sh_variable,.sh_darkness .sh_sourceCode .sh_selector{color:#26e0e7;font-weight:400;font-style:normal;}.sh_darkness .sh_sourceCode,.sh_neon .sh_sourceCode,.sh_pablo .sh_sourceCode,.sh_vim-dark .sh_sourceCode{background-color:#000;color:#fff;font-weight:400;font-style:normal;}.sh_darkness .sh_sourceCode .sh_keyword,.sh_darkness .sh_sourceCode .sh_date,.sh_darkness .sh_sourceCode .sh_time,.sh_darkness .sh_sourceCode .sh_file,.sh_darkness .sh_sourceCode .sh_difflines,.sh_darkness .sh_sourceCode .sh_property{color:#ff0;font-weight:700;font-style:normal;}.sh_darkness .sh_sourceCode .sh_type,.sh_pablo .sh_sourceCode .sh_preproc,.sh_vim-dark .sh_sourceCode .sh_type,.sh_vim .sh_sourceCode .sh_type{color:#0f0;font-weight:400;font-style:normal;}.sh_darkness .sh_sourceCode .sh_string,.sh_darkness .sh_sourceCode .sh_regexp,.sh_darkness .sh_sourceCode .sh_url,.sh_darkness .sh_sourceCode .sh_ip,.sh_darkness .sh_sourceCode .sh_name,.sh_darkness .sh_sourceCode .sh_newfile,.sh_darkness .sh_sourceCode .sh_value{color:#abab00;font-weight:700;font-style:normal;}.sh_darkness .sh_sourceCode .sh_specialchar,.sh_darkness .sh_sourceCode .sh_oldfile,.sh_greenlcd .sh_sourceCode .sh_preproc,.sh_night .sh_sourceCode .sh_comment,.sh_whatis .sh_sourceCode .sh_preproc{color:#bfbfbf;font-weight:400;font-style:normal;}.sh_darkness .sh_sourceCode .sh_comment,.sh_greenlcd .sh_sourceCode .sh_comment{color:#888;font-weight:400;font-style:italic;}.sh_darkness .sh_sourceCode .sh_symbol,.sh_darkness .sh_sourceCode .sh_cbracket,.sh_kwrite .sh_sourceCode .sh_specialchar,.sh_kwrite .sh_sourceCode .sh_oldfile,.sh_neon .sh_sourceCode .sh_number,.sh_zellner .sh_sourceCode .sh_string,.sh_zellner .sh_sourceCode .sh_regexp,.sh_zellner .sh_sourceCode .sh_specialchar,.sh_zellner .sh_sourceCode .sh_number,.sh_zellner .sh_sourceCode .sh_url,.sh_zellner .sh_sourceCode .sh_ip,.sh_zellner .sh_sourceCode .sh_name,.sh_zellner .sh_sourceCode .sh_oldfile,.sh_zellner .sh_sourceCode .sh_newfile,.sh_zellner .sh_sourceCode .sh_value{color:#f0f;font-weight:400;font-style:normal;}.sh_desert .sh_sourceCode .sh_keyword,.sh_desert .sh_sourceCode .sh_date,.sh_desert .sh_sourceCode .sh_time,.sh_desert .sh_sourceCode .sh_file,.sh_desert .sh_sourceCode .sh_difflines,.sh_desert .sh_sourceCode .sh_property{color:#fef8bc;font-weight:700;font-style:normal;}.sh_desert .sh_sourceCode .sh_string,.sh_desert .sh_sourceCode .sh_regexp,.sh_desert .sh_sourceCode .sh_specialchar,.sh_desert .sh_sourceCode .sh_url,.sh_desert .sh_sourceCode .sh_ip,.sh_desert .sh_sourceCode .sh_name,.sh_desert .sh_sourceCode .sh_oldfile,.sh_desert .sh_sourceCode .sh_newfile,.sh_desert .sh_sourceCode .sh_value{color:#f6f647;font-weight:400;font-style:normal;}.sh_desert .sh_sourceCode .sh_symbol,.sh_desert .sh_sourceCode .sh_cbracket{color:#66574f;font-weight:400;font-style:normal;}.sh_desert .sh_sourceCode .sh_variable,.sh_desert .sh_sourceCode .sh_selector,.sh_ide-devcpp .sh_sourceCode .sh_keyword,.sh_ide-devcpp .sh_sourceCode .sh_date,.sh_ide-devcpp .sh_sourceCode .sh_time,.sh_ide-devcpp .sh_sourceCode .sh_file,.sh_ide-devcpp .sh_sourceCode .sh_variable,.sh_ide-devcpp .sh_sourceCode .sh_difflines,.sh_ide-devcpp .sh_sourceCode .sh_selector,.sh_ide-devcpp .sh_sourceCode .sh_property,.sh_kwrite .sh_sourceCode .sh_keyword,.sh_kwrite .sh_sourceCode .sh_date,.sh_kwrite .sh_sourceCode .sh_time,.sh_kwrite .sh_sourceCode .sh_file,.sh_kwrite .sh_sourceCode .sh_variable,.sh_kwrite .sh_sourceCode .sh_difflines,.sh_kwrite .sh_sourceCode .sh_selector,.sh_kwrite .sh_sourceCode .sh_property,.sh_nedit .sh_sourceCode .sh_keyword,.sh_nedit .sh_sourceCode .sh_symbol,.sh_nedit .sh_sourceCode .sh_cbracket,.sh_nedit .sh_sourceCode .sh_date,.sh_nedit .sh_sourceCode .sh_time,.sh_nedit .sh_sourceCode .sh_file,.sh_nedit .sh_sourceCode .sh_difflines,.sh_nedit .sh_sourceCode .sh_property,.sh_print .sh_sourceCode .sh_keyword,.sh_print .sh_sourceCode .sh_type,.sh_print .sh_sourceCode .sh_preproc,.sh_print .sh_sourceCode .sh_symbol,.sh_print .sh_sourceCode .sh_cbracket,.sh_print .sh_sourceCode .sh_date,.sh_print .sh_sourceCode .sh_time,.sh_print .sh_sourceCode .sh_file,.sh_print .sh_sourceCode .sh_variable,.sh_print .sh_sourceCode .sh_difflines,.sh_print .sh_sourceCode .sh_selector,.sh_print .sh_sourceCode .sh_property,.sh_rand01 .sh_sourceCode .sh_function,.sh_typical .sh_sourceCode .sh_function,.sh_zellner .sh_sourceCode .sh_function{color:#000;font-weight:700;font-style:normal;}.sh_dull .sh_sourceCode .sh_keyword,.sh_dull .sh_sourceCode .sh_date,.sh_dull .sh_sourceCode .sh_time,.sh_dull .sh_sourceCode .sh_file,.sh_dull .sh_sourceCode .sh_difflines,.sh_dull .sh_sourceCode .sh_property{color:#353535;font-weight:700;font-style:normal;}.sh_dull .sh_sourceCode .sh_string,.sh_dull .sh_sourceCode .sh_regexp,.sh_dull .sh_sourceCode .sh_specialchar,.sh_dull .sh_sourceCode .sh_url,.sh_dull .sh_sourceCode .sh_ip,.sh_dull .sh_sourceCode .sh_name,.sh_dull .sh_sourceCode .sh_oldfile,.sh_dull .sh_sourceCode .sh_newfile,.sh_dull .sh_sourceCode .sh_value{color:#059;font-weight:400;font-style:normal;}.sh_dull .sh_sourceCode .sh_symbol,.sh_dull .sh_sourceCode .sh_cbracket{color:#222;font-weight:400;font-style:normal;}.sh_dull .sh_sourceCode .sh_variable,.sh_dull .sh_sourceCode .sh_selector{color:#ae5a16;font-weight:400;font-style:normal;}.sh_easter .sh_sourceCode .sh_keyword,.sh_easter .sh_sourceCode .sh_date,.sh_easter .sh_sourceCode .sh_time,.sh_easter .sh_sourceCode .sh_file,.sh_easter .sh_sourceCode .sh_difflines,.sh_easter .sh_sourceCode .sh_property{color:#1d45d6;font-weight:700;font-style:normal;}.sh_easter .sh_sourceCode .sh_string,.sh_easter .sh_sourceCode .sh_regexp,.sh_easter .sh_sourceCode .sh_specialchar,.sh_easter .sh_sourceCode .sh_url,.sh_easter .sh_sourceCode .sh_ip,.sh_easter .sh_sourceCode .sh_name,.sh_easter .sh_sourceCode .sh_oldfile,.sh_easter .sh_sourceCode .sh_newfile,.sh_easter .sh_sourceCode .sh_value{color:#ca4be3;font-weight:400;font-style:normal;}.sh_easter .sh_sourceCode .sh_symbol,.sh_easter .sh_sourceCode .sh_cbracket{color:#fa4700;font-weight:400;font-style:normal;}.sh_easter .sh_sourceCode .sh_variable,.sh_easter .sh_sourceCode .sh_selector{color:#26aae7;font-weight:700;font-style:normal;}.sh_emacs .sh_sourceCode,.sh_ide-anjuta .sh_sourceCode,.sh_ide-codewarrior .sh_sourceCode,.sh_ide-devcpp .sh_sourceCode,.sh_ide-eclipse .sh_sourceCode,.sh_ide-kdev .sh_sourceCode,.sh_ide-msvcpp .sh_sourceCode,.sh_kwrite .sh_sourceCode,.sh_matlab .sh_sourceCode,.sh_nedit .sh_sourceCode,.sh_print .sh_sourceCode,.sh_the .sh_sourceCode,.sh_typical .sh_sourceCode,.sh_vim .sh_sourceCode,.sh_zellner .sh_sourceCode{background-color:#fff;color:#000;font-weight:400;font-style:normal;}.sh_emacs .sh_sourceCode .sh_keyword,.sh_emacs .sh_sourceCode .sh_date,.sh_emacs .sh_sourceCode .sh_time,.sh_emacs .sh_sourceCode .sh_file,.sh_emacs .sh_sourceCode .sh_difflines,.sh_emacs .sh_sourceCode .sh_property{color:#9c20ee;font-weight:700;font-style:normal;}.sh_emacs .sh_sourceCode .sh_string,.sh_emacs .sh_sourceCode .sh_regexp,.sh_emacs .sh_sourceCode .sh_specialchar,.sh_emacs .sh_sourceCode .sh_url,.sh_emacs .sh_sourceCode .sh_ip,.sh_emacs .sh_sourceCode .sh_name,.sh_emacs .sh_sourceCode .sh_oldfile,.sh_emacs .sh_sourceCode .sh_newfile,.sh_emacs .sh_sourceCode .sh_value{color:#bd8d8b;font-weight:400;font-style:normal;}.sh_golden .sh_sourceCode .sh_keyword,.sh_golden .sh_sourceCode .sh_date,.sh_golden .sh_sourceCode .sh_time,.sh_golden .sh_sourceCode .sh_file,.sh_golden .sh_sourceCode .sh_difflines,.sh_golden .sh_sourceCode .sh_property{color:#ffed8a;font-weight:700;font-style:normal;}.sh_golden .sh_sourceCode .sh_string,.sh_golden .sh_sourceCode .sh_regexp,.sh_golden .sh_sourceCode .sh_specialchar,.sh_golden .sh_sourceCode .sh_url,.sh_golden .sh_sourceCode .sh_ip,.sh_golden .sh_sourceCode .sh_name,.sh_golden .sh_sourceCode .sh_oldfile,.sh_golden .sh_sourceCode .sh_newfile,.sh_golden .sh_sourceCode .sh_value,.sh_ide-devcpp .sh_sourceCode .sh_string,.sh_ide-devcpp .sh_sourceCode .sh_regexp,.sh_ide-devcpp .sh_sourceCode .sh_specialchar,.sh_ide-devcpp .sh_sourceCode .sh_url,.sh_ide-devcpp .sh_sourceCode .sh_ip,.sh_ide-devcpp .sh_sourceCode .sh_name,.sh_ide-devcpp .sh_sourceCode .sh_oldfile,.sh_ide-devcpp .sh_sourceCode .sh_newfile,.sh_ide-devcpp .sh_sourceCode .sh_value,.sh_ide-kdev .sh_sourceCode .sh_string,.sh_ide-kdev .sh_sourceCode .sh_regexp,.sh_ide-kdev .sh_sourceCode .sh_specialchar,.sh_ide-kdev .sh_sourceCode .sh_url,.sh_ide-kdev .sh_sourceCode .sh_ip,.sh_ide-kdev .sh_sourceCode .sh_name,.sh_ide-kdev .sh_sourceCode .sh_oldfile,.sh_ide-kdev .sh_sourceCode .sh_newfile,.sh_ide-kdev .sh_sourceCode .sh_value,.sh_kwrite .sh_sourceCode .sh_string,.sh_kwrite .sh_sourceCode .sh_regexp,.sh_kwrite .sh_sourceCode .sh_url,.sh_kwrite .sh_sourceCode .sh_ip,.sh_kwrite .sh_sourceCode .sh_name,.sh_kwrite .sh_sourceCode .sh_newfile,.sh_kwrite .sh_sourceCode .sh_value,.sh_pablo .sh_sourceCode .sh_symbol,.sh_pablo .sh_sourceCode .sh_cbracket,.sh_the .sh_sourceCode .sh_number,.sh_the .sh_sourceCode .sh_preproc,.sh_typical .sh_sourceCode .sh_string,.sh_typical .sh_sourceCode .sh_regexp,.sh_typical .sh_sourceCode .sh_symbol,.sh_typical .sh_sourceCode .sh_cbracket,.sh_typical .sh_sourceCode .sh_url,.sh_typical .sh_sourceCode .sh_ip,.sh_typical .sh_sourceCode .sh_name,.sh_typical .sh_sourceCode .sh_newfile,.sh_typical .sh_sourceCode .sh_value,.sh_vim-dark .sh_sourceCode .sh_string,.sh_vim-dark .sh_sourceCode .sh_regexp,.sh_vim-dark .sh_sourceCode .sh_number,.sh_vim-dark .sh_sourceCode .sh_url,.sh_vim-dark .sh_sourceCode .sh_ip,.sh_vim-dark .sh_sourceCode .sh_name,.sh_vim-dark .sh_sourceCode .sh_newfile,.sh_vim-dark .sh_sourceCode .sh_value,.sh_vim .sh_sourceCode .sh_string,.sh_vim .sh_sourceCode .sh_regexp,.sh_vim .sh_sourceCode .sh_number,.sh_vim .sh_sourceCode .sh_url,.sh_vim .sh_sourceCode .sh_ip,.sh_vim .sh_sourceCode .sh_name,.sh_vim .sh_sourceCode .sh_newfile,.sh_vim .sh_sourceCode .sh_value,.sh_whatis .sh_sourceCode .sh_comment,.sh_zellner .sh_sourceCode .sh_comment{color:red;font-weight:400;font-style:normal;}.sh_golden .sh_sourceCode .sh_symbol,.sh_golden .sh_sourceCode .sh_cbracket,.sh_vampire .sh_sourceCode .sh_preproc{color:#ababab;font-weight:400;font-style:normal;}.sh_greenlcd .sh_sourceCode .sh_keyword,.sh_greenlcd .sh_sourceCode .sh_date,.sh_greenlcd .sh_sourceCode .sh_time,.sh_greenlcd .sh_sourceCode .sh_file,.sh_greenlcd .sh_sourceCode .sh_difflines,.sh_greenlcd .sh_sourceCode .sh_property{color:#00ed00;font-weight:700;font-style:normal;}.sh_greenlcd .sh_sourceCode .sh_string,.sh_greenlcd .sh_sourceCode .sh_regexp,.sh_greenlcd .sh_sourceCode .sh_specialchar,.sh_greenlcd .sh_sourceCode .sh_url,.sh_greenlcd .sh_sourceCode .sh_ip,.sh_greenlcd .sh_sourceCode .sh_name,.sh_greenlcd .sh_sourceCode .sh_oldfile,.sh_greenlcd .sh_sourceCode .sh_newfile,.sh_greenlcd .sh_sourceCode .sh_value{color:#dfdfdf;font-weight:400;font-style:normal;}.sh_greenlcd .sh_sourceCode .sh_symbol,.sh_greenlcd .sh_sourceCode .sh_cbracket{color:#2fe7a9;font-weight:400;font-style:normal;}.sh_greenlcd .sh_sourceCode .sh_variable,.sh_greenlcd .sh_sourceCode .sh_selector{color:#beef13;font-weight:400;font-style:normal;}.sh_ide-anjuta .sh_sourceCode .sh_keyword,.sh_ide-anjuta .sh_sourceCode .sh_date,.sh_ide-anjuta .sh_sourceCode .sh_time,.sh_ide-anjuta .sh_sourceCode .sh_file,.sh_ide-anjuta .sh_sourceCode .sh_difflines,.sh_ide-anjuta .sh_sourceCode .sh_property{color:navy;font-weight:700;font-style:normal;}.sh_ide-anjuta .sh_sourceCode .sh_string,.sh_ide-anjuta .sh_sourceCode .sh_regexp,.sh_ide-anjuta .sh_sourceCode .sh_specialchar,.sh_ide-anjuta .sh_sourceCode .sh_url,.sh_ide-anjuta .sh_sourceCode .sh_ip,.sh_ide-anjuta .sh_sourceCode .sh_name,.sh_ide-anjuta .sh_sourceCode .sh_oldfile,.sh_ide-anjuta .sh_sourceCode .sh_newfile,.sh_ide-anjuta .sh_sourceCode .sh_value{color:#db0;font-weight:400;font-style:normal;}.sh_ide-anjuta .sh_sourceCode .sh_number,.sh_whitengrey .sh_sourceCode .sh_string,.sh_whitengrey .sh_sourceCode .sh_regexp,.sh_whitengrey .sh_sourceCode .sh_specialchar,.sh_whitengrey .sh_sourceCode .sh_url,.sh_whitengrey .sh_sourceCode .sh_ip,.sh_whitengrey .sh_sourceCode .sh_name,.sh_whitengrey .sh_sourceCode .sh_oldfile,.sh_whitengrey .sh_sourceCode .sh_newfile,.sh_whitengrey .sh_sourceCode .sh_value{color:#080;font-weight:400;font-style:normal;}.sh_ide-codewarrior .sh_sourceCode .sh_keyword,.sh_ide-codewarrior .sh_sourceCode .sh_preproc,.sh_ide-codewarrior .sh_sourceCode .sh_date,.sh_ide-codewarrior .sh_sourceCode .sh_time,.sh_ide-codewarrior .sh_sourceCode .sh_file,.sh_ide-codewarrior .sh_sourceCode .sh_variable,.sh_ide-codewarrior .sh_sourceCode .sh_difflines,.sh_ide-codewarrior .sh_sourceCode .sh_selector,.sh_ide-codewarrior .sh_sourceCode .sh_property{color:#0000b3;font-weight:400;font-style:normal;}.sh_ide-codewarrior .sh_sourceCode .sh_string,.sh_ide-codewarrior .sh_sourceCode .sh_regexp,.sh_ide-codewarrior .sh_sourceCode .sh_specialchar,.sh_ide-codewarrior .sh_sourceCode .sh_url,.sh_ide-codewarrior .sh_sourceCode .sh_ip,.sh_ide-codewarrior .sh_sourceCode .sh_name,.sh_ide-codewarrior .sh_sourceCode .sh_oldfile,.sh_ide-codewarrior .sh_sourceCode .sh_newfile,.sh_ide-codewarrior .sh_sourceCode .sh_value{color:#666;font-weight:400;font-style:normal;}.sh_ide-devcpp .sh_sourceCode .sh_preproc,.sh_ide-kdev .sh_sourceCode .sh_preproc{color:green;font-weight:400;font-style:normal;}.sh_ide-eclipse .sh_sourceCode .sh_keyword,.sh_ide-eclipse .sh_sourceCode .sh_type,.sh_ide-eclipse .sh_sourceCode .sh_date,.sh_ide-eclipse .sh_sourceCode .sh_time,.sh_ide-eclipse .sh_sourceCode .sh_file,.sh_ide-eclipse .sh_sourceCode .sh_variable,.sh_ide-eclipse .sh_sourceCode .sh_difflines,.sh_ide-eclipse .sh_sourceCode .sh_selector,.sh_ide-eclipse .sh_sourceCode .sh_property{color:#7f0055;font-weight:700;font-style:normal;}.sh_ide-kdev .sh_sourceCode .sh_keyword,.sh_ide-kdev .sh_sourceCode .sh_date,.sh_ide-kdev .sh_sourceCode .sh_time,.sh_ide-kdev .sh_sourceCode .sh_file,.sh_ide-kdev .sh_sourceCode .sh_variable,.sh_ide-kdev .sh_sourceCode .sh_difflines,.sh_ide-kdev .sh_sourceCode .sh_selector,.sh_ide-kdev .sh_sourceCode .sh_property{color:#600000;font-weight:700;font-style:normal;}.sh_ide-msvcpp .sh_sourceCode .sh_keyword,.sh_ide-msvcpp .sh_sourceCode .sh_date,.sh_ide-msvcpp .sh_sourceCode .sh_time,.sh_ide-msvcpp .sh_sourceCode .sh_file,.sh_ide-msvcpp .sh_sourceCode .sh_variable,.sh_ide-msvcpp .sh_sourceCode .sh_difflines,.sh_ide-msvcpp .sh_sourceCode .sh_selector,.sh_ide-msvcpp .sh_sourceCode .sh_property,.sh_typical .sh_sourceCode .sh_keyword,.sh_typical .sh_sourceCode .sh_date,.sh_typical .sh_sourceCode .sh_time,.sh_typical .sh_sourceCode .sh_file,.sh_typical .sh_sourceCode .sh_difflines,.sh_typical .sh_sourceCode .sh_property{color:#00f;font-weight:700;font-style:normal;}.sh_matlab .sh_sourceCode .sh_string,.sh_matlab .sh_sourceCode .sh_regexp,.sh_matlab .sh_sourceCode .sh_url,.sh_matlab .sh_sourceCode .sh_ip,.sh_matlab .sh_sourceCode .sh_name,.sh_matlab .sh_sourceCode .sh_newfile,.sh_matlab .sh_sourceCode .sh_value{color:maroon;font-weight:400;font-style:normal;}.sh_navy .sh_sourceCode .sh_keyword,.sh_navy .sh_sourceCode .sh_date,.sh_navy .sh_sourceCode .sh_time,.sh_navy .sh_sourceCode .sh_file,.sh_navy .sh_sourceCode .sh_difflines,.sh_navy .sh_sourceCode .sh_property{color:#f8c50b;font-weight:700;font-style:normal;}.sh_navy .sh_sourceCode .sh_preproc,.sh_vampire .sh_sourceCode .sh_string,.sh_vampire .sh_sourceCode .sh_regexp,.sh_vampire .sh_sourceCode .sh_number,.sh_vampire .sh_sourceCode .sh_url,.sh_vampire .sh_sourceCode .sh_ip,.sh_vampire .sh_sourceCode .sh_name,.sh_vampire .sh_sourceCode .sh_newfile,.sh_vampire .sh_sourceCode .sh_value,.sh_whitengrey .sh_sourceCode .sh_number{color:#b0f;font-weight:400;font-style:normal;}.sh_navy .sh_sourceCode .sh_variable,.sh_navy .sh_sourceCode .sh_selector{color:#13d8ef;font-weight:400;font-style:normal;}.sh_nedit .sh_sourceCode .sh_type,.sh_peachpuff .sh_sourceCode .sh_keyword,.sh_peachpuff .sh_sourceCode .sh_date,.sh_peachpuff .sh_sourceCode .sh_time,.sh_peachpuff .sh_sourceCode .sh_file,.sh_peachpuff .sh_sourceCode .sh_difflines,.sh_peachpuff .sh_sourceCode .sh_property{color:#a52a2a;font-weight:700;font-style:normal;}.sh_nedit .sh_sourceCode .sh_string,.sh_nedit .sh_sourceCode .sh_regexp,.sh_nedit .sh_sourceCode .sh_number,.sh_nedit .sh_sourceCode .sh_url,.sh_nedit .sh_sourceCode .sh_ip,.sh_nedit .sh_sourceCode .sh_name,.sh_nedit .sh_sourceCode .sh_newfile,.sh_nedit .sh_sourceCode .sh_value{color:#006400;font-weight:400;font-style:normal;}.sh_nedit .sh_sourceCode .sh_specialchar,.sh_nedit .sh_sourceCode .sh_oldfile{color:#2e8b57;font-weight:400;font-style:normal;}.sh_nedit .sh_sourceCode .sh_variable,.sh_nedit .sh_sourceCode .sh_selector{color:#dda0dd;font-weight:700;font-style:normal;}.sh_neon .sh_sourceCode .sh_keyword,.sh_neon .sh_sourceCode .sh_date,.sh_neon .sh_sourceCode .sh_time,.sh_neon .sh_sourceCode .sh_file,.sh_neon .sh_sourceCode .sh_difflines,.sh_neon .sh_sourceCode .sh_property{color:#0ff;font-weight:700;font-style:normal;}.sh_neon .sh_sourceCode .sh_type,.sh_whatis .sh_sourceCode .sh_number{color:#ff0;font-weight:400;font-style:normal;}.sh_neon .sh_sourceCode .sh_string,.sh_neon .sh_sourceCode .sh_regexp,.sh_neon .sh_sourceCode .sh_specialchar,.sh_neon .sh_sourceCode .sh_url,.sh_neon .sh_sourceCode .sh_ip,.sh_neon .sh_sourceCode .sh_name,.sh_neon .sh_sourceCode .sh_oldfile,.sh_neon .sh_sourceCode .sh_newfile,.sh_neon .sh_sourceCode .sh_value{color:#cd00ff;font-weight:400;font-style:normal;}.sh_neon .sh_sourceCode .sh_comment,.sh_the .sh_sourceCode .sh_comment{color:#0f0;font-weight:400;font-style:italic;}.sh_neon .sh_sourceCode .sh_preproc,.sh_whatis .sh_sourceCode .sh_string,.sh_whatis .sh_sourceCode .sh_regexp,.sh_whatis .sh_sourceCode .sh_specialchar,.sh_whatis .sh_sourceCode .sh_url,.sh_whatis .sh_sourceCode .sh_ip,.sh_whatis .sh_sourceCode .sh_name,.sh_whatis .sh_sourceCode .sh_oldfile,.sh_whatis .sh_sourceCode .sh_newfile,.sh_whatis .sh_sourceCode .sh_value{color:#fb0;font-weight:400;font-style:normal;}.sh_neon .sh_sourceCode .sh_symbol,.sh_neon .sh_sourceCode .sh_cbracket{color:#ee5896;font-weight:700;font-style:normal;}.sh_neon .sh_sourceCode .sh_variable,.sh_neon .sh_sourceCode .sh_selector{color:#ef1347;font-weight:700;font-style:normal;}.sh_night .sh_sourceCode .sh_specialchar,.sh_night .sh_sourceCode .sh_oldfile{color:#82d66d;font-weight:400;font-style:normal;}.sh_night .sh_sourceCode .sh_symbol,.sh_night .sh_sourceCode .sh_cbracket{color:#e7ee5c;font-weight:700;font-style:normal;}.sh_night .sh_sourceCode .sh_variable,.sh_night .sh_sourceCode .sh_selector{color:#7aec27;font-weight:700;font-style:normal;}.sh_pablo .sh_sourceCode .sh_keyword,.sh_pablo .sh_sourceCode .sh_date,.sh_pablo .sh_sourceCode .sh_time,.sh_pablo .sh_sourceCode .sh_file,.sh_pablo .sh_sourceCode .sh_difflines,.sh_pablo .sh_sourceCode .sh_property{color:#c0c000;font-weight:700;font-style:normal;}.sh_pablo .sh_sourceCode .sh_string,.sh_pablo .sh_sourceCode .sh_regexp,.sh_pablo .sh_sourceCode .sh_number,.sh_pablo .sh_sourceCode .sh_url,.sh_pablo .sh_sourceCode .sh_ip,.sh_pablo .sh_sourceCode .sh_name,.sh_pablo .sh_sourceCode .sh_newfile,.sh_pablo .sh_sourceCode .sh_value,.sh_whatis .sh_sourceCode .sh_symbol,.sh_whatis .sh_sourceCode .sh_cbracket{color:#0ff;font-weight:400;font-style:normal;}.sh_pablo .sh_sourceCode .sh_variable,.sh_pablo .sh_sourceCode .sh_selector{color:#0000c0;font-weight:700;font-style:normal;}.sh_peachpuff .sh_sourceCode .sh_string,.sh_peachpuff .sh_sourceCode .sh_regexp,.sh_peachpuff .sh_sourceCode .sh_number,.sh_peachpuff .sh_sourceCode .sh_url,.sh_peachpuff .sh_sourceCode .sh_ip,.sh_peachpuff .sh_sourceCode .sh_name,.sh_peachpuff .sh_sourceCode .sh_newfile,.sh_peachpuff .sh_sourceCode .sh_value{color:#c00058;font-weight:400;font-style:normal;}.sh_peachpuff .sh_sourceCode .sh_specialchar,.sh_peachpuff .sh_sourceCode .sh_oldfile{color:#6a5acd;font-weight:400;font-style:normal;}.sh_peachpuff .sh_sourceCode .sh_variable,.sh_peachpuff .sh_sourceCode .sh_selector{color:#275fec;font-weight:700;font-style:normal;}.sh_print .sh_sourceCode .sh_comment,.sh_typical .sh_sourceCode .sh_comment{color:#666;font-weight:400;font-style:italic;}.sh_rand01 .sh_sourceCode .sh_keyword,.sh_rand01 .sh_sourceCode .sh_date,.sh_rand01 .sh_sourceCode .sh_time,.sh_rand01 .sh_sourceCode .sh_file,.sh_rand01 .sh_sourceCode .sh_difflines,.sh_rand01 .sh_sourceCode .sh_property{color:#0a7f6d;font-weight:700;font-style:normal;}.sh_rand01 .sh_sourceCode .sh_string,.sh_rand01 .sh_sourceCode .sh_regexp,.sh_rand01 .sh_sourceCode .sh_url,.sh_rand01 .sh_sourceCode .sh_ip,.sh_rand01 .sh_sourceCode .sh_name,.sh_rand01 .sh_sourceCode .sh_newfile,.sh_rand01 .sh_sourceCode .sh_value{color:#2b83ba;font-weight:400;font-style:normal;}.sh_rand01 .sh_sourceCode .sh_specialchar,.sh_rand01 .sh_sourceCode .sh_oldfile{color:#a764cb;font-weight:400;font-style:normal;}.sh_rand01 .sh_sourceCode .sh_comment,.sh_vampire .sh_sourceCode .sh_comment{color:#ababab;font-weight:400;font-style:italic;}.sh_rand01 .sh_sourceCode .sh_symbol,.sh_rand01 .sh_sourceCode .sh_cbracket{color:#0000de;font-weight:400;font-style:normal;}.sh_rand01 .sh_sourceCode .sh_variable,.sh_rand01 .sh_sourceCode .sh_selector{color:#e12f76;font-weight:700;font-style:normal;}.sh_the .sh_sourceCode .sh_string,.sh_the .sh_sourceCode .sh_regexp,.sh_the .sh_sourceCode .sh_url,.sh_the .sh_sourceCode .sh_ip,.sh_the .sh_sourceCode .sh_name,.sh_the .sh_sourceCode .sh_newfile,.sh_the .sh_sourceCode .sh_value{color:#008;font-weight:400;font-style:normal;}.sh_typical .sh_sourceCode .sh_specialchar,.sh_typical .sh_sourceCode .sh_oldfile{color:#C42DA8;font-weight:400;font-style:normal;}.sh_typical .sh_sourceCode .sh_variable,.sh_typical .sh_sourceCode .sh_selector{color:#ec7f15;font-weight:400;font-style:normal;}.sh_vampire .sh_sourceCode .sh_symbol,.sh_vampire .sh_sourceCode .sh_cbracket{color:#F3E651;font-weight:400;font-style:normal;}.sh_vim-dark .sh_sourceCode .sh_keyword,.sh_vim-dark .sh_sourceCode .sh_date,.sh_vim-dark .sh_sourceCode .sh_time,.sh_vim-dark .sh_sourceCode .sh_file,.sh_vim-dark .sh_sourceCode .sh_variable,.sh_vim-dark .sh_sourceCode .sh_difflines,.sh_vim-dark .sh_sourceCode .sh_selector,.sh_vim-dark .sh_sourceCode .sh_property,.sh_vim .sh_sourceCode .sh_keyword,.sh_vim .sh_sourceCode .sh_date,.sh_vim .sh_sourceCode .sh_time,.sh_vim .sh_sourceCode .sh_file,.sh_vim .sh_sourceCode .sh_variable,.sh_vim .sh_sourceCode .sh_difflines,.sh_vim .sh_sourceCode .sh_selector,.sh_vim .sh_sourceCode .sh_property{color:#B26818;font-weight:400;font-style:normal;}.sh_vim-dark .sh_sourceCode .sh_specialchar,.sh_vim-dark .sh_sourceCode .sh_preproc,.sh_vim-dark .sh_sourceCode .sh_oldfile,.sh_vim .sh_sourceCode .sh_specialchar,.sh_vim .sh_sourceCode .sh_preproc,.sh_vim .sh_sourceCode .sh_oldfile{color:#f2f;font-weight:400;font-style:normal;}.sh_whatis .sh_sourceCode .sh_keyword,.sh_whatis .sh_sourceCode .sh_date,.sh_whatis .sh_sourceCode .sh_time,.sh_whatis .sh_sourceCode .sh_file,.sh_whatis .sh_sourceCode .sh_difflines,.sh_whatis .sh_sourceCode .sh_property{color:#fa5a03;font-weight:700;font-style:normal;}.sh_whatis .sh_sourceCode .sh_variable,.sh_whatis .sh_sourceCode .sh_selector{color:#efe219;font-weight:700;font-style:normal;}.sh_whitengrey .sh_sourceCode .sh_keyword,.sh_whitengrey .sh_sourceCode .sh_date,.sh_whitengrey .sh_sourceCode .sh_time,.sh_whitengrey .sh_sourceCode .sh_file,.sh_whitengrey .sh_sourceCode .sh_variable,.sh_whitengrey .sh_sourceCode .sh_difflines,.sh_whitengrey .sh_sourceCode .sh_selector,.sh_whitengrey .sh_sourceCode .sh_property{color:#696969;font-weight:700;font-style:normal;}.sh_zellner .sh_sourceCode .sh_keyword,.sh_zellner .sh_sourceCode .sh_date,.sh_zellner .sh_sourceCode .sh_time,.sh_zellner .sh_sourceCode .sh_file,.sh_zellner .sh_sourceCode .sh_difflines,.sh_zellner .sh_sourceCode .sh_property{color:#a52a2a;font-weight:400;font-style:normal;}.sh_zellner .sh_sourceCode .sh_variable,.sh_zellner .sh_sourceCode .sh_selector{color:#225f2d;font-weight:400;font-style:normal;}
|
|
2
|
+
|
|
3
|
+
.snippet-wrap {position:relative;}
|
|
4
|
+
*:first-child+html .snippet-wrap {display:inline-block;}
|
|
5
|
+
* html .snippet-wrap {display:inline-block;}
|
|
6
|
+
.snippet-reveal{text-decoration:underline;}
|
|
7
|
+
.snippet-wrap .snippet-menu, .snippet-wrap .snippet-hide {position:absolute; top:10px; right:15px; font-size:.9em;z-index:1;background-color:transparent;}
|
|
8
|
+
.snippet-wrap .snippet-hide {top:auto; bottom:10px;}
|
|
9
|
+
*:first-child+html .snippet-wrap .snippet-hide {bottom:25px;}
|
|
10
|
+
* html .snippet-wrap .snippet-hide {bottom:25px;}
|
|
11
|
+
.snippet-wrap .snippet-menu pre, .snippet-wrap .snippet-hide pre {background-color:transparent; margin:0; padding:0;}
|
|
12
|
+
.snippet-wrap .snippet-menu a, .snippet-wrap .snippet-hide a {padding:0 5px; text-decoration:underline;}
|
|
13
|
+
.snippet-wrap pre.sh_sourceCode{padding:1em;line-height:1.8em;overflow:auto;position:relative;
|
|
14
|
+
-moz-border-radius:15px;
|
|
15
|
+
-webkit-border-radius:15px;
|
|
16
|
+
border-radius:15px;
|
|
17
|
+
box-shadow: 2px 2px 5px #000;
|
|
18
|
+
-moz-box-shadow: 2px 2px 5px #000;
|
|
19
|
+
-webkit-box-shadow: 2px 2px 5px #000;}
|
|
20
|
+
.snippet-wrap pre.snippet-textonly {padding:2em;}
|
|
21
|
+
*:first-child+html .snippet-wrap pre.snippet-formatted {padding:2em 1em;}
|
|
22
|
+
* html .snippet-wrap pre.snippet-formatted {padding:2em 1em;}
|
|
23
|
+
.snippet-reveal pre.sh_sourceCode {padding:.5em 1em; text-align:right;}
|
|
24
|
+
.snippet-wrap .snippet-num li{padding-left:1.5em;}
|
|
25
|
+
.snippet-wrap .snippet-no-num{list-style:none; padding:.6em 1em; margin:0;}
|
|
26
|
+
.snippet-wrap .snippet-no-num li {list-style:none; padding-left:0;}
|
|
27
|
+
.snippet-wrap .snippet-num {margin:1em 0 1em 1em; padding-left:3em;}
|
|
28
|
+
.snippet-wrap .snippet-num li {list-style:decimal-leading-zero outside none;}
|
|
29
|
+
.snippet-wrap .snippet-no-num li.box {padding:0 6px; margin-left:-6px;}
|
|
30
|
+
.snippet-wrap .snippet-num li.box {border:1px solid; list-style-position:inside; margin-left:-3em; padding-left:6px;}
|
|
31
|
+
*:first-child+html .snippet-wrap .snippet-num li.box {margin-left:-2.4em;}
|
|
32
|
+
* html .snippet-wrap .snippet-num li.box {margin-left:-2.4em;}
|
|
33
|
+
.snippet-wrap li.box-top {border-width:1px 1px 0 !important;}
|
|
34
|
+
.snippet-wrap li.box-bot {border-width:0 1px 1px !important;}
|
|
35
|
+
.snippet-wrap li.box-mid {border-width:0 1px !important;}
|
|
36
|
+
.snippet-wrap .snippet-num li .box-sp {width:18px; display:inline-block;}
|
|
37
|
+
*:first-child+html .snippet-wrap .snippet-num li .box-sp {width:27px;}
|
|
38
|
+
* html .snippet-wrap .snippet-num li .box-sp {width:27px;}
|
|
39
|
+
.snippet-wrap .snippet-no-num li.box {border:1px solid;}
|
|
40
|
+
.snippet-wrap .snippet-no-num li .box-sp {display:none;}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Snippet :: jQuery Syntax Highlighter v2.0.0
|
|
3
|
+
* http://steamdev.com/snippet
|
|
4
|
+
*
|
|
5
|
+
* Copyright 2011, SteamDev
|
|
6
|
+
* Released under the MIT license.
|
|
7
|
+
* http://www.opensource.org/licenses/mit-license.php
|
|
8
|
+
*
|
|
9
|
+
* Date: Wed Jan 19, 2011
|
|
10
|
+
*/
|
|
11
|
+
|
|
12
|
+
(function(a){window.log=function(){log.history=log.history||[];log.history.push(arguments);if(this.console){console.log(Array.prototype.slice.call(arguments))}};a.fn.snippet=function(e,c){if(typeof e=="object"){c=e}if(typeof e=="string"){e=e.toLowerCase()}var d={style:"random",showNum:true,transparent:false,collapse:false,menu:true,showMsg:"Expand Code",hideMsg:"Collapse Code",clipboard:"",startCollapsed:true,startText:false,box:"",boxColor:"",boxFill:""};var b=["acid","berries-dark","berries-light","bipolar","blacknblue","bright","contrast","darkblue","darkness","desert","dull","easter","emacs","golden","greenlcd","ide-anjuta","ide-codewarrior","ide-devcpp","ide-eclipse","ide-kdev","ide-msvcpp","kwrite","matlab","navy","nedit","neon","night","pablo","peachpuff","print","rand01","the","typical","vampire","vim","vim-dark","whatis","whitengrey","zellner"];if(c){a.extend(d,c)}return this.each(function(){var H=d.style.toLowerCase();if(d.style=="random"){var D=Math.floor(Math.random()*(b.length));H=b[D]}var u=a(this);var y=this.nodeName.toLowerCase();if(y=="pre"){if(u.data("orgHtml")==undefined||u.data("orgHtml")==null){var f=u.html();u.data("orgHtml",f)}if(!u.parent().hasClass("snippet-wrap")){if(typeof e!="string"){if(u.attr("class").length>0){var t=' class="'+u.attr("class")+'"'}else{var t=""}if(u.attr("id").length>0){var J=' id="'+u.attr("id")+'"'}else{var J=""}var A="Snippet Error: You must specify a language on inital usage of Snippet. Reference <pre"+t+J+">";console.log(A);return false}u.addClass("sh_"+e).addClass("snippet-formatted").wrap("<div class='snippet-container' style='"+u.attr("style")+";'><div class='sh_"+H+" snippet-wrap'></div></div>");u.removeAttr("style");sh_highlightDocument();if(d.showNum){var v=u.html();v=v.replace(/\n/g,"</li><li>");v="<ol class='snippet-num'><li>"+v+"</li></ol>";while(v.indexOf("<li></li></ol>")!=-1){v=v.replace("<li></li></ol>","</ol>")}}else{var v=u.html();v=v.replace(/\n/g,"</li><li>");v="<ul class='snippet-no-num'><li>"+v+"</li></ul>";while(v.indexOf("<li></li></ul>")!=-1){v=v.replace("<li></li></ul>","</ul>")}}v=v.replace(/\t/g,"����");u.html(v);while(u.find("li").eq(0).html()==""){u.find("li").eq(0).remove()}u.find("li").each(function(){if(a(this).html().length<2){var i=(a(this).html()).replace(/\s/g,"");if(i==""){if(a.browser.opera){a(this).html("�")}else{a(this).html("<span style='display:none;'>�</span>")}}}});var w="<pre class='snippet-textonly sh_sourceCode' style='display:none;'>"+u.data("orgHtml")+"</pre>";var r="<div class='snippet-menu sh_sourceCode' style='display:none;'><pre><a class='snippet-copy' href='#'>copy</a><a class='snippet-text' href='#'>text</a><a class='snippet-window' href='#'>pop-up</a></pre></div>";u.parent().append(w);u.parent().prepend(r);u.parent().hover(function(){a(this).find(".snippet-menu").fadeIn("fast")},function(){a(this).find(".snippet-menu").fadeOut("fast")});if(d.clipboard!=""&&d.clipboard!=false){var j=u.parent().find("a.snippet-copy");j.show();j.parents(".snippet-menu").show();var s=u.parents(".snippet-wrap").find(".snippet-textonly").text();ZeroClipboard.setMoviePath(d.clipboard);var G=new ZeroClipboard.Client();G.setText(s);G.glue(j[0],j.parents(".snippet-menu")[0]);G.addEventListener("complete",function(i,o){if(o.length>500){o=o.substr(0,500)+"...\n\n("+(o.length-500)+" characters not shown)"}alert("Copied text to clipboard:\n\n "+o)});j.parents(".snippet-menu").hide()}else{u.parent().find("a.snippet-copy").hide()}u.parent().find("a.snippet-text").click(function(){var o=a(this).parents(".snippet-wrap").find(".snippet-formatted");var i=a(this).parents(".snippet-wrap").find(".snippet-textonly");o.toggle();i.toggle();if(i.is(":visible")){a(this).html("html")}else{a(this).html("text")}a(this).blur();return false});u.parent().find("a.snippet-window").click(function(){var i=a(this).parents(".snippet-wrap").find(".snippet-textonly").html();snippetPopup(i);a(this).blur();return false});if(!d.menu){u.prev(".snippet-menu").find("pre,.snippet-clipboard").hide()}if(d.collapse){var n=u.parent().attr("class");var h="<div class='snippet-reveal "+n+"'><pre class='sh_sourceCode'><a href='#' class='snippet-toggle'>"+d.showMsg+"</a></pre></div>";var E="<div class='sh_sourceCode snippet-hide'><pre><a href='#' class='snippet-revealed snippet-toggle'>"+d.hideMsg+"</a></pre></div>";u.parents(".snippet-container").append(h);u.parent().append(E);var z=u.parents(".snippet-container");if(d.startCollapsed){z.find(".snippet-reveal").show();z.find(".snippet-wrap").eq(0).hide()}else{z.find(".snippet-reveal").hide();z.find(".snippet-wrap").eq(0).show()}z.find("a.snippet-toggle").click(function(){z.find(".snippet-wrap").toggle();return false})}if(d.transparent){var k={"background-color":"transparent","box-shadow":"none","-moz-box-shadow":"none","-webkit-box-shadow":"none"};u.css(k);u.next(".snippet-textonly").css(k);u.parents(".snippet-container").find(".snippet-reveal pre").css(k)}if(d.startText){u.hide();u.next(".snippet-textonly").show();u.parent().find(".snippet-text").html("html")}if(d.box!=""){var m="<span class='box-sp'>�</span>";var C=d.box.split(",");for(var B=0;B<C.length;B++){var I=C[B];if(I.indexOf("-")==-1){I=parseFloat(I)-1;u.find("li").eq(I).addClass("box").prepend(m)}else{var g=parseFloat(I.split("-")[0])-1;var l=parseFloat(I.split("-")[1])-1;if(g<l){u.find("li").eq(g).addClass("box box-top").prepend(m);u.find("li").eq(l).addClass("box box-bot").prepend(m);for(var p=g+1;p<l;p++){u.find("li").eq(p).addClass("box box-mid").prepend(m)}}else{if(g==l){u.find("li").eq(g).addClass("box").prepend(m)}}}}if(d.boxColor!=""){u.find("li.box").css("border-color",d.boxColor)}if(d.boxFill!=""){u.find("li.box, li.box-top, li.box-mid, li.box-bot").addClass("box-bg").css("background-color",d.boxFill)}if(a.browser.webkit){u.find(".snippet-num li.box").css("margin-left","-3.3em");u.find(".snippet-num li .box-sp").css("width","21px")}}u.parents(".snippet-container").find("a").addClass("sh_url")}else{u.parent().attr("class","sh_"+H+" snippet-wrap");u.parents(".snippet-container").find(".snippet-reveal").attr("class","sh_"+H+" snippet-wrap snippet-reveal");u.find("li.box, li.box-top, li.box-mid, li.box-bot").removeAttr("style").removeAttr("class");u.find("li .box-sp").remove();if(d.transparent){var k={"background-color":"transparent","box-shadow":"none","-moz-box-shadow":"none","-webkit-box-shadow":"none"};u.css(k);u.next(".snippet-textonly").css(k);u.parents(".snippet-container").find(".snippet-hide pre").css(k)}else{var k={"background-color":"","box-shadow":"","-moz-box-shadow":"","-webkit-box-shadow":""};u.css(k);u.next(".snippet-textonly").css(k);u.parents(".snippet-container").find(".snippet-reveal pre").css(k)}if(d.showNum){var F=u.find("li").eq(0).parent();if(F.hasClass("snippet-no-num")){F.wrap("<ol class='snippet-num'></ol>");var q=u.find("li").eq(0);q.unwrap()}}else{var F=u.find("li").eq(0).parent();if(F.hasClass("snippet-num")){F.wrap("<ul class='snippet-no-num'></ul>");var q=u.find("li").eq(0);q.unwrap()}}if(d.box!=""){var m="<span class='box-sp'>�</span>";var C=d.box.split(",");for(var B=0;B<C.length;B++){var I=C[B];if(I.indexOf("-")==-1){I=parseFloat(I)-1;u.find("li").eq(I).addClass("box").prepend(m)}else{var g=parseFloat(I.split("-")[0])-1;var l=parseFloat(I.split("-")[1])-1;if(g<l){u.find("li").eq(g).addClass("box box-top").prepend(m);u.find("li").eq(l).addClass("box box-bot").prepend(m);for(var p=g+1;p<l;p++){u.find("li").eq(p).addClass("box box-mid").prepend(m)}}else{if(g==l){u.find("li").eq(g).addClass("box").prepend(m)}}}}if(d.boxColor!=""){u.find("li.box").css("border-color",d.boxColor)}if(d.boxFill!=""){u.find("li.box").addClass("box-bg").css("background-color",d.boxFill)}if(a.browser.webkit){u.find(".snippet-num li.box").css("margin-left","-3.3em");u.find(".snippet-num li .box-sp").css("width","21px")}}sh_highlightDocument();if(!d.menu){u.prev(".snippet-menu").find("pre,.snippet-clipboard").hide()}else{u.prev(".snippet-menu").find("pre,.snippet-clipboard").show()}}}else{var A="Snippet Error: Sorry, Snippet only formats '<pre>' elements. '<"+y+">' elements are currently unsupported.";console.log(A);return false}})}})(jQuery);function snippetPopup(a){top.consoleRef=window.open("","myconsole","width=600,height=300,left=50,top=50,menubar=0,toolbar=0,location=0,status=0,scrollbars=1,resizable=1");top.consoleRef.document.writeln("<html><head><title>Snippet :: Code View :: "+location.href+'</title></head><body bgcolor=white onLoad="self.focus()"><pre>'+a+"</pre></body></html>");top.consoleRef.document.close()}var ZeroClipboard={version:"1.0.7",clients:{},moviePath:"ZeroClipboard.swf",nextId:1,$:function(a){if(typeof(a)=="string"){a=document.getElementById(a)}if(!a.addClass){a.hide=function(){this.style.display="none"};a.show=function(){this.style.display=""};a.addClass=function(b){this.removeClass(b);this.className+=" "+b};a.removeClass=function(d){var e=this.className.split(/\s+/);var b=-1;for(var c=0;c<e.length;c++){if(e[c]==d){b=c;c=e.length}}if(b>-1){e.splice(b,1);this.className=e.join(" ")}return this};a.hasClass=function(b){return !!this.className.match(new RegExp("\\s*"+b+"\\s*"))}}return a},setMoviePath:function(a){this.moviePath=a},dispatch:function(d,b,c){var a=this.clients[d];if(a){a.receiveEvent(b,c)}},register:function(b,a){this.clients[b]=a},getDOMObjectPosition:function(c,a){var b={left:0,top:0,width:c.width?c.width:c.offsetWidth,height:c.height?c.height:c.offsetHeight};while(c&&(c!=a)){b.left+=c.offsetLeft;b.top+=c.offsetTop;c=c.offsetParent}return b},Client:function(a){this.handlers={};this.id=ZeroClipboard.nextId++;this.movieId="ZeroClipboardMovie_"+this.id;ZeroClipboard.register(this.id,this);if(a){this.glue(a)}}};ZeroClipboard.Client.prototype={id:0,ready:false,movie:null,clipText:"",handCursorEnabled:true,cssEffects:true,handlers:null,glue:function(d,b,e){this.domElement=ZeroClipboard.$(d);var f=99;if(this.domElement.style.zIndex){f=parseInt(this.domElement.style.zIndex,10)+1}if(typeof(b)=="string"){b=ZeroClipboard.$(b)}else{if(typeof(b)=="undefined"){b=document.getElementsByTagName("body")[0]}}var c=ZeroClipboard.getDOMObjectPosition(this.domElement,b);this.div=document.createElement("div");this.div.className="snippet-clipboard";var a=this.div.style;a.position="absolute";a.left=""+c.left+"px";a.top=""+c.top+"px";a.width=""+c.width+"px";a.height=""+c.height+"px";a.zIndex=f;if(typeof(e)=="object"){for(addedStyle in e){a[addedStyle]=e[addedStyle]}}b.appendChild(this.div);this.div.innerHTML=this.getHTML(c.width,c.height)},getHTML:function(d,a){var c="";var b="id="+this.id+"&width="+d+"&height="+a;if(navigator.userAgent.match(/MSIE/)){var e=location.href.match(/^https/i)?"https://":"http://";c+='<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="../'+e+'download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="'+d+'" height="'+a+'" id="'+this.movieId+'" align="middle"><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="false" /><param name="movie" value="../'+ZeroClipboard.moviePath+'" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="best" /><param name="bgcolor" value="#ffffff" /><param name="flashvars" value="'+b+'"/><param name="wmode" value="transparent"/></object>'}else{c+='<embed id="'+this.movieId+'" src="../'+ZeroClipboard.moviePath+'" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="'+d+'" height="'+a+'" name="'+this.movieId+'" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="'+b+'" wmode="transparent" />'}return c},hide:function(){if(this.div){this.div.style.left="-2000px"}},show:function(){this.reposition()},destroy:function(){if(this.domElement&&this.div){this.hide();this.div.innerHTML="";var a=document.getElementsByTagName("body")[0];try{a.removeChild(this.div)}catch(b){}this.domElement=null;this.div=null}},reposition:function(c){if(c){this.domElement=ZeroClipboard.$(c);if(!this.domElement){this.hide()}}if(this.domElement&&this.div){var b=ZeroClipboard.getDOMObjectPosition(this.domElement);var a=this.div.style;a.left=""+b.left+"px";a.top=""+b.top+"px"}},setText:function(a){this.clipText=a;if(this.ready){this.movie.setText(a)}},addEventListener:function(a,b){a=a.toString().toLowerCase().replace(/^on/,"");if(!this.handlers[a]){this.handlers[a]=[]}this.handlers[a].push(b)},setHandCursor:function(a){this.handCursorEnabled=a;if(this.ready){this.movie.setHandCursor(a)}},setCSSEffects:function(a){this.cssEffects=!!a},receiveEvent:function(d,f){d=d.toString().toLowerCase().replace(/^on/,"");switch(d){case"load":this.movie=document.getElementById(this.movieId);if(!this.movie){var c=this;setTimeout(function(){c.receiveEvent("load",null)},1);return}if(!this.ready&&navigator.userAgent.match(/Firefox/)&&navigator.userAgent.match(/Windows/)){var c=this;setTimeout(function(){c.receiveEvent("load",null)},100);this.ready=true;return}this.ready=true;try{this.movie.setText(this.clipText)}catch(h){}try{this.movie.setHandCursor(this.handCursorEnabled)}catch(h){}break;case"mouseover":if(this.domElement&&this.cssEffects){this.domElement.addClass("hover");if(this.recoverActive){this.domElement.addClass("active")}}break;case"mouseout":if(this.domElement&&this.cssEffects){this.recoverActive=false;if(this.domElement.hasClass("active")){this.domElement.removeClass("active");this.recoverActive=true}this.domElement.removeClass("hover")}break;case"mousedown":if(this.domElement&&this.cssEffects){this.domElement.addClass("active")}break;case"mouseup":if(this.domElement&&this.cssEffects){this.domElement.removeClass("active");this.recoverActive=false}break}if(this.handlers[d]){for(var b=0,a=this.handlers[d].length;b<a;b++){var g=this.handlers[d][b];if(typeof(g)=="function"){g(this,f)}else{if((typeof(g)=="object")&&(g.length==2)){g[0][g[1]](this,f)}else{if(typeof(g)=="string"){window[g](this,f)}}}}}}};if(!this.sh_languages){this.sh_languages={}}var sh_requests={};function sh_isEmailAddress(b){if(/^mailto:/.test(b)){return false}return b.indexOf("@")!==-1}function sh_setHref(e,h,g){var f=g.substring(e[h-2].pos,e[h-1].pos);if(f.length>=2&&f.charAt(0)==="<"&&f.charAt(f.length-1)===">"){f=f.substr(1,f.length-2)}if(sh_isEmailAddress(f)){f="mailto:"+f}e[h-2].node.href=f}function sh_konquerorExec(c){var d=[""];d.index=c.length;d.input=c;return d}function sh_highlightString(X,ah){if(/Konqueror/.test(navigator.userAgent)){if(!ah.konquered){for(var T=0;T<ah.length;T++){for(var R=0;R<ah[T].length;R++){var S=ah[T][R][0];if(S.source==="$"){S.exec=sh_konquerorExec}}}ah.konquered=true}}var i=document.createElement("a");var ag=document.createElement("span");var Y=[];var am=0;var ai=[];var W=0;var al=null;var ab=function(c,b){var g=c.length;if(g===0){return}if(!b){var e=ai.length;if(e!==0){var d=ai[e-1];if(!d[3]){b=d[1]}}}if(al!==b){if(al){Y[am++]={pos:W};if(al==="sh_url"){sh_setHref(Y,am,X)}}if(b){var f;if(b==="sh_url"){f=i.cloneNode(false)}else{f=ag.cloneNode(false)}f.className=b;Y[am++]={node:f,pos:W}}}W+=g;al=b};var af=/\r\n|\r|\n/g;af.lastIndex=0;var ar=X.length;while(W<ar){var ad=W;var ak;var ac;var an=af.exec(X);if(an===null){ak=ar;ac=ar}else{ak=an.index;ac=af.lastIndex}var ao=X.substring(ad,ak);var p=[];for(;;){var Q=W-ad;var V;var aa=ai.length;if(aa===0){V=0}else{V=ai[aa-1][2]}var a=ah[V];var Z=a.length;var aj=p[V];if(!aj){aj=p[V]=[]}var U=null;var ae=-1;for(var s=0;s<Z;s++){var ap;if(s<aj.length&&(aj[s]===null||Q<=aj[s].index)){ap=aj[s]}else{var at=a[s][0];at.lastIndex=Q;ap=at.exec(ao);aj[s]=ap}if(ap!==null&&(U===null||ap.index<U.index)){U=ap;ae=s;if(ap.index===Q){break}}}if(U===null){ab(ao.substring(Q),null);break}else{if(U.index>Q){ab(ao.substring(Q,U.index),null)}var aq=a[ae];var P=aq[1];var au;if(P instanceof Array){for(var r=0;r<P.length;r++){au=U[r+1];ab(au,P[r])}}else{au=U[0];ab(au,P)}switch(aq[2]){case -1:break;case -2:ai.pop();break;case -3:ai.length=0;break;default:ai.push(aq);break}}}if(al){Y[am++]={pos:W};if(al==="sh_url"){sh_setHref(Y,am,X)}al=null}W=ac}return Y}function sh_getClasses(i){var g=[];var f=i.className;if(f&&f.length>0){var h=f.split(" ");for(var j=0;j<h.length;j++){if(h[j].length>0){g.push(h[j])}}}return g}function sh_addClass(h,f){var g=sh_getClasses(h);for(var e=0;e<g.length;e++){if(f.toLowerCase()===g[e].toLowerCase()){return}}g.push(f);h.className=g.join(" ")}function sh_extractTagsFromNodeList(l,h){var i=l.length;for(var k=0;k<i;k++){var j=l.item(k);switch(j.nodeType){case 1:if(j.nodeName.toLowerCase()==="br"){var g;if(/MSIE/.test(navigator.userAgent)){g="\r"}else{g="\n"}h.text.push(g);h.pos++}else{h.tags.push({node:j.cloneNode(false),pos:h.pos});sh_extractTagsFromNodeList(j.childNodes,h);h.tags.push({pos:h.pos})}break;case 3:case 4:h.text.push(j.data);h.pos+=j.length;break}}}function sh_extractTags(f,d){var e={};e.text=[];e.tags=d;e.pos=0;sh_extractTagsFromNodeList(f.childNodes,e);return e.text.join("")}function sh_mergeTags(o,m){var r=o.length;if(r===0){return m}var p=m.length;if(p===0){return o}var j=[];var n=0;var q=0;while(n<r&&q<p){var k=o[n];var l=m[q];if(k.pos<=l.pos){j.push(k);n++}else{j.push(l);if(m[q+1].pos<=k.pos){q++;j.push(m[q]);q++}else{j.push({pos:k.pos});m[q]={node:l.node.cloneNode(false),pos:k.pos}}}}while(n<r){j.push(o[n]);n++}while(q<p){j.push(m[q]);q++}return j}function sh_insertTags(n,q){var r=document;var m=document.createDocumentFragment();var t=0;var u=n.length;var w=0;var o=q.length;var v=m;while(w<o||t<u){var p;var x;if(t<u){p=n[t];x=p.pos}else{x=o}if(x<=w){if(p.node){var s=p.node;v.appendChild(s);v=s}else{v=v.parentNode}t++}else{v.appendChild(r.createTextNode(q.substring(w,x)));w=x}}return m}function sh_highlightElement(m,j){sh_addClass(m,"sh_sourceCode");var n=[];var l=sh_extractTags(m,n);var k=sh_highlightString(l,j);var h=sh_mergeTags(n,k);var i=sh_insertTags(h,l);while(m.hasChildNodes()){m.removeChild(m.firstChild)}m.appendChild(i)}function sh_getXMLHttpRequest(){if(window.ActiveXObject){return new ActiveXObject("Msxml2.XMLHTTP")}else{if(window.XMLHttpRequest){return new XMLHttpRequest()}}throw"No XMLHttpRequest implementation available"}function sh_load(language,element,prefix,suffix){if(language in sh_requests){sh_requests[language].push(element);return}sh_requests[language]=[element];var request=sh_getXMLHttpRequest();var url=prefix+"sh_"+language+suffix;request.open("GET",url,true);request.onreadystatechange=function(){if(request.readyState===4){try{if(!request.status||request.status===200){eval(request.responseText);var elements=sh_requests[language];for(var i=0;i<elements.length;i++){sh_highlightElement(elements[i],sh_languages[language])}}else{throw"HTTP error: status "+request.status}}finally{request=null}}};request.send(null)}function sh_highlightDocument(e,g){var b=document.getElementsByTagName("pre");for(var d=0;d<b.length;d++){var c=b.item(d);var f=c.className.toLowerCase();var a=f.replace(/sh_sourcecode/g,"");if(a.indexOf("sh_")!=-1){a=a.match(/(\bsh_)\w+\b/g)[0]}if(f.indexOf("sh_sourcecode")!=-1){continue}if(a.substr(0,3)==="sh_"){var h=a.substring(3);if(h in sh_languages){sh_highlightElement(c,sh_languages[h])}else{if(typeof(e)==="string"&&typeof(g)==="string"){sh_load(h,c,e,g)}else{console.log('Found <pre> element with class="'+a+'", but no such language exists');continue}}break}}}if(!this.sh_languages){this.sh_languages={}}sh_languages.c=[[[/\/\/\//g,"sh_comment",1],[/\/\//g,"sh_comment",7],[/\/\*\*/g,"sh_comment",8],[/\/\*/g,"sh_comment",9],[/(\bstruct)([ \t]+)([A-Za-z0-9_]+)/g,["sh_keyword","sh_normal","sh_classname"],-1],[/^[ \t]*#(?:[ \t]*include)/g,"sh_preproc",10,1],[/^[ \t]*#(?:[ \t]*[A-Za-z0-9_]*)/g,"sh_preproc",-1],[/\b[+-]?(?:(?:0x[A-Fa-f0-9]+)|(?:(?:[\d]*\.)?[\d]+(?:[eE][+-]?[\d]+)?))u?(?:(?:int(?:8|16|32|64))|L)?\b/g,"sh_number",-1],[/"/g,"sh_string",13],[/'/g,"sh_string",14],[/\b(?:__asm|__cdecl|__declspec|__export|__far16|__fastcall|__fortran|__import|__pascal|__rtti|__stdcall|_asm|_cdecl|__except|_export|_far16|_fastcall|__finally|_fortran|_import|_pascal|_stdcall|__thread|__try|asm|auto|break|case|catch|cdecl|const|continue|default|do|else|enum|extern|for|goto|if|pascal|register|return|sizeof|static|struct|switch|typedef|union|volatile|while)\b/g,"sh_keyword",-1],[/\b(?:bool|char|double|float|int|long|short|signed|unsigned|void|wchar_t)\b/g,"sh_type",-1],[/~|!|%|\^|\*|\(|\)|-|\+|=|\[|\]|\\|:|;|,|\.|\/|\?|&|<|>|\|/g,"sh_symbol",-1],[/\{|\}/g,"sh_cbracket",-1],[/(?:[A-Za-z]|_)[A-Za-z0-9_]*(?=[ \t]*\()/g,"sh_function",-1],[/([A-Za-z](?:[^`~!@#$%&*()_=+{}|;:",<.>\/?'\\[\]\^\-\s]|[_])*)((?:<.*>)?)(\s+(?=[*&]*[A-Za-z][^`~!@#$%&*()_=+{}|;:",<.>\/?'\\[\]\^\-\s]*\s*[`~!@#$%&*()_=+{}|;:",<.>\/?'\\[\]\^\-\[\]]+))/g,["sh_usertype","sh_usertype","sh_normal"],-1]],[[/$/g,null,-2],[/(?:<?)[A-Za-z0-9_\.\/\-_~]+@[A-Za-z0-9_\.\/\-_~]+(?:>?)|(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_~]+(?:>?)/g,"sh_url",-1],[/<\?xml/g,"sh_preproc",2,1],[/<!DOCTYPE/g,"sh_preproc",4,1],[/<!--/g,"sh_comment",5],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)/g,"sh_keyword",6,1],[/&(?:[A-Za-z0-9]+);/g,"sh_preproc",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*/g,"sh_keyword",6,1],[/@[A-Za-z]+/g,"sh_type",-1],[/(?:TODO|FIXME|BUG)(?:[:]?)/g,"sh_todo",-1]],[[/\?>/g,"sh_preproc",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",3]],[[/\\(?:\\|")/g,null,-1],[/"/g,"sh_string",-2]],[[/>/g,"sh_preproc",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",3]],[[/-->/g,"sh_comment",-2],[/<!--/g,"sh_comment",5]],[[/(?:\/)?>/g,"sh_keyword",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",3]],[[/$/g,null,-2]],[[/\*\//g,"sh_comment",-2],[/(?:<?)[A-Za-z0-9_\.\/\-_~]+@[A-Za-z0-9_\.\/\-_~]+(?:>?)|(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_~]+(?:>?)/g,"sh_url",-1],[/<\?xml/g,"sh_preproc",2,1],[/<!DOCTYPE/g,"sh_preproc",4,1],[/<!--/g,"sh_comment",5],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)/g,"sh_keyword",6,1],[/&(?:[A-Za-z0-9]+);/g,"sh_preproc",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*/g,"sh_keyword",6,1],[/@[A-Za-z]+/g,"sh_type",-1],[/(?:TODO|FIXME|BUG)(?:[:]?)/g,"sh_todo",-1]],[[/\*\//g,"sh_comment",-2],[/(?:<?)[A-Za-z0-9_\.\/\-_~]+@[A-Za-z0-9_\.\/\-_~]+(?:>?)|(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_~]+(?:>?)/g,"sh_url",-1],[/(?:TODO|FIXME|BUG)(?:[:]?)/g,"sh_todo",-1]],[[/$/g,null,-2],[/</g,"sh_string",11],[/"/g,"sh_string",12],[/\/\/\//g,"sh_comment",1],[/\/\//g,"sh_comment",7],[/\/\*\*/g,"sh_comment",8],[/\/\*/g,"sh_comment",9]],[[/$/g,null,-2],[/>/g,"sh_string",-2]],[[/$/g,null,-2],[/\\(?:\\|")/g,null,-1],[/"/g,"sh_string",-2]],[[/"/g,"sh_string",-2],[/\\./g,"sh_specialchar",-1]],[[/'/g,"sh_string",-2],[/\\./g,"sh_specialchar",-1]]];if(!this.sh_languages){this.sh_languages={}}sh_languages.cpp=[[[/(\b(?:class|struct|typename))([ \t]+)([A-Za-z0-9_]+)/g,["sh_keyword","sh_normal","sh_classname"],-1],[/\b(?:class|const_cast|delete|dynamic_cast|explicit|false|friend|inline|mutable|namespace|new|operator|private|protected|public|reinterpret_cast|static_cast|template|this|throw|true|try|typeid|typename|using|virtual)\b/g,"sh_keyword",-1],[/\/\/\//g,"sh_comment",1],[/\/\//g,"sh_comment",7],[/\/\*\*/g,"sh_comment",8],[/\/\*/g,"sh_comment",9],[/(\bstruct)([ \t]+)([A-Za-z0-9_]+)/g,["sh_keyword","sh_normal","sh_classname"],-1],[/^[ \t]*#(?:[ \t]*include)/g,"sh_preproc",10,1],[/^[ \t]*#(?:[ \t]*[A-Za-z0-9_]*)/g,"sh_preproc",-1],[/\b[+-]?(?:(?:0x[A-Fa-f0-9]+)|(?:(?:[\d]*\.)?[\d]+(?:[eE][+-]?[\d]+)?))u?(?:(?:int(?:8|16|32|64))|L)?\b/g,"sh_number",-1],[/"/g,"sh_string",13],[/'/g,"sh_string",14],[/\b(?:__asm|__cdecl|__declspec|__export|__far16|__fastcall|__fortran|__import|__pascal|__rtti|__stdcall|_asm|_cdecl|__except|_export|_far16|_fastcall|__finally|_fortran|_import|_pascal|_stdcall|__thread|__try|asm|auto|break|case|catch|cdecl|const|continue|default|do|else|enum|extern|for|goto|if|pascal|register|return|sizeof|static|struct|switch|typedef|union|volatile|while)\b/g,"sh_keyword",-1],[/\b(?:bool|char|double|float|int|long|short|signed|unsigned|void|wchar_t)\b/g,"sh_type",-1],[/~|!|%|\^|\*|\(|\)|-|\+|=|\[|\]|\\|:|;|,|\.|\/|\?|&|<|>|\|/g,"sh_symbol",-1],[/\{|\}/g,"sh_cbracket",-1],[/(?:[A-Za-z]|_)[A-Za-z0-9_]*(?=[ \t]*\()/g,"sh_function",-1],[/([A-Za-z](?:[^`~!@#$%&*()_=+{}|;:",<.>\/?'\\[\]\^\-\s]|[_])*)((?:<.*>)?)(\s+(?=[*&]*[A-Za-z][^`~!@#$%&*()_=+{}|;:",<.>\/?'\\[\]\^\-\s]*\s*[`~!@#$%&*()_=+{}|;:",<.>\/?'\\[\]\^\-\[\]]+))/g,["sh_usertype","sh_usertype","sh_normal"],-1]],[[/$/g,null,-2],[/(?:<?)[A-Za-z0-9_\.\/\-_~]+@[A-Za-z0-9_\.\/\-_~]+(?:>?)|(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_~]+(?:>?)/g,"sh_url",-1],[/<\?xml/g,"sh_preproc",2,1],[/<!DOCTYPE/g,"sh_preproc",4,1],[/<!--/g,"sh_comment",5],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)/g,"sh_keyword",6,1],[/&(?:[A-Za-z0-9]+);/g,"sh_preproc",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*/g,"sh_keyword",6,1],[/@[A-Za-z]+/g,"sh_type",-1],[/(?:TODO|FIXME|BUG)(?:[:]?)/g,"sh_todo",-1]],[[/\?>/g,"sh_preproc",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",3]],[[/\\(?:\\|")/g,null,-1],[/"/g,"sh_string",-2]],[[/>/g,"sh_preproc",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",3]],[[/-->/g,"sh_comment",-2],[/<!--/g,"sh_comment",5]],[[/(?:\/)?>/g,"sh_keyword",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",3]],[[/$/g,null,-2]],[[/\*\//g,"sh_comment",-2],[/(?:<?)[A-Za-z0-9_\.\/\-_~]+@[A-Za-z0-9_\.\/\-_~]+(?:>?)|(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_~]+(?:>?)/g,"sh_url",-1],[/<\?xml/g,"sh_preproc",2,1],[/<!DOCTYPE/g,"sh_preproc",4,1],[/<!--/g,"sh_comment",5],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)/g,"sh_keyword",6,1],[/&(?:[A-Za-z0-9]+);/g,"sh_preproc",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*/g,"sh_keyword",6,1],[/@[A-Za-z]+/g,"sh_type",-1],[/(?:TODO|FIXME|BUG)(?:[:]?)/g,"sh_todo",-1]],[[/\*\//g,"sh_comment",-2],[/(?:<?)[A-Za-z0-9_\.\/\-_~]+@[A-Za-z0-9_\.\/\-_~]+(?:>?)|(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_~]+(?:>?)/g,"sh_url",-1],[/(?:TODO|FIXME|BUG)(?:[:]?)/g,"sh_todo",-1]],[[/$/g,null,-2],[/</g,"sh_string",11],[/"/g,"sh_string",12],[/\/\/\//g,"sh_comment",1],[/\/\//g,"sh_comment",7],[/\/\*\*/g,"sh_comment",8],[/\/\*/g,"sh_comment",9]],[[/$/g,null,-2],[/>/g,"sh_string",-2]],[[/$/g,null,-2],[/\\(?:\\|")/g,null,-1],[/"/g,"sh_string",-2]],[[/"/g,"sh_string",-2],[/\\./g,"sh_specialchar",-1]],[[/'/g,"sh_string",-2],[/\\./g,"sh_specialchar",-1]]];if(!this.sh_languages){this.sh_languages={}}sh_languages.csharp=[[[/\b(?:using)\b/g,"sh_preproc",-1],[/\b[+-]?(?:(?:0x[A-Fa-f0-9]+)|(?:(?:[\d]*\.)?[\d]+(?:[eE][+-]?[\d]+)?))(?:[FfDdMmUulL]+)?\b/g,"sh_number",-1],[/(\b(?:class|struct|typename))([ \t]+)([A-Za-z0-9_]+)/g,["sh_keyword","sh_normal","sh_classname"],-1],[/\b(?:abstract|event|new|struct|as|explicit|null|switch|base|extern|this|false|operator|throw|break|finally|out|true|fixed|override|try|case|params|typeof|catch|for|private|foreach|protected|checked|goto|public|unchecked|class|if|readonly|unsafe|const|implicit|ref|continue|in|return|virtual|default|interface|sealed|volatile|delegate|internal|do|is|sizeof|while|lock|stackalloc|else|static|enum|namespace|get|partial|set|value|where|yield)\b/g,"sh_keyword",-1],[/\/\/\//g,"sh_comment",1],[/\/\//g,"sh_comment",7],[/\/\*\*/g,"sh_comment",8],[/\/\*/g,"sh_comment",9],[/(\bstruct)([ \t]+)([A-Za-z0-9_]+)/g,["sh_keyword","sh_normal","sh_classname"],-1],[/^[ \t]*#(?:[ \t]*include)/g,"sh_preproc",10,1],[/^[ \t]*#(?:[ \t]*[A-Za-z0-9_]*)/g,"sh_preproc",-1],[/\b[+-]?(?:(?:0x[A-Fa-f0-9]+)|(?:(?:[\d]*\.)?[\d]+(?:[eE][+-]?[\d]+)?))u?(?:(?:int(?:8|16|32|64))|L)?\b/g,"sh_number",-1],[/"/g,"sh_string",13],[/'/g,"sh_string",14],[/\b(?:bool|byte|sbyte|char|decimal|double|float|int|uint|long|ulong|object|short|ushort|string|void)\b/g,"sh_type",-1],[/~|!|%|\^|\*|\(|\)|-|\+|=|\[|\]|\\|:|;|,|\.|\/|\?|&|<|>|\|/g,"sh_symbol",-1],[/\{|\}/g,"sh_cbracket",-1],[/(?:[A-Za-z]|_)[A-Za-z0-9_]*(?=[ \t]*\()/g,"sh_function",-1],[/([A-Za-z](?:[^`~!@#$%&*()_=+{}|;:",<.>\/?'\\[\]\^\-\s]|[_])*)((?:<.*>)?)(\s+(?=[*&]*[A-Za-z][^`~!@#$%&*()_=+{}|;:",<.>\/?'\\[\]\^\-\s]*\s*[`~!@#$%&*()_=+{}|;:",<.>\/?'\\[\]\^\-\[\]]+))/g,["sh_usertype","sh_usertype","sh_normal"],-1]],[[/$/g,null,-2],[/(?:<?)[A-Za-z0-9_\.\/\-_~]+@[A-Za-z0-9_\.\/\-_~]+(?:>?)|(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_~]+(?:>?)/g,"sh_url",-1],[/<\?xml/g,"sh_preproc",2,1],[/<!DOCTYPE/g,"sh_preproc",4,1],[/<!--/g,"sh_comment",5],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)/g,"sh_keyword",6,1],[/&(?:[A-Za-z0-9]+);/g,"sh_preproc",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*/g,"sh_keyword",6,1],[/@[A-Za-z]+/g,"sh_type",-1],[/(?:TODO|FIXME|BUG)(?:[:]?)/g,"sh_todo",-1]],[[/\?>/g,"sh_preproc",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",3]],[[/\\(?:\\|")/g,null,-1],[/"/g,"sh_string",-2]],[[/>/g,"sh_preproc",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",3]],[[/-->/g,"sh_comment",-2],[/<!--/g,"sh_comment",5]],[[/(?:\/)?>/g,"sh_keyword",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",3]],[[/$/g,null,-2]],[[/\*\//g,"sh_comment",-2],[/(?:<?)[A-Za-z0-9_\.\/\-_~]+@[A-Za-z0-9_\.\/\-_~]+(?:>?)|(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_~]+(?:>?)/g,"sh_url",-1],[/<\?xml/g,"sh_preproc",2,1],[/<!DOCTYPE/g,"sh_preproc",4,1],[/<!--/g,"sh_comment",5],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)/g,"sh_keyword",6,1],[/&(?:[A-Za-z0-9]+);/g,"sh_preproc",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*/g,"sh_keyword",6,1],[/@[A-Za-z]+/g,"sh_type",-1],[/(?:TODO|FIXME|BUG)(?:[:]?)/g,"sh_todo",-1]],[[/\*\//g,"sh_comment",-2],[/(?:<?)[A-Za-z0-9_\.\/\-_~]+@[A-Za-z0-9_\.\/\-_~]+(?:>?)|(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_~]+(?:>?)/g,"sh_url",-1],[/(?:TODO|FIXME|BUG)(?:[:]?)/g,"sh_todo",-1]],[[/$/g,null,-2],[/</g,"sh_string",11],[/"/g,"sh_string",12],[/\/\/\//g,"sh_comment",1],[/\/\//g,"sh_comment",7],[/\/\*\*/g,"sh_comment",8],[/\/\*/g,"sh_comment",9]],[[/$/g,null,-2],[/>/g,"sh_string",-2]],[[/$/g,null,-2],[/\\(?:\\|")/g,null,-1],[/"/g,"sh_string",-2]],[[/"/g,"sh_string",-2],[/\\./g,"sh_specialchar",-1]],[[/'/g,"sh_string",-2],[/\\./g,"sh_specialchar",-1]]];if(!this.sh_languages){this.sh_languages={}}sh_languages.css=[[[/\/\/\//g,"sh_comment",1],[/@/g,"sh_comment",1],[/\/\//g,"sh_comment",7],[/\/\*\*/g,"sh_comment",8],[/\/\*/g,"sh_comment",9],[/(?:\.|#)[A-Za-z0-9_\- >\[\]+\*=",]+/g,"sh_selector",-1],[/\{/g,"sh_cbracket",10,1],[/~|!|%|\^|\*|\(|\)|-|\+|=|\[|\]|\\|:|;|,|\.|\/|\?|&|<|>|\|/g,"sh_symbol",-1]],[[/$/g,null,-2],[/(?:<?)[A-Za-z0-9_\.\/\-_~]+@[A-Za-z0-9_\.\/\-_~]+(?:>?)|(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_~]+(?:>?)/g,"sh_url",-1],[/<\?xml/g,"sh_preproc",2,1],[/<!DOCTYPE/g,"sh_preproc",4,1],[/<!--/g,"sh_comment",5],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)/g,"sh_keyword",6,1],[/&(?:[A-Za-z0-9]+);/g,"sh_preproc",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*/g,"sh_keyword",6,1],[/@[A-Za-z]+/g,"sh_type",-1],[/(?:TODO|FIXME|BUG)(?:[:]?)/g,"sh_todo",-1]],[[/\?>/g,"sh_preproc",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",3]],[[/\\(?:\\|")/g,null,-1],[/"/g,"sh_string",-2]],[[/>/g,"sh_preproc",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",3]],[[/-->/g,"sh_comment",-2],[/<!--/g,"sh_comment",5]],[[/(?:\/)?>/g,"sh_keyword",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",3]],[[/$/g,null,-2]],[[/\*\//g,"sh_comment",-2],[/(?:<?)[A-Za-z0-9_\.\/\-_~]+@[A-Za-z0-9_\.\/\-_~]+(?:>?)|(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_~]+(?:>?)/g,"sh_url",-1],[/<\?xml/g,"sh_preproc",2,1],[/<!DOCTYPE/g,"sh_preproc",4,1],[/<!--/g,"sh_comment",5],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)/g,"sh_keyword",6,1],[/&(?:[A-Za-z0-9]+);/g,"sh_preproc",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*/g,"sh_keyword",6,1],[/@[A-Za-z]+/g,"sh_type",-1],[/(?:TODO|FIXME|BUG)(?:[:]?)/g,"sh_todo",-1]],[[/\*\//g,"sh_comment",-2],[/(?:<?)[A-Za-z0-9_\.\/\-_~]+@[A-Za-z0-9_\.\/\-_~]+(?:>?)|(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_~]+(?:>?)/g,"sh_url",-1],[/(?:TODO|FIXME|BUG)(?:[:]?)/g,"sh_todo",-1]],[[/\}/g,"sh_cbracket",-2],[/\/\/\//g,"sh_comment",1],[/\/\//g,"sh_comment",7],[/\/\*\*/g,"sh_comment",8],[/\/\*/g,"sh_comment",9],[/[A-Za-z0-9_-]+[ \t]*:/g,"sh_property",-1],[/[.%A-Za-z0-9_-]+/g,"sh_value",-1],[/#(?:[A-Za-z0-9_]+)/g,"sh_string",-1]]];if(!this.sh_languages){this.sh_languages={}}sh_languages.flex=[[[/^%\{/g,"sh_preproc",1,1],[/^%[sx]/g,"sh_preproc",16,1],[/^%option/g,"sh_preproc",17,1],[/^%(?:array|pointer|[aceknopr])/g,"sh_preproc",-1],[/[A-Za-z_][A-Za-z0-9_-]*/g,"sh_preproc",19,1],[/^%%/g,"sh_preproc",20,1]],[[/^%\}/g,"sh_preproc",-2],[/(\b(?:class|struct|typename))([ \t]+)([A-Za-z0-9_]+)/g,["sh_keyword","sh_normal","sh_classname"],-1],[/\b(?:class|const_cast|delete|dynamic_cast|explicit|false|friend|inline|mutable|namespace|new|operator|private|protected|public|reinterpret_cast|static_cast|template|this|throw|true|try|typeid|typename|using|virtual)\b/g,"sh_keyword",-1],[/\/\/\//g,"sh_comment",2],[/\/\//g,"sh_comment",8],[/\/\*\*/g,"sh_comment",9],[/\/\*/g,"sh_comment",10],[/(\bstruct)([ \t]+)([A-Za-z0-9_]+)/g,["sh_keyword","sh_normal","sh_classname"],-1],[/^[ \t]*#(?:[ \t]*include)/g,"sh_preproc",11,1],[/^[ \t]*#(?:[ \t]*[A-Za-z0-9_]*)/g,"sh_preproc",-1],[/\b[+-]?(?:(?:0x[A-Fa-f0-9]+)|(?:(?:[\d]*\.)?[\d]+(?:[eE][+-]?[\d]+)?))u?(?:(?:int(?:8|16|32|64))|L)?\b/g,"sh_number",-1],[/"/g,"sh_string",14],[/'/g,"sh_string",15],[/\b(?:__asm|__cdecl|__declspec|__export|__far16|__fastcall|__fortran|__import|__pascal|__rtti|__stdcall|_asm|_cdecl|__except|_export|_far16|_fastcall|__finally|_fortran|_import|_pascal|_stdcall|__thread|__try|asm|auto|break|case|catch|cdecl|const|continue|default|do|else|enum|extern|for|goto|if|pascal|register|return|sizeof|static|struct|switch|typedef|union|volatile|while)\b/g,"sh_keyword",-1],[/\b(?:bool|char|double|float|int|long|short|signed|unsigned|void|wchar_t)\b/g,"sh_type",-1],[/~|!|%|\^|\*|\(|\)|-|\+|=|\[|\]|\\|:|;|,|\.|\/|\?|&|<|>|\|/g,"sh_symbol",-1],[/\{|\}/g,"sh_cbracket",-1],[/(?:[A-Za-z]|_)[A-Za-z0-9_]*(?=[ \t]*\()/g,"sh_function",-1],[/([A-Za-z](?:[^`~!@#$%&*()_=+{}|;:",<.>\/?'\\[\]\^\-\s]|[_])*)((?:<.*>)?)(\s+(?=[*&]*[A-Za-z][^`~!@#$%&*()_=+{}|;:",<.>\/?'\\[\]\^\-\s]*\s*[`~!@#$%&*()_=+{}|;:",<.>\/?'\\[\]\^\-\[\]]+))/g,["sh_usertype","sh_usertype","sh_normal"],-1]],[[/$/g,null,-2],[/(?:<?)[A-Za-z0-9_\.\/\-_~]+@[A-Za-z0-9_\.\/\-_~]+(?:>?)|(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_~]+(?:>?)/g,"sh_url",-1],[/<\?xml/g,"sh_preproc",3,1],[/<!DOCTYPE/g,"sh_preproc",5,1],[/<!--/g,"sh_comment",6],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)/g,"sh_keyword",7,1],[/&(?:[A-Za-z0-9]+);/g,"sh_preproc",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*/g,"sh_keyword",7,1],[/@[A-Za-z]+/g,"sh_type",-1],[/(?:TODO|FIXME|BUG)(?:[:]?)/g,"sh_todo",-1]],[[/\?>/g,"sh_preproc",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",4]],[[/\\(?:\\|")/g,null,-1],[/"/g,"sh_string",-2]],[[/>/g,"sh_preproc",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",4]],[[/-->/g,"sh_comment",-2],[/<!--/g,"sh_comment",6]],[[/(?:\/)?>/g,"sh_keyword",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",4]],[[/$/g,null,-2]],[[/\*\//g,"sh_comment",-2],[/(?:<?)[A-Za-z0-9_\.\/\-_~]+@[A-Za-z0-9_\.\/\-_~]+(?:>?)|(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_~]+(?:>?)/g,"sh_url",-1],[/<\?xml/g,"sh_preproc",3,1],[/<!DOCTYPE/g,"sh_preproc",5,1],[/<!--/g,"sh_comment",6],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)/g,"sh_keyword",7,1],[/&(?:[A-Za-z0-9]+);/g,"sh_preproc",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*/g,"sh_keyword",7,1],[/@[A-Za-z]+/g,"sh_type",-1],[/(?:TODO|FIXME|BUG)(?:[:]?)/g,"sh_todo",-1]],[[/\*\//g,"sh_comment",-2],[/(?:<?)[A-Za-z0-9_\.\/\-_~]+@[A-Za-z0-9_\.\/\-_~]+(?:>?)|(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_~]+(?:>?)/g,"sh_url",-1],[/(?:TODO|FIXME|BUG)(?:[:]?)/g,"sh_todo",-1]],[[/$/g,null,-2],[/</g,"sh_string",12],[/"/g,"sh_string",13],[/\/\/\//g,"sh_comment",2],[/\/\//g,"sh_comment",8],[/\/\*\*/g,"sh_comment",9],[/\/\*/g,"sh_comment",10]],[[/$/g,null,-2],[/>/g,"sh_string",-2]],[[/$/g,null,-2],[/\\(?:\\|")/g,null,-1],[/"/g,"sh_string",-2]],[[/"/g,"sh_string",-2],[/\\./g,"sh_specialchar",-1]],[[/'/g,"sh_string",-2],[/\\./g,"sh_specialchar",-1]],[[/$/g,null,-2],[/[A-Za-z_][A-Za-z0-9_-]*/g,"sh_function",-1]],[[/$/g,null,-2],[/[A-Za-z_][A-Za-z0-9_-]*/g,"sh_keyword",-1],[/"/g,"sh_string",18],[/=/g,"sh_symbol",-1]],[[/$/g,null,-2],[/"/g,"sh_string",-2]],[[/$/g,null,-2],[/\{[A-Za-z_][A-Za-z0-9_-]*\}/g,"sh_type",-1],[/"/g,"sh_string",13],[/~|!|%|\^|\*|\(|\)|-|\+|=|\[|\]|\\|:|;|,|\.|\/|\?|&|<|>|\|/g,"sh_symbol",-1]],[[/^%%/g,"sh_preproc",21,1],[/<[A-Za-z_][A-Za-z0-9_-]*>/g,"sh_function",-1],[/"/g,"sh_string",13],[/\\./g,"sh_preproc",-1],[/\{[A-Za-z_][A-Za-z0-9_-]*\}/g,"sh_type",-1],[/\/\*/g,"sh_comment",22],[/\{/g,"sh_cbracket",23,1],[/~|!|%|\^|\*|\(|\)|-|\+|=|\[|\]|\\|:|;|,|\.|\/|\?|&|<|>|\|/g,"sh_symbol",-1]],[[/(\b(?:class|struct|typename))([ \t]+)([A-Za-z0-9_]+)/g,["sh_keyword","sh_normal","sh_classname"],-1],[/\b(?:class|const_cast|delete|dynamic_cast|explicit|false|friend|inline|mutable|namespace|new|operator|private|protected|public|reinterpret_cast|static_cast|template|this|throw|true|try|typeid|typename|using|virtual)\b/g,"sh_keyword",-1],[/\/\/\//g,"sh_comment",2],[/\/\//g,"sh_comment",8],[/\/\*\*/g,"sh_comment",9],[/\/\*/g,"sh_comment",10],[/(\bstruct)([ \t]+)([A-Za-z0-9_]+)/g,["sh_keyword","sh_normal","sh_classname"],-1],[/^[ \t]*#(?:[ \t]*include)/g,"sh_preproc",11,1],[/^[ \t]*#(?:[ \t]*[A-Za-z0-9_]*)/g,"sh_preproc",-1],[/\b[+-]?(?:(?:0x[A-Fa-f0-9]+)|(?:(?:[\d]*\.)?[\d]+(?:[eE][+-]?[\d]+)?))u?(?:(?:int(?:8|16|32|64))|L)?\b/g,"sh_number",-1],[/"/g,"sh_string",14],[/'/g,"sh_string",15],[/\b(?:__asm|__cdecl|__declspec|__export|__far16|__fastcall|__fortran|__import|__pascal|__rtti|__stdcall|_asm|_cdecl|__except|_export|_far16|_fastcall|__finally|_fortran|_import|_pascal|_stdcall|__thread|__try|asm|auto|break|case|catch|cdecl|const|continue|default|do|else|enum|extern|for|goto|if|pascal|register|return|sizeof|static|struct|switch|typedef|union|volatile|while)\b/g,"sh_keyword",-1],[/\b(?:bool|char|double|float|int|long|short|signed|unsigned|void|wchar_t)\b/g,"sh_type",-1],[/~|!|%|\^|\*|\(|\)|-|\+|=|\[|\]|\\|:|;|,|\.|\/|\?|&|<|>|\|/g,"sh_symbol",-1],[/\{|\}/g,"sh_cbracket",-1],[/(?:[A-Za-z]|_)[A-Za-z0-9_]*(?=[ \t]*\()/g,"sh_function",-1],[/([A-Za-z](?:[^`~!@#$%&*()_=+{}|;:",<.>\/?'\\[\]\^\-\s]|[_])*)((?:<.*>)?)(\s+(?=[*&]*[A-Za-z][^`~!@#$%&*()_=+{}|;:",<.>\/?'\\[\]\^\-\s]*\s*[`~!@#$%&*()_=+{}|;:",<.>\/?'\\[\]\^\-\[\]]+))/g,["sh_usertype","sh_usertype","sh_normal"],-1]],[[/\*\//g,"sh_comment",-2],[/\/\*/g,"sh_comment",22]],[[/\}/g,"sh_cbracket",-2],[/\{/g,"sh_cbracket",23,1],[/\$./g,"sh_variable",-1],[/(\b(?:class|struct|typename))([ \t]+)([A-Za-z0-9_]+)/g,["sh_keyword","sh_normal","sh_classname"],-1],[/\b(?:class|const_cast|delete|dynamic_cast|explicit|false|friend|inline|mutable|namespace|new|operator|private|protected|public|reinterpret_cast|static_cast|template|this|throw|true|try|typeid|typename|using|virtual)\b/g,"sh_keyword",-1],[/\/\/\//g,"sh_comment",2],[/\/\//g,"sh_comment",8],[/\/\*\*/g,"sh_comment",9],[/\/\*/g,"sh_comment",10],[/(\bstruct)([ \t]+)([A-Za-z0-9_]+)/g,["sh_keyword","sh_normal","sh_classname"],-1],[/^[ \t]*#(?:[ \t]*include)/g,"sh_preproc",11,1],[/^[ \t]*#(?:[ \t]*[A-Za-z0-9_]*)/g,"sh_preproc",-1],[/\b[+-]?(?:(?:0x[A-Fa-f0-9]+)|(?:(?:[\d]*\.)?[\d]+(?:[eE][+-]?[\d]+)?))u?(?:(?:int(?:8|16|32|64))|L)?\b/g,"sh_number",-1],[/"/g,"sh_string",14],[/'/g,"sh_string",15],[/\b(?:__asm|__cdecl|__declspec|__export|__far16|__fastcall|__fortran|__import|__pascal|__rtti|__stdcall|_asm|_cdecl|__except|_export|_far16|_fastcall|__finally|_fortran|_import|_pascal|_stdcall|__thread|__try|asm|auto|break|case|catch|cdecl|const|continue|default|do|else|enum|extern|for|goto|if|pascal|register|return|sizeof|static|struct|switch|typedef|union|volatile|while)\b/g,"sh_keyword",-1],[/\b(?:bool|char|double|float|int|long|short|signed|unsigned|void|wchar_t)\b/g,"sh_type",-1],[/~|!|%|\^|\*|\(|\)|-|\+|=|\[|\]|\\|:|;|,|\.|\/|\?|&|<|>|\|/g,"sh_symbol",-1],[/\{|\}/g,"sh_cbracket",-1],[/(?:[A-Za-z]|_)[A-Za-z0-9_]*(?=[ \t]*\()/g,"sh_function",-1],[/([A-Za-z](?:[^`~!@#$%&*()_=+{}|;:",<.>\/?'\\[\]\^\-\s]|[_])*)((?:<.*>)?)(\s+(?=[*&]*[A-Za-z][^`~!@#$%&*()_=+{}|;:",<.>\/?'\\[\]\^\-\s]*\s*[`~!@#$%&*()_=+{}|;:",<.>\/?'\\[\]\^\-\[\]]+))/g,["sh_usertype","sh_usertype","sh_normal"],-1]]];if(!this.sh_languages){this.sh_languages={}}sh_languages.html=[[[/<\?xml/g,"sh_preproc",1,1],[/<!DOCTYPE/g,"sh_preproc",3,1],[/<!--/g,"sh_comment",4],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)/g,"sh_keyword",5,1],[/&(?:[A-Za-z0-9]+);/g,"sh_preproc",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*/g,"sh_keyword",5,1]],[[/\?>/g,"sh_preproc",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",2]],[[/\\(?:\\|")/g,null,-1],[/"/g,"sh_string",-2]],[[/>/g,"sh_preproc",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",2]],[[/-->/g,"sh_comment",-2],[/<!--/g,"sh_comment",4]],[[/(?:\/)?>/g,"sh_keyword",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",2]]];if(!this.sh_languages){this.sh_languages={}}sh_languages.java=[[[/\b(?:import|package)\b/g,"sh_preproc",-1],[/\/\/\//g,"sh_comment",1],[/\/\//g,"sh_comment",7],[/\/\*\*/g,"sh_comment",8],[/\/\*/g,"sh_comment",9],[/\b[+-]?(?:(?:0x[A-Fa-f0-9]+)|(?:(?:[\d]*\.)?[\d]+(?:[eE][+-]?[\d]+)?))u?(?:(?:int(?:8|16|32|64))|L)?\b/g,"sh_number",-1],[/"/g,"sh_string",10],[/'/g,"sh_string",11],[/(\b(?:class|interface))([ \t]+)([$A-Za-z0-9_]+)/g,["sh_keyword","sh_normal","sh_classname"],-1],[/\b(?:abstract|assert|break|case|catch|class|const|continue|default|do|else|extends|false|final|finally|for|goto|if|implements|instanceof|interface|native|new|null|private|protected|public|return|static|strictfp|super|switch|synchronized|throw|throws|true|this|transient|try|volatile|while)\b/g,"sh_keyword",-1],[/\b(?:int|byte|boolean|char|long|float|double|short|void)\b/g,"sh_type",-1],[/~|!|%|\^|\*|\(|\)|-|\+|=|\[|\]|\\|:|;|,|\.|\/|\?|&|<|>|\|/g,"sh_symbol",-1],[/\{|\}/g,"sh_cbracket",-1],[/(?:[A-Za-z]|_)[A-Za-z0-9_]*(?=[ \t]*\()/g,"sh_function",-1],[/([A-Za-z](?:[^`~!@#$%&*()_=+{}|;:",<.>\/?'\\[\]\^\-\s]|[_])*)((?:<.*>)?)(\s+(?=[*&]*[A-Za-z][^`~!@#$%&*()_=+{}|;:",<.>\/?'\\[\]\^\-\s]*\s*[`~!@#$%&*()_=+{}|;:",<.>\/?'\\[\]\^\-\[\]]+))/g,["sh_usertype","sh_usertype","sh_normal"],-1]],[[/$/g,null,-2],[/(?:<?)[A-Za-z0-9_\.\/\-_~]+@[A-Za-z0-9_\.\/\-_~]+(?:>?)|(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_~]+(?:>?)/g,"sh_url",-1],[/<\?xml/g,"sh_preproc",2,1],[/<!DOCTYPE/g,"sh_preproc",4,1],[/<!--/g,"sh_comment",5],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)/g,"sh_keyword",6,1],[/&(?:[A-Za-z0-9]+);/g,"sh_preproc",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*/g,"sh_keyword",6,1],[/@[A-Za-z]+/g,"sh_type",-1],[/(?:TODO|FIXME|BUG)(?:[:]?)/g,"sh_todo",-1]],[[/\?>/g,"sh_preproc",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",3]],[[/\\(?:\\|")/g,null,-1],[/"/g,"sh_string",-2]],[[/>/g,"sh_preproc",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",3]],[[/-->/g,"sh_comment",-2],[/<!--/g,"sh_comment",5]],[[/(?:\/)?>/g,"sh_keyword",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",3]],[[/$/g,null,-2]],[[/\*\//g,"sh_comment",-2],[/(?:<?)[A-Za-z0-9_\.\/\-_~]+@[A-Za-z0-9_\.\/\-_~]+(?:>?)|(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_~]+(?:>?)/g,"sh_url",-1],[/<\?xml/g,"sh_preproc",2,1],[/<!DOCTYPE/g,"sh_preproc",4,1],[/<!--/g,"sh_comment",5],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)/g,"sh_keyword",6,1],[/&(?:[A-Za-z0-9]+);/g,"sh_preproc",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*/g,"sh_keyword",6,1],[/@[A-Za-z]+/g,"sh_type",-1],[/(?:TODO|FIXME|BUG)(?:[:]?)/g,"sh_todo",-1]],[[/\*\//g,"sh_comment",-2],[/(?:<?)[A-Za-z0-9_\.\/\-_~]+@[A-Za-z0-9_\.\/\-_~]+(?:>?)|(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_~]+(?:>?)/g,"sh_url",-1],[/(?:TODO|FIXME|BUG)(?:[:]?)/g,"sh_todo",-1]],[[/"/g,"sh_string",-2],[/\\./g,"sh_specialchar",-1]],[[/'/g,"sh_string",-2],[/\\./g,"sh_specialchar",-1]]];if(!this.sh_languages){this.sh_languages={}}sh_languages.javascript=[[[/\/\/\//g,"sh_comment",1],[/\/\//g,"sh_comment",7],[/\/\*\*/g,"sh_comment",8],[/\/\*/g,"sh_comment",9],[/\b(?:abstract|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|false|final|finally|for|function|goto|if|implements|in|instanceof|interface|native|new|null|private|protected|prototype|public|return|static|super|switch|synchronized|throw|throws|this|transient|true|try|typeof|var|volatile|while|with)\b/g,"sh_keyword",-1],[/(\+\+|--|\)|\])(\s*)(\/=?(?![*\/]))/g,["sh_symbol","sh_normal","sh_symbol"],-1],[/(0x[A-Fa-f0-9]+|(?:[\d]*\.)?[\d]+(?:[eE][+-]?[\d]+)?)(\s*)(\/(?![*\/]))/g,["sh_number","sh_normal","sh_symbol"],-1],[/([A-Za-z$_][A-Za-z0-9$_]*\s*)(\/=?(?![*\/]))/g,["sh_normal","sh_symbol"],-1],[/\/(?:\\.|[^*\\\/])(?:\\.|[^\\\/])*\/[gim]*/g,"sh_regexp",-1],[/\b[+-]?(?:(?:0x[A-Fa-f0-9]+)|(?:(?:[\d]*\.)?[\d]+(?:[eE][+-]?[\d]+)?))u?(?:(?:int(?:8|16|32|64))|L)?\b/g,"sh_number",-1],[/"/g,"sh_string",10],[/'/g,"sh_string",11],[/~|!|%|\^|\*|\(|\)|-|\+|=|\[|\]|\\|:|;|,|\.|\/|\?|&|<|>|\|/g,"sh_symbol",-1],[/\{|\}/g,"sh_cbracket",-1],[/\b(?:Math|Infinity|NaN|undefined|arguments)\b/g,"sh_predef_var",-1],[/\b(?:Array|Boolean|Date|Error|EvalError|Function|Number|Object|RangeError|ReferenceError|RegExp|String|SyntaxError|TypeError|URIError|decodeURI|decodeURIComponent|encodeURI|encodeURIComponent|eval|isFinite|isNaN|parseFloat|parseInt)\b/g,"sh_predef_func",-1],[/(?:[A-Za-z]|_)[A-Za-z0-9_]*(?=[ \t]*\()/g,"sh_function",-1]],[[/$/g,null,-2],[/(?:<?)[A-Za-z0-9_\.\/\-_~]+@[A-Za-z0-9_\.\/\-_~]+(?:>?)|(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_~]+(?:>?)/g,"sh_url",-1],[/<\?xml/g,"sh_preproc",2,1],[/<!DOCTYPE/g,"sh_preproc",4,1],[/<!--/g,"sh_comment",5],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)/g,"sh_keyword",6,1],[/&(?:[A-Za-z0-9]+);/g,"sh_preproc",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*/g,"sh_keyword",6,1],[/@[A-Za-z]+/g,"sh_type",-1],[/(?:TODO|FIXME|BUG)(?:[:]?)/g,"sh_todo",-1]],[[/\?>/g,"sh_preproc",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",3]],[[/\\(?:\\|")/g,null,-1],[/"/g,"sh_string",-2]],[[/>/g,"sh_preproc",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",3]],[[/-->/g,"sh_comment",-2],[/<!--/g,"sh_comment",5]],[[/(?:\/)?>/g,"sh_keyword",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",3]],[[/$/g,null,-2]],[[/\*\//g,"sh_comment",-2],[/(?:<?)[A-Za-z0-9_\.\/\-_~]+@[A-Za-z0-9_\.\/\-_~]+(?:>?)|(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_~]+(?:>?)/g,"sh_url",-1],[/<\?xml/g,"sh_preproc",2,1],[/<!DOCTYPE/g,"sh_preproc",4,1],[/<!--/g,"sh_comment",5],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)/g,"sh_keyword",6,1],[/&(?:[A-Za-z0-9]+);/g,"sh_preproc",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*/g,"sh_keyword",6,1],[/@[A-Za-z]+/g,"sh_type",-1],[/(?:TODO|FIXME|BUG)(?:[:]?)/g,"sh_todo",-1]],[[/\*\//g,"sh_comment",-2],[/(?:<?)[A-Za-z0-9_\.\/\-_~]+@[A-Za-z0-9_\.\/\-_~]+(?:>?)|(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_~]+(?:>?)/g,"sh_url",-1],[/(?:TODO|FIXME|BUG)(?:[:]?)/g,"sh_todo",-1]],[[/"/g,"sh_string",-2],[/\\./g,"sh_specialchar",-1]],[[/'/g,"sh_string",-2],[/\\./g,"sh_specialchar",-1]]];if(!this.sh_languages){this.sh_languages={}}sh_languages.javascript_dom=[[[/\/\/\//g,"sh_comment",1],[/\/\//g,"sh_comment",7],[/\/\*\*/g,"sh_comment",8],[/\/\*/g,"sh_comment",9],[/\b(?:abstract|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|false|final|finally|for|function|goto|if|implements|in|instanceof|interface|native|new|null|private|protected|prototype|public|return|static|super|switch|synchronized|throw|throws|this|transient|true|try|typeof|var|volatile|while|with)\b/g,"sh_keyword",-1],[/(\+\+|--|\)|\])(\s*)(\/=?(?![*\/]))/g,["sh_symbol","sh_normal","sh_symbol"],-1],[/(0x[A-Fa-f0-9]+|(?:[\d]*\.)?[\d]+(?:[eE][+-]?[\d]+)?)(\s*)(\/(?![*\/]))/g,["sh_number","sh_normal","sh_symbol"],-1],[/([A-Za-z$_][A-Za-z0-9$_]*\s*)(\/=?(?![*\/]))/g,["sh_normal","sh_symbol"],-1],[/\/(?:\\.|[^*\\\/])(?:\\.|[^\\\/])*\/[gim]*/g,"sh_regexp",-1],[/\b[+-]?(?:(?:0x[A-Fa-f0-9]+)|(?:(?:[\d]*\.)?[\d]+(?:[eE][+-]?[\d]+)?))u?(?:(?:int(?:8|16|32|64))|L)?\b/g,"sh_number",-1],[/"/g,"sh_string",10],[/'/g,"sh_string",11],[/~|!|%|\^|\*|\(|\)|-|\+|=|\[|\]|\\|:|;|,|\.|\/|\?|&|<|>|\|/g,"sh_symbol",-1],[/\{|\}/g,"sh_cbracket",-1],[/\b(?:Math|Infinity|NaN|undefined|arguments)\b/g,"sh_predef_var",-1],[/\b(?:Array|Boolean|Date|Error|EvalError|Function|Number|Object|RangeError|ReferenceError|RegExp|String|SyntaxError|TypeError|URIError|decodeURI|decodeURIComponent|encodeURI|encodeURIComponent|eval|isFinite|isNaN|parseFloat|parseInt)\b/g,"sh_predef_func",-1],[/\b(?:applicationCache|closed|Components|content|controllers|crypto|defaultStatus|dialogArguments|directories|document|frameElement|frames|fullScreen|globalStorage|history|innerHeight|innerWidth|length|location|locationbar|menubar|name|navigator|opener|outerHeight|outerWidth|pageXOffset|pageYOffset|parent|personalbar|pkcs11|returnValue|screen|availTop|availLeft|availHeight|availWidth|colorDepth|height|left|pixelDepth|top|width|screenX|screenY|scrollbars|scrollMaxX|scrollMaxY|scrollX|scrollY|self|sessionStorage|sidebar|status|statusbar|toolbar|top|window)\b/g,"sh_predef_var",-1],[/\b(?:alert|addEventListener|atob|back|blur|btoa|captureEvents|clearInterval|clearTimeout|close|confirm|dump|escape|find|focus|forward|getAttention|getComputedStyle|getSelection|home|moveBy|moveTo|open|openDialog|postMessage|print|prompt|releaseEvents|removeEventListener|resizeBy|resizeTo|scroll|scrollBy|scrollByLines|scrollByPages|scrollTo|setInterval|setTimeout|showModalDialog|sizeToContent|stop|unescape|updateCommands|onabort|onbeforeunload|onblur|onchange|onclick|onclose|oncontextmenu|ondragdrop|onerror|onfocus|onkeydown|onkeypress|onkeyup|onload|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|onpaint|onreset|onresize|onscroll|onselect|onsubmit|onunload)\b/g,"sh_predef_func",-1],[/(?:[A-Za-z]|_)[A-Za-z0-9_]*(?=[ \t]*\()/g,"sh_function",-1]],[[/$/g,null,-2],[/(?:<?)[A-Za-z0-9_\.\/\-_~]+@[A-Za-z0-9_\.\/\-_~]+(?:>?)|(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_~]+(?:>?)/g,"sh_url",-1],[/<\?xml/g,"sh_preproc",2,1],[/<!DOCTYPE/g,"sh_preproc",4,1],[/<!--/g,"sh_comment",5],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)/g,"sh_keyword",6,1],[/&(?:[A-Za-z0-9]+);/g,"sh_preproc",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*/g,"sh_keyword",6,1],[/@[A-Za-z]+/g,"sh_type",-1],[/(?:TODO|FIXME|BUG)(?:[:]?)/g,"sh_todo",-1]],[[/\?>/g,"sh_preproc",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",3]],[[/\\(?:\\|")/g,null,-1],[/"/g,"sh_string",-2]],[[/>/g,"sh_preproc",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",3]],[[/-->/g,"sh_comment",-2],[/<!--/g,"sh_comment",5]],[[/(?:\/)?>/g,"sh_keyword",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",3]],[[/$/g,null,-2]],[[/\*\//g,"sh_comment",-2],[/(?:<?)[A-Za-z0-9_\.\/\-_~]+@[A-Za-z0-9_\.\/\-_~]+(?:>?)|(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_~]+(?:>?)/g,"sh_url",-1],[/<\?xml/g,"sh_preproc",2,1],[/<!DOCTYPE/g,"sh_preproc",4,1],[/<!--/g,"sh_comment",5],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)/g,"sh_keyword",6,1],[/&(?:[A-Za-z0-9]+);/g,"sh_preproc",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*/g,"sh_keyword",6,1],[/@[A-Za-z]+/g,"sh_type",-1],[/(?:TODO|FIXME|BUG)(?:[:]?)/g,"sh_todo",-1]],[[/\*\//g,"sh_comment",-2],[/(?:<?)[A-Za-z0-9_\.\/\-_~]+@[A-Za-z0-9_\.\/\-_~]+(?:>?)|(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_~]+(?:>?)/g,"sh_url",-1],[/(?:TODO|FIXME|BUG)(?:[:]?)/g,"sh_todo",-1]],[[/"/g,"sh_string",-2],[/\\./g,"sh_specialchar",-1]],[[/'/g,"sh_string",-2],[/\\./g,"sh_specialchar",-1]]];if(!this.sh_languages){this.sh_languages={}}sh_languages.perl=[[[/\b(?:import)\b/g,"sh_preproc",-1],[/(s)(\{(?:\\\}|[^}])*\}\{(?:\\\}|[^}])*\})([ixsmogce]*)/g,["sh_keyword","sh_regexp","sh_keyword"],-1],[/(s)(\((?:\\\)|[^)])*\)\((?:\\\)|[^)])*\))([ixsmogce]*)/g,["sh_keyword","sh_regexp","sh_keyword"],-1],[/(s)(\[(?:\\\]|[^\]])*\]\[(?:\\\]|[^\]])*\])([ixsmogce]*)/g,["sh_keyword","sh_regexp","sh_keyword"],-1],[/(s)(<.*><.*>)([ixsmogce]*)/g,["sh_keyword","sh_regexp","sh_keyword"],-1],[/(q(?:q?))(\{(?:\\\}|[^}])*\})/g,["sh_keyword","sh_string"],-1],[/(q(?:q?))(\((?:\\\)|[^)])*\))/g,["sh_keyword","sh_string"],-1],[/(q(?:q?))(\[(?:\\\]|[^\]])*\])/g,["sh_keyword","sh_string"],-1],[/(q(?:q?))(<.*>)/g,["sh_keyword","sh_string"],-1],[/(q(?:q?))([^A-Za-z0-9 \t])(.*\2)/g,["sh_keyword","sh_string","sh_string"],-1],[/(s)([^A-Za-z0-9 \t])(.*\2.*\2)([ixsmogce]*(?=[ \t]*(?:\)|;)))/g,["sh_keyword","sh_regexp","sh_regexp","sh_keyword"],-1],[/(s)([^A-Za-z0-9 \t])(.*\2[ \t]*)([^A-Za-z0-9 \t])(.*\4)([ixsmogce]*(?=[ \t]*(?:\)|;)))/g,["sh_keyword","sh_regexp","sh_regexp","sh_regexp","sh_regexp","sh_keyword"],-1],[/#/g,"sh_comment",1],[/\b[+-]?(?:(?:0x[A-Fa-f0-9]+)|(?:(?:[\d]*\.)?[\d]+(?:[eE][+-]?[\d]+)?))u?(?:(?:int(?:8|16|32|64))|L)?\b/g,"sh_number",-1],[/(?:m|qr)(?=\{)/g,"sh_keyword",2],[/(?:m|qr)(?=#)/g,"sh_keyword",4],[/(?:m|qr)(?=\|)/g,"sh_keyword",6],[/(?:m|qr)(?=@)/g,"sh_keyword",8],[/(?:m|qr)(?=<)/g,"sh_keyword",10],[/(?:m|qr)(?=\[)/g,"sh_keyword",12],[/(?:m|qr)(?=\\)/g,"sh_keyword",14],[/(?:m|qr)(?=\/)/g,"sh_keyword",16],[/"/g,"sh_string",18],[/'/g,"sh_string",19],[/</g,"sh_string",20],[/\/[^\n]*\//g,"sh_string",-1],[/\b(?:chomp|chop|chr|crypt|hex|i|index|lc|lcfirst|length|oct|ord|pack|q|qq|reverse|rindex|sprintf|substr|tr|uc|ucfirst|m|s|g|qw|abs|atan2|cos|exp|hex|int|log|oct|rand|sin|sqrt|srand|my|local|our|delete|each|exists|keys|values|pack|read|syscall|sysread|syswrite|unpack|vec|undef|unless|return|length|grep|sort|caller|continue|dump|eval|exit|goto|last|next|redo|sub|wantarray|pop|push|shift|splice|unshift|split|switch|join|defined|foreach|last|chop|chomp|bless|dbmclose|dbmopen|ref|tie|tied|untie|while|next|map|eq|die|cmp|lc|uc|and|do|if|else|elsif|for|use|require|package|import|chdir|chmod|chown|chroot|fcntl|glob|ioctl|link|lstat|mkdir|open|opendir|readlink|rename|rmdir|stat|symlink|umask|unlink|utime|binmode|close|closedir|dbmclose|dbmopen|die|eof|fileno|flock|format|getc|print|printf|read|readdir|rewinddir|seek|seekdir|select|syscall|sysread|sysseek|syswrite|tell|telldir|truncate|warn|write|alarm|exec|fork|getpgrp|getppid|getpriority|kill|pipe|qx|setpgrp|setpriority|sleep|system|times|x|wait|waitpid)\b/g,"sh_keyword",-1],[/^\=(?:head1|head2|item)/g,"sh_comment",21],[/(?:\$[#]?|@|%)[\/A-Za-z0-9_]+/g,"sh_variable",-1],[/~|!|%|\^|\*|\(|\)|-|\+|=|\[|\]|\\|:|;|,|\.|\/|\?|&|<|>|\|/g,"sh_symbol",-1],[/\{|\}/g,"sh_cbracket",-1],[/(?:[A-Za-z]|_)[A-Za-z0-9_]*(?=[ \t]*\()/g,"sh_function",-1]],[[/$/g,null,-2]],[[/\{/g,"sh_regexp",3]],[[/[ \t]+#.*/g,"sh_comment",-1],[/\$(?:[A-Za-z0-9_]+|\{[A-Za-z0-9_]+\})/g,"sh_variable",-1],[/\\\{|\\\}|\}/g,"sh_regexp",-3]],[[/#/g,"sh_regexp",5]],[[/[ \t]+#.*/g,"sh_comment",-1],[/\$(?:[A-Za-z0-9_]+|\{[A-Za-z0-9_]+\})/g,"sh_variable",-1],[/\\#|#/g,"sh_regexp",-3]],[[/\|/g,"sh_regexp",7]],[[/[ \t]+#.*/g,"sh_comment",-1],[/\$(?:[A-Za-z0-9_]+|\{[A-Za-z0-9_]+\})/g,"sh_variable",-1],[/\\\||\|/g,"sh_regexp",-3]],[[/@/g,"sh_regexp",9]],[[/[ \t]+#.*/g,"sh_comment",-1],[/\$(?:[A-Za-z0-9_]+|\{[A-Za-z0-9_]+\})/g,"sh_variable",-1],[/\\@|@/g,"sh_regexp",-3]],[[/</g,"sh_regexp",11]],[[/[ \t]+#.*/g,"sh_comment",-1],[/\$(?:[A-Za-z0-9_]+|\{[A-Za-z0-9_]+\})/g,"sh_variable",-1],[/\\<|\\>|>/g,"sh_regexp",-3]],[[/\[/g,"sh_regexp",13]],[[/[ \t]+#.*/g,"sh_comment",-1],[/\$(?:[A-Za-z0-9_]+|\{[A-Za-z0-9_]+\})/g,"sh_variable",-1],[/\\]|\]/g,"sh_regexp",-3]],[[/\\/g,"sh_regexp",15]],[[/[ \t]+#.*/g,"sh_comment",-1],[/\$(?:[A-Za-z0-9_]+|\{[A-Za-z0-9_]+\})/g,"sh_variable",-1],[/\\\\|\\/g,"sh_regexp",-3]],[[/\//g,"sh_regexp",17]],[[/[ \t]+#.*/g,"sh_comment",-1],[/\$(?:[A-Za-z0-9_]+|\{[A-Za-z0-9_]+\})/g,"sh_variable",-1],[/\\\/|\//g,"sh_regexp",-3]],[[/$/g,null,-2],[/\\(?:\\|")/g,null,-1],[/"/g,"sh_string",-2]],[[/$/g,null,-2],[/\\(?:\\|')/g,null,-1],[/'/g,"sh_string",-2]],[[/$/g,null,-2],[/>/g,"sh_string",-2]],[[/\=cut/g,"sh_comment",-2]]];if(!this.sh_languages){this.sh_languages={}}sh_languages.php=[[[/\b(?:include|include_once|require|require_once)\b/g,"sh_preproc",-1],[/\/\//g,"sh_comment",1],[/#/g,"sh_comment",1],[/\b[+-]?(?:(?:0x[A-Fa-f0-9]+)|(?:(?:[\d]*\.)?[\d]+(?:[eE][+-]?[\d]+)?))u?(?:(?:int(?:8|16|32|64))|L)?\b/g,"sh_number",-1],[/"/g,"sh_string",2],[/'/g,"sh_string",3],[/\b(?:and|or|xor|__FILE__|exception|php_user_filter|__LINE__|array|as|break|case|cfunction|class|const|continue|declare|default|die|do|each|echo|else|elseif|empty|enddeclare|endfor|endforeach|endif|endswitch|endwhile|eval|exit|extends|for|foreach|function|global|if|isset|list|new|old_function|print|return|static|switch|unset|use|var|while|__FUNCTION__|__CLASS__|__METHOD__)\b/g,"sh_keyword",-1],[/\/\/\//g,"sh_comment",4],[/\/\//g,"sh_comment",1],[/\/\*\*/g,"sh_comment",9],[/\/\*/g,"sh_comment",10],[/(?:\$[#]?|@|%)[A-Za-z0-9_]+/g,"sh_variable",-1],[/<\?php|~|!|%|\^|\*|\(|\)|-|\+|=|\[|\]|\\|:|;|,|\.|\/|\?|&|<|>|\|/g,"sh_symbol",-1],[/\{|\}/g,"sh_cbracket",-1],[/(?:[A-Za-z]|_)[A-Za-z0-9_]*(?=[ \t]*\()/g,"sh_function",-1]],[[/$/g,null,-2]],[[/\\(?:\\|")/g,null,-1],[/"/g,"sh_string",-2]],[[/\\(?:\\|')/g,null,-1],[/'/g,"sh_string",-2]],[[/$/g,null,-2],[/(?:<?)[A-Za-z0-9_\.\/\-_~]+@[A-Za-z0-9_\.\/\-_~]+(?:>?)|(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_~]+(?:>?)/g,"sh_url",-1],[/<\?xml/g,"sh_preproc",5,1],[/<!DOCTYPE/g,"sh_preproc",6,1],[/<!--/g,"sh_comment",7],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)/g,"sh_keyword",8,1],[/&(?:[A-Za-z0-9]+);/g,"sh_preproc",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*/g,"sh_keyword",8,1],[/@[A-Za-z]+/g,"sh_type",-1],[/(?:TODO|FIXME|BUG)(?:[:]?)/g,"sh_todo",-1]],[[/\?>/g,"sh_preproc",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",2]],[[/>/g,"sh_preproc",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",2]],[[/-->/g,"sh_comment",-2],[/<!--/g,"sh_comment",7]],[[/(?:\/)?>/g,"sh_keyword",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",2]],[[/\*\//g,"sh_comment",-2],[/(?:<?)[A-Za-z0-9_\.\/\-_~]+@[A-Za-z0-9_\.\/\-_~]+(?:>?)|(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_~]+(?:>?)/g,"sh_url",-1],[/<\?xml/g,"sh_preproc",5,1],[/<!DOCTYPE/g,"sh_preproc",6,1],[/<!--/g,"sh_comment",7],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)/g,"sh_keyword",8,1],[/&(?:[A-Za-z0-9]+);/g,"sh_preproc",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*/g,"sh_keyword",8,1],[/@[A-Za-z]+/g,"sh_type",-1],[/(?:TODO|FIXME|BUG)(?:[:]?)/g,"sh_todo",-1]],[[/\*\//g,"sh_comment",-2],[/(?:<?)[A-Za-z0-9_\.\/\-_~]+@[A-Za-z0-9_\.\/\-_~]+(?:>?)|(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_~]+(?:>?)/g,"sh_url",-1],[/(?:TODO|FIXME|BUG)(?:[:]?)/g,"sh_todo",-1]]];if(!this.sh_languages){this.sh_languages={}}sh_languages.python=[[[/\b(?:import|from)\b/g,"sh_preproc",-1],[/#/g,"sh_comment",1],[/\b[+-]?(?:(?:0x[A-Fa-f0-9]+)|(?:(?:[\d]*\.)?[\d]+(?:[eE][+-]?[\d]+)?))u?(?:(?:int(?:8|16|32|64))|L)?\b/g,"sh_number",-1],[/\b(?:and|assert|break|class|continue|def|del|elif|else|except|exec|finally|for|global|if|in|is|lambda|not|or|pass|print|raise|return|try|while)\b/g,"sh_keyword",-1],[/^(?:[\s]*'{3})/g,"sh_comment",2],[/^(?:[\s]*\"{3})/g,"sh_comment",3],[/^(?:[\s]*'(?:[^\\']|\\.)*'[\s]*|[\s]*\"(?:[^\\\"]|\\.)*\"[\s]*)$/g,"sh_comment",-1],[/(?:[\s]*'{3})/g,"sh_string",4],[/(?:[\s]*\"{3})/g,"sh_string",5],[/"/g,"sh_string",6],[/'/g,"sh_string",7],[/~|!|%|\^|\*|\(|\)|-|\+|=|\[|\]|\\|:|;|,|\.|\/|\?|&|<|>|\||\{|\}/g,"sh_symbol",-1],[/(?:[A-Za-z]|_)[A-Za-z0-9_]*(?=[ \t]*\()/g,"sh_function",-1]],[[/$/g,null,-2]],[[/(?:'{3})/g,"sh_comment",-2]],[[/(?:\"{3})/g,"sh_comment",-2]],[[/(?:'{3})/g,"sh_string",-2]],[[/(?:\"{3})/g,"sh_string",-2]],[[/$/g,null,-2],[/\\(?:\\|")/g,null,-1],[/"/g,"sh_string",-2]],[[/$/g,null,-2],[/\\(?:\\|')/g,null,-1],[/'/g,"sh_string",-2]]];if(!this.sh_languages){this.sh_languages={}}sh_languages.ruby=[[[/\b(?:require)\b/g,"sh_preproc",-1],[/\b[+-]?(?:(?:0x[A-Fa-f0-9]+)|(?:(?:[\d]*\.)?[\d]+(?:[eE][+-]?[\d]+)?))u?(?:(?:int(?:8|16|32|64))|L)?\b/g,"sh_number",-1],[/"/g,"sh_string",1],[/'/g,"sh_string",2],[/</g,"sh_string",3],[/\/[^\n]*\//g,"sh_regexp",-1],[/(%r)(\{(?:\\\}|#\{[A-Za-z0-9]+\}|[^}])*\})/g,["sh_symbol","sh_regexp"],-1],[/\b(?:alias|begin|BEGIN|break|case|defined|do|else|elsif|end|END|ensure|for|if|in|include|loop|next|raise|redo|rescue|retry|return|super|then|undef|unless|until|when|while|yield|false|nil|self|true|__FILE__|__LINE__|and|not|or|def|class|module|catch|fail|load|throw)\b/g,"sh_keyword",-1],[/(?:^\=begin)/g,"sh_comment",4],[/(?:\$[#]?|@@|@)(?:[A-Za-z0-9_]+|'|\"|\/)/g,"sh_type",-1],[/[A-Za-z0-9]+(?:\?|!)/g,"sh_normal",-1],[/~|!|%|\^|\*|\(|\)|-|\+|=|\[|\]|\\|:|;|,|\.|\/|\?|&|<|>|\|/g,"sh_symbol",-1],[/(#)(\{)/g,["sh_symbol","sh_cbracket"],-1],[/#/g,"sh_comment",5],[/\{|\}/g,"sh_cbracket",-1]],[[/$/g,null,-2],[/\\(?:\\|")/g,null,-1],[/"/g,"sh_string",-2]],[[/$/g,null,-2],[/\\(?:\\|')/g,null,-1],[/'/g,"sh_string",-2]],[[/$/g,null,-2],[/>/g,"sh_string",-2]],[[/^(?:\=end)/g,"sh_comment",-2]],[[/$/g,null,-2]]];if(!this.sh_languages){this.sh_languages={}}sh_languages.sql=[[[/\b(?:VARCHAR|TINYINT|TEXT|DATE|SMALLINT|MEDIUMINT|INT|BIGINT|FLOAT|DOUBLE|DECIMAL|DATETIME|TIMESTAMP|TIME|YEAR|UNSIGNED|CHAR|TINYBLOB|TINYTEXT|BLOB|MEDIUMBLOB|MEDIUMTEXT|LONGBLOB|LONGTEXT|ENUM|BOOL|BINARY|VARBINARY)\b/gi,"sh_type",-1],[/\b(?:ALL|ASC|AS|ALTER|AND|ADD|AUTO_INCREMENT|BETWEEN|BINARY|BOTH|BY|BOOLEAN|CHANGE|CHECK|COLUMNS|COLUMN|CROSS|CREATE|DATABASES|DATABASE|DATA|DELAYED|DESCRIBE|DESC|DISTINCT|DELETE|DROP|DEFAULT|ENCLOSED|ESCAPED|EXISTS|EXPLAIN|FIELDS|FIELD|FLUSH|FOR|FOREIGN|FUNCTION|FROM|GROUP|GRANT|HAVING|IGNORE|INDEX|INFILE|INSERT|INNER|INTO|IDENTIFIED|IN|IS|IF|JOIN|KEYS|KILL|KEY|LEADING|LIKE|LIMIT|LINES|LOAD|LOCAL|LOCK|LOW_PRIORITY|LEFT|LANGUAGE|MODIFY|NATURAL|NOT|NULL|NEXTVAL|OPTIMIZE|OPTION|OPTIONALLY|ORDER|OUTFILE|OR|OUTER|ON|PROCEDURE|PROCEDURAL|PRIMARY|READ|REFERENCES|REGEXP|RENAME|REPLACE|RETURN|REVOKE|RLIKE|RIGHT|SHOW|SONAME|STATUS|STRAIGHT_JOIN|SELECT|SETVAL|SET|TABLES|TERMINATED|TO|TRAILING|TRUNCATE|TABLE|TEMPORARY|TRIGGER|TRUSTED|UNIQUE|UNLOCK|USE|USING|UPDATE|VALUES|VARIABLES|VIEW|WITH|WRITE|WHERE|ZEROFILL|TYPE|XOR)\b/gi,"sh_keyword",-1],[/"/g,"sh_string",1],[/'/g,"sh_string",2],[/`/g,"sh_string",3],[/#/g,"sh_comment",4],[/\/\/\//g,"sh_comment",5],[/\/\//g,"sh_comment",4],[/\/\*\*/g,"sh_comment",11],[/\/\*/g,"sh_comment",12],[/--/g,"sh_comment",4],[/~|!|%|\^|\*|\(|\)|-|\+|=|\[|\]|\\|:|;|,|\.|\/|\?|&|<|>|\|/g,"sh_symbol",-1],[/\b[+-]?(?:(?:0x[A-Fa-f0-9]+)|(?:(?:[\d]*\.)?[\d]+(?:[eE][+-]?[\d]+)?))u?(?:(?:int(?:8|16|32|64))|L)?\b/g,"sh_number",-1]],[[/"/g,"sh_string",-2],[/\\./g,"sh_specialchar",-1]],[[/'/g,"sh_string",-2],[/\\./g,"sh_specialchar",-1]],[[/`/g,"sh_string",-2],[/\\./g,"sh_specialchar",-1]],[[/$/g,null,-2]],[[/$/g,null,-2],[/(?:<?)[A-Za-z0-9_\.\/\-_~]+@[A-Za-z0-9_\.\/\-_~]+(?:>?)|(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_~]+(?:>?)/g,"sh_url",-1],[/<\?xml/g,"sh_preproc",6,1],[/<!DOCTYPE/g,"sh_preproc",8,1],[/<!--/g,"sh_comment",9],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)/g,"sh_keyword",10,1],[/&(?:[A-Za-z0-9]+);/g,"sh_preproc",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*/g,"sh_keyword",10,1],[/@[A-Za-z]+/g,"sh_type",-1],[/(?:TODO|FIXME|BUG)(?:[:]?)/g,"sh_todo",-1]],[[/\?>/g,"sh_preproc",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",7]],[[/\\(?:\\|")/g,null,-1],[/"/g,"sh_string",-2]],[[/>/g,"sh_preproc",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",7]],[[/-->/g,"sh_comment",-2],[/<!--/g,"sh_comment",9]],[[/(?:\/)?>/g,"sh_keyword",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",7]],[[/\*\//g,"sh_comment",-2],[/(?:<?)[A-Za-z0-9_\.\/\-_~]+@[A-Za-z0-9_\.\/\-_~]+(?:>?)|(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_~]+(?:>?)/g,"sh_url",-1],[/<\?xml/g,"sh_preproc",6,1],[/<!DOCTYPE/g,"sh_preproc",8,1],[/<!--/g,"sh_comment",9],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)/g,"sh_keyword",10,1],[/&(?:[A-Za-z0-9]+);/g,"sh_preproc",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*/g,"sh_keyword",10,1],[/@[A-Za-z]+/g,"sh_type",-1],[/(?:TODO|FIXME|BUG)(?:[:]?)/g,"sh_todo",-1]],[[/\*\//g,"sh_comment",-2],[/(?:<?)[A-Za-z0-9_\.\/\-_~]+@[A-Za-z0-9_\.\/\-_~]+(?:>?)|(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_~]+(?:>?)/g,"sh_url",-1],[/(?:TODO|FIXME|BUG)(?:[:]?)/g,"sh_todo",-1]]];if(!this.sh_languages){this.sh_languages={}}sh_languages.url=[[{regex:/(?:<?)[A-Za-z0-9_\.\/\-_]+@[A-Za-z0-9_\.\/\-_]+(?:>?)/g,style:"sh_url"},{regex:/(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_]+(?:>?)/g,style:"sh_url"}]];if(!this.sh_languages){this.sh_languages={}}sh_languages.xml=[[[/<\?xml/g,"sh_preproc",1,1],[/<!DOCTYPE/g,"sh_preproc",3,1],[/<!--/g,"sh_comment",4],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)/g,"sh_keyword",5,1],[/&(?:[A-Za-z0-9]+);/g,"sh_preproc",-1]],[[/\?>/g,"sh_preproc",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",2]],[[/\\(?:\\|")/g,null,-1],[/"/g,"sh_string",-2]],[[/>/g,"sh_preproc",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",2]],[[/-->/g,"sh_comment",-2],[/<!--/g,"sh_comment",4]],[[/(?:\/)?>/g,"sh_keyword",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",2]]];
|
|
@@ -0,0 +1,296 @@
|
|
|
1
|
+
@media screen {
|
|
2
|
+
|
|
3
|
+
/*---------- peachpuff Styles ---------*/
|
|
4
|
+
.sh_peachpuff {
|
|
5
|
+
background:none;
|
|
6
|
+
padding:0;
|
|
7
|
+
margin:0;
|
|
8
|
+
border:0 none;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.sh_peachpuff .sh_sourceCode {
|
|
12
|
+
background-color:#fefbf3;
|
|
13
|
+
border: 1px solid #cecbc3;
|
|
14
|
+
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
15
|
+
color:#93a1a1;
|
|
16
|
+
font-weight:normal;
|
|
17
|
+
font-style:normal;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.sh_peachpuff .sh_sourceCode .sh_keyword {
|
|
21
|
+
color:#195f91;
|
|
22
|
+
font-weight:normal;
|
|
23
|
+
font-style:normal;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.sh_peachpuff .sh_sourceCode .sh_type {
|
|
27
|
+
color:#cb4b16;
|
|
28
|
+
font-weight:normal;
|
|
29
|
+
font-style:normal;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.sh_peachpuff .sh_sourceCode .sh_string {
|
|
33
|
+
color:#268bd2;
|
|
34
|
+
font-weight:normal;
|
|
35
|
+
font-style:normal;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.sh_peachpuff .sh_sourceCode strong .sh_string {
|
|
39
|
+
color:#268bd2;
|
|
40
|
+
font-weight:bold;
|
|
41
|
+
font-style:normal;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.sh_peachpuff .sh_sourceCode .sh_regexp {
|
|
45
|
+
color:#c00058;
|
|
46
|
+
font-weight:normal;
|
|
47
|
+
font-style:normal;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.sh_peachpuff .sh_sourceCode .sh_specialchar {
|
|
51
|
+
color:#6a5acd;
|
|
52
|
+
font-weight:normal;
|
|
53
|
+
font-style:normal;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.sh_peachpuff .sh_sourceCode .sh_comment {
|
|
57
|
+
color:#93a1a1;
|
|
58
|
+
font-weight:normal;
|
|
59
|
+
font-style:normal;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.sh_peachpuff .sh_sourceCode .sh_number {
|
|
63
|
+
color:#c00058;
|
|
64
|
+
font-weight:normal;
|
|
65
|
+
font-style:normal;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.sh_peachpuff .sh_sourceCode .sh_preproc {
|
|
69
|
+
color:#93a1a1;
|
|
70
|
+
font-weight:normal;
|
|
71
|
+
font-style:normal;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.sh_peachpuff .sh_sourceCode .sh_function {
|
|
75
|
+
color:#521cc7;
|
|
76
|
+
font-weight:normal;
|
|
77
|
+
font-style:normal;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.sh_peachpuff .sh_sourceCode .sh_url {
|
|
81
|
+
color:#c00058;
|
|
82
|
+
font-weight:normal;
|
|
83
|
+
font-style:normal;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.sh_peachpuff .sh_sourceCode .sh_date {
|
|
87
|
+
color:#a52a2a;
|
|
88
|
+
font-weight:bold;
|
|
89
|
+
font-style:normal;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.sh_peachpuff .sh_sourceCode .sh_time {
|
|
93
|
+
color:#a52a2a;
|
|
94
|
+
font-weight:bold;
|
|
95
|
+
font-style:normal;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.sh_peachpuff .sh_sourceCode .sh_file {
|
|
99
|
+
color:#a52a2a;
|
|
100
|
+
font-weight:bold;
|
|
101
|
+
font-style:normal;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.sh_peachpuff .sh_sourceCode .sh_ip {
|
|
105
|
+
color:#c00058;
|
|
106
|
+
font-weight:normal;
|
|
107
|
+
font-style:normal;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.sh_peachpuff .sh_sourceCode .sh_name {
|
|
111
|
+
color:#c00058;
|
|
112
|
+
font-weight:normal;
|
|
113
|
+
font-style:normal;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.sh_peachpuff .sh_sourceCode .sh_variable {
|
|
117
|
+
color:#275fec;
|
|
118
|
+
font-weight:bold;
|
|
119
|
+
font-style:normal;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.sh_peachpuff .sh_sourceCode .sh_oldfile {
|
|
123
|
+
color:#6a5acd;
|
|
124
|
+
font-weight:normal;
|
|
125
|
+
font-style:normal;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.sh_peachpuff .sh_sourceCode .sh_newfile {
|
|
129
|
+
color:#c00058;
|
|
130
|
+
font-weight:normal;
|
|
131
|
+
font-style:normal;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.sh_peachpuff .sh_sourceCode .sh_difflines {
|
|
135
|
+
color:#a52a2a;
|
|
136
|
+
font-weight:bold;
|
|
137
|
+
font-style:normal;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.sh_peachpuff .sh_sourceCode .sh_selector {
|
|
141
|
+
color:#195f91;
|
|
142
|
+
font-weight:normal;
|
|
143
|
+
font-style:normal;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.sh_peachpuff .sh_sourceCode .sh_property {
|
|
147
|
+
color:#cb4b16;
|
|
148
|
+
font-weight:normal;
|
|
149
|
+
font-style:normal;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.sh_peachpuff .sh_sourceCode .sh_value {
|
|
153
|
+
color:#268bd2;
|
|
154
|
+
font-weight:normal;
|
|
155
|
+
font-style:normal;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
/*-------- Snippet Base Styles ----------*/
|
|
159
|
+
.snippet-wrap {
|
|
160
|
+
position:relative;
|
|
161
|
+
margin: 0 0 1.5em 0;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
*:first-child+html .snippet-wrap { display:inline-block; }
|
|
165
|
+
|
|
166
|
+
* html .snippet-wrap { display:inline-block; }
|
|
167
|
+
|
|
168
|
+
.snippet-reveal { text-decoration:underline; }
|
|
169
|
+
|
|
170
|
+
.snippet-wrap .snippet-menu, .snippet-wrap .snippet-hide {
|
|
171
|
+
position:absolute;
|
|
172
|
+
top:10px;
|
|
173
|
+
right:15px;
|
|
174
|
+
font-size:.9em;
|
|
175
|
+
z-index:1;
|
|
176
|
+
background-color:transparent;
|
|
177
|
+
background-color:rgba(0,0,0,.1);
|
|
178
|
+
-webkit-border-radius: 0.2em;
|
|
179
|
+
-moz-border-radius: 0.2em;
|
|
180
|
+
border-radius: 0.2em;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.snippet-wrap .snippet-hide {
|
|
184
|
+
top:auto;
|
|
185
|
+
bottom:10px;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
*:first-child+html .snippet-wrap .snippet-hide { bottom:25px; }
|
|
189
|
+
|
|
190
|
+
* html .snippet-wrap .snippet-hide { bottom:25px; }
|
|
191
|
+
|
|
192
|
+
.snippet-wrap .snippet-menu pre, .snippet-wrap .snippet-hide pre {
|
|
193
|
+
background-color:transparent;
|
|
194
|
+
margin:0;
|
|
195
|
+
padding:0;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.snippet-wrap .snippet-menu a,
|
|
199
|
+
.snippet-wrap .snippet-hide a {
|
|
200
|
+
padding:2px 5px;
|
|
201
|
+
text-decoration:underline;
|
|
202
|
+
position:relative;
|
|
203
|
+
zoom: 1;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.snippet-wrap .snippet-menu a:hover,
|
|
207
|
+
.snippet-wrap .snippet-hide a:hover {
|
|
208
|
+
background: rgba(0,0,0,.5);
|
|
209
|
+
color: #fff;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
.snippet-wrap pre.sh_sourceCode {
|
|
213
|
+
font-size: 12px;
|
|
214
|
+
padding:0;
|
|
215
|
+
line-height:1.75em;
|
|
216
|
+
margin: 0;
|
|
217
|
+
overflow:auto;
|
|
218
|
+
position:relative;
|
|
219
|
+
border-radius:3px;
|
|
220
|
+
white-space: pre;
|
|
221
|
+
word-wrap: normal;
|
|
222
|
+
box-shadow: 0px 1px 2px rgba(0,0,0,.2);
|
|
223
|
+
-moz-box-shadow: 0px 1px 2px rgba(0,0,0,.2);
|
|
224
|
+
-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,.2);
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.snippet-wrap pre.snippet-textonly { padding:2em; }
|
|
228
|
+
|
|
229
|
+
*:first-child+html .snippet-wrap pre.snippet-formatted { padding:2em 1em; }
|
|
230
|
+
|
|
231
|
+
* html .snippet-wrap pre.snippet-formatted { padding:2em 1em; }
|
|
232
|
+
|
|
233
|
+
.snippet-reveal pre.sh_sourceCode {
|
|
234
|
+
padding:.5em 1em;
|
|
235
|
+
text-align:right;
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
.snippet-wrap .snippet-num li { padding-left:0.5em; }
|
|
239
|
+
|
|
240
|
+
.snippet-wrap .snippet-no-num {
|
|
241
|
+
list-style:none;
|
|
242
|
+
padding:.6em 1em;
|
|
243
|
+
margin:0;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
.snippet-wrap .snippet-no-num li {
|
|
247
|
+
line-height: 1.75em;
|
|
248
|
+
list-style:none;
|
|
249
|
+
padding-left:0;
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
.snippet-wrap .snippet-num {
|
|
253
|
+
margin: 1.6666em 0 1.6666em 0.5em;
|
|
254
|
+
padding-left:3em;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
.snippet-wrap .snippet-num li {
|
|
258
|
+
line-height: 1.75em;
|
|
259
|
+
list-style:decimal-leading-zero outside none;
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
.snippet-wrap .snippet-no-num li.box {
|
|
263
|
+
padding:0 6px;
|
|
264
|
+
margin-left:-6px;
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
.snippet-wrap .snippet-num li.box {
|
|
268
|
+
border:1px solid;
|
|
269
|
+
list-style-position:inside;
|
|
270
|
+
margin-left:-3em;
|
|
271
|
+
padding-left:6px;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
*:first-child+html .snippet-wrap .snippet-num li.box { margin-left:-2.4em; }
|
|
275
|
+
|
|
276
|
+
* html .snippet-wrap .snippet-num li.box { margin-left:-2.4em; }
|
|
277
|
+
|
|
278
|
+
.snippet-wrap li.box-top { border-width:1px 1px 0 !important; }
|
|
279
|
+
|
|
280
|
+
.snippet-wrap li.box-bot { border-width:0 1px 1px !important; }
|
|
281
|
+
|
|
282
|
+
.snippet-wrap li.box-mid { border-width:0 1px !important; }
|
|
283
|
+
|
|
284
|
+
.snippet-wrap .snippet-num li .box-sp {
|
|
285
|
+
width:18px;
|
|
286
|
+
display:inline-block;
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
*:first-child+html .snippet-wrap .snippet-num li .box-sp { width:27px; }
|
|
290
|
+
|
|
291
|
+
* html .snippet-wrap .snippet-num li .box-sp { width:27px; }
|
|
292
|
+
|
|
293
|
+
.snippet-wrap .snippet-no-num li.box { border:1px solid; }
|
|
294
|
+
|
|
295
|
+
.snippet-wrap .snippet-no-num li .box-sp { display:none; }
|
|
296
|
+
}
|
|
@@ -0,0 +1,3845 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en"><head>
|
|
3
|
+
<meta charset="utf-8"/>
|
|
4
|
+
<title>Documentation & Demos – YAML CSS Framework</title>
|
|
5
|
+
|
|
6
|
+
<!-- JavaScript Detection -->
|
|
7
|
+
<script>document.documentElement.className += " js";</script>
|
|
8
|
+
|
|
9
|
+
<!-- Mobile viewport optimisation -->
|
|
10
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
11
|
+
|
|
12
|
+
<meta name="keywords" content="css, css framework, toolkit, css layout, grid, column, equal height, html5, css3, flexible, mobile layout, responsive layout, accessibility, modular, forms">
|
|
13
|
+
<meta name="description" content="Online documentation and usage examples for all framework modules, containing responsive grids and columns, forms, navigations, typography and support for rtl-languages.">
|
|
14
|
+
<meta name="author" content="Dirk Jesse">
|
|
15
|
+
<meta name="publisher" content="Dirk Jesse, Highresolution.info">
|
|
16
|
+
<meta name="content-language" content="en">
|
|
17
|
+
<meta name="page-topic" content="Computer">
|
|
18
|
+
<meta name="revisit-after" content="2 days">
|
|
19
|
+
<meta name="robots" content="index,follow">
|
|
20
|
+
<link href="https://plus.google.com/+yaml" rel="publisher" />
|
|
21
|
+
|
|
22
|
+
<link href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700&text=YAML4%20CSS%20Framework" rel="stylesheet" type="text/css"/>
|
|
23
|
+
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700|Droid+Sans:700" rel="stylesheet" type="text/css">
|
|
24
|
+
<link href="./assets/css/layout.css" rel="stylesheet" type="text/css"/>
|
|
25
|
+
<link href="./assets/js/snippet/snippet.css" rel="stylesheet" type="text/css"/>
|
|
26
|
+
|
|
27
|
+
<!--[if lte IE 7]>
|
|
28
|
+
<link href="../yaml/core/iehacks.css" rel="stylesheet" type="text/css" />
|
|
29
|
+
<![endif]-->
|
|
30
|
+
|
|
31
|
+
<!--[if lt IE 9]>
|
|
32
|
+
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
|
33
|
+
<![endif]-->
|
|
34
|
+
|
|
35
|
+
<!-- Google Analytics -->
|
|
36
|
+
<script type="text/javascript">
|
|
37
|
+
var _gaq = _gaq || [];
|
|
38
|
+
_gaq.push(['_setAccount', 'UA-1851047-1']);
|
|
39
|
+
_gaq.push(['_setDomainName', 'yaml.de']);
|
|
40
|
+
_gaq.push(['_gat._anonymizeIp']);
|
|
41
|
+
_gaq.push(['_trackPageview']);
|
|
42
|
+
|
|
43
|
+
(function() {
|
|
44
|
+
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
|
45
|
+
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
|
46
|
+
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
|
47
|
+
})();
|
|
48
|
+
</script>
|
|
49
|
+
</head>
|
|
50
|
+
<body id="yaml-top" class="doc">
|
|
51
|
+
<!-- skip link navigation -->
|
|
52
|
+
<ul class="ym-skiplinks">
|
|
53
|
+
<li><a class="ym-skip" href="#level2">Skip to navigation (Press Enter)</a></li>
|
|
54
|
+
<li><a class="ym-skip" href="#overview">Skip to main content (Press Enter)</a></li>
|
|
55
|
+
</ul>
|
|
56
|
+
|
|
57
|
+
<div id="intro" role="contentinfo">
|
|
58
|
+
Yet Another Multicolumn Layout - continuously developed since 2005
|
|
59
|
+
</div>
|
|
60
|
+
|
|
61
|
+
<header role="banner">
|
|
62
|
+
<div class="ym-wrapper">
|
|
63
|
+
<div class="ym-wbox">
|
|
64
|
+
<h1><span>YAML</span> 4</h1>
|
|
65
|
+
<h2>CSS Framework</h2>
|
|
66
|
+
<p>A modular CSS framework for truly <em>flexible</em>, <em>accessible</em> and <em>responsive</em> websites</p>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
</header>
|
|
70
|
+
|
|
71
|
+
<!-- begin: main navigation #nav -->
|
|
72
|
+
<nav id="level2" role="navigation">
|
|
73
|
+
<div class="ym-wrapper">
|
|
74
|
+
<div class="ym-wbox">
|
|
75
|
+
<div class="ym-hlist">
|
|
76
|
+
<ul>
|
|
77
|
+
<li class="active"><a href="#yaml-quickstart">Quick Start</a></li>
|
|
78
|
+
<li><a href="#yaml-introduction">Introduction</a></li>
|
|
79
|
+
<li><a href="#yaml-layouts">Layouts</a></li>
|
|
80
|
+
<li><a href="#yaml-grids">Grids</a></li>
|
|
81
|
+
<li><a href="#yaml-columns">Columns</a></li>
|
|
82
|
+
<li><a href="#yaml-forms">Forms</a></li>
|
|
83
|
+
<li><a href="#yaml-floats">Floats</a></li>
|
|
84
|
+
<li><a href="#yaml-accessibility">Accessibility</a></li>
|
|
85
|
+
<li><a href="#yaml-navigation">Navigation</a></li>
|
|
86
|
+
<li><a href="#yaml-typography">Typography</a></li>
|
|
87
|
+
<li><a href="#yaml-addons">Add-ons</a></li>
|
|
88
|
+
<li><a href="#yaml-sass">Sass</a></li>
|
|
89
|
+
</ul>
|
|
90
|
+
</div>
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
</nav>
|
|
94
|
+
|
|
95
|
+
<div id="overview" role="main">
|
|
96
|
+
<div class="ym-wrapper">
|
|
97
|
+
<div class="ym-wbox">
|
|
98
|
+
|
|
99
|
+
<h3 id="yaml-quickstart">Quick Start Demos</h3>
|
|
100
|
+
<p>Here are some examples that show the YAML CSS framework in full flight.</p>
|
|
101
|
+
<div class="ym-grid linearize-level-1">
|
|
102
|
+
<div class="ym-g50 ym-gl">
|
|
103
|
+
|
|
104
|
+
<div class="ym-grid linearize-level-2">
|
|
105
|
+
<div class="ym-g50 ym-gl">
|
|
106
|
+
<div class="ym-gbox-left">
|
|
107
|
+
<h4>Flexible Grid</h4>
|
|
108
|
+
<img class="flexible bordered" src="assets/images/demo-flex-grid.png" alt=""/>
|
|
109
|
+
<p>A flexible and responsive grid layout showing the basic usage of YAMLs grid elements.</p>
|
|
110
|
+
<a class="ym-button ym-next" href="../demos/flexible-grid.html" target="_blank">View Example</a>
|
|
111
|
+
</div>
|
|
112
|
+
</div>
|
|
113
|
+
<div class="ym-g50 ym-gr">
|
|
114
|
+
<div class="ym-gbox-left">
|
|
115
|
+
<h4>Columns & Grids</h4>
|
|
116
|
+
<img class="flexible bordered" src="assets/images/demo-flex-column.png" alt=""/>
|
|
117
|
+
<p>A responsive layout with a flexible content column, some nested grid elements and a fixed width sidebar.</p>
|
|
118
|
+
<a class="ym-button ym-next" href="../demos/flexible-columns.html" target="_blank">View Example</a>
|
|
119
|
+
</div>
|
|
120
|
+
</div>
|
|
121
|
+
</div>
|
|
122
|
+
|
|
123
|
+
</div>
|
|
124
|
+
<div class="ym-g50 ym-gr">
|
|
125
|
+
|
|
126
|
+
<div class="ym-grid linearize-level-2">
|
|
127
|
+
<div class="ym-g50 ym-gl">
|
|
128
|
+
<div class="ym-gbox-left">
|
|
129
|
+
<h4>Custom Grid (960px)</h4>
|
|
130
|
+
<img class="flexible bordered" src="assets/images/demo-custom-grid.png" alt=""/>
|
|
131
|
+
<p>A fixed grid layout, based on 960 Grid System. It shows the use of custom grid configurations.</p>
|
|
132
|
+
<a class="ym-button ym-next" href="../demos/custom-grid.html" target="_blank">View Example</a>
|
|
133
|
+
</div>
|
|
134
|
+
</div>
|
|
135
|
+
<div class="ym-g50 ym-gr">
|
|
136
|
+
<div class="ym-gbox-left">
|
|
137
|
+
<h4>RTL Support</h4>
|
|
138
|
+
<img class="flexible bordered" src="assets/images/demo-rtl.png" alt=""/>
|
|
139
|
+
<p>A demo for YAMLs support of Hebrew or Arabic languages, that have «right to left» text flow.</p>
|
|
140
|
+
<a class="ym-button ym-next" href="../demos/rtl-support.html" target="_blank">View Example</a>
|
|
141
|
+
</div>
|
|
142
|
+
</div>
|
|
143
|
+
</div>
|
|
144
|
+
|
|
145
|
+
</div>
|
|
146
|
+
</div>
|
|
147
|
+
|
|
148
|
+
</div>
|
|
149
|
+
</div>
|
|
150
|
+
</div>
|
|
151
|
+
|
|
152
|
+
<div id="main" class="ym-clearfix" role="main">
|
|
153
|
+
<div class="ym-wrapper">
|
|
154
|
+
<div class="ym-wbox">
|
|
155
|
+
<h2 id="yaml-introduction" tabindex="-1">Introduction</h2>
|
|
156
|
+
<div class="ym-grid linearize-level-1">
|
|
157
|
+
<div class="ym-g25 ym-gl">
|
|
158
|
+
<div class="ym-gbox-left">
|
|
159
|
+
<h3>About</h3>
|
|
160
|
+
<p>YAML is continuously developed since 2005. It's strongly focussed on device independence and accessibilty.</p>
|
|
161
|
+
<p>It provides provides layout bullet-proof modules for flexible layouts.</p>
|
|
162
|
+
</div>
|
|
163
|
+
</div>
|
|
164
|
+
<div class="ym-g75 ym-gr">
|
|
165
|
+
<div class="ym-gbox-right">
|
|
166
|
+
<h3>File Structure</h3>
|
|
167
|
+
<p>Within the download package fo you will find a folder called <em>yaml</em> with
|
|
168
|
+
the following file stucture. This folder contains all components of the framework and
|
|
169
|
+
should stay unchanged for easy updating.</p>
|
|
170
|
+
<p>If you want to modify any file, put a copy in your local CSS folder and reference it from there</p>
|
|
171
|
+
<pre class="box info"><small>
|
|
172
|
+
yaml/
|
|
173
|
+
├── add-ons/
|
|
174
|
+
│ ├── accessible-tabs/
|
|
175
|
+
│ │ ├── jquery.tabs.js
|
|
176
|
+
│ │ └── tabs.css
|
|
177
|
+
│ ├── microformats/
|
|
178
|
+
│ │ ├── icons/
|
|
179
|
+
│ │ └── microformats.css
|
|
180
|
+
│ ├── rtl-support/
|
|
181
|
+
│ │ ├── core/
|
|
182
|
+
│ │ │ ├── base-rtl.css
|
|
183
|
+
│ │ │ └── base-rtl.min.css
|
|
184
|
+
│ │ ├── navigation/
|
|
185
|
+
│ │ │ ├── hlist-rtl.css
|
|
186
|
+
│ │ │ └── vlist-rtl.css
|
|
187
|
+
│ │ └── screen/
|
|
188
|
+
│ │ └── typography-rtl.css
|
|
189
|
+
│ └── microformats
|
|
190
|
+
│ └── jquery.syncheight.css
|
|
191
|
+
├── core/
|
|
192
|
+
│ ├── base.css
|
|
193
|
+
│ ├── base.min.css
|
|
194
|
+
│ ├── iehacks.css
|
|
195
|
+
│ └── iehacks.min.css
|
|
196
|
+
├── forms/
|
|
197
|
+
│ └── gray-theme.css
|
|
198
|
+
├── navigation/
|
|
199
|
+
│ ├── hlist.css
|
|
200
|
+
│ └── vlist.css
|
|
201
|
+
├── print/
|
|
202
|
+
│ └── print.css
|
|
203
|
+
└── screen/
|
|
204
|
+
├── grid-960-12.css
|
|
205
|
+
├── grid-960-16.css
|
|
206
|
+
├── screen-FULLPAGE-layout.css
|
|
207
|
+
├── screen-PAGE-layout.css
|
|
208
|
+
└── typography.css
|
|
209
|
+
</small></pre>
|
|
210
|
+
<h3>Core Components</h3>
|
|
211
|
+
<h4>Part 1: Framework Base "base.css"</h4>
|
|
212
|
+
<span class="label">yaml/core/base.css</span>
|
|
213
|
+
<p>The stylesheet <em>base.css</em> in the folder <em>yaml/core/</em> is the first and most important core-file of the YAML framework. It lays the foundation (browser normalisation, layout-modules eg. grids, forms etc.). This stylesheet is required for every YAML-based layout and should not be changed!</p>
|
|
214
|
+
|
|
215
|
+
<h5>List of Core Modules</h5>
|
|
216
|
+
<table>
|
|
217
|
+
<thead>
|
|
218
|
+
<tr>
|
|
219
|
+
<th class="nowrap">Module</th>
|
|
220
|
+
<th class="nowrap">Classes</th>
|
|
221
|
+
<th>Short Description</th>
|
|
222
|
+
</tr>
|
|
223
|
+
</thead>
|
|
224
|
+
<tbody>
|
|
225
|
+
<tr>
|
|
226
|
+
<td class="nowrap"> Normalisation</td>
|
|
227
|
+
<td class="nowrap">-</td>
|
|
228
|
+
<td>This module provides a reliable foundation for development by crossbrowser-normalizing the visual style for the most important elements. YAML offers an optional typography module containing default styles for all typical semantic HTML elements with an em-based (proportional to base font-size) vertical rhythm.</td>
|
|
229
|
+
</tr>
|
|
230
|
+
<tr>
|
|
231
|
+
<td class="nowrap">Layout</td>
|
|
232
|
+
<td class="nowrap"><strong>parent class</strong><br>
|
|
233
|
+
<code>.ym-wrapper</code><br>
|
|
234
|
+
<br>
|
|
235
|
+
<strong>optional class</strong><br>
|
|
236
|
+
<code>.ym-wbox</code></td>
|
|
237
|
+
<td>The layout module defines a layout-wrapper and default values for minimum and maximum width.</td>
|
|
238
|
+
</tr>
|
|
239
|
+
<tr>
|
|
240
|
+
<td class="nowrap">Grid</td>
|
|
241
|
+
<td class="nowrap"><strong>parent class</strong><br>
|
|
242
|
+
<code>.ym-grid</code><br>
|
|
243
|
+
<br>
|
|
244
|
+
<strong>child classes</strong><br>
|
|
245
|
+
<code>.ym-gl</code><br>
|
|
246
|
+
<code>.ym-gr</code><br>
|
|
247
|
+
<code>.ym-g[xx]</code><br>
|
|
248
|
+
<br>
|
|
249
|
+
<strong>optional classes</strong><br>
|
|
250
|
+
<code>.ym-equalize</code><br>
|
|
251
|
+
<code>.ym-gbox</code><br>
|
|
252
|
+
<code>.ym-gbox-left</code><br>
|
|
253
|
+
<code>.ym-gbox-right</code></td>
|
|
254
|
+
<td>The grid module provides flexible, nestable grids. Standard column widths are based on percentages. Optionally, all columns within a grid row can have equal height. Grid sizes can be extended/customized with user-defined CSS classes.</td>
|
|
255
|
+
</tr>
|
|
256
|
+
<tr>
|
|
257
|
+
<td class="nowrap">Column</td>
|
|
258
|
+
<td class="nowrap"><strong>parent class</strong><br>
|
|
259
|
+
<code>.ym-column</code><br>
|
|
260
|
+
<br>
|
|
261
|
+
<strong>child classes</strong><br>
|
|
262
|
+
<code>.ym-col[1|2|3]</code><br>
|
|
263
|
+
<br>
|
|
264
|
+
<strong>optional classes</strong><br>
|
|
265
|
+
<code>.ym-cbox</code><br>
|
|
266
|
+
<code>.ym-cbox-left</code><br>
|
|
267
|
+
<code>.ym-cbox-right</code></td>
|
|
268
|
+
<td>The column module divides a content area horizontally into a set of 2 or 3 columns whose widths can be defined in arbitrary units [px, em, %]. Column order can be defined via CSS by the user.</td>
|
|
269
|
+
</tr>
|
|
270
|
+
<tr>
|
|
271
|
+
<td class="nowrap">Form</td>
|
|
272
|
+
<td class="nowrap">
|
|
273
|
+
<p>
|
|
274
|
+
<strong>parent class</strong><br>
|
|
275
|
+
<code>.ym-form</code><br>
|
|
276
|
+
<br>
|
|
277
|
+
<strong>row wrapper</strong><br>
|
|
278
|
+
<code>.ym-fbox</code><br>
|
|
279
|
+
<code>.ym-fbox-footer</code><br>
|
|
280
|
+
<code>.ym-fbox-wrap</code><br>
|
|
281
|
+
<br>
|
|
282
|
+
<strong>IE6 helper classes</strong><br>
|
|
283
|
+
<code>.ym-fbox-text</code><br>
|
|
284
|
+
<code>.ym-fbox-select</code><br>
|
|
285
|
+
<code>.ym-fbox-check</code><br>
|
|
286
|
+
<code>.ym-fbox-button</code><br>
|
|
287
|
+
<br>
|
|
288
|
+
<strong>optional classes</strong><br>
|
|
289
|
+
<code>.ym-full</code><br>
|
|
290
|
+
<code>.ym-columnar</code><br>
|
|
291
|
+
<code>.ym-inline</code><br>
|
|
292
|
+
<code>.ym-required</code><br>
|
|
293
|
+
<code>.ym-error</code><br>
|
|
294
|
+
<code>.ym-message</code><br>
|
|
295
|
+
<code>.ym-label</code>
|
|
296
|
+
</p>
|
|
297
|
+
<p><strong>button classes</strong><br>
|
|
298
|
+
<code>.ym-button</code><br>
|
|
299
|
+
<code>.ym-small</code><br>
|
|
300
|
+
<code>.ym-xsmall</code><br>
|
|
301
|
+
<code>.ym-large</code><br>
|
|
302
|
+
<code>.ym-xlarge</code><br>
|
|
303
|
+
<code>.ym-primary</code><br>
|
|
304
|
+
<code>.ym-success</code><br>
|
|
305
|
+
<code>.ym-warning</code><br>
|
|
306
|
+
<code>.ym-danger</code><br>
|
|
307
|
+
</p>
|
|
308
|
+
</td>
|
|
309
|
+
<td>The form module provides the standard building blocks for designing robust flexible forms and offers three positioning options for arrangement of labels and form elements. YAML strictly separates structural form design (base.css) from visual styling of the form, to enable easy theming.</td>
|
|
310
|
+
</tr>
|
|
311
|
+
<tr>
|
|
312
|
+
<td class="nowrap">Float Handling</td>
|
|
313
|
+
<td class="nowrap"><strong>float clearing</strong><br>
|
|
314
|
+
<code>.ym-clearfix</code><br>
|
|
315
|
+
<br>
|
|
316
|
+
<strong>float containing</strong><br>
|
|
317
|
+
<code>.ym-contain-dt</code><br>
|
|
318
|
+
<code>.ym-contain-oh</code><br>
|
|
319
|
+
<code>.ym-contain-fl</code></td>
|
|
320
|
+
<td>This module offers several classes to handle floated objects within the layout. The <code>.ym-clearfix</code> class enables markup-free clearing of floats. The other predefined classes can be used to contain floated elements (or to handle unknown content in general, e.g. user generated content).</td>
|
|
321
|
+
</tr>
|
|
322
|
+
<tr>
|
|
323
|
+
<td class="nowrap">Accessibility</td>
|
|
324
|
+
<td class="nowrap"><p><strong>parent class</strong><br>
|
|
325
|
+
<code>.ym-skiplinks</code><br>
|
|
326
|
+
<br>
|
|
327
|
+
<strong>child class</strong><br>
|
|
328
|
+
<code>.ym-skip</code><br>
|
|
329
|
+
<br>
|
|
330
|
+
<strong>optional classes</strong><br>
|
|
331
|
+
<code>.ym-hideme</code><br>
|
|
332
|
+
<code>.ym-print<br>
|
|
333
|
+
.ym-noprint</code></p></td>
|
|
334
|
+
<td>The accessibility module provides a robust, layout-independent implementation for skip links. Furthermore it contains CSS classes to make content accessible for screen readers but hide them in visual media or make them visible only in the printed output.</td>
|
|
335
|
+
</tr>
|
|
336
|
+
</tbody>
|
|
337
|
+
</table>
|
|
338
|
+
|
|
339
|
+
<h4>Part 2: Support for old Internet Explorer versions "iehacks.css"</h4>
|
|
340
|
+
<span class="label">yaml/core/iehacks.css</span>
|
|
341
|
+
<p>The stylesheet <em>iehacks.css</em> from the <em>yaml/core/</em> folder is the second core component of the YAML framework. It contains all the structure- and layout-independent bugfixes for Internet Explorer (versions 5.x/Win - 7.0/Win). This bugfix-collection is essential for the robust and error-free presentation of YAML-based layouts in old Internet Explorer.</p>
|
|
342
|
+
<p>This stylesheet is optional but required for legacy support of old Internet Exlorer versions prior IE 8 and should remain unchanged! Many bugfixes exploit IE's numerous parser bugs - particularly those in older IE versions. The resulting CSS code is therefore not always valid and should thus only be made accessible to IE. This is possible with the use of <em>Conditional Comments</em> in the <code><head></code> of the document. The Conditional Comment has to be included below all regular stylesheets.</p>
|
|
343
|
+
<p>List of IE 6,7 bugsfixes provided by <em>iehacks.css</em>:</p>
|
|
344
|
+
<ul>
|
|
345
|
+
<li>fixes italics bug</li>
|
|
346
|
+
<li>fixes disappearing list-background bug</li>
|
|
347
|
+
<li>fixes list-numbering bug</li>
|
|
348
|
+
<li>fixes guillotine bug (IE6, in most cases)</li>
|
|
349
|
+
<li>fixes doubled float-margin bug (for YAML's structural elements)</li>
|
|
350
|
+
<li>workaround for expanding box problem </li>
|
|
351
|
+
<li>removes additional paddings in buttons</li>
|
|
352
|
+
<li>triggers hasLayout for HTML5 elements and YAML's structural elements</li>
|
|
353
|
+
<li>activates bicubic interpolation for image scaling</li>
|
|
354
|
+
<li>several stability fixes for YAMLs layout modules</li>
|
|
355
|
+
</ul>
|
|
356
|
+
|
|
357
|
+
<h3>Basic HTML/CSS Template</h3>
|
|
358
|
+
<p>Here's a template of an empty HTML5 file containing the integration of YAML's core stylesheets:</p>
|
|
359
|
+
<pre class="htmlCode"><!doctype html>
|
|
360
|
+
<html lang="en">
|
|
361
|
+
<head>
|
|
362
|
+
<meta charset="utf-8"/>
|
|
363
|
+
|
|
364
|
+
<title></title><br> <meta name="description" content=""/><br> <meta name="author" content=""/>
|
|
365
|
+
|
|
366
|
+
<!-- mobile viewport optimisation -->
|
|
367
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0"><br />
|
|
368
|
+
<!-- stylesheets --><br> <link rel="stylesheet" href="yaml/core/base.min.css" type="text/css"/>
|
|
369
|
+
<link rel="stylesheet" href="css/styles.css" type="text/css"/>
|
|
370
|
+
|
|
371
|
+
<!--[if lte IE 7]><br /> <link rel="stylesheet" href="yaml/core/iehacks.min.css" type="text/css"/><br /> <![endif]-->
|
|
372
|
+
</head>
|
|
373
|
+
<body>
|
|
374
|
+
...
|
|
375
|
+
</body>
|
|
376
|
+
</html></pre>
|
|
377
|
+
<p>For both core-files, minified file versions are provided. <em>base.min.css</em> weights only 4.6 kB and <em>iehacks.min.css</em> has a filesize of 2.1 kB. Use them for your production code. For development and a deeper understanding of the framework use the non-minified, commented file versions. </p>
|
|
378
|
+
<p class="box info"> Of course, you can build your layouts on XHTML 1.0 or HTML 4 Strict. YAML only requires the browser to be in Standard Mode. In Quirks Mode, YAML can't provide IE6 and 7 support.</p>
|
|
379
|
+
<h4>Central Stylesheets for Improved Development Workflow</h4>
|
|
380
|
+
<p>For prototyping and working with several, reusable stylesheets, YAML uses central stylesheets that import all other stylesheets. This reduces HTML changes (think of Content Management Systems) to a minimum during development.</p>
|
|
381
|
+
<pre class="htmlCode"><head><br /> ...<br /> <link rel="stylesheet" href="css/central.css" type="text/css"/>
|
|
382
|
+
<!--[if lte IE 7]><br /> <link rel="stylesheet" href="yaml/core/iehacks.min.css" type="text/css"/><br /> <![endif]-->
|
|
383
|
+
</head></pre>
|
|
384
|
+
<p>Here's an example for how such a central stylesheet could look like:</p>
|
|
385
|
+
<pre class="cssCode">
|
|
386
|
+
/* Google Font API */
|
|
387
|
+
@import url("http://fonts.googleapis.com/css?family=Droid+Serif");
|
|
388
|
+
@import url("http://fonts.googleapis.com/css?family=Droid+Sans:700");
|
|
389
|
+
|
|
390
|
+
/* import framework core */
|
|
391
|
+
@import url("../yaml/core/base.min.css");
|
|
392
|
+
|
|
393
|
+
/* import screen layout */
|
|
394
|
+
@import url("../yaml/navigation/hlist.css");
|
|
395
|
+
@import url("../yaml/forms/gray-theme.css");
|
|
396
|
+
|
|
397
|
+
@import url("screen.css");
|
|
398
|
+
@import url("typography.css");
|
|
399
|
+
|
|
400
|
+
/* import print layout */
|
|
401
|
+
@import url("print.css");
|
|
402
|
+
</pre>
|
|
403
|
+
<p>For production use, all stylesheets should ideally be concatenated and minified to reduce HTML requests and bandwidth of course.</p>
|
|
404
|
+
</div>
|
|
405
|
+
</div>
|
|
406
|
+
</div>
|
|
407
|
+
|
|
408
|
+
<div class="ym-grid linearize-level-1">
|
|
409
|
+
<div class="ym-g25 ym-gl">
|
|
410
|
+
<div class="ym-gbox-left">
|
|
411
|
+
<h3>HTML5 Support</h3>
|
|
412
|
+
<span class="label">lib/html5shiv/</span>
|
|
413
|
+
<p>YAML comes with the IE HTML5 enabling script <em>html5shiv</em>.</p>
|
|
414
|
+
<p>Visit the <a href="http://code.google.com/p/html5shim/"><em>html5shiv</em></a> project homepage on Google Code to get the latest version.</p>
|
|
415
|
+
</div>
|
|
416
|
+
</div>
|
|
417
|
+
<div class="ym-g75 ym-gr">
|
|
418
|
+
<div class="ym-gbox-right">
|
|
419
|
+
<h4>html5shiv</h4>
|
|
420
|
+
<p>HTML5 is supported by all modern browsers. To enable Internet Explorer 6-8 to render HTML5 elements correctly, JavaScript is mandatory to register the new elements so that the browser allows them to be styled with CSS. </p>
|
|
421
|
+
<pre class="htmlCode"><head><br /> ...
|
|
422
|
+
<!--[if lt IE 9]><br> <script src="./lib/html5shiv/html5shiv.js"></script><br> <![endif]--><br></head></pre>
|
|
423
|
+
<p class="box info"><strong>Performance Hint:</strong> Avoid referencing the script directly from Google Code repository due to performance issues. Download the script and include it from your local server as shown in the above code snippet.</p>
|
|
424
|
+
</div>
|
|
425
|
+
</div>
|
|
426
|
+
</div>
|
|
427
|
+
|
|
428
|
+
<h2 id="yaml-layouts" tabindex="-1">Layout Module <span class="label">yaml/core/base.css</span></h2>
|
|
429
|
+
<div class="ym-grid linearize-level-1">
|
|
430
|
+
<div class="ym-g25 ym-gl">
|
|
431
|
+
<div class="ym-gbox-left">
|
|
432
|
+
<h4>Flexible Layouts</h4>
|
|
433
|
+
<p>The CSS2 Box Model is best suited for fixed measurements (i.e. pixels). The total width of a container is determined by adding the individual properties of the box: <code><em>width</em></code>, <code><em>padding</em></code>, and <code><em>border</em></code>. </p>
|
|
434
|
+
<p>If there are mixed units of measurement within a container (e.g. <em><code>width: 25%; padding: 0 10px;</code></em>), it is no longer possible to calculate the total width of the container in advance. </p>
|
|
435
|
+
<p>YAML solves this problem by using nested elements to separate values for width (<code>.ym-wrapper</code>) and <em><code>paddings</code></em> and <em><code>borders</code></em> (<code>.ym-wbox</code>). </p>
|
|
436
|
+
<p>The <code>.ym-wbox</code> elements are <em>optional</em> and can be removed when using CSS3 Box Modell (<code><em>box-sizing:border-box</em></code>).</p>
|
|
437
|
+
</div>
|
|
438
|
+
</div>
|
|
439
|
+
<div class="ym-g75 ym-gr">
|
|
440
|
+
<div class="ym-gbox-right">
|
|
441
|
+
<div class="ym-grid linearize-level-2">
|
|
442
|
+
<div class="ym-g50 ym-gl">
|
|
443
|
+
<div class="ym-gbox-left">
|
|
444
|
+
<!-- Inhalt linker Block -->
|
|
445
|
+
<h3>PAGE Layout</h3>
|
|
446
|
+
|
|
447
|
+
<div class="dummyscreen layout-a">
|
|
448
|
+
<div class="ym-wrapper">
|
|
449
|
+
<div class="ym-wbox">
|
|
450
|
+
<div class="header">Header</div>
|
|
451
|
+
<div class="main">Main</div>
|
|
452
|
+
<div class="footer">Footer</div>
|
|
453
|
+
</div>
|
|
454
|
+
</div>
|
|
455
|
+
</div>
|
|
456
|
+
<p>The layout looks like a single sheet of paper on top of <code><body></code>. All content sections are wrapped by a single width-defining element.</p>
|
|
457
|
+
<h4>Default Markup</h4>
|
|
458
|
+
<pre class="htmlCode">
|
|
459
|
+
<body>
|
|
460
|
+
<div class="ym-wrapper">
|
|
461
|
+
<div class="ym-wbox">
|
|
462
|
+
<header> ... </header>
|
|
463
|
+
...
|
|
464
|
+
</div>
|
|
465
|
+
</div>
|
|
466
|
+
</body></pre>
|
|
467
|
+
</div>
|
|
468
|
+
</div>
|
|
469
|
+
<div class="ym-g50 ym-gr">
|
|
470
|
+
<div class="ym-gbox-right">
|
|
471
|
+
<h3>FULLPAGE Layout</h3>
|
|
472
|
+
|
|
473
|
+
<div class="dummyscreen layout-b">
|
|
474
|
+
<div class="header">
|
|
475
|
+
<div class="ym-wrapper">
|
|
476
|
+
<div class="ym-wbox">
|
|
477
|
+
Header
|
|
478
|
+
</div>
|
|
479
|
+
</div>
|
|
480
|
+
</div>
|
|
481
|
+
<div class="main">
|
|
482
|
+
<div class="ym-wrapper">
|
|
483
|
+
<div class="ym-wbox">
|
|
484
|
+
Main
|
|
485
|
+
</div>
|
|
486
|
+
</div>
|
|
487
|
+
</div>
|
|
488
|
+
<div class="footer">
|
|
489
|
+
<div class="ym-wrapper">
|
|
490
|
+
<div class="ym-wbox">
|
|
491
|
+
Footer
|
|
492
|
+
</div>
|
|
493
|
+
</div>
|
|
494
|
+
</div>
|
|
495
|
+
</div>
|
|
496
|
+
<p>The layout is subdivided into several vertical aligned sections, covering the full width of the viewport.
|
|
497
|
+
The content area is aligned or centered within these sections.</p>
|
|
498
|
+
<h4>Default Markup</h4>
|
|
499
|
+
<pre class="htmlCode">
|
|
500
|
+
<body>
|
|
501
|
+
<header>
|
|
502
|
+
<div class="ym-wrapper">
|
|
503
|
+
<div class="ym-wbox">
|
|
504
|
+
...
|
|
505
|
+
</div>
|
|
506
|
+
</div>
|
|
507
|
+
</header>
|
|
508
|
+
...
|
|
509
|
+
</body></pre>
|
|
510
|
+
</div>
|
|
511
|
+
</div>
|
|
512
|
+
</div>
|
|
513
|
+
<h3>Layout Configuration</h3>
|
|
514
|
+
<div class="jquery_tabs">
|
|
515
|
+
<h5>PAGE Layout</h5>
|
|
516
|
+
<div class="tab-content">
|
|
517
|
+
<p>Values for <code><em>width</em></code>, <code><em>min-width</em></code> and <code><em>max-width</em></code> are
|
|
518
|
+
defined for the <code>.ym-wrapper</code> element, as the outmost layout element. Any white space to the boundaries
|
|
519
|
+
of the layout can be defined for <code>.ym-wbox</code>, using <code><em>margin</em></code>,
|
|
520
|
+
<code><em>padding</em></code> or <code><em>borders</em></code>.</p>
|
|
521
|
+
<pre class="cssCode">
|
|
522
|
+
.ym-wrapper {
|
|
523
|
+
min-width: 760px;
|
|
524
|
+
max-width: 80em;
|
|
525
|
+
}
|
|
526
|
+
|
|
527
|
+
.ym-wbox { padding: 10px; }</pre>
|
|
528
|
+
</div>
|
|
529
|
+
<h5>FULLPAGE Layout</h5>
|
|
530
|
+
<div class="tab-content">
|
|
531
|
+
<p>The value for <code><em>min-width</em></code> should be defined for the outmost layout element
|
|
532
|
+
(here: <code><header></code>). All other width values (<code><em>width</em></code> and
|
|
533
|
+
<code><em>max-width</em></code>) have to be defined for the <code>.ym-wrapper</code> element.
|
|
534
|
+
White space surrounding the layout can be defined for <code>.ym-wbox</code>, using
|
|
535
|
+
<code><em>margin</em></code>, <code><em>padding</em></code> or <code><em>border</em></code>.
|
|
536
|
+
</p>
|
|
537
|
+
<pre class="cssCode">
|
|
538
|
+
body > header { min-width: 760px; }
|
|
539
|
+
|
|
540
|
+
.ym-wrapper {
|
|
541
|
+
max-width: 80em;
|
|
542
|
+
}
|
|
543
|
+
|
|
544
|
+
.ym-wbox { padding: 10px; }
|
|
545
|
+
</pre>
|
|
546
|
+
</div>
|
|
547
|
+
</div>
|
|
548
|
+
</div>
|
|
549
|
+
</div>
|
|
550
|
+
</div>
|
|
551
|
+
|
|
552
|
+
<h2 id="yaml-grids" tabindex="-1">Grids Module <span class="label">yaml/core/base.css</span></h2>
|
|
553
|
+
<div class="ym-grid linearize-level-1">
|
|
554
|
+
<div class="ym-g25 ym-gl">
|
|
555
|
+
<div class="ym-gbox-left">
|
|
556
|
+
<!-- Inhalt linker Block -->
|
|
557
|
+
<p>Grids are wrapped by an element with the <code>.ym-grid</code> class.</p>
|
|
558
|
+
<p>To allow independent control of grid-column widths and gutters (remember the CSS2 Box Modell), YAML uses a nested structure were <code>.ym-g[xx]</code> classes hold <code><em>width</em></code> values and <code>.ym-gbox</code> class holds <code><em>margin</em></code>, <code><em>padding</em></code> or <code><em>border</em></code> values.</p>
|
|
559
|
+
<p>The <code>.ym-gbox</code> elements are <em>optional</em> and can be removed when using CSS3 Box Modell (<code><em>box-sizing:border-box</em></code>). </p>
|
|
560
|
+
</div>
|
|
561
|
+
</div>
|
|
562
|
+
<div class="ym-g75 ym-gr">
|
|
563
|
+
<div class="ym-gbox-right">
|
|
564
|
+
<!-- Inhalt linker Block -->
|
|
565
|
+
<h3>Default Grid Configuration</h3>
|
|
566
|
+
<div class="grid-demo1">
|
|
567
|
+
<div class="ym-grid">
|
|
568
|
+
<div class="ym-g20 ym-gl"><div class="ym-gbox">20 %</div></div>
|
|
569
|
+
<div class="ym-g20 ym-gl"><div class="ym-gbox">20 %</div></div>
|
|
570
|
+
<div class="ym-g20 ym-gl"><div class="ym-gbox">20 %</div></div>
|
|
571
|
+
<div class="ym-g20 ym-gl"><div class="ym-gbox">20 %</div></div>
|
|
572
|
+
<div class="ym-g20 ym-gr"><div class="ym-gbox">20 %</div></div>
|
|
573
|
+
</div>
|
|
574
|
+
<div class="ym-grid">
|
|
575
|
+
<div class="ym-g25 ym-gl"><div class="ym-gbox">25 %</div></div>
|
|
576
|
+
<div class="ym-g25 ym-gl"><div class="ym-gbox">25 %</div></div>
|
|
577
|
+
<div class="ym-g25 ym-gl"><div class="ym-gbox">25 %</div></div>
|
|
578
|
+
<div class="ym-g25 ym-gr"><div class="ym-gbox">25 %</div></div>
|
|
579
|
+
</div>
|
|
580
|
+
<div class="ym-grid">
|
|
581
|
+
<div class="ym-g33 ym-gl"><div class="ym-gbox">33.333 %</div></div>
|
|
582
|
+
<div class="ym-g33 ym-gl"><div class="ym-gbox">33.333 %</div></div>
|
|
583
|
+
<div class="ym-g33 ym-gr"><div class="ym-gbox">33.333 %</div></div>
|
|
584
|
+
</div>
|
|
585
|
+
<div class="ym-grid">
|
|
586
|
+
<div class="ym-g50 ym-gl"><div class="ym-gbox">50 %</div></div>
|
|
587
|
+
<div class="ym-g50 ym-gr"><div class="ym-gbox">50 %</div></div>
|
|
588
|
+
</div>
|
|
589
|
+
<div class="ym-grid"><div class="ym-gbox">Full Width</div></div>
|
|
590
|
+
</div>
|
|
591
|
+
|
|
592
|
+
<h4>Predefined Split-Values</h4>
|
|
593
|
+
<div class="jquery_tabs">
|
|
594
|
+
<h5>Grid Classes</h5>
|
|
595
|
+
<div class="tab-content">
|
|
596
|
+
<table>
|
|
597
|
+
<thead>
|
|
598
|
+
<tr>
|
|
599
|
+
<th scope="col">CSS class</th>
|
|
600
|
+
<th scope="col">Column Width</th>
|
|
601
|
+
</tr>
|
|
602
|
+
</thead>
|
|
603
|
+
<tbody>
|
|
604
|
+
<tr>
|
|
605
|
+
<td><code>.ym-g20</code></td>
|
|
606
|
+
<td>20 %</td>
|
|
607
|
+
</tr>
|
|
608
|
+
<tr>
|
|
609
|
+
<td><code>.ym-g25</code></td>
|
|
610
|
+
<td>25 %</td>
|
|
611
|
+
</tr>
|
|
612
|
+
<tr>
|
|
613
|
+
<td><code>.ym-g33</code></td>
|
|
614
|
+
<td>33.3333 %</td>
|
|
615
|
+
</tr>
|
|
616
|
+
<tr>
|
|
617
|
+
<td><code>.ym-g38</code></td>
|
|
618
|
+
<td>38.2 % (Golden Ratio)</td>
|
|
619
|
+
</tr>
|
|
620
|
+
<tr>
|
|
621
|
+
<td><code>.ym-g40</code></td>
|
|
622
|
+
<td>40 %</td>
|
|
623
|
+
</tr>
|
|
624
|
+
<tr>
|
|
625
|
+
<td><code>.ym-g50</code></td>
|
|
626
|
+
<td>50 %</td>
|
|
627
|
+
</tr>
|
|
628
|
+
<tr>
|
|
629
|
+
<td><code>.ym-g60</code></td>
|
|
630
|
+
<td>60 %</td>
|
|
631
|
+
</tr>
|
|
632
|
+
<tr>
|
|
633
|
+
<td><code>.ym-g62</code></td>
|
|
634
|
+
<td>61.8 % (Golden Ratio)</td>
|
|
635
|
+
</tr>
|
|
636
|
+
<tr>
|
|
637
|
+
<td><code>.ym-g66</code></td>
|
|
638
|
+
<td>66.6666 %</td>
|
|
639
|
+
</tr>
|
|
640
|
+
<tr>
|
|
641
|
+
<td><code>.ym-g75</code></td>
|
|
642
|
+
<td>75 %</td>
|
|
643
|
+
</tr>
|
|
644
|
+
<tr>
|
|
645
|
+
<td><code>.ym-g80</code></td>
|
|
646
|
+
<td>80 %</td>
|
|
647
|
+
</tr>
|
|
648
|
+
</tbody>
|
|
649
|
+
</table>
|
|
650
|
+
</div>
|
|
651
|
+
<h5>Grid Visualisation</h5>
|
|
652
|
+
<div class="tab-content">
|
|
653
|
+
<div class="grid-demo2">
|
|
654
|
+
<div class="ym-grid">
|
|
655
|
+
<div class="ym-g20 ym-gl"> 20 % </div>
|
|
656
|
+
<div class="ym-g80 ym-gr"> 80 % </div>
|
|
657
|
+
</div>
|
|
658
|
+
<div class="ym-grid">
|
|
659
|
+
<div class="ym-g25 ym-gl"> 25 % </div>
|
|
660
|
+
<div class="ym-g75 ym-gr"> 75 % </div>
|
|
661
|
+
</div>
|
|
662
|
+
<div class="ym-grid">
|
|
663
|
+
<div class="ym-g33 ym-gl"> 33.333 % </div>
|
|
664
|
+
<div class="ym-g66 ym-gr"> 66.666 % </div>
|
|
665
|
+
</div>
|
|
666
|
+
<div class="ym-grid">
|
|
667
|
+
<div class="ym-g38 ym-gl"> Golden Ratio (1 : 1.618) 38.2% </div>
|
|
668
|
+
<div class="ym-g62 ym-gr"> Golden Ratio (1 : 1.618) 61.8% </div>
|
|
669
|
+
</div>
|
|
670
|
+
<div class="ym-grid">
|
|
671
|
+
<div class="ym-g40 ym-gl"> 40 % </div>
|
|
672
|
+
<div class="ym-g60 ym-gr"> 60 % </div>
|
|
673
|
+
</div>
|
|
674
|
+
<div class="ym-grid">
|
|
675
|
+
<div class="ym-g50 ym-gl"> 50 % </div>
|
|
676
|
+
<div class="ym-g50 ym-gr"> 50 % </div>
|
|
677
|
+
</div>
|
|
678
|
+
<div class="ym-grid">
|
|
679
|
+
<div class="ym-g60 ym-gl"> 60 % </div>
|
|
680
|
+
<div class="ym-g40 ym-gr"> 40 % </div>
|
|
681
|
+
</div>
|
|
682
|
+
<div class="ym-grid">
|
|
683
|
+
<div class="ym-g62 ym-gl"> Golden Ratio (1.618 : 1) 61.8% </div>
|
|
684
|
+
<div class="ym-g38 ym-gr"> Golden Ratio (1.618 : 1) 38.2% </div>
|
|
685
|
+
</div>
|
|
686
|
+
<div class="ym-grid">
|
|
687
|
+
<div class="ym-g66 ym-gl"> 66.666 % </div>
|
|
688
|
+
<div class="ym-g33 ym-gr"> 33.333 % </div>
|
|
689
|
+
</div>
|
|
690
|
+
<div class="ym-grid">
|
|
691
|
+
<div class="ym-g75 ym-gl"> 75 % </div>
|
|
692
|
+
<div class="ym-g25 ym-gr"> 25 % </div>
|
|
693
|
+
</div>
|
|
694
|
+
<div class="ym-grid">
|
|
695
|
+
<div class="ym-g80 ym-gl"> 80 % </div>
|
|
696
|
+
<div class="ym-g20 ym-gr"> 20 % </div>
|
|
697
|
+
</div>
|
|
698
|
+
</div>
|
|
699
|
+
</div>
|
|
700
|
+
</div>
|
|
701
|
+
|
|
702
|
+
<h4>Default Markup</h4>
|
|
703
|
+
<p>Grids are wrapped by an element with the <code>.ym-grid</code> class. The grid module is based on floats. Standard float direction is left, using CSS class <code>.ym-gl</code>. At the end of each row, rounding errors will be corrected by changing the float direction for the last column to right (<code>.ym-gr</code>). </p>
|
|
704
|
+
<p>To allow independent control of column- and gutter-widths, YAML uses a nested structure were <code>.ym-g[xx]</code> classes hold <code><em>width</em></code> values and <code>.ym-gbox</code> class holds gutter values as <code><em>padding</em></code> or <code><em>margin</em></code>.</p>
|
|
705
|
+
<pre class="htmlCode">
|
|
706
|
+
<div class="ym-grid">
|
|
707
|
+
<div class="ym-g50 ym-gl">
|
|
708
|
+
<div class="ym-gbox">
|
|
709
|
+
<!-- content -->
|
|
710
|
+
...
|
|
711
|
+
</div>
|
|
712
|
+
</div>
|
|
713
|
+
<div class="ym-g50 ym-gr">
|
|
714
|
+
<div class="ym-gbox">
|
|
715
|
+
<!-- content -->
|
|
716
|
+
...
|
|
717
|
+
</div>
|
|
718
|
+
</div>
|
|
719
|
+
</div></pre>
|
|
720
|
+
<h3>Nested Grids</h3>
|
|
721
|
+
<p>Grids can be nested in any variation to achieve your design. You can also combine or nest grid modules and column modules within your layouts.</p>
|
|
722
|
+
|
|
723
|
+
<div class="grid-demo1">
|
|
724
|
+
<div class="ym-grid">
|
|
725
|
+
<div class="ym-g50 ym-gl">
|
|
726
|
+
<div class="ym-gbox">50 %</div>
|
|
727
|
+
<div class="ym-grid">
|
|
728
|
+
<div class="ym-g50 ym-gl"><div class="ym-gbox">50 %</div></div>
|
|
729
|
+
<div class="ym-g50 ym-gr"><div class="ym-gbox">50 %</div></div>
|
|
730
|
+
</div>
|
|
731
|
+
</div>
|
|
732
|
+
<div class="ym-g50 ym-gr"><div class="ym-gbox">50 %</div>
|
|
733
|
+
<div class="ym-grid">
|
|
734
|
+
<div class="ym-g33 ym-gl"><div class="ym-gbox">33.333 %</div></div>
|
|
735
|
+
<div class="ym-g33 ym-gl"><div class="ym-gbox">33.333 %</div></div>
|
|
736
|
+
<div class="ym-g33 ym-gr"><div class="ym-gbox"> 33.333 %</div></div>
|
|
737
|
+
</div>
|
|
738
|
+
</div>
|
|
739
|
+
</div>
|
|
740
|
+
</div>
|
|
741
|
+
|
|
742
|
+
<pre class="htmlCode">
|
|
743
|
+
<div class="ym-grid">
|
|
744
|
+
<div class="ym-g50 ym-gl">
|
|
745
|
+
<div class="ym-gbox">
|
|
746
|
+
<!-- content: grid-column -->
|
|
747
|
+
</div>
|
|
748
|
+
<div class="ym-grid">
|
|
749
|
+
<div class="ym-g50 ym-gl">
|
|
750
|
+
<!-- content: nested grid-column -->
|
|
751
|
+
</div>
|
|
752
|
+
<div class="ym-g50 ym-gr">
|
|
753
|
+
<!-- content: nested grid-column -->
|
|
754
|
+
</div>
|
|
755
|
+
</div>
|
|
756
|
+
</div>
|
|
757
|
+
<div class="ym-g50 ym-gr">
|
|
758
|
+
...
|
|
759
|
+
</div>
|
|
760
|
+
</div>
|
|
761
|
+
</pre>
|
|
762
|
+
<h3>Advanced Grid Features</h3>
|
|
763
|
+
<h4>Custom Grids
|
|
764
|
+
<span>
|
|
765
|
+
<span class="label">yaml/screen/grid-960-12.css</span>
|
|
766
|
+
<span class="label">yaml/screen/grid-960-16.css</span>
|
|
767
|
+
<span class="label">yaml/screen/blueprint.css</span>
|
|
768
|
+
<span class="label">yaml/screen/fluid-12-col.css</span>
|
|
769
|
+
</span></h4>
|
|
770
|
+
<p>YAMLs grid module provides a logical subdivision of widths (1/2, 1/3, 1/4, 1/5 and Golden Ratio) but it can easily be extended. Custom grid configurations, e.g. a fixed grid, can be created with only a few lines of CSS. Here is an example for a simple <a href="http://960.gs/">960.gs</a> port (without pull and push classes):</p>
|
|
771
|
+
<div class="ym-grid linearize-level-2">
|
|
772
|
+
<div class="ym-g50 ym-gl">
|
|
773
|
+
<div class="ym-gbox-left">
|
|
774
|
+
<h5>Custom Grid Configuration</h5>
|
|
775
|
+
<pre class="cssCode">
|
|
776
|
+
/* Simple 960.gs port for YAML 4 */
|
|
777
|
+
.ym-g960-1 { width: 80px; }
|
|
778
|
+
.ym-g960-2 { width: 160px; }
|
|
779
|
+
.ym-g960-3 { width: 240px; }
|
|
780
|
+
.ym-g960-4 { width: 320px; }
|
|
781
|
+
.ym-g960-5 { width: 400px; }
|
|
782
|
+
.ym-g960-6 { width: 480px; }
|
|
783
|
+
.ym-g960-7 { width: 560px; }
|
|
784
|
+
.ym-g960-8 { width: 640px; }
|
|
785
|
+
.ym-g960-9 { width: 720px; }
|
|
786
|
+
.ym-g960-10 { width: 800px; }
|
|
787
|
+
.ym-g960-11 { width: 880px; }
|
|
788
|
+
.ym-g960-12 { width: 960px; }
|
|
789
|
+
|
|
790
|
+
.ym-gbox {
|
|
791
|
+
padding: 0;
|
|
792
|
+
margin-right: 20px;
|
|
793
|
+
}
|
|
794
|
+
</pre>
|
|
795
|
+
</div>
|
|
796
|
+
</div>
|
|
797
|
+
<div class="ym-g50 ym-gr">
|
|
798
|
+
<div class="ym-gbox-right">
|
|
799
|
+
<h5>Custom Grid Markup</h5>
|
|
800
|
+
<pre class="htmlCode">
|
|
801
|
+
<div class="ym-grid">
|
|
802
|
+
<div class="ym-g960-6 ym-gl">
|
|
803
|
+
<div class="ym-gbox">
|
|
804
|
+
<!-- content: left -->
|
|
805
|
+
</div>
|
|
806
|
+
</div>
|
|
807
|
+
<div class="ym-g960-6 ym-gl">
|
|
808
|
+
<div class="ym-gbox">
|
|
809
|
+
<!-- content: right -->
|
|
810
|
+
...
|
|
811
|
+
</div>
|
|
812
|
+
</div>
|
|
813
|
+
</div>
|
|
814
|
+
</pre>
|
|
815
|
+
<p>Predefined stylesheets for a 12- and 16-columns port of 960.gs can be found in folder <em>/yaml/screen/</em>.</p>
|
|
816
|
+
</div>
|
|
817
|
+
</div>
|
|
818
|
+
</div>
|
|
819
|
+
<p>In the same way, it is possible to create robust custom grids based on em-unit or to extend YAMLs percentage-based grids with other ratios and you're still able to define <code><em>padding</em></code> and <code><em>border</em></code> properties independently. This way the most complex flexible grids are still very easy to handle.</p>
|
|
820
|
+
</div>
|
|
821
|
+
</div>
|
|
822
|
+
</div>
|
|
823
|
+
|
|
824
|
+
<div class="ym-grid linearize-level-1">
|
|
825
|
+
<div class="ym-g25 ym-gl">
|
|
826
|
+
<div class="ym-gbox-left">
|
|
827
|
+
<h3>Equal Heights Grids</h3>
|
|
828
|
+
<p>Have you ever dreamed of flexible content boxes with complete graphical styling ability? Do you wish them to feature <em>equal heights</em> via pure CSS? Do you need them to be <em>crossbrowser</em> with full support for <em>older</em> IEs?
|
|
829
|
+
<p>Here they are.</p>
|
|
830
|
+
</div>
|
|
831
|
+
</div>
|
|
832
|
+
<div class="ym-g75 ym-gr">
|
|
833
|
+
<div class="ym-gbox-right">
|
|
834
|
+
<div class="ym-grid ym-equalize grid-demo3">
|
|
835
|
+
<div class="ym-g50 ym-gl">
|
|
836
|
+
<div class="ym-gbox-left">
|
|
837
|
+
<h6>Left Grid Column</h6>
|
|
838
|
+
<ul>
|
|
839
|
+
<li>List Item 1</li>
|
|
840
|
+
<li>List Item 2</li>
|
|
841
|
+
<li>List Item 3</li>
|
|
842
|
+
</ul>
|
|
843
|
+
</div>
|
|
844
|
+
</div>
|
|
845
|
+
<div class="ym-g50 ym-gr">
|
|
846
|
+
<div class="ym-gbox-right">
|
|
847
|
+
<h6>Right Grid Column</h6>
|
|
848
|
+
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p>
|
|
849
|
+
</div>
|
|
850
|
+
</div>
|
|
851
|
+
</div>
|
|
852
|
+
<p>To enable equalized column heights within a grid row, simply add <code>.ym-equalize</code> to the grid container <code>.ym-grid</code>.</p>
|
|
853
|
+
<pre class="htmlCode">
|
|
854
|
+
<div class="ym-grid ym-equalize">
|
|
855
|
+
...
|
|
856
|
+
</div></pre>
|
|
857
|
+
|
|
858
|
+
<div class="box info">
|
|
859
|
+
<h5>Technical Information</h5>
|
|
860
|
+
<p>This <em>flexible equal heights</em> solution is based on YAMLs grid module and combines three layout techniques. The equal height boxes are based on CSS tables (in all modern browsers) and floats (in Internet Explorer 6.x – 7.0). Additionally it uses Alex Robinson's <em>Equal Height</em> technique for <code>.ym-gbox</code> containers in all browsers and therefore inherits one of its limits.</p>
|
|
861
|
+
<h5>Limits of this "equal heights" approach</h5>
|
|
862
|
+
<p>As Alex Robinson writes in <a href="http://www.positioniseverything.net/articles/onetruelayout/appendix/equalheightproblems">Appendix J</a> of his «one true layout» article, some browsers have issues when <strong>linking to anchors in elements within the containing block</strong> (e.g. anchors of skip links). This problem is fixed in recent versions of Firefox, Opera and Safari and there is a workaround for IE5.x & IE6 – but this can't be fixed in Internet Explorer 7.0 with CSS. Therefore keep that issue in mind (avoid linking into equalized containers) when using equal heights subcolumns.</p> </div>
|
|
863
|
+
</div>
|
|
864
|
+
</div>
|
|
865
|
+
</div>
|
|
866
|
+
|
|
867
|
+
<div class="ym-grid linearize-level-1">
|
|
868
|
+
<div class="ym-g25 ym-gl">
|
|
869
|
+
<div class="ym-gbox-left">
|
|
870
|
+
<h3>Responsive Grids</h3>
|
|
871
|
+
<p>Flexible layouts work best when their responsive behavior is based on the boundary conditions of the individual screen designs. That's why YAML doesn't provide a pre-baked plan for linearization of grid elements.</p>
|
|
872
|
+
<p>As a frontend developer, you are completely free to define, how many levels of linearization your design needs and when they should be applied.</p>
|
|
873
|
+
</div>
|
|
874
|
+
</div>
|
|
875
|
+
<div class="ym-g75 ym-gr">
|
|
876
|
+
<div class="ym-gbox-right">
|
|
877
|
+
<h4>Progressive Linearization</h4>
|
|
878
|
+
<p>Here's a code-snippet to a linearization level for the grid module at a viewport size, lower then 760px. To create additional levels, copy this media block, set the viewport size, when the new level is triggerd (<em>max-width</em>) and count up the number in the class name.</p>
|
|
879
|
+
<pre class="cssCode">
|
|
880
|
+
@media screen and ( max-width: 760px ) {<br>
|
|
881
|
+
/* linearization for grid module */
|
|
882
|
+
.linearize-level-1,
|
|
883
|
+
.linearize-level-1 > [class*="ym-g"] {
|
|
884
|
+
display: block;
|
|
885
|
+
float: none;
|
|
886
|
+
padding: 0;
|
|
887
|
+
margin: 0;
|
|
888
|
+
width: 100% !important;
|
|
889
|
+
}
|
|
890
|
+
|
|
891
|
+
/* reset defined gutter values */
|
|
892
|
+
.linearize-level-1 > [class*="ym-g"] > [class*="ym-gbox"] {
|
|
893
|
+
overflow: hidden; /* optional for containing floats */
|
|
894
|
+
padding: 0;
|
|
895
|
+
margin: 0;
|
|
896
|
+
}
|
|
897
|
+
}</pre>
|
|
898
|
+
<p class="cssCode"> Add the class <code>.linearize-level-1</code> to any grid module, you want to be linearized:</p>
|
|
899
|
+
<pre class="htmlCode">
|
|
900
|
+
<div class="ym-grid linearize-level-1">
|
|
901
|
+
...
|
|
902
|
+
</div>
|
|
903
|
+
</pre>
|
|
904
|
+
</div>
|
|
905
|
+
</div>
|
|
906
|
+
</div>
|
|
907
|
+
|
|
908
|
+
<h2 id="yaml-columns" tabindex="-1">Column Module <span class="label">yaml/core/base.css</span></h2>
|
|
909
|
+
<div class="ym-grid linearize-level-1">
|
|
910
|
+
<div class="ym-g25 ym-gl">
|
|
911
|
+
<div class="ym-gbox-left">
|
|
912
|
+
<!-- Inhalt linker Block -->
|
|
913
|
+
<h4>Creating a Column-Set</h4>
|
|
914
|
+
<p>Columns are wrapped by an element with the <code>.ym-column</code> class.</p>
|
|
915
|
+
<p>To allow independent control of column widths and paddings (remember the CSS2 Box Modell), YAML uses a nested structure where elements with the class <code>.ym-col[1|2|3]</code> hold <code><em>width</em></code> values and elements with <code>.ym-cbox</code> class <code><em>padding</em></code> or <code><em>border</em></code> values.</p>
|
|
916
|
+
<p>The <code>.ym-cbox</code> elements are <em>optional</em> and can be removed when using CSS3 Box Modell (<code><em>box-sizing:border-box</em></code>). </p>
|
|
917
|
+
</div>
|
|
918
|
+
</div>
|
|
919
|
+
<div class="ym-g75 ym-gr">
|
|
920
|
+
<div class="ym-gbox-right">
|
|
921
|
+
<div class="ym-grid linearize-level-2">
|
|
922
|
+
<div class="ym-g50 ym-gl">
|
|
923
|
+
<div class="ym-gbox-left">
|
|
924
|
+
<h3>2 Columns</h3>
|
|
925
|
+
<div class="dummyscreen columnset-2">
|
|
926
|
+
<div class="ym-column">
|
|
927
|
+
<div class="ym-col1">
|
|
928
|
+
<div class="ym-cbox ym-clearfix">Col 1</div>
|
|
929
|
+
</div>
|
|
930
|
+
<div class="ym-col3">
|
|
931
|
+
<div class="ym-cbox ym-clearfix">
|
|
932
|
+
<div class="bg">Col 3</div>
|
|
933
|
+
</div>
|
|
934
|
+
<div class="ym-ie-clearing"> </div>
|
|
935
|
+
</div>
|
|
936
|
+
</div>
|
|
937
|
+
</div>
|
|
938
|
+
|
|
939
|
+
<h4>Default Markup</h4>
|
|
940
|
+
|
|
941
|
+
<pre class="htmlCode">
|
|
942
|
+
<div class="ym-column">
|
|
943
|
+
<div class="ym-col1">
|
|
944
|
+
<div class="ym-cbox">
|
|
945
|
+
...
|
|
946
|
+
</div>
|
|
947
|
+
</div>
|
|
948
|
+
<div class="ym-col3">
|
|
949
|
+
<div class="ym-cbox">
|
|
950
|
+
...
|
|
951
|
+
</div>
|
|
952
|
+
</div>
|
|
953
|
+
</div></pre>
|
|
954
|
+
</div>
|
|
955
|
+
</div>
|
|
956
|
+
<div class="ym-g50 ym-gr">
|
|
957
|
+
<div class="ym-gbox-right">
|
|
958
|
+
<h3>3 Columns</h3>
|
|
959
|
+
|
|
960
|
+
<div class="dummyscreen columnset-3">
|
|
961
|
+
<div class="ym-column">
|
|
962
|
+
<div class="ym-col1">
|
|
963
|
+
<div class="ym-cbox ym-clearfix">Col 1</div>
|
|
964
|
+
</div>
|
|
965
|
+
<div class="ym-col2">
|
|
966
|
+
<div class="ym-cbox ym-clearfix">Col 2</div>
|
|
967
|
+
</div>
|
|
968
|
+
<div class="ym-col3">
|
|
969
|
+
<div class="ym-cbox ym-clearfix"><div class="bg">Col 3</div></div>
|
|
970
|
+
<div class="ym-ie-clearing"> </div>
|
|
971
|
+
</div>
|
|
972
|
+
</div>
|
|
973
|
+
</div>
|
|
974
|
+
|
|
975
|
+
<h4>Default Markup</h4>
|
|
976
|
+
|
|
977
|
+
<pre class="htmlCode">
|
|
978
|
+
<div class="ym-column">
|
|
979
|
+
<div class="ym-col1">
|
|
980
|
+
<div class="ym-cbox">
|
|
981
|
+
...
|
|
982
|
+
</div>
|
|
983
|
+
</div>
|
|
984
|
+
<div class="ym-col2">
|
|
985
|
+
<div class="ym-cbox">
|
|
986
|
+
...
|
|
987
|
+
</div>
|
|
988
|
+
</div>
|
|
989
|
+
<div class="ym-col3">
|
|
990
|
+
<div class="ym-cbox">
|
|
991
|
+
...
|
|
992
|
+
</div>
|
|
993
|
+
</div>
|
|
994
|
+
</div></pre>
|
|
995
|
+
</div>
|
|
996
|
+
</div>
|
|
997
|
+
</div>
|
|
998
|
+
<!-- Inhalt rechter Block -->
|
|
999
|
+
|
|
1000
|
+
<h3>Column Configuration</h3>
|
|
1001
|
+
<p>As default, YAML provides a 1-3-2 configuration for a columnset with 3 columns. Columns 1 and 2 are defined as floats while column 3 is a static container. To change their visual order, use one of the following configurations:</p>
|
|
1002
|
+
<h4>3 Columns</h4>
|
|
1003
|
+
<div class="jquery_tabs">
|
|
1004
|
+
<h5>1-3-2 (default)</h5>
|
|
1005
|
+
<div class="tab-content">
|
|
1006
|
+
<table class="bordertable">
|
|
1007
|
+
<thead>
|
|
1008
|
+
<tr>
|
|
1009
|
+
<th>Layout</th>
|
|
1010
|
+
<th>Unit-Mix</th>
|
|
1011
|
+
<th>[%]</th>
|
|
1012
|
+
<th>[px]</th>
|
|
1013
|
+
<th>[em]</th>
|
|
1014
|
+
<th>Ruler</th>
|
|
1015
|
+
</tr>
|
|
1016
|
+
</thead>
|
|
1017
|
+
<tbody>
|
|
1018
|
+
<tr>
|
|
1019
|
+
<td>1-3-2 (default)</td>
|
|
1020
|
+
<td>Yes</td>
|
|
1021
|
+
<td>Yes</td>
|
|
1022
|
+
<td>Yes</td>
|
|
1023
|
+
<td>Yes</td>
|
|
1024
|
+
<td>Yes</td>
|
|
1025
|
+
</tr>
|
|
1026
|
+
</tbody>
|
|
1027
|
+
</table>
|
|
1028
|
+
<pre class="cssCode">
|
|
1029
|
+
.ym-col1 { width: 25%; } /* left column */
|
|
1030
|
+
.ym-col2 { width: 25%; } /* right column */
|
|
1031
|
+
.ym-col3 { margin-left: 25%; margin-right: 25%; } /* center column */</pre>
|
|
1032
|
+
</div>
|
|
1033
|
+
<h5>2-3-1</h5>
|
|
1034
|
+
<div class="tab-content">
|
|
1035
|
+
<table class="bordertable">
|
|
1036
|
+
<thead>
|
|
1037
|
+
<tr>
|
|
1038
|
+
<th>Layout</th>
|
|
1039
|
+
<th>Unit-Mix</th>
|
|
1040
|
+
<th>[%]</th>
|
|
1041
|
+
<th>[px]</th>
|
|
1042
|
+
<th>[em]</th>
|
|
1043
|
+
<th>Ruler</th>
|
|
1044
|
+
</tr>
|
|
1045
|
+
</thead>
|
|
1046
|
+
<tbody>
|
|
1047
|
+
<tr>
|
|
1048
|
+
<td>2-3-1</td>
|
|
1049
|
+
<td>Yes</td>
|
|
1050
|
+
<td>Yes</td>
|
|
1051
|
+
<td>Yes</td>
|
|
1052
|
+
<td>Yes</td>
|
|
1053
|
+
<td>Yes</td>
|
|
1054
|
+
</tr>
|
|
1055
|
+
</tbody>
|
|
1056
|
+
</table>
|
|
1057
|
+
<pre class="cssCode">
|
|
1058
|
+
.ym-col1 { width: 25%; float: right; } /* right column */
|
|
1059
|
+
.ym-col2 { width: 25%; float: left; } /* left column */
|
|
1060
|
+
.ym-col3 { margin-left: 25%; margin-right: 25%; } /* center column */</pre>
|
|
1061
|
+
</div>
|
|
1062
|
+
<h5>1-2-3</h5>
|
|
1063
|
+
<div class="tab-content">
|
|
1064
|
+
<table class="bordertable">
|
|
1065
|
+
<thead>
|
|
1066
|
+
<tr>
|
|
1067
|
+
<th>Layout</th>
|
|
1068
|
+
<th>Unit-Mix</th>
|
|
1069
|
+
<th>[%]</th>
|
|
1070
|
+
<th>[px]</th>
|
|
1071
|
+
<th>[em]</th>
|
|
1072
|
+
<th>Ruler</th>
|
|
1073
|
+
</tr>
|
|
1074
|
+
</thead>
|
|
1075
|
+
<tbody>
|
|
1076
|
+
<tr>
|
|
1077
|
+
<td>1-2-3</td>
|
|
1078
|
+
<td>No</td>
|
|
1079
|
+
<td>Yes</td>
|
|
1080
|
+
<td>Yes</td>
|
|
1081
|
+
<td>Yes</td>
|
|
1082
|
+
<td>No</td>
|
|
1083
|
+
</tr>
|
|
1084
|
+
</tbody>
|
|
1085
|
+
</table>
|
|
1086
|
+
<pre class="cssCode">
|
|
1087
|
+
.ym-col1 { width: 25%; margin: 0;} /* left column */
|
|
1088
|
+
.ym-col2 { width: 50%; float:left; margin: 0; } /* center column */
|
|
1089
|
+
.ym-col3 { margin-left: 75%; margin-right: 0%; } /* right column */</pre>
|
|
1090
|
+
</div>
|
|
1091
|
+
<h5>3-2-1</h5>
|
|
1092
|
+
<div class="tab-content">
|
|
1093
|
+
<table class="bordertable">
|
|
1094
|
+
<thead>
|
|
1095
|
+
<tr>
|
|
1096
|
+
<th>Layout</th>
|
|
1097
|
+
<th>Unit-Mix</th>
|
|
1098
|
+
<th>[%]</th>
|
|
1099
|
+
<th>[px]</th>
|
|
1100
|
+
<th>[em]</th>
|
|
1101
|
+
<th>Ruler</th>
|
|
1102
|
+
</tr>
|
|
1103
|
+
</thead>
|
|
1104
|
+
<tbody>
|
|
1105
|
+
<tr>
|
|
1106
|
+
<td>3-2-1</td>
|
|
1107
|
+
<td>No</td>
|
|
1108
|
+
<td>Yes</td>
|
|
1109
|
+
<td>Yes</td>
|
|
1110
|
+
<td>Yes</td>
|
|
1111
|
+
<td>-</td>
|
|
1112
|
+
</tr>
|
|
1113
|
+
</tbody>
|
|
1114
|
+
</table>
|
|
1115
|
+
<pre class="cssCode">
|
|
1116
|
+
.ym-col1 { width: 25%; float:right; margin: 0; } /* right column */
|
|
1117
|
+
.ym-col2 { width: 50%; margin: 0; } /* center column */
|
|
1118
|
+
.ym-col3 { margin-left: 0; margin-right: 75%; } /* left column */</pre>
|
|
1119
|
+
</div>
|
|
1120
|
+
<h5>2-1-3</h5>
|
|
1121
|
+
<div class="tab-content">
|
|
1122
|
+
<table class="bordertable">
|
|
1123
|
+
<thead>
|
|
1124
|
+
<tr>
|
|
1125
|
+
<th>Layout</th>
|
|
1126
|
+
<th>Unit-Mix</th>
|
|
1127
|
+
<th>[%]</th>
|
|
1128
|
+
<th>[px]</th>
|
|
1129
|
+
<th>[em]</th>
|
|
1130
|
+
<th>Ruler</th>
|
|
1131
|
+
</tr>
|
|
1132
|
+
</thead>
|
|
1133
|
+
<tbody>
|
|
1134
|
+
<tr>
|
|
1135
|
+
<td>2-1-3</td>
|
|
1136
|
+
<td>No</td>
|
|
1137
|
+
<td>Yes</td>
|
|
1138
|
+
<td>Yes</td>
|
|
1139
|
+
<td>No</td>
|
|
1140
|
+
<td>No</td>
|
|
1141
|
+
</tr>
|
|
1142
|
+
</tbody>
|
|
1143
|
+
</table>
|
|
1144
|
+
<pre class="cssCode">
|
|
1145
|
+
.ym-col1 { width: 50%; float:left; margin-left: 25%; } /* center column */
|
|
1146
|
+
.ym-col2 { width: 25%; float:left; margin-left: -75%; } /* left column */
|
|
1147
|
+
.ym-col3 { float:right; width: 25%; margin-left: -5px; margin-right: 0%; } /* right column */</pre>
|
|
1148
|
+
</div>
|
|
1149
|
+
<h5>3-1-2</h5>
|
|
1150
|
+
<div class="tab-content">
|
|
1151
|
+
<table class="bordertable">
|
|
1152
|
+
<thead>
|
|
1153
|
+
<tr>
|
|
1154
|
+
<th>Layout</th>
|
|
1155
|
+
<th>Unit-Mix</th>
|
|
1156
|
+
<th>Percentage</th>
|
|
1157
|
+
<th>Pixels</th>
|
|
1158
|
+
<th>EM</th>
|
|
1159
|
+
<th>Ruler</th>
|
|
1160
|
+
</tr>
|
|
1161
|
+
</thead>
|
|
1162
|
+
<tbody>
|
|
1163
|
+
<tr>
|
|
1164
|
+
<td>3-1-2</td>
|
|
1165
|
+
<td>No</td>
|
|
1166
|
+
<td>Yes</td>
|
|
1167
|
+
<td>Yes</td>
|
|
1168
|
+
<td>No</td>
|
|
1169
|
+
<td>No</td>
|
|
1170
|
+
</tr>
|
|
1171
|
+
</tbody>
|
|
1172
|
+
</table>
|
|
1173
|
+
<pre class="cssCode">
|
|
1174
|
+
.ym-col1 { width: 50%; float:right; margin-left: -75%; margin-right: 25%; } /* center column */
|
|
1175
|
+
.ym-col2 { width: 25%; float:right; margin-right: 0%; } /* right column */
|
|
1176
|
+
.ym-col3 { float: left; width: 25%; margin-left: 0; margin-right: -5px; } /* left column */</pre>
|
|
1177
|
+
</div>
|
|
1178
|
+
</div>
|
|
1179
|
+
<h4>2 Columns</h4>
|
|
1180
|
+
<p>Configurations for a set of 2 columns are derived from the default configuration (1-3-2) by removing <code>.ym-col2</code> as an optional sidebar from the default configuration.</p>
|
|
1181
|
+
<h5>Scenario A: flexible content and <em>fixed</em> sidebar</h5>
|
|
1182
|
+
<p>When such a column configuration is linearized, the sidebar content drops <em>below</em> the main content.</p>
|
|
1183
|
+
<p class="box info"><strong>Note:</strong> This CSS technique requires that <code>.ym-col1</code> isn't completely empty. Internet Explorer needs at least dummy content (e.g.: <code>&nbsp;</code>), otherwise it doesn't render the element and the alignment of the sidebar within the parents padding area fails.</p>
|
|
1184
|
+
<div class="jquery_tabs">
|
|
1185
|
+
<h5>Sidebar left aligned</h5>
|
|
1186
|
+
<div class="tab-content">
|
|
1187
|
+
<pre class="cssCode">
|
|
1188
|
+
/*
|
|
1189
|
+
* |-------------------------------------------------------|
|
|
1190
|
+
* | sidebar | content |
|
|
1191
|
+
* | col 3 | fixed | col 1 | flexible |
|
|
1192
|
+
* | | |
|
|
1193
|
+
* |-------------------------------------------------------|
|
|
1194
|
+
*/
|
|
1195
|
+
|
|
1196
|
+
.ym-column {
|
|
1197
|
+
display: block;
|
|
1198
|
+
overflow: hidden;
|
|
1199
|
+
padding-left: 250px; /* column width */
|
|
1200
|
+
width: auto;
|
|
1201
|
+
}
|
|
1202
|
+
|
|
1203
|
+
.ym-col1 { /* content */
|
|
1204
|
+
position: relative;
|
|
1205
|
+
float: left;
|
|
1206
|
+
width: 100%;
|
|
1207
|
+
}
|
|
1208
|
+
|
|
1209
|
+
.ym-col3 { /* sidebar */
|
|
1210
|
+
position: relative;
|
|
1211
|
+
float: left;
|
|
1212
|
+
width: 250px; /* column width */
|
|
1213
|
+
right: 250px; /* column width */
|
|
1214
|
+
_right: 0px; /* fix for ie6 */
|
|
1215
|
+
margin: 0 0 0 -100%;
|
|
1216
|
+
}</pre>
|
|
1217
|
+
</div>
|
|
1218
|
+
<h5>Sidebar right aligned</h5>
|
|
1219
|
+
<div class="tab-content">
|
|
1220
|
+
<pre class="cssCode">
|
|
1221
|
+
/*
|
|
1222
|
+
* |-------------------------------------------------------|
|
|
1223
|
+
* | content | sidebar |
|
|
1224
|
+
* | col 1 | flexible | col 3 | fixed |
|
|
1225
|
+
* | | |
|
|
1226
|
+
* |-------------------------------------------------------|
|
|
1227
|
+
*/
|
|
1228
|
+
|
|
1229
|
+
.ym-column {
|
|
1230
|
+
display: block;
|
|
1231
|
+
overflow: hidden;
|
|
1232
|
+
padding-right: 250px; /* column width */
|
|
1233
|
+
width: auto;
|
|
1234
|
+
}
|
|
1235
|
+
|
|
1236
|
+
.ym-col1 { /* content */
|
|
1237
|
+
position: relative;
|
|
1238
|
+
float: left;
|
|
1239
|
+
width: 100%;
|
|
1240
|
+
}
|
|
1241
|
+
|
|
1242
|
+
.ym-col3 { /* sidebar */
|
|
1243
|
+
position: relative;
|
|
1244
|
+
float: left;
|
|
1245
|
+
width: 250px; /* column width */
|
|
1246
|
+
margin: 0 -250px 0 0;
|
|
1247
|
+
}</pre>
|
|
1248
|
+
</div>
|
|
1249
|
+
</div>
|
|
1250
|
+
|
|
1251
|
+
<h5>Scenario B: content and sidebar utilizing the same unit</h5>
|
|
1252
|
+
<p>The columns are much easier to set up, when all both columns are utilizing the same unit (%|px|em). Here's a sample for a 75% content column and a 25% wide sidebar. </p>
|
|
1253
|
+
<p>When such a column configuration is linearized, the sidebar content drops <em>below</em> the main content.</p>
|
|
1254
|
+
<div class="jquery_tabs">
|
|
1255
|
+
<h5>Sidebar left aligned</h5>
|
|
1256
|
+
<div class="tab-content">
|
|
1257
|
+
<pre class="cssCode">
|
|
1258
|
+
/*
|
|
1259
|
+
* |-------------------------------------------------------|
|
|
1260
|
+
* | sidebar | content |
|
|
1261
|
+
* | col 3 | flexible| col 1 | flexible |
|
|
1262
|
+
* | | |
|
|
1263
|
+
* |-------------------------------------------------------|
|
|
1264
|
+
*/
|
|
1265
|
+
|
|
1266
|
+
.ym-col1 { float: right; width: 75%; } /* content */
|
|
1267
|
+
.ym-col3 { margin: 0 75% 0 0; } /* sidebar */</pre>
|
|
1268
|
+
</div>
|
|
1269
|
+
<h5>Sidebar right aligned</h5>
|
|
1270
|
+
<div class="tab-content">
|
|
1271
|
+
<pre class="cssCode">
|
|
1272
|
+
/*
|
|
1273
|
+
* |-------------------------------------------------------|
|
|
1274
|
+
* | content | sidebar |
|
|
1275
|
+
* | col 1 | flexible | col 3 | flexible|
|
|
1276
|
+
* | | |
|
|
1277
|
+
* |-------------------------------------------------------|
|
|
1278
|
+
*/
|
|
1279
|
+
|
|
1280
|
+
.ym-col1 { float: left; width: 75%; } /* content */
|
|
1281
|
+
.ym-col3 { margin: 0 0 0 75%; } /* sidebar */</pre>
|
|
1282
|
+
</div>
|
|
1283
|
+
</div>
|
|
1284
|
+
<h5>Scenario C: Vertical navigation and flexible content </h5>
|
|
1285
|
+
<p>When such a column configuration is linearized, the main content drops <em>below</em> the navigation.</p>
|
|
1286
|
+
<div class="jquery_tabs">
|
|
1287
|
+
<h5>Navigation left aligned</h5>
|
|
1288
|
+
<div class="tab-content">
|
|
1289
|
+
<pre class="cssCode">
|
|
1290
|
+
/*
|
|
1291
|
+
* |-------------------------------------------------------|
|
|
1292
|
+
* | navigation | content |
|
|
1293
|
+
* | col 1 | fixed | col 3 | flexible |
|
|
1294
|
+
* | | |
|
|
1295
|
+
* |-------------------------------------------------------|
|
|
1296
|
+
*/
|
|
1297
|
+
|
|
1298
|
+
.ym-col1 { float: left; width: 250px; } /* sidebar */
|
|
1299
|
+
.ym-col3 { margin: 0 0 0 250px; } /* content */</pre>
|
|
1300
|
+
</div>
|
|
1301
|
+
<h5>Navigation right aligned</h5>
|
|
1302
|
+
<div class="tab-content">
|
|
1303
|
+
<pre class="cssCode">
|
|
1304
|
+
/*
|
|
1305
|
+
* |-------------------------------------------------------|
|
|
1306
|
+
* | content | navigation |
|
|
1307
|
+
* | col 3 | flexible | col 1 | fixed |
|
|
1308
|
+
* | | |
|
|
1309
|
+
* |-------------------------------------------------------|
|
|
1310
|
+
*/
|
|
1311
|
+
|
|
1312
|
+
.ym-col1 { float: right; width: 250px; } /* sidebar */
|
|
1313
|
+
.ym-col3 { margin: 0 250px 0 0; } /* content */</pre>
|
|
1314
|
+
</div>
|
|
1315
|
+
</div>
|
|
1316
|
+
<h4>Equal Height Column Rulers</h4>
|
|
1317
|
+
|
|
1318
|
+
<div class="dummyscreen columnset-4">
|
|
1319
|
+
<div class="ym-column">
|
|
1320
|
+
<div class="ym-col1">
|
|
1321
|
+
<div class="ym-cbox"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p></div>
|
|
1322
|
+
</div>
|
|
1323
|
+
<div class="ym-col2">
|
|
1324
|
+
<div class="ym-cbox">
|
|
1325
|
+
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.</p></div></div>
|
|
1326
|
+
<div class="ym-col3">
|
|
1327
|
+
<div class="ym-cbox ym-clearfix"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p></div>
|
|
1328
|
+
<div class="ym-ie-clearing"> </div>
|
|
1329
|
+
</div>
|
|
1330
|
+
</div>
|
|
1331
|
+
</div>
|
|
1332
|
+
|
|
1333
|
+
<p>In display orders (1-3-2 and 2-3-1) the column module can simulate <em>equal height</em> column rulers. To use this feature, add class "<code>ym-clearfix</code>" to content box (<code>.ym-cbox</code>) in element <code>.ym-col3</code> and use the border-property of <code>.ym-col3</code> to create the rulers.</p>
|
|
1334
|
+
<p class="box info"><strong>Support for old Internet Explorers (6 & 7):</strong> Insert an element with the CSS class "<code>ym-ie-clearing</code>" as last child of column <code>.ym-col3</code> to enable vertical stretching of <code>.ym-col3</code> in these old browsers.</p>
|
|
1335
|
+
|
|
1336
|
+
<div class="jquery_tabs">
|
|
1337
|
+
<h5>Default Markup</h5>
|
|
1338
|
+
<div class="tab-content">
|
|
1339
|
+
<pre class="htmlCode">
|
|
1340
|
+
<div class="ym-column">
|
|
1341
|
+
<div class="ym-col1">
|
|
1342
|
+
<div class="ym-cbox">
|
|
1343
|
+
...
|
|
1344
|
+
</div>
|
|
1345
|
+
</div>
|
|
1346
|
+
<div class="ym-col2">
|
|
1347
|
+
<div class="ym-cbox">
|
|
1348
|
+
...
|
|
1349
|
+
</div>
|
|
1350
|
+
</div>
|
|
1351
|
+
<div class="ym-col3">
|
|
1352
|
+
<div class="ym-cbox <strong>ym-clearfix</strong>">
|
|
1353
|
+
...
|
|
1354
|
+
</div>
|
|
1355
|
+
<!-- .ym-ie-clearing only needed for IE6 & 7 support -->
|
|
1356
|
+
<div class="ym-ie-clearing">&nbsp;</div>
|
|
1357
|
+
</div>
|
|
1358
|
+
</div></pre>
|
|
1359
|
+
</div>
|
|
1360
|
+
<h5>CSS Configuration</h5>
|
|
1361
|
+
<div class="tab-content">
|
|
1362
|
+
<pre class="cssCode">
|
|
1363
|
+
.ym-col1 { width: 25%; } /* left column */
|
|
1364
|
+
.ym-col2 { width: 25%; } /* right column */
|
|
1365
|
+
.ym-col3 { /* center column */
|
|
1366
|
+
margin: 0 25%;
|
|
1367
|
+
border-left: 1px #ddd solid;
|
|
1368
|
+
border-right: 1px #ddd solid;
|
|
1369
|
+
}</pre>
|
|
1370
|
+
</div>
|
|
1371
|
+
</div>
|
|
1372
|
+
</div>
|
|
1373
|
+
</div>
|
|
1374
|
+
</div>
|
|
1375
|
+
|
|
1376
|
+
<div class="ym-grid linearize-level-1">
|
|
1377
|
+
<div class="ym-g25 ym-gl">
|
|
1378
|
+
<div class="ym-gbox-left">
|
|
1379
|
+
<h3>Responsive Columns</h3>
|
|
1380
|
+
<p>Flexible layouts work best when their responsive behavior is based on the boundary conditions of the individual screen designs. That's why YAML doesn't provide a pre-baked plan for linearization of column elements.</p>
|
|
1381
|
+
<p>As a frontend developer, you are completely free to define, how many levels (or steps) of linearization your design needs and when they should be applied.</p>
|
|
1382
|
+
</div>
|
|
1383
|
+
</div>
|
|
1384
|
+
<div class="ym-g75 ym-gr">
|
|
1385
|
+
<div class="ym-gbox-right">
|
|
1386
|
+
<h4>Progressive Linearization</h4>
|
|
1387
|
+
<p>Here's a code-snippet to a linearization level for the column module at a viewport size, lower then 760px. To create additional levels, copy this media block, set the viewport size, when the new level is triggerd (<em>max-width</em>) and count up the number in the class name.</p>
|
|
1388
|
+
<pre class="cssCode">
|
|
1389
|
+
@media screen and ( max-width: 760px ) {
|
|
1390
|
+
|
|
1391
|
+
/* linearization for column module */
|
|
1392
|
+
.linearize-level-1,
|
|
1393
|
+
.linearize-level-1 > [class*="ym-col"] {
|
|
1394
|
+
display: block;
|
|
1395
|
+
float: none;
|
|
1396
|
+
padding: 0;
|
|
1397
|
+
margin: 0;
|
|
1398
|
+
width: 100% !important;
|
|
1399
|
+
}
|
|
1400
|
+
|
|
1401
|
+
/* reset defined gutter values */
|
|
1402
|
+
.linearize-level-1 > [class*="ym-col"] > [class*="ym-cbox"] {
|
|
1403
|
+
overflow: hidden; /* optional for containing floats */
|
|
1404
|
+
padding: 0;
|
|
1405
|
+
margin: 0;
|
|
1406
|
+
}
|
|
1407
|
+
}</pre>
|
|
1408
|
+
<p>Add the class <code>.linearize-level-1</code> to any column module, you want to be linearized:</p>
|
|
1409
|
+
<pre class="htmlCode">
|
|
1410
|
+
<div class="ym-column <strong>linearize-level-1</strong>">
|
|
1411
|
+
...
|
|
1412
|
+
</div></pre>
|
|
1413
|
+
</div>
|
|
1414
|
+
</div>
|
|
1415
|
+
</div>
|
|
1416
|
+
|
|
1417
|
+
<h2 id="yaml-forms" tabindex="-1">Form Module <span class="label">yaml/core/base.css</span> <span class="label">yaml/forms/gray-theme.css</span></h2>
|
|
1418
|
+
<div class="ym-grid linearize-level-1">
|
|
1419
|
+
<div class="ym-g25 ym-gl">
|
|
1420
|
+
<div class="ym-gbox-left">
|
|
1421
|
+
<!-- Inhalt linker Block -->
|
|
1422
|
+
<p>YAML's Form-Module provides a full set of standard form elements, based on best practices for accessible forms, and supports theming.</p>
|
|
1423
|
+
<p>All functional styles for form elements are defined in YAML's core stylesheet <em>base.css</em>.</p>
|
|
1424
|
+
</div>
|
|
1425
|
+
</div>
|
|
1426
|
+
<div class="ym-g75 ym-gr">
|
|
1427
|
+
<div class="ym-gbox-right">
|
|
1428
|
+
<!-- Inhalt linker Block -->
|
|
1429
|
+
<h3>Default Markup</h3>
|
|
1430
|
+
<pre class="htmlCode">
|
|
1431
|
+
<form class="ym-form">
|
|
1432
|
+
<!-- form row wrapper -->
|
|
1433
|
+
<div class="ym-fbox">
|
|
1434
|
+
...
|
|
1435
|
+
</div>
|
|
1436
|
+
</form></pre>
|
|
1437
|
+
|
|
1438
|
+
<h4>Form Style Options</h4>
|
|
1439
|
+
<p>There is a linear default style (stacked, 70 % width of form elements) and three alternative form styles can be used by adding one of the following classes to the form.</p>
|
|
1440
|
+
<table>
|
|
1441
|
+
<thead>
|
|
1442
|
+
<tr>
|
|
1443
|
+
<th scope="col">CSS-classes</th>
|
|
1444
|
+
<th scope="col">Description</th>
|
|
1445
|
+
</tr>
|
|
1446
|
+
</thead>
|
|
1447
|
+
<tbody>
|
|
1448
|
+
<tr>
|
|
1449
|
+
<td class="nowrap">(default)</td>
|
|
1450
|
+
<td>The default form style provides a stacked view of labels and their related form elements. The width of all form elements is normalized to 60% width.</td>
|
|
1451
|
+
</tr>
|
|
1452
|
+
<tr>
|
|
1453
|
+
<td class="nowrap"><code>.ym-full</code></td>
|
|
1454
|
+
<td>This form style also provides a stacked view of labels and their related form elements, but the width of all form elements is normalized to 100% width. This form style is especially useful for small forms.</td>
|
|
1455
|
+
</tr>
|
|
1456
|
+
<tr>
|
|
1457
|
+
<td class="nowrap"><code>.ym-columnar</code></td>
|
|
1458
|
+
<td>This form style provides a columnar arrangement of form elemnts. By default , labels are floated and left aligned.</td>
|
|
1459
|
+
</tr>
|
|
1460
|
+
</tbody>
|
|
1461
|
+
</table>
|
|
1462
|
+
|
|
1463
|
+
<h3>Standard Form Elements</h3>
|
|
1464
|
+
<p>The following tabs show some examples for standard form elements. Copy and paste to use them.</p>
|
|
1465
|
+
<div class="jquery_tabs">
|
|
1466
|
+
<h5>Row Types</h5>
|
|
1467
|
+
<div class="tab-content">
|
|
1468
|
+
|
|
1469
|
+
<form class="ym-form">
|
|
1470
|
+
<div class="ym-fbox">
|
|
1471
|
+
<p>This is a standard row.</p>
|
|
1472
|
+
</div>
|
|
1473
|
+
<div class="ym-fbox-footer">
|
|
1474
|
+
<p>This is the footer footer row.</p>
|
|
1475
|
+
</div>
|
|
1476
|
+
</form>
|
|
1477
|
+
|
|
1478
|
+
<pre class="htmlCode">
|
|
1479
|
+
<form class="<strong>ym-form</strong>">
|
|
1480
|
+
<div class="<strong>ym-fbox</strong>">
|
|
1481
|
+
<p>This is a standard row.</p>
|
|
1482
|
+
</div>
|
|
1483
|
+
<div class="<strong>ym-fbox-footer</strong>">
|
|
1484
|
+
<p>This is the footter row.</p>
|
|
1485
|
+
</div>
|
|
1486
|
+
</form>
|
|
1487
|
+
</pre>
|
|
1488
|
+
</div>
|
|
1489
|
+
|
|
1490
|
+
<h5>Input Field</h5>
|
|
1491
|
+
<div class="tab-content">
|
|
1492
|
+
|
|
1493
|
+
<form class="ym-form">
|
|
1494
|
+
<div class="ym-fbox ym-fbox-text">
|
|
1495
|
+
<label for="form1">your label</label>
|
|
1496
|
+
<input type="text" name="form1" id="form1" placeholder="enter a value"/>
|
|
1497
|
+
</div>
|
|
1498
|
+
</form>
|
|
1499
|
+
|
|
1500
|
+
<pre class="htmlCode">
|
|
1501
|
+
<div class="<strong>ym-fbox</strong>">
|
|
1502
|
+
<label for="your-id">your label</label>
|
|
1503
|
+
<input type="text" name="your-id" id="your-id" placeholder="enter a value" />
|
|
1504
|
+
</div>
|
|
1505
|
+
</pre>
|
|
1506
|
+
</div>
|
|
1507
|
+
<h5>Textarea</h5>
|
|
1508
|
+
<div class="tab-content">
|
|
1509
|
+
|
|
1510
|
+
<form class="ym-form">
|
|
1511
|
+
<div class="ym-fbox ym-fbox-text">
|
|
1512
|
+
<label for="form2">your label</label>
|
|
1513
|
+
<textarea name="form2" id="form2" rows="5"></textarea>
|
|
1514
|
+
</div>
|
|
1515
|
+
</form>
|
|
1516
|
+
|
|
1517
|
+
<pre class="htmlCode">
|
|
1518
|
+
<div class="<strong>ym-fbox</strong>">
|
|
1519
|
+
<label for="your-id">your label</label>
|
|
1520
|
+
<textarea name="your-id" id="your-id" rows="5"></textarea>
|
|
1521
|
+
</div>
|
|
1522
|
+
</pre>
|
|
1523
|
+
</div>
|
|
1524
|
+
<h5>Select</h5>
|
|
1525
|
+
<div class="tab-content">
|
|
1526
|
+
|
|
1527
|
+
<form class="ym-form">
|
|
1528
|
+
<div class="ym-fbox ym-fbox-select">
|
|
1529
|
+
<label for="form3">Available Options</label>
|
|
1530
|
+
<select name="form3" id="form3" size="1">
|
|
1531
|
+
<option value="0" selected="selected" disabled="disabled">Please choose</option>
|
|
1532
|
+
<optgroup label="First options to choose from">
|
|
1533
|
+
<option value="Empfehlung">Option 1</option>
|
|
1534
|
+
<option value="Suchmaschine">Option 2</option>
|
|
1535
|
+
</optgroup>
|
|
1536
|
+
<optgroup label="Yet more options to choose from">
|
|
1537
|
+
<option value="Weblog">Option 3</option>
|
|
1538
|
+
<option value="Werbung">Option 4</option>
|
|
1539
|
+
<option value="Zeitung / Magazin">Option 5</option>
|
|
1540
|
+
<option value="Sonstiges">Option 6</option>
|
|
1541
|
+
</optgroup>
|
|
1542
|
+
</select>
|
|
1543
|
+
</div>
|
|
1544
|
+
</form>
|
|
1545
|
+
|
|
1546
|
+
<pre class="htmlCode">
|
|
1547
|
+
<div class="<strong>ym-fbox</strong>">
|
|
1548
|
+
<label for="your-id">Available Options</label>
|
|
1549
|
+
<select name="your-id" id="your-id" size="1">
|
|
1550
|
+
<option value="0" selected="selected" disabled="disabled">Please choose</option>
|
|
1551
|
+
<optgroup label="First options to choose from">
|
|
1552
|
+
<option value="value #1">Option 1</option>
|
|
1553
|
+
<option value="value #2">Option 2</option>
|
|
1554
|
+
</optgroup>
|
|
1555
|
+
<optgroup label="Yet more options to choose from">
|
|
1556
|
+
<option value="value #3">Option 3</option>
|
|
1557
|
+
<option value="value #4">Option 4</option>
|
|
1558
|
+
<option value="value #5">Option 5</option>
|
|
1559
|
+
</optgroup>
|
|
1560
|
+
</select>
|
|
1561
|
+
</div>
|
|
1562
|
+
</pre>
|
|
1563
|
+
</div>
|
|
1564
|
+
<h5>Checkbox</h5>
|
|
1565
|
+
<div class="tab-content">
|
|
1566
|
+
|
|
1567
|
+
<form class="ym-form">
|
|
1568
|
+
<div class="ym-fbox ym-fbox-check">
|
|
1569
|
+
<span class="ym-label">A single checkbox</span>
|
|
1570
|
+
<input type="checkbox" name="your-id1" id="your-id1" />
|
|
1571
|
+
<label for="your-id1">Your checkbox label</label>
|
|
1572
|
+
</div>
|
|
1573
|
+
|
|
1574
|
+
<div class="ym-fbox">
|
|
1575
|
+
<span class="ym-label">A set of checkboxes</span>
|
|
1576
|
+
<div class="ym-fbox-wrap">
|
|
1577
|
+
<div class="ym-fbox-check">
|
|
1578
|
+
<input type="checkbox" name="your-id2" id="your-id2" />
|
|
1579
|
+
<label for="your-id2">Your checkbox label</label>
|
|
1580
|
+
</div>
|
|
1581
|
+
<div class="ym-fbox-check">
|
|
1582
|
+
<input type="checkbox" name="your-id3" id="your-id3" />
|
|
1583
|
+
<label for="your-id3">Your checkbox label</label>
|
|
1584
|
+
</div>
|
|
1585
|
+
</div>
|
|
1586
|
+
</div>
|
|
1587
|
+
</form>
|
|
1588
|
+
|
|
1589
|
+
<pre class="htmlCode">
|
|
1590
|
+
<div class="<strong>ym-fbox</strong>">
|
|
1591
|
+
<!-- a single checkbox -->
|
|
1592
|
+
<input type="checkbox" name="your-id" id="your-id1" />
|
|
1593
|
+
<label for="your-id1">Your checkbox label</label>
|
|
1594
|
+
</div>
|
|
1595
|
+
<div class="<strong>ym-fbox</strong>">
|
|
1596
|
+
<!-- A set of checkboxes -->
|
|
1597
|
+
<div class="ym-fbox-wrap">
|
|
1598
|
+
<div>
|
|
1599
|
+
<input type="checkbox" name="your-id" id="your-id2" />
|
|
1600
|
+
<label for="your-id2">Your checkbox label</label>
|
|
1601
|
+
</div>
|
|
1602
|
+
<div>
|
|
1603
|
+
<input type="checkbox" name="your-id" id="your-id3" />
|
|
1604
|
+
<label for="your-id3">Your checkbox label</label>
|
|
1605
|
+
</div>
|
|
1606
|
+
</div>
|
|
1607
|
+
</div>
|
|
1608
|
+
</pre>
|
|
1609
|
+
<p>If you want to combine several checkboxes to a vertical aligned block, you should wrap each row with a block level element.
|
|
1610
|
+
YAML provides CSS class <code>.ym-fbox-wrap</code> for this use case as a universal wrapper that works with all form styles (full and columnar style).
|
|
1611
|
+
|
|
1612
|
+
</div>
|
|
1613
|
+
|
|
1614
|
+
<h5>Radio-Buttons</h5>
|
|
1615
|
+
<div class="tab-content">
|
|
1616
|
+
|
|
1617
|
+
<form class="ym-form">
|
|
1618
|
+
<div class="ym-fbox">
|
|
1619
|
+
<span class="ym-label">Custom Label</span>
|
|
1620
|
+
<div class="ym-fbox-wrap">
|
|
1621
|
+
<div class="ym-fbox-check">
|
|
1622
|
+
<input type="radio" name="vote" value="Option 1" id="vote4" />
|
|
1623
|
+
<label for="vote4">Option 1</label>
|
|
1624
|
+
</div>
|
|
1625
|
+
<div class="ym-fbox-check">
|
|
1626
|
+
<input type="radio" name="vote" id="vote5" />
|
|
1627
|
+
<label for="vote5">Option 2</label>
|
|
1628
|
+
</div>
|
|
1629
|
+
<div class="ym-fbox-check">
|
|
1630
|
+
<input type="radio" name="vote" id="vote6" />
|
|
1631
|
+
<label for="vote6">Option 3</label>
|
|
1632
|
+
</div>
|
|
1633
|
+
</div>
|
|
1634
|
+
</div>
|
|
1635
|
+
</form>
|
|
1636
|
+
|
|
1637
|
+
<pre class="htmlCode">
|
|
1638
|
+
<div class="<strong>ym-fbox</strong>">
|
|
1639
|
+
<span class="ym-label">Custom Label<span>
|
|
1640
|
+
<div class="ym-fbox-wrap">
|
|
1641
|
+
<div>
|
|
1642
|
+
<input type="radio" name="vote" id="your-id1" />
|
|
1643
|
+
<label for="your-id1">Your radio-button label</label>
|
|
1644
|
+
</div>
|
|
1645
|
+
<div>
|
|
1646
|
+
<input type="radio" name="vote" id="your-id2" />
|
|
1647
|
+
<label for="your-id2">Your radio-button label</label>
|
|
1648
|
+
</div>
|
|
1649
|
+
<div>
|
|
1650
|
+
<input type="radio" name="vote" id="your-id3" />
|
|
1651
|
+
<label for="your-id3">Your radio-button label</label>
|
|
1652
|
+
</div>
|
|
1653
|
+
</div>
|
|
1654
|
+
</div></pre>
|
|
1655
|
+
</div>
|
|
1656
|
+
<h5>Buttons</h5>
|
|
1657
|
+
<div class="tab-content">
|
|
1658
|
+
|
|
1659
|
+
<form class="ym-form">
|
|
1660
|
+
<div class="ym-fbox-footer ym-fbox-button">
|
|
1661
|
+
<input type="submit" value="Submit" class="ym-primary" id="exp-submit"/>
|
|
1662
|
+
<input type="reset" value="Reset" class="ym-warning" id="reset"/>
|
|
1663
|
+
<input type="button" value="Button" id="button1"/>
|
|
1664
|
+
<button type="submit" class="save ym-save ym-success" id="custom-submit">Custom Button</button>
|
|
1665
|
+
</div>
|
|
1666
|
+
</form>
|
|
1667
|
+
|
|
1668
|
+
<pre class="htmlCode">
|
|
1669
|
+
<div class="<strong>ym-fbox-footer</strong>">
|
|
1670
|
+
<input type="submit" class="ym-button ym-primary" value="submit" id="submit"/>
|
|
1671
|
+
<input type="reset" class="ym-button ym-warning" value="reset" id="reset"/>
|
|
1672
|
+
<input type="button" class="ym-button" value="button" id="button1"/>
|
|
1673
|
+
|
|
1674
|
+
<!-- custom buttons -->
|
|
1675
|
+
<button type="submit" class="save ym-save ym-success" id="submit">Custom Button</button>
|
|
1676
|
+
</div></pre>
|
|
1677
|
+
<p>Optional class <code>.ym-button</code> is needed to enable support for styled button in Internet Explorer 6.</p>
|
|
1678
|
+
|
|
1679
|
+
</div>
|
|
1680
|
+
</div>
|
|
1681
|
+
|
|
1682
|
+
<h4>IE6 Support</h4>
|
|
1683
|
+
<p>The Internet Explorer 6 is the oldest browser, that is supported by YAML 4. This browser doesn't support <a href="http://www.w3.org/TR/CSS2/selector.html#attribute-selectors">attribute selectors</a>
|
|
1684
|
+
that are used to address special input element types, e.g. <code>input[type="checkbox"]</code>. In order to solve this
|
|
1685
|
+
problem, YAML provides a set of helper classes that can be used to style form elements in IE6.</p>
|
|
1686
|
+
<table class="fixed">
|
|
1687
|
+
<thead>
|
|
1688
|
+
<tr>
|
|
1689
|
+
<th class="ym-g25" scope="col">helper class</th>
|
|
1690
|
+
<th class="ym-g75" scope="col">Description</th>
|
|
1691
|
+
</tr>
|
|
1692
|
+
</thead>
|
|
1693
|
+
<tbody>
|
|
1694
|
+
<tr>
|
|
1695
|
+
<td class="nowrap"><code>.ym-fbox-text</code></td>
|
|
1696
|
+
<td>
|
|
1697
|
+
<p>Use this class on a parent element of an <input> element that represents a text input (<code>input[type="text"]</code>) or <textarea>.</p>
|
|
1698
|
+
<pre class="htmlCode">
|
|
1699
|
+
<div class="ym-fbox <strong>ym-fbox-text</strong>">
|
|
1700
|
+
<label for="your-id">your label</label>
|
|
1701
|
+
<input type="text" name="your-id" id="your-id" placeholder="enter a value" />
|
|
1702
|
+
</div>
|
|
1703
|
+
</pre>
|
|
1704
|
+
</td>
|
|
1705
|
+
</tr>
|
|
1706
|
+
<tr>
|
|
1707
|
+
<td class="nowrap"><code>.ym-fbox-select</code></td>
|
|
1708
|
+
<td>
|
|
1709
|
+
<p>Use this class on a parent element of an <select>.</p>
|
|
1710
|
+
<pre class="htmlCode">
|
|
1711
|
+
<div class="ym-fbox <strong>ym-fbox-select</strong>">
|
|
1712
|
+
<label for="your-id">Available Options</label>
|
|
1713
|
+
<select name="your-id" id="your-id" size="1">
|
|
1714
|
+
...
|
|
1715
|
+
</select>
|
|
1716
|
+
</div>
|
|
1717
|
+
</pre>
|
|
1718
|
+
</td>
|
|
1719
|
+
</tr>
|
|
1720
|
+
<tr>
|
|
1721
|
+
<td class="nowrap"><code>.ym-fbox-check</code></td>
|
|
1722
|
+
<td>
|
|
1723
|
+
<p>Use this class on a parent element of an <input> element that represents a checkbox (<code>input[type="checkbox"]</code>) or radio button (<code>input[type="radio"]</code>)</p>
|
|
1724
|
+
<pre class="htmlCode">
|
|
1725
|
+
<div class="ym-fbox <strong>ym-fbox-check</strong>">
|
|
1726
|
+
<input type="checkbox" name="your-id" id="your-id1" />
|
|
1727
|
+
<label for="your-id1">Your checkbox label</label>
|
|
1728
|
+
</div>
|
|
1729
|
+
</pre>
|
|
1730
|
+
</td>
|
|
1731
|
+
</tr>
|
|
1732
|
+
<tr>
|
|
1733
|
+
<td class="nowrap"><code>.ym-fbox-button</code></td>
|
|
1734
|
+
<td>
|
|
1735
|
+
<p>Use this class on a parent element of an <input> element that represents a custom button (<code>input[type="button"]</code>) or submit button (<code>input[type="submit"]</code>)</p>
|
|
1736
|
+
<pre class="htmlCode">
|
|
1737
|
+
<div class="ym-fbox-footer <strong>ym-fbox-button</strong>">
|
|
1738
|
+
<input type="submit" class="ym-button ym-primary" value="submit" id="submit" name="submit" />
|
|
1739
|
+
<input type="button" class="ym-button" value="button" id="button1" name="button1" />
|
|
1740
|
+
</div>
|
|
1741
|
+
</pre>
|
|
1742
|
+
</td>
|
|
1743
|
+
</tr>
|
|
1744
|
+
</tbody>
|
|
1745
|
+
</table>
|
|
1746
|
+
|
|
1747
|
+
<h4>Form Configuration</h4>
|
|
1748
|
+
<div class="jquery_tabs">
|
|
1749
|
+
|
|
1750
|
+
<h5>Required Fields</h5>
|
|
1751
|
+
<div class="tab-content">
|
|
1752
|
+
|
|
1753
|
+
<p>Required form fields can be visually emphasized by adding <code>.ym-required</code> element to the label. In any case, you should add the ARIA attribute <em><code>aria-required="true"</code></em> or <code><em>required="required"</em></code> when using HTML5.</p>
|
|
1754
|
+
<pre class="htmlCode"><div class="ym-fbox">
|
|
1755
|
+
<label for="your-id">your label<strong><sup class="ym-required">*</sup></strong></label>
|
|
1756
|
+
<input type="text" name="your-id" id="your-id" size="20" required="required"/>
|
|
1757
|
+
</div> </pre>
|
|
1758
|
+
</div>
|
|
1759
|
+
|
|
1760
|
+
<h5>Error Messages</h5>
|
|
1761
|
+
<div class="tab-content">
|
|
1762
|
+
<p>Use class <code>.ym-error</code> to highlight form fields with invalid form elements. By adding this class to the parent container, you have rich styling options. Optionally you can use <code>.ym-message </code>output messages that will be correctly aligned in all form styles.</p>
|
|
1763
|
+
<pre class="htmlCode"><div class="ym-fbox <strong>ym-error</strong>">
|
|
1764
|
+
<p class="<strong>ym-message</strong>">Error: invalid value!</p>
|
|
1765
|
+
...
|
|
1766
|
+
</div></pre>
|
|
1767
|
+
</div>
|
|
1768
|
+
<h5>Headings within Forms</h5>
|
|
1769
|
+
<div class="tab-content">
|
|
1770
|
+
<p>Complex forms should be well structured. You can use <code><fieldset></code> elements for this reason but also regulare headings. To make typograhpy settings for your headings independent from their styling within forms, YAML provides class <code>.ym-fbox-heading</code> to force any heading level to fit in your form theme.</p>
|
|
1771
|
+
<pre class="htmlCode"><h6 class="<strong>ym-fbox-heading</strong>">Sample Heading</h6><br><div class="ym-fbox">
|
|
1772
|
+
...
|
|
1773
|
+
</div></pre>
|
|
1774
|
+
</div>
|
|
1775
|
+
|
|
1776
|
+
<h5>Extended Labels</h5>
|
|
1777
|
+
<div class="tab-content">
|
|
1778
|
+
<p>In radio button sets, the label elements are needed to label individual opions. For a more consitent appearance of forms, you can define an additional label-like name, using <code>.ym-label</code> before the button set, that will be correctly aligned in all form styles.</p>
|
|
1779
|
+
<pre class="htmlCode">
|
|
1780
|
+
<div class="ym-fbox">
|
|
1781
|
+
<span class="<strong>ym-label</strong>">Custom Label</span>
|
|
1782
|
+
<div class="ym-fbox-wrap">
|
|
1783
|
+
...
|
|
1784
|
+
</div>
|
|
1785
|
+
</div></pre>
|
|
1786
|
+
</div>
|
|
1787
|
+
</div>
|
|
1788
|
+
|
|
1789
|
+
<h4>Extended Form Options</h4>
|
|
1790
|
+
<div class="jquery_tabs">
|
|
1791
|
+
|
|
1792
|
+
<div class="tab-content">
|
|
1793
|
+
<h5>Grids Form Elements</h5>
|
|
1794
|
+
<p>To create multicolumnar forms, use the grid module to put multiple form elements in a row.</p>
|
|
1795
|
+
|
|
1796
|
+
<form class="ym-form">
|
|
1797
|
+
<div class="ym-fbox">
|
|
1798
|
+
<div class="ym-fbox-wrap ym-grid">
|
|
1799
|
+
<div class="ym-g33 ym-gl">
|
|
1800
|
+
<div class="ym-gbox-left ym-fbox-text">
|
|
1801
|
+
<label for="exp-plz">Postal Code</label>
|
|
1802
|
+
<input type="text" name="plz" id="exp-plz" size="20" />
|
|
1803
|
+
</div>
|
|
1804
|
+
</div>
|
|
1805
|
+
<div class="ym-g33 ym-gl">
|
|
1806
|
+
<div class="ym-gbox ym-fbox-text">
|
|
1807
|
+
<label for="exp-city">City</label>
|
|
1808
|
+
<input type="text" name="city" id="exp-city" size="20" />
|
|
1809
|
+
</div>
|
|
1810
|
+
</div>
|
|
1811
|
+
<div class="ym-g33 ym-gr">
|
|
1812
|
+
<div class="ym-gbox-right ym-fbox-text">
|
|
1813
|
+
<label for="exp-country">Country</label>
|
|
1814
|
+
<select name="country" id="exp-country"><option value="">entry</option></select>
|
|
1815
|
+
</div>
|
|
1816
|
+
</div>
|
|
1817
|
+
</div>
|
|
1818
|
+
</div>
|
|
1819
|
+
</form>
|
|
1820
|
+
|
|
1821
|
+
<pre class="htmlCode">
|
|
1822
|
+
<div class="ym-fbox">
|
|
1823
|
+
<span class="ym-label">Wrapped From Elements and Labels</span>
|
|
1824
|
+
<div class="<strong>ym-fbox-wrap ym-grid</strong>">
|
|
1825
|
+
<div class="<strong>ym-g33 ym-gl</strong>">
|
|
1826
|
+
<div class="<strong>ym-gbox-left</strong>">
|
|
1827
|
+
<label for="plz" >Postal Code</label>
|
|
1828
|
+
<input type="text" name="plz" id="plz" />
|
|
1829
|
+
</div>
|
|
1830
|
+
</div>
|
|
1831
|
+
<div class="<strong>ym-g33 ym-gl</strong>">
|
|
1832
|
+
<div class="<strong>ym-gbox-left</strong>">
|
|
1833
|
+
<label for="city">City</label>
|
|
1834
|
+
<input type="text" name="city" id="city" />
|
|
1835
|
+
</div>
|
|
1836
|
+
</div>
|
|
1837
|
+
<div class="<strong>ym-g33 ym-gr</strong>">
|
|
1838
|
+
<div class="<strong>ym-gbox-right</strong>">
|
|
1839
|
+
<label for="country">Country</label>
|
|
1840
|
+
<select name="country" id="country"><option value="">entry</option></select>
|
|
1841
|
+
</div>
|
|
1842
|
+
</div>
|
|
1843
|
+
</div>
|
|
1844
|
+
</div></pre>
|
|
1845
|
+
|
|
1846
|
+
</div>
|
|
1847
|
+
|
|
1848
|
+
<div class="tab-content">
|
|
1849
|
+
<h5>Inline Form Elements</h5>
|
|
1850
|
+
<form class="ym-form">
|
|
1851
|
+
<div class="ym-fbox ym-fbox-text">
|
|
1852
|
+
<label for="edit-captcha-response">Captcha Example<sup class="ym-required" title="This field is mandatory.">*</sup></label>
|
|
1853
|
+
<span>1 + 5 = </span> <input class="ym-inline" type="text" id="edit-captcha-response" name="captcha_response" value="" size="4" maxlength="2" autocomplete="off">
|
|
1854
|
+
<p class="ym-message">Please solve this mathmatic equation and enter the result, e.g. Enter 4 when asked for 1+3.</p>
|
|
1855
|
+
</div>
|
|
1856
|
+
</form>
|
|
1857
|
+
|
|
1858
|
+
<pre class="htmlCode">
|
|
1859
|
+
<div class="ym-fbox">
|
|
1860
|
+
<label for="captcha">Captcha Example<sup class="ym-required" title="This field is mandatory.">*</sup></label>
|
|
1861
|
+
<span>1 + 5 = </span> <input class="ym-inline" type="text" id="captcha" name="captcha" value="" size="4" maxlength="2" autocomplete="off">
|
|
1862
|
+
<p class="ym-message">Please solve this mathmatic equation and enter the result, e.g. Enter 4 when asked for 1+3.</p>
|
|
1863
|
+
</div></pre>
|
|
1864
|
+
</div>
|
|
1865
|
+
</div>
|
|
1866
|
+
</div>
|
|
1867
|
+
</div>
|
|
1868
|
+
|
|
1869
|
+
<div class="ym-grid linearize-level-1">
|
|
1870
|
+
<div class="ym-g25 ym-gl">
|
|
1871
|
+
<div class="ym-gbox-left">
|
|
1872
|
+
<h3>Theme Support</h3>
|
|
1873
|
+
<div class="js-info box warning">JavaScript has to be enabled to demonstrate the available form layouts.</div>
|
|
1874
|
+
<form id="formswitch" class="ym-form ym-full">
|
|
1875
|
+
<h6 class="ym-fbox-heading">Live Preview: Choose Style</h6>
|
|
1876
|
+
<div class="ym-fbox ym-fbox-check">
|
|
1877
|
+
<div><input type="radio" name="dswitch" data-type="" id="slinear" checked="checked"/> <label for="slinear">Linear (default)</label></div>
|
|
1878
|
+
<div><input type="radio" name="dswitch" data-type="ym-full" id="sfull"/> <label for="sfull">Full Width</label></div>
|
|
1879
|
+
<div><input type="radio" name="dswitch" data-type="ym-columnar" id="sleft"/> <label for="sleft">Columnar</label></div>
|
|
1880
|
+
</div>
|
|
1881
|
+
<div class="ym-fbox ym-fbox-check">
|
|
1882
|
+
<input type="checkbox" name="dlinear" data-type="linearize-form" id="dlinear" checked="checked"/>
|
|
1883
|
+
<label for="dlinear">Enable Linearization (< 740px)</label></div>
|
|
1884
|
+
</form>
|
|
1885
|
+
<p>All other visual properties are separated from the framework core to make themeing of form elements as easy as possible.</p>
|
|
1886
|
+
<p>YAML provides a standard form theme called <em>gray-theme.css</em> in <em>yaml/forms/</em>.</p>
|
|
1887
|
+
|
|
1888
|
+
</div>
|
|
1889
|
+
</div>
|
|
1890
|
+
<div class="ym-g75 ym-gr">
|
|
1891
|
+
<div class="ym-gbox-right">
|
|
1892
|
+
<h4>Form Example</h4>
|
|
1893
|
+
<form method="post" id="demo-form1" class="ym-form linearize-form">
|
|
1894
|
+
<h6 class="ym-fbox-heading">Text Fields and Simple Select Boxes</h6>
|
|
1895
|
+
|
|
1896
|
+
<div class="ym-fbox ym-fbox-select">
|
|
1897
|
+
<label for="salutation">Salutation</label>
|
|
1898
|
+
<select name="salutation" id="salutation" size="1" aria-required="true">
|
|
1899
|
+
<option value="0" selected="selected" disabled="disabled">Please choose</option>
|
|
1900
|
+
<option value="Mr.">Mr.</option>
|
|
1901
|
+
<option value="Ms.">Ms.</option>
|
|
1902
|
+
<option value="Mrs.">Mrs.</option>
|
|
1903
|
+
</select>
|
|
1904
|
+
</div>
|
|
1905
|
+
<div class="ym-fbox ym-fbox-text">
|
|
1906
|
+
<label for="firstname">First name</label>
|
|
1907
|
+
<input type="text" name="firstname" id="firstname" size="20" />
|
|
1908
|
+
</div>
|
|
1909
|
+
<h6 class="ym-fbox-heading">Error Handling and Required Fields</h6>
|
|
1910
|
+
<div class="ym-fbox ym-fbox-text ym-error" role="alert" aria-live="assertive">
|
|
1911
|
+
<p class="ym-message">Field «Last name» not properly filled.</p>
|
|
1912
|
+
<label for="lastname">Last name <sup class="ym-required" title="This field is mandatory.">*</sup></label>
|
|
1913
|
+
<input type="text" name="lastname" id="lastname" size="20" aria-required="true"/>
|
|
1914
|
+
</div>
|
|
1915
|
+
|
|
1916
|
+
<h6 class="ym-fbox-heading">Grid Form Elements</h6>
|
|
1917
|
+
<div class="ym-fbox">
|
|
1918
|
+
<span class="ym-label">Inline Grid Elements</span>
|
|
1919
|
+
<div class="ym-fbox-wrap ym-grid">
|
|
1920
|
+
<div class="ym-g20 ym-gl">
|
|
1921
|
+
<div class="ym-gbox-left ym-fbox-text">
|
|
1922
|
+
<input value=".ym-g20" type="text" name="inline1" id="inline1" size="20" />
|
|
1923
|
+
</div>
|
|
1924
|
+
</div>
|
|
1925
|
+
<div class="ym-g80 ym-gr">
|
|
1926
|
+
<div class="ym-gbox-right ym-fbox-select">
|
|
1927
|
+
<select name="select1" id="select1"><option value="">.ym-g80</option></select>
|
|
1928
|
+
</div>
|
|
1929
|
+
</div>
|
|
1930
|
+
</div>
|
|
1931
|
+
<div class="ym-fbox-wrap ym-grid">
|
|
1932
|
+
<div class="ym-g25 ym-gl">
|
|
1933
|
+
<div class="ym-gbox-left ym-fbox-text">
|
|
1934
|
+
<input value=".ym-g25" type="text" name="inline2" id="inline2" size="20" />
|
|
1935
|
+
</div>
|
|
1936
|
+
</div>
|
|
1937
|
+
<div class="ym-g75 ym-gr">
|
|
1938
|
+
<div class="ym-gbox-right ym-fbox-select">
|
|
1939
|
+
<select name="select2" id="select2"><option value="">.ym-g75</option></select>
|
|
1940
|
+
</div>
|
|
1941
|
+
</div>
|
|
1942
|
+
</div>
|
|
1943
|
+
<div class="ym-fbox-wrap ym-grid">
|
|
1944
|
+
<div class="ym-g33 ym-gl">
|
|
1945
|
+
<div class="ym-gbox-left ym-fbox-text">
|
|
1946
|
+
<input value=".ym-g33" type="text" name="inline3" id="inline3" size="20" />
|
|
1947
|
+
</div>
|
|
1948
|
+
</div>
|
|
1949
|
+
<div class="ym-g66 ym-gr">
|
|
1950
|
+
<div class="ym-gbox-right ym-fbox-select">
|
|
1951
|
+
<select name="select3" id="select3"><option value="">.ym-g66</option></select>
|
|
1952
|
+
</div>
|
|
1953
|
+
</div>
|
|
1954
|
+
</div>
|
|
1955
|
+
<div class="ym-fbox-wrap ym-grid">
|
|
1956
|
+
<div class="ym-g38 ym-gl">
|
|
1957
|
+
<div class="ym-gbox-left ym-fbox-text">
|
|
1958
|
+
<input value=".ym-g38" type="text" name="inline4" id="inline4" size="20" />
|
|
1959
|
+
</div>
|
|
1960
|
+
</div>
|
|
1961
|
+
<div class="ym-g62 ym-gr">
|
|
1962
|
+
<div class="ym-gbox-right ym-fbox-select">
|
|
1963
|
+
<select name="select4" id="select4"><option value="">.ym-g62</option></select>
|
|
1964
|
+
</div>
|
|
1965
|
+
</div>
|
|
1966
|
+
</div>
|
|
1967
|
+
<div class="ym-fbox-wrap ym-grid">
|
|
1968
|
+
<div class="ym-g40 ym-gl">
|
|
1969
|
+
<div class="ym-gbox-left ym-fbox-text">
|
|
1970
|
+
<input value=".ym-g40" type="text" name="inline5" id="inline5" size="20" />
|
|
1971
|
+
</div>
|
|
1972
|
+
</div>
|
|
1973
|
+
<div class="ym-g60 ym-gr">
|
|
1974
|
+
<div class="ym-gbox-right ym-fbox-select">
|
|
1975
|
+
<select name="select5" id="select5"><option value="">.ym-g60</option></select>
|
|
1976
|
+
</div>
|
|
1977
|
+
</div>
|
|
1978
|
+
</div>
|
|
1979
|
+
<div class="ym-fbox-wrap ym-grid">
|
|
1980
|
+
<div class="ym-g50 ym-gl">
|
|
1981
|
+
<div class="ym-gbox-left ym-fbox-text">
|
|
1982
|
+
<input value=".ym-g50" type="text" name="inline6" id="inline6" size="20" />
|
|
1983
|
+
</div>
|
|
1984
|
+
</div>
|
|
1985
|
+
<div class="ym-g50 ym-gr">
|
|
1986
|
+
<div class="ym-gbox-right ym-fbox-select">
|
|
1987
|
+
<select name="select6" id="select6"><option value="">.ym-g50</option></select>
|
|
1988
|
+
</div>
|
|
1989
|
+
</div>
|
|
1990
|
+
</div>
|
|
1991
|
+
<div class="ym-fbox-wrap ym-grid">
|
|
1992
|
+
<div class="ym-g60 ym-gl">
|
|
1993
|
+
<div class="ym-gbox-left ym-fbox-text">
|
|
1994
|
+
<input value=".ym-g60" type="text" name="inline7" id="inline7" size="20" />
|
|
1995
|
+
</div>
|
|
1996
|
+
</div>
|
|
1997
|
+
<div class="ym-g40 ym-gr">
|
|
1998
|
+
<div class="ym-gbox-right ym-fbox-select">
|
|
1999
|
+
<select name="select7" id="select7"><option value="">.ym-g40</option></select>
|
|
2000
|
+
</div>
|
|
2001
|
+
</div>
|
|
2002
|
+
</div>
|
|
2003
|
+
<div class="ym-fbox-wrap ym-grid">
|
|
2004
|
+
<div class="ym-g62 ym-gl">
|
|
2005
|
+
<div class="ym-gbox-left ym-fbox-text">
|
|
2006
|
+
<input value=".ym-g62" type="text" name="inline8" id="inline8" size="20" />
|
|
2007
|
+
</div>
|
|
2008
|
+
</div>
|
|
2009
|
+
<div class="ym-g38 ym-gr">
|
|
2010
|
+
<div class="ym-gbox-right ym-fbox-select">
|
|
2011
|
+
<select name="select8" id="select8"><option value="">.ym-g38</option></select>
|
|
2012
|
+
</div>
|
|
2013
|
+
</div>
|
|
2014
|
+
</div>
|
|
2015
|
+
<div class="ym-fbox-wrap ym-grid">
|
|
2016
|
+
<div class="ym-g66 ym-gl">
|
|
2017
|
+
<div class="ym-gbox-left ym-fbox-text">
|
|
2018
|
+
<input value=".ym-g66" type="text" name="inline9" id="inline9" size="20" />
|
|
2019
|
+
</div>
|
|
2020
|
+
</div>
|
|
2021
|
+
<div class="ym-g33 ym-gr">
|
|
2022
|
+
<div class="ym-gbox-right ym-fbox-select">
|
|
2023
|
+
<select name="select9" id="select9"><option value="">.ym-g33</option></select>
|
|
2024
|
+
</div>
|
|
2025
|
+
</div>
|
|
2026
|
+
</div>
|
|
2027
|
+
<div class="ym-fbox-wrap ym-grid">
|
|
2028
|
+
<div class="ym-g75 ym-gl">
|
|
2029
|
+
<div class="ym-gbox-left ym-fbox-text">
|
|
2030
|
+
<input value=".ym-g75" type="text" name="inline10" id="inline10" size="20" />
|
|
2031
|
+
</div>
|
|
2032
|
+
</div>
|
|
2033
|
+
<div class="ym-g25 ym-gr">
|
|
2034
|
+
<div class="ym-gbox-right ym-fbox-select">
|
|
2035
|
+
<select name="select10" id="select10"><option value="">.ym-g25</option></select>
|
|
2036
|
+
</div>
|
|
2037
|
+
</div>
|
|
2038
|
+
</div>
|
|
2039
|
+
<div class="ym-fbox-wrap ym-grid">
|
|
2040
|
+
<div class="ym-g80 ym-gl">
|
|
2041
|
+
<div class="ym-gbox-left ym-fbox-text">
|
|
2042
|
+
<input value=".ym-g80" type="text" name="inline11" id="inline11" size="20" />
|
|
2043
|
+
</div>
|
|
2044
|
+
</div>
|
|
2045
|
+
<div class="ym-g20 ym-gr">
|
|
2046
|
+
<div class="ym-gbox-right ym-fbox-select">
|
|
2047
|
+
<select name="select11" id="select11"><option value="">.ym-g20</option></select>
|
|
2048
|
+
</div>
|
|
2049
|
+
</div>
|
|
2050
|
+
</div>
|
|
2051
|
+
</div>
|
|
2052
|
+
<div class="ym-fbox">
|
|
2053
|
+
<span class="ym-label">Wrapped Elements and Labels</span>
|
|
2054
|
+
<div class="ym-fbox-wrap ym-grid">
|
|
2055
|
+
<div class="ym-g33 ym-gl">
|
|
2056
|
+
<div class="ym-gbox-left ym-fbox-check">
|
|
2057
|
+
<input type="checkbox" name="check1" id="check1" />
|
|
2058
|
+
<label for="check1">Label</label>
|
|
2059
|
+
</div>
|
|
2060
|
+
</div>
|
|
2061
|
+
<div class="ym-g33 ym-gl">
|
|
2062
|
+
<div class="ym-gbox ym-fbox-check">
|
|
2063
|
+
<input type="checkbox" name="check2" id="check2" />
|
|
2064
|
+
<label for="check2">Label</label>
|
|
2065
|
+
</div>
|
|
2066
|
+
</div>
|
|
2067
|
+
<div class="ym-g33 ym-gr">
|
|
2068
|
+
<div class="ym-gbox-right ym-fbox-check">
|
|
2069
|
+
<input type="checkbox" name="check3" id="check3" />
|
|
2070
|
+
<label for="check3">Label</label>
|
|
2071
|
+
</div>
|
|
2072
|
+
</div>
|
|
2073
|
+
</div>
|
|
2074
|
+
</div>
|
|
2075
|
+
<div class="ym-fbox">
|
|
2076
|
+
<div class="ym-fbox-wrap ym-grid">
|
|
2077
|
+
<div class="ym-g33 ym-gl">
|
|
2078
|
+
<div class="ym-gbox-left ym-fbox-text">
|
|
2079
|
+
<label for="plz">Postal Code</label>
|
|
2080
|
+
<input type="text" name="plz" id="plz" size="20" />
|
|
2081
|
+
</div>
|
|
2082
|
+
</div>
|
|
2083
|
+
<div class="ym-g33 ym-gl">
|
|
2084
|
+
<div class="ym-gbox ym-fbox-text">
|
|
2085
|
+
<label for="city">City</label>
|
|
2086
|
+
<input type="text" name="city" id="city" size="20" />
|
|
2087
|
+
</div>
|
|
2088
|
+
</div>
|
|
2089
|
+
<div class="ym-g33 ym-gr">
|
|
2090
|
+
<div class="ym-gbox-right ym-fbox-text">
|
|
2091
|
+
<label for="country">Country</label>
|
|
2092
|
+
<select name="country" id="country"><option value="">entry</option></select>
|
|
2093
|
+
</div>
|
|
2094
|
+
</div>
|
|
2095
|
+
</div>
|
|
2096
|
+
</div>
|
|
2097
|
+
<div class="ym-fbox">
|
|
2098
|
+
<span class="ym-label">Combined Usage</span>
|
|
2099
|
+
<div class="ym-fbox-wrap ym-grid">
|
|
2100
|
+
<div class="ym-g33 ym-gl">
|
|
2101
|
+
<div class="ym-gbox-left ym-fbox-check">
|
|
2102
|
+
<input class="ym-ie-checkbox" type="checkbox" name="combi1" id="combi1" />
|
|
2103
|
+
<label for="combi1">ym-g33</label>
|
|
2104
|
+
</div>
|
|
2105
|
+
</div>
|
|
2106
|
+
<div class="ym-g33 ym-gl">
|
|
2107
|
+
<div class="ym-gbox ym-fbox-text">
|
|
2108
|
+
<input type="text" value="ym-g33" name="combi2" id="combi2" size="20" />
|
|
2109
|
+
</div>
|
|
2110
|
+
</div>
|
|
2111
|
+
<div class="ym-g33 ym-gr">
|
|
2112
|
+
<div class="ym-gbox-right ym-fbox-select">
|
|
2113
|
+
<select name="combi3" id="combi3"><option value="">ym-g33</option></select>
|
|
2114
|
+
</div>
|
|
2115
|
+
</div>
|
|
2116
|
+
</div>
|
|
2117
|
+
</div>
|
|
2118
|
+
<div class="ym-fbox">
|
|
2119
|
+
<span class="ym-label">Inline Form Elements</span>
|
|
2120
|
+
<div class="ym-fbox-wrap">
|
|
2121
|
+
<p>This is an inline element <input type="text" class="ym-inline" value="" size="5" /> within a paragraph.</p>
|
|
2122
|
+
</div>
|
|
2123
|
+
</div>
|
|
2124
|
+
<h6 class="ym-fbox-heading">Text Areas, Checkboxes, Radio Buttons</h6>
|
|
2125
|
+
<div class="ym-fbox ym-fbox-text">
|
|
2126
|
+
<label for="message">Message</label>
|
|
2127
|
+
<textarea name="message" id="message" cols="30" rows="7"></textarea>
|
|
2128
|
+
</div>
|
|
2129
|
+
<div class="ym-fbox ym-fbox-check">
|
|
2130
|
+
<input type="checkbox" name="newsletter" id="newsletter" />
|
|
2131
|
+
<label for="newsletter">Sign me up for your newsletter</label>
|
|
2132
|
+
</div>
|
|
2133
|
+
<div class="ym-fbox">
|
|
2134
|
+
<span class="ym-label">Custom Label</span>
|
|
2135
|
+
<div class="ym-fbox-wrap">
|
|
2136
|
+
<div class="ym-fbox-check">
|
|
2137
|
+
<input type="radio" name="vote" value="Option 1" id="vote1" />
|
|
2138
|
+
<label for="vote1">Option 1</label>
|
|
2139
|
+
</div>
|
|
2140
|
+
<div class="ym-fbox-check">
|
|
2141
|
+
<input type="radio" name="vote" id="vote2" />
|
|
2142
|
+
<label for="vote2">Option 2</label>
|
|
2143
|
+
</div>
|
|
2144
|
+
<div class="ym-fbox-check">
|
|
2145
|
+
<input type="radio" name="vote" id="vote3" />
|
|
2146
|
+
<label for="vote3">Option 3</label>
|
|
2147
|
+
</div>
|
|
2148
|
+
</div>
|
|
2149
|
+
</div>
|
|
2150
|
+
<div class="ym-fbox-footer ym-fbox-button">
|
|
2151
|
+
<button type="submit" class="save ym-save ym-success" id="custom">Custom Button</button>
|
|
2152
|
+
<input type="submit" value="Submit" class="save ym-primary" id="submit"/>
|
|
2153
|
+
<input type="reset" value="Reset" class="delete" id="exp-reset"/>
|
|
2154
|
+
</div>
|
|
2155
|
+
</form>
|
|
2156
|
+
|
|
2157
|
+
</div>
|
|
2158
|
+
</div>
|
|
2159
|
+
</div>
|
|
2160
|
+
|
|
2161
|
+
<div class="ym-grid linearize-level-1">
|
|
2162
|
+
<div class="ym-g25 ym-gl">
|
|
2163
|
+
<div class="ym-gbox-left">
|
|
2164
|
+
<h3>Responsive Forms</h3>
|
|
2165
|
+
</div>
|
|
2166
|
+
</div>
|
|
2167
|
+
<div class="ym-g75 ym-gr">
|
|
2168
|
+
<div class="ym-gbox-right">
|
|
2169
|
+
<h4>Progressive Linearization</h4>
|
|
2170
|
+
<p>Here's a code-snippet for linearization of the <em>default</em> and <em>columnar</em> form-style at a viewport size, lower then 760px. Forms get linearized to stacked style and element widths are normalized to 100% to fit better on small screens.</p>
|
|
2171
|
+
<div class="box info">
|
|
2172
|
+
<p><strong>Note:</strong> This code snippet assumes that all form elements are using the CSS3 box model: <em>border-box</em> (<code>box-sizing: border-box;</code>), otherwise the element width might have to be adjusted. Furthermore, it doesn't linearize multicolumnar form fields as they're build using the grids module, which has its own linearization code.</p>
|
|
2173
|
+
<p>If you want further information on how to setup this CSS3 box model, take a look at the sample implementation in YAMLs default form theme <em>gray-theme.css</em> in folder <em>yaml/forms/</em>.</p></div>
|
|
2174
|
+
<pre class="cssCode">
|
|
2175
|
+
/* optimize forms on small screens by forcing display mode: full */
|
|
2176
|
+
@media screen and ( max-width: 740px ) {
|
|
2177
|
+
|
|
2178
|
+
/* linearize form elements */
|
|
2179
|
+
.linearize-form label {
|
|
2180
|
+
float: none;
|
|
2181
|
+
}
|
|
2182
|
+
|
|
2183
|
+
.linearize-form .ym-label,
|
|
2184
|
+
.linearize-form .ym-message,
|
|
2185
|
+
.linearize-form input,
|
|
2186
|
+
.linearize-form button,
|
|
2187
|
+
.linearize-form textarea,
|
|
2188
|
+
.linearize-form select {
|
|
2189
|
+
display: block;
|
|
2190
|
+
float: none;
|
|
2191
|
+
position: static;
|
|
2192
|
+
width: 100% !important;
|
|
2193
|
+
margin-left: 0 !important;
|
|
2194
|
+
}
|
|
2195
|
+
|
|
2196
|
+
/* linearize grids */
|
|
2197
|
+
.linearize-form .ym-fbox-wrap,
|
|
2198
|
+
.linearize-form .ym-fbox-wrap [class*="ym-g"] {
|
|
2199
|
+
display: block;
|
|
2200
|
+
float: none;
|
|
2201
|
+
width: 100% !important;
|
|
2202
|
+
margin: 0 !important;
|
|
2203
|
+
padding: 0 !important;
|
|
2204
|
+
}
|
|
2205
|
+
|
|
2206
|
+
/* restore special form elements */
|
|
2207
|
+
.linearize-form input[type="checkbox"],
|
|
2208
|
+
.linearize-form input[type="radio"],
|
|
2209
|
+
.linearize-form input[type="image"] {
|
|
2210
|
+
margin-left: 0 !important;
|
|
2211
|
+
width: auto !important;
|
|
2212
|
+
display: inline;
|
|
2213
|
+
}
|
|
2214
|
+
}</pre>
|
|
2215
|
+
<p class="cssCode">Add the class <code>.linearize-form</code> to any form, you want to be linearized. <span class="htmlCode">You should combine these settings with the linarization of your grid or column layout.</span></p>
|
|
2216
|
+
<pre class="htmlCode">
|
|
2217
|
+
<form class="ym-form <strong>linearize-form</strong>" action="...">
|
|
2218
|
+
...
|
|
2219
|
+
</form></pre>
|
|
2220
|
+
</div>
|
|
2221
|
+
</div>
|
|
2222
|
+
</div>
|
|
2223
|
+
|
|
2224
|
+
<div class="ym-grid linearize-level-1">
|
|
2225
|
+
<div class="ym-g25 ym-gl">
|
|
2226
|
+
<div class="ym-gbox-left">
|
|
2227
|
+
<h3>Buttons</h3>
|
|
2228
|
+
<p>Button definitions are part of the standard theme <em>gray-theme.css</em>, provided by YAML.</p>
|
|
2229
|
+
</div>
|
|
2230
|
+
</div>
|
|
2231
|
+
<div class="ym-g75 ym-gr">
|
|
2232
|
+
<div class="ym-gbox-right">
|
|
2233
|
+
<h4>Standard Button Types</h4>
|
|
2234
|
+
<p>Button styles can be applied to any element using class <code>.ym-button</code> (normally <code><a></code> or <code><button></code>). Within YAML's forms, this is the default for <code><input type="button|reset|send"/></code>.</p>
|
|
2235
|
+
|
|
2236
|
+
<pre class="htmlCode">
|
|
2237
|
+
<!-- simple buttons -->
|
|
2238
|
+
<button class="ym-button">text</button>
|
|
2239
|
+
<a href="#" class="ym-button">text</a>
|
|
2240
|
+
</pre>
|
|
2241
|
+
|
|
2242
|
+
<table>
|
|
2243
|
+
<thead>
|
|
2244
|
+
<tr>
|
|
2245
|
+
<th>Button</th>
|
|
2246
|
+
<th>Class</th>
|
|
2247
|
+
<th>Description</th>
|
|
2248
|
+
</tr>
|
|
2249
|
+
</thead>
|
|
2250
|
+
<tbody>
|
|
2251
|
+
<tr>
|
|
2252
|
+
<td><button class="ym-button">Default</button></td>
|
|
2253
|
+
<td><code>ym-button</code></td>
|
|
2254
|
+
<td>Default Button Style</td>
|
|
2255
|
+
</tr>
|
|
2256
|
+
<tr>
|
|
2257
|
+
<td><button class="ym-button ym-primary">Primary</button></td>
|
|
2258
|
+
<td><code>ym-button ym-primary</code></td>
|
|
2259
|
+
<td>Primary action button</td>
|
|
2260
|
+
</tr>
|
|
2261
|
+
<tr>
|
|
2262
|
+
<td><button class="ym-button ym-success">Positive</button></td>
|
|
2263
|
+
<td><code>ym-button ym-success</code></td>
|
|
2264
|
+
<td>Positive action button</td>
|
|
2265
|
+
</tr>
|
|
2266
|
+
<tr>
|
|
2267
|
+
<td><button class="ym-button ym-warning">Warning</button></td>
|
|
2268
|
+
<td><code>ym-button ym-warning</code></td>
|
|
2269
|
+
<td>"Take with care" action button</td>
|
|
2270
|
+
</tr>
|
|
2271
|
+
<tr>
|
|
2272
|
+
<td><button class="ym-button ym-danger">Danger</button></td>
|
|
2273
|
+
<td><code>ym-button ym-danger</code></td>
|
|
2274
|
+
<td>Dangerous action button</td>
|
|
2275
|
+
</tr>
|
|
2276
|
+
</tbody>
|
|
2277
|
+
</table>
|
|
2278
|
+
|
|
2279
|
+
<h4>Button Sizes</h4>
|
|
2280
|
+
<p>Button sizes and styles can be combined, of course.</p>
|
|
2281
|
+
<table>
|
|
2282
|
+
<thead>
|
|
2283
|
+
<tr>
|
|
2284
|
+
<th>Button</th>
|
|
2285
|
+
<th>Class</th>
|
|
2286
|
+
<th>Description</th>
|
|
2287
|
+
</tr>
|
|
2288
|
+
</thead>
|
|
2289
|
+
<tbody>
|
|
2290
|
+
<tr>
|
|
2291
|
+
<td><button class="ym-button ym-xlarge">Default Button</button></td>
|
|
2292
|
+
<td><code>ym-button ym-xlarge</code></td>
|
|
2293
|
+
<td>A very large button</td>
|
|
2294
|
+
</tr>
|
|
2295
|
+
<tr>
|
|
2296
|
+
<td><button class="ym-button ym-large">Default Button</button></td>
|
|
2297
|
+
<td><code>ym-button ym-large</code></td>
|
|
2298
|
+
<td>A more emphasized button</td>
|
|
2299
|
+
</tr>
|
|
2300
|
+
<tr>
|
|
2301
|
+
<td><button class="ym-button">Default Button</button></td>
|
|
2302
|
+
<td><code>ym-button</code></td>
|
|
2303
|
+
<td>Default button size</td>
|
|
2304
|
+
</tr>
|
|
2305
|
+
<tr>
|
|
2306
|
+
<td><button class="ym-button ym-small">Default Button</button></td>
|
|
2307
|
+
<td><code>ym-button ym-small</code></td>
|
|
2308
|
+
<td>A smaller button</td>
|
|
2309
|
+
</tr>
|
|
2310
|
+
<tr>
|
|
2311
|
+
<td><button class="ym-button ym-xsmall">Default Button</button></td>
|
|
2312
|
+
<td><code>ym-button ym-xsmall</code></td>
|
|
2313
|
+
<td>A very small button</td>
|
|
2314
|
+
</tr>
|
|
2315
|
+
</tbody>
|
|
2316
|
+
</table>
|
|
2317
|
+
<h4>Custom Button Types</h4>
|
|
2318
|
+
<p>HTML Button Elements as well as any other element can be styled as buttons with optional icons. Icons are generated from UTF-8 Dingbats characters (U+2700 ... U+27BF), so they are scalable and no images are needed.</p>
|
|
2319
|
+
<pre class="htmlCode">
|
|
2320
|
+
<!-- custom buttons with icons -->
|
|
2321
|
+
<button class="ym-button ym-add">text</button>
|
|
2322
|
+
<a href="#" class="ym-button ym-add">text</a>
|
|
2323
|
+
</pre>
|
|
2324
|
+
<p>
|
|
2325
|
+
<a href="" class="ym-button ym-add">add</a>
|
|
2326
|
+
<a href="" class="ym-button ym-close">close</a>
|
|
2327
|
+
<a href="" class="ym-button ym-delete">delete</a>
|
|
2328
|
+
<a href="" class="ym-button ym-edit">edit</a>
|
|
2329
|
+
<a href="" class="ym-button ym-email">email</a>
|
|
2330
|
+
<a href="" class="ym-button ym-like">like</a>
|
|
2331
|
+
<a href="" class="ym-button ym-next">next</a>
|
|
2332
|
+
<a href="" class="ym-button ym-play">play</a>
|
|
2333
|
+
<a href="" class="ym-button ym-reply">reply</a>
|
|
2334
|
+
<a href="" class="ym-button ym-save">save</a>
|
|
2335
|
+
<a href="" class="ym-button ym-sign">sign</a>
|
|
2336
|
+
<a href="" class="ym-button ym-spark">spark</a>
|
|
2337
|
+
<a href="" class="ym-button ym-support">support</a>
|
|
2338
|
+
<a href="" class="ym-button ym-star">star</a>
|
|
2339
|
+
</p>
|
|
2340
|
+
</div>
|
|
2341
|
+
</div>
|
|
2342
|
+
</div>
|
|
2343
|
+
|
|
2344
|
+
<h2 id="yaml-floats" tabindex="-1">Float Handling <span class="label">yaml/core/base.css</span></h2>
|
|
2345
|
+
<div class="ym-grid linearize-level-1">
|
|
2346
|
+
<div class="ym-g25 ym-gl">
|
|
2347
|
+
<div class="ym-gbox-left">
|
|
2348
|
+
<p>YAML provides several different standard methods for clearing and containing float objects.</p>
|
|
2349
|
+
</div>
|
|
2350
|
+
</div>
|
|
2351
|
+
<div class="ym-g75 ym-gr">
|
|
2352
|
+
<div class="ym-gbox-right">
|
|
2353
|
+
<h3>Clearing Floats</h3>
|
|
2354
|
+
<p>To clear floats without extra markup, YAML provides the class <code>.ym-clearfix</code>. Use it to clear floats without extra markup or avoid margin collapsing problems in static containers. </p>
|
|
2355
|
+
<p>The Clearfix hack provided by YAML is a combination of <a href="http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/">Clearfix Reloaded</a> from <em>Thierry Koblentz</em> and the <a href="http://nicolasgallagher.com/micro-clearfix-hack/">Micro Clearfix Hack</a> from <em>Nicolas Gallagher</em>. The reason for this is, that the reloaded version causes problems when there are several float objects within the same block formatting context (e.g. in YAMLs column module).</p>
|
|
2356
|
+
<pre class="cssCode">.ym-clearfix:before {
|
|
2357
|
+
content:"";
|
|
2358
|
+
display:table;
|
|
2359
|
+
}<br>
|
|
2360
|
+
.ym-clearfix:after {
|
|
2361
|
+
clear:both;
|
|
2362
|
+
content:".";
|
|
2363
|
+
display:block;
|
|
2364
|
+
font-size:0;
|
|
2365
|
+
height:0;
|
|
2366
|
+
visibility:hidden;
|
|
2367
|
+
}<br>
|
|
2368
|
+
.ym-clearfix {zoom: 1;} /* IE < 8 */
|
|
2369
|
+
</pre>
|
|
2370
|
+
<h3>Containing Floats</h3>
|
|
2371
|
+
<p>To contain float-objects within a parent element, YAML provides the following methods:</p>
|
|
2372
|
+
<table>
|
|
2373
|
+
<thead>
|
|
2374
|
+
<tr>
|
|
2375
|
+
<th scope="col">Classes</th>
|
|
2376
|
+
<th scope="col">Description</th>
|
|
2377
|
+
</tr>
|
|
2378
|
+
</thead>
|
|
2379
|
+
<tbody>
|
|
2380
|
+
<tr>
|
|
2381
|
+
<td class="nowrap"><code>.ym-contain-dt</code></td>
|
|
2382
|
+
<td><p>Containing floats is achieved via <code>display:table; width: 100%;</code>. This should be used, if oversized child-elements should be allowed to slide into neighbor elements or if they have effects attached (e.g. box-shadow) that shouldn't be clipped by the parent element. </p>
|
|
2383
|
+
<div class="box info">
|
|
2384
|
+
<p><strong>Note:</strong> In Firefox you can't combine properties <em><code>display:table</code></em> and <code><em>position:relative</em></code>. If you need to, use <code>.ym-contain-fl</code> instead.</p>
|
|
2385
|
+
</div>
|
|
2386
|
+
</td>
|
|
2387
|
+
</tr>
|
|
2388
|
+
<tr>
|
|
2389
|
+
<td class="nowrap"><code>.ym-contain-oh</code></td>
|
|
2390
|
+
<td><p>Containing floats is achieved via <code>overflow:hidden; width: 100%;</code>. This should be used, if oversized child-elements should be clipped by the parent element without scrollbars. </p>
|
|
2391
|
+
<p class="box info">Avoid this method if you use e.g. CSS3 box-shadows on child elements, as these shadows will be clipped as well.</p></td>
|
|
2392
|
+
</tr>
|
|
2393
|
+
<tr>
|
|
2394
|
+
<td class="nowrap"><code>.ym-contain-fl</code></td>
|
|
2395
|
+
<td>Containing floats is done via <code>float:left; width: 100%;</code>. This is an alternative to <code>.ym-contain-dt</code>, when relative positioning is needed for the attached element.</td>
|
|
2396
|
+
</tr>
|
|
2397
|
+
</tbody>
|
|
2398
|
+
</table>
|
|
2399
|
+
|
|
2400
|
+
<!-- Inhalt linker Block -->
|
|
2401
|
+
</div>
|
|
2402
|
+
</div>
|
|
2403
|
+
</div>
|
|
2404
|
+
|
|
2405
|
+
<h2 id="yaml-accessibility" tabindex="-1">Accessibility <span class="label">yaml/core/base.css</span> <span class="label">yaml/core/js/yaml-focusfix.js</span></h2>
|
|
2406
|
+
<div class="ym-grid linearize-level-1">
|
|
2407
|
+
<div class="ym-g25 ym-gl">
|
|
2408
|
+
<div class="ym-gbox-left">
|
|
2409
|
+
<!-- Inhalt linker Block -->
|
|
2410
|
+
</div>
|
|
2411
|
+
</div>
|
|
2412
|
+
<div class="ym-g75 ym-gr">
|
|
2413
|
+
<div class="ym-gbox-right">
|
|
2414
|
+
<h3>Skip Links</h3>
|
|
2415
|
+
<p>Skip links are created as an unordered list and styled with the class <code>.ym-skiplinks</code>. This class is defined in <em>base.css</em> and controls the visual properties of the list. Furthermore, each link in the list is marked up with the class <code>.ym-skip</code>.</p>
|
|
2416
|
+
<pre class="htmlCode"><body>
|
|
2417
|
+
<!-- skip link navigation -->
|
|
2418
|
+
<ul class="ym-skiplinks">
|
|
2419
|
+
<li><a class="ym-skip" href="#nav">Skip to navigation (Press Enter)</a></li>
|
|
2420
|
+
<li><a class="ym-skip" href="#main">Skip to main content (Press Enter)</a></li>
|
|
2421
|
+
</ul>
|
|
2422
|
+
...
|
|
2423
|
+
</body></pre>
|
|
2424
|
+
<h4>Fixing IE & Webkits Focus Problems </h4>
|
|
2425
|
+
<p>Although there are no problems with the visual presentation of skip links, Internet Explorer 8 on Windows 7 as well as Webkit-based browsers such as <em> Safari</em> and <em> Chrome</em> require a focus bugfix as these browsers do not automatically set the skip to the link target.</p>
|
|
2426
|
+
<p>YAML provides a script (<em>yaml-focusfix.js</em>), which finds all the skip links in a document, analyzes their targets, and automatically sets the focus to the target if one of the links is clicked.</p>
|
|
2427
|
+
<pre class="htmlCode"><body>
|
|
2428
|
+
...
|
|
2429
|
+
<!-- full skip link functionality in ie8 & webkit browsers -->
|
|
2430
|
+
<script src="./yaml/core/js/yaml-focusfix.js" type="text/javascript" />
|
|
2431
|
+
</body></pre>
|
|
2432
|
+
<h3>Hidden Content</h3>
|
|
2433
|
+
<table>
|
|
2434
|
+
<thead>
|
|
2435
|
+
<tr>
|
|
2436
|
+
<th scope="col">CSS-classes</th>
|
|
2437
|
+
<th scope="col">Description</th>
|
|
2438
|
+
</tr>
|
|
2439
|
+
</thead>
|
|
2440
|
+
<tbody>
|
|
2441
|
+
<tr>
|
|
2442
|
+
<td class="nowrap"><code>.ym-skip</code></td>
|
|
2443
|
+
<td> The use of the unordered list <code>.ym-skiplinks</code> (see above) is optional, but the preferred solution. Alternatively, you can integrate the skip links directly into the layout. To ensure the functionality, the CSS class <code>.ym-skip</code> is required for skip anchors.</td>
|
|
2444
|
+
</tr>
|
|
2445
|
+
<tr>
|
|
2446
|
+
<td class="nowrap"><code>.ym-hideme</code></td>
|
|
2447
|
+
<td>Elements with the CSS class <code>.ym-hideme</code> are visually hidden in browsers, but still accessible for screen readers.</td>
|
|
2448
|
+
</tr>
|
|
2449
|
+
<tr>
|
|
2450
|
+
<td class="nowrap"><code>.ym-print</code></td>
|
|
2451
|
+
<td>Elements with the CSS class <code>.ym-print</code> are visually hidden in media <em>screen</em>, but still accessible for screen readers <em>and</em> visible on media print.</td>
|
|
2452
|
+
</tr>
|
|
2453
|
+
<tr>
|
|
2454
|
+
<td class="nowrap"><code>.ym-noprint</code></td>
|
|
2455
|
+
<td>Elements with the CSS class <code>.ym-noprint</code> will not be printed, but are<em></em> visible on any other media type (e.g. screen).</td>
|
|
2456
|
+
</tr>
|
|
2457
|
+
</tbody>
|
|
2458
|
+
</table>
|
|
2459
|
+
</div>
|
|
2460
|
+
</div>
|
|
2461
|
+
</div>
|
|
2462
|
+
|
|
2463
|
+
<h2 id="yaml-navigation" tabindex="-1">Navigation Module <span class="label">yaml/navigation/hlist.css</span> <span class="label">yaml/navigation/vlist.css</span></h2>
|
|
2464
|
+
<p>In the left column you’ll find an example for a vertical navigation, in the right column one for a horizontal navigation. The tabbed box shows the default markup for both examples.</p>
|
|
2465
|
+
<div class="ym-grid linearize-level-1">
|
|
2466
|
+
<div class="ym-g25 ym-gl">
|
|
2467
|
+
<div class="ym-gbox-left">
|
|
2468
|
+
<h3>Vertical Navigation</h3>
|
|
2469
|
+
<div class="nav-wrapper">
|
|
2470
|
+
<nav class="ym-vlist">
|
|
2471
|
+
<h6 class="ym-vtitle">Optional Title</h6>
|
|
2472
|
+
<ul>
|
|
2473
|
+
<li><a href="#yaml-navigation">Entry 1</a></li>
|
|
2474
|
+
<li><a href="#yaml-navigation">Entry 2</a></li>
|
|
2475
|
+
<li><span>Open Entry 3</span>
|
|
2476
|
+
<ul>
|
|
2477
|
+
<li><a href="#yaml-navigation">Entry 3.1</a></li>
|
|
2478
|
+
<li class="active"><strong>Active Entry 3.2</strong></li>
|
|
2479
|
+
<li><a href="#yaml-navigation">Entry 3.3</a></li>
|
|
2480
|
+
</ul>
|
|
2481
|
+
</li>
|
|
2482
|
+
<li><a href="#yaml-navigation">Entry 4</a></li>
|
|
2483
|
+
<li><a href="#yaml-navigation">Entry 5</a></li>
|
|
2484
|
+
</ul>
|
|
2485
|
+
</nav>
|
|
2486
|
+
</div>
|
|
2487
|
+
</div>
|
|
2488
|
+
</div>
|
|
2489
|
+
<div class="ym-g75 ym-gr">
|
|
2490
|
+
<div class="ym-gbox-right">
|
|
2491
|
+
<h3>Horizontal Navigation</h3>
|
|
2492
|
+
<div class="nav-wrapper">
|
|
2493
|
+
<nav class="ym-hlist">
|
|
2494
|
+
<ul>
|
|
2495
|
+
<li class="active"><strong>Active</strong></li>
|
|
2496
|
+
<li><a href="#yaml-navigation">Link</a></li>
|
|
2497
|
+
<li><a href="#yaml-navigation">Link</a></li>
|
|
2498
|
+
<li><a href="#yaml-navigation">Link</a></li>
|
|
2499
|
+
<li><a href="#yaml-navigation">Link</a></li>
|
|
2500
|
+
</ul>
|
|
2501
|
+
<form class="ym-searchform">
|
|
2502
|
+
<input class="ym-searchfield" type="text" placeholder="Search..." />
|
|
2503
|
+
<input class="ym-searchbutton" type="submit" value="Search" />
|
|
2504
|
+
</form>
|
|
2505
|
+
</nav>
|
|
2506
|
+
</div>
|
|
2507
|
+
<h3>Default Markup</h3>
|
|
2508
|
+
<div class="jquery_tabs">
|
|
2509
|
+
<h5>Horizontal Navigation</h5>
|
|
2510
|
+
<div class="tab-content">
|
|
2511
|
+
<pre class="htmlCode"><nav class="ym-hlist">
|
|
2512
|
+
<ul>
|
|
2513
|
+
<li class="active"><strong>Active</strong></li>
|
|
2514
|
+
<li><a href="#">Link</a></li>
|
|
2515
|
+
<li><a href="#">Link</a></li>
|
|
2516
|
+
<li><a href="#">Link</a></li>
|
|
2517
|
+
<li><a href="#">Link</a></li>
|
|
2518
|
+
</ul>
|
|
2519
|
+
|
|
2520
|
+
<!-- optional search form -->
|
|
2521
|
+
<form class="ym-searchform">
|
|
2522
|
+
<input class="ym-searchfield" type="search" placeholder="Search..." />
|
|
2523
|
+
<input class="ym-searchbutton" type="submit" value="Search" />
|
|
2524
|
+
</form>
|
|
2525
|
+
</nav></pre>
|
|
2526
|
+
</div>
|
|
2527
|
+
<h5>Vertical Navigation</h5>
|
|
2528
|
+
<div class="tab-content">
|
|
2529
|
+
<pre class="htmlCode"><nav class="ym-vlist"><br> <h6 class="ym-vtitle">Optional Title</h6>
|
|
2530
|
+
<ul>
|
|
2531
|
+
<li><a href="#">Link 1</a></li>
|
|
2532
|
+
<li><a href="#">Link 2</a></li>
|
|
2533
|
+
<li><span>Link 3</span>
|
|
2534
|
+
<ul>
|
|
2535
|
+
<li><a href="#">Link 3.1</a></li>
|
|
2536
|
+
<li class="active"><strong>Link 3.2</strong></li>
|
|
2537
|
+
<li><a href="#">Link 3.3</a></li>
|
|
2538
|
+
</ul>
|
|
2539
|
+
</li>
|
|
2540
|
+
<li><a href="#">Link 4</a></li>
|
|
2541
|
+
<li><a href="#">Link 5</a></li>
|
|
2542
|
+
</ul><br></nav></pre>
|
|
2543
|
+
</div>
|
|
2544
|
+
</div>
|
|
2545
|
+
</div>
|
|
2546
|
+
</div>
|
|
2547
|
+
</div>
|
|
2548
|
+
|
|
2549
|
+
<h2 id="yaml-typography" tabindex="-1">Typography <span class="label">yaml/screen/typography.css</span></h2>
|
|
2550
|
+
<div class="ym-grid v-grid linearize-level-1">
|
|
2551
|
+
<div class="ym-g25 ym-gl">
|
|
2552
|
+
<div class="ym-gbox-left">
|
|
2553
|
+
<!-- Inhalt linker Block -->
|
|
2554
|
+
<h3>Headings & Paragraphs</h3>
|
|
2555
|
+
</div>
|
|
2556
|
+
</div>
|
|
2557
|
+
<div class="ym-g75 ym-gr">
|
|
2558
|
+
<div class="ym-gbox-right">
|
|
2559
|
+
|
|
2560
|
+
<div class="ym-grid linearize-level-2">
|
|
2561
|
+
<div class="ym-g50 ym-gl">
|
|
2562
|
+
<div class="ym-gbox-left">
|
|
2563
|
+
<h4>Heading Levels</h4>
|
|
2564
|
+
<h1>H1 Heading</h1>
|
|
2565
|
+
<h2>H2 Heading</h2>
|
|
2566
|
+
<h3>H3 Heading</h3>
|
|
2567
|
+
<h4>H4 Heading</h4>
|
|
2568
|
+
<h5>H5 Heading</h5>
|
|
2569
|
+
<h6>H6 Heading</h6>
|
|
2570
|
+
</div>
|
|
2571
|
+
</div>
|
|
2572
|
+
<div class="ym-g50 ym-gr">
|
|
2573
|
+
<div class="ym-cbox-right">
|
|
2574
|
+
<h4>Paragraphs</h4>
|
|
2575
|
+
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.. </p>
|
|
2576
|
+
</div>
|
|
2577
|
+
</div>
|
|
2578
|
+
</div>
|
|
2579
|
+
|
|
2580
|
+
<h4>Special Paragraphs</h4>
|
|
2581
|
+
<p class="highlight">This is a paragraph text with class="highlight". Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
|
|
2582
|
+
<p class="dimmed">This is a paragraph text with class="dimmed". Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
|
|
2583
|
+
<p class="box info">This is a paragraph text with class="box info". Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
|
|
2584
|
+
<p class="box success">This is a paragraph text with class="box success". Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
|
|
2585
|
+
<p class="box warning">This is a paragraph text with class="box warning". Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
|
|
2586
|
+
<p class="box error">This is a paragraph text with class="box error". Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
|
|
2587
|
+
</div>
|
|
2588
|
+
</div>
|
|
2589
|
+
</div>
|
|
2590
|
+
|
|
2591
|
+
<div class="ym-grid v-grid linearize-level-1">
|
|
2592
|
+
<div class="ym-g25 ym-gl">
|
|
2593
|
+
<div class="ym-gbox-left">
|
|
2594
|
+
<!-- Inhalt linker Block -->
|
|
2595
|
+
<h3>Misc. Elements</h3>
|
|
2596
|
+
</div>
|
|
2597
|
+
</div>
|
|
2598
|
+
<div class="ym-g75 ym-gr">
|
|
2599
|
+
<div class="ym-gbox-right">
|
|
2600
|
+
|
|
2601
|
+
<h4>Blockquotes</h4>
|
|
2602
|
+
<blockquote>
|
|
2603
|
+
<p>This is a paragraph text within a <blockquote> element. This is a paragraph text within a <blockquote> element. This is a paragraph text within a <blockquote> element. This is a paragraph text within a <blockquote> element. </p>
|
|
2604
|
+
</blockquote>
|
|
2605
|
+
<h4>Preformatted Text </h4>
|
|
2606
|
+
<pre>This is preformatted text, wrapped in a <pre> element. <br />This is preformatted text, wrapped in a <pre> element.</pre>
|
|
2607
|
+
|
|
2608
|
+
<h4>Inline Semantic Text Decoration</h4>
|
|
2609
|
+
<ul>
|
|
2610
|
+
<li>an <a href="#">anchor</a> tag (<code><a></code>) example </li>
|
|
2611
|
+
<li>an <i>italics</i> and <em>emphasize</em> tag (<code><i></code>,<code> <em></code>) example</li>
|
|
2612
|
+
<li>a <big>big</big> and <small>small</small> tag (<code><big></code>,<code> <small></code>) example</li>
|
|
2613
|
+
<li>a <b>bold</b> and <strong>strong</strong> tag (<code><b></code>, <code><strong></code>) example</li>
|
|
2614
|
+
<li>an <acronym>acronym</acronym> and <abbr>abbreviation</abbr> tag (<code><acronym></code>, <code><abbr></code>) example </li>
|
|
2615
|
+
<li>a <cite>cite</cite> and <q>quote</q> tag (<code><cite></code>, <code><q></code> ) example </li>
|
|
2616
|
+
<li>a <code>code</code> and <dfn>definition</dfn> tag (<code><code></code>, <code><dfn></code>) example</li>
|
|
2617
|
+
<li>a <tt>teletype</tt> and <kbd>keyboard</kbd> tag (<code><tt></code>, <code><kbd></code>) example</li>
|
|
2618
|
+
<li>a <var>variable</var> and <samp>sample</samp> tag (<code><var></code>, <code><samp></code>) example</li>
|
|
2619
|
+
<li>an <ins>inserted</ins> and <del>deleted</del> tag (<code><ins></code>, <code><del></code>) example</li>
|
|
2620
|
+
<li>a <sub>subscript</sub> and <sup>superscript</sup> tag (<code><sub></code>, <code><sup></code>) example</li>
|
|
2621
|
+
<li>a <mark>mark</mark> tag (HTML5) (<code><mark></code>) example</li>
|
|
2622
|
+
</ul>
|
|
2623
|
+
</div>
|
|
2624
|
+
</div>
|
|
2625
|
+
</div>
|
|
2626
|
+
|
|
2627
|
+
<div class="ym-grid v-grid linearize-level-1">
|
|
2628
|
+
<div class="ym-g25 ym-gl">
|
|
2629
|
+
<div class="ym-gbox-left">
|
|
2630
|
+
<!-- Inhalt linker Block -->
|
|
2631
|
+
<h3>Media</h3>
|
|
2632
|
+
<p>Handling images and videos in flexible environments</p>
|
|
2633
|
+
</div>
|
|
2634
|
+
</div>
|
|
2635
|
+
<div class="ym-g75 ym-gr">
|
|
2636
|
+
<div class="ym-gbox-right">
|
|
2637
|
+
|
|
2638
|
+
<div class="ym-grid v-grid linearize-level-2">
|
|
2639
|
+
<div class="ym-g50 ym-gl">
|
|
2640
|
+
<div class="ym-gbox-left">
|
|
2641
|
+
<h4>Flexible Media (responsive)</h4>
|
|
2642
|
+
<img src="http://dummyimage.com/300x200/cccccc/fff.png" class="flexible" alt="" role="presentation"/>
|
|
2643
|
+
<pre class="cssCode">.flexible {
|
|
2644
|
+
...
|
|
2645
|
+
max-width: 100%;
|
|
2646
|
+
}
|
|
2647
|
+
/* IE6 support - 2% space for borders */
|
|
2648
|
+
* html .flexible { width: 98%; }</pre>
|
|
2649
|
+
<p> By adding the CSS class <code>.flexible</code> to an image or video, you can allow the browser to downscale this element to fit the size of its parent element. It will not be upscaled in modern browsers (in old IE6 & 7 it will as part of the provided work-around.)</p>
|
|
2650
|
+
</div>
|
|
2651
|
+
</div>
|
|
2652
|
+
<div class="ym-g50 ym-gr">
|
|
2653
|
+
<div class="ym-gbox-right">
|
|
2654
|
+
<h4>Media Borders</h4>
|
|
2655
|
+
<img src="http://dummyimage.com/300x200/cccccc/fff.png" class="flexible bordered" alt="" role="presentation"/>
|
|
2656
|
+
<pre class="cssCode">.bordered {
|
|
2657
|
+
...
|
|
2658
|
+
border: 2px #eee solid;
|
|
2659
|
+
border: 2px rgba(255,255,255,1) solid;
|
|
2660
|
+
box-shadow: 0 0 3px rgba(0,0,0,.25);
|
|
2661
|
+
}
|
|
2662
|
+
</pre>
|
|
2663
|
+
<p>You can add a border to your images or videos by adding the CSS class <code>.bordered</code>.</p>
|
|
2664
|
+
</div>
|
|
2665
|
+
</div>
|
|
2666
|
+
</div>
|
|
2667
|
+
</div>
|
|
2668
|
+
</div>
|
|
2669
|
+
</div>
|
|
2670
|
+
|
|
2671
|
+
<div class="ym-grid v-grid linearize-level-1">
|
|
2672
|
+
<div class="ym-g25 ym-gl">
|
|
2673
|
+
<div class="ym-gbox-left">
|
|
2674
|
+
<!-- Inhalt linker Block -->
|
|
2675
|
+
<h3>Lists</h3>
|
|
2676
|
+
</div>
|
|
2677
|
+
</div>
|
|
2678
|
+
<div class="ym-g75 ym-gr">
|
|
2679
|
+
<div class="ym-gbox-right">
|
|
2680
|
+
|
|
2681
|
+
<div class="ym-grid v-grid linearize-level-2">
|
|
2682
|
+
<div class="ym-g33 ym-gl">
|
|
2683
|
+
<div class="ym-gbox-left">
|
|
2684
|
+
<h4>Unordered List</h4>
|
|
2685
|
+
<ul>
|
|
2686
|
+
<li>ut enim ad minim veniam</li>
|
|
2687
|
+
<li>occaecat cupidatat non proident
|
|
2688
|
+
<ul>
|
|
2689
|
+
<li>facilisis semper</li>
|
|
2690
|
+
<li>quis ac wisi augue</li>
|
|
2691
|
+
<li>risus nec pretium</li>
|
|
2692
|
+
<li>fames scelerisque</li>
|
|
2693
|
+
</ul>
|
|
2694
|
+
</li>
|
|
2695
|
+
<li>nostrud exercitation ullamco</li>
|
|
2696
|
+
<li>labore et dolore magna aliqua</li>
|
|
2697
|
+
<li>aute irure dolor in reprehenderit in voluptate velit esse cillum dolore</li>
|
|
2698
|
+
</ul>
|
|
2699
|
+
</div>
|
|
2700
|
+
</div>
|
|
2701
|
+
<div class="ym-g33 ym-gl">
|
|
2702
|
+
<div class="ym-gbox">
|
|
2703
|
+
<h4>Ordered List</h4>
|
|
2704
|
+
<ol>
|
|
2705
|
+
<li>ut enim ad minim veniam
|
|
2706
|
+
<ol>
|
|
2707
|
+
<li>facilisis semper</li>
|
|
2708
|
+
<li>quis ac wisi augue</li>
|
|
2709
|
+
<li>risus nec pretium</li>
|
|
2710
|
+
<li>fames scelerisque</li>
|
|
2711
|
+
</ol>
|
|
2712
|
+
</li>
|
|
2713
|
+
<li>occaecat cupidatat non proident</li>
|
|
2714
|
+
<li>nostrud exercitation ullamco</li>
|
|
2715
|
+
<li>labore et dolore magna aliqua</li>
|
|
2716
|
+
<li>aute irure dolor in reprehenderit in voluptate velit esse cillum dolore</li>
|
|
2717
|
+
</ol>
|
|
2718
|
+
</div>
|
|
2719
|
+
</div>
|
|
2720
|
+
<div class="ym-g33 ym-gr">
|
|
2721
|
+
<div class="ym-gbox-right">
|
|
2722
|
+
<h4>Definition List</h4>
|
|
2723
|
+
<dl>
|
|
2724
|
+
<dt>A definition list — this is <dt> </dt>
|
|
2725
|
+
<dd>A definition list — this is <dd> element.</dd>
|
|
2726
|
+
<dt>A definition list — this is <dt> </dt>
|
|
2727
|
+
<dd>A definition list — this is <dd> element.</dd>
|
|
2728
|
+
<dt>A definition list — this is <dt> </dt>
|
|
2729
|
+
<dd>A definition list — this is <dd> element.</dd>
|
|
2730
|
+
</dl>
|
|
2731
|
+
</div>
|
|
2732
|
+
</div>
|
|
2733
|
+
</div>
|
|
2734
|
+
|
|
2735
|
+
</div>
|
|
2736
|
+
</div>
|
|
2737
|
+
</div>
|
|
2738
|
+
|
|
2739
|
+
<div class="ym-grid v-grid linearize-level-1">
|
|
2740
|
+
<div class="ym-g25 ym-gl">
|
|
2741
|
+
<div class="ym-gbox-left">
|
|
2742
|
+
<!-- Inhalt linker Block -->
|
|
2743
|
+
<h3>Horizontal Arrangement</h3>
|
|
2744
|
+
</div>
|
|
2745
|
+
</div>
|
|
2746
|
+
<div class="ym-g75 ym-gr">
|
|
2747
|
+
<div class="ym-gbox-right">
|
|
2748
|
+
|
|
2749
|
+
<div class="ym-grid v-grid linearize-level-1">
|
|
2750
|
+
<div class="ym-g33 ym-gl">
|
|
2751
|
+
<div class="ym-gbox-left">
|
|
2752
|
+
<h4>Floating Left</h4>
|
|
2753
|
+
<pre class="cssCode">
|
|
2754
|
+
.float-left {
|
|
2755
|
+
float:left;
|
|
2756
|
+
display:inline;
|
|
2757
|
+
margin: 1.5em 1em 0 0;
|
|
2758
|
+
}</pre>
|
|
2759
|
+
<img src="http://dummyimage.com/150x100/cccccc/fff.png" class="flexible bordered float-left" alt="" role="presentation"/>
|
|
2760
|
+
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
|
|
2761
|
+
</div>
|
|
2762
|
+
</div>
|
|
2763
|
+
<div class="ym-g33 ym-gl">
|
|
2764
|
+
<div class="ym-gbox">
|
|
2765
|
+
<h4>Centered</h4>
|
|
2766
|
+
<pre class="cssCode">
|
|
2767
|
+
.center {
|
|
2768
|
+
display:block;
|
|
2769
|
+
text-align:center;
|
|
2770
|
+
margin: 1.5em auto 0 auto;
|
|
2771
|
+
}</pre>
|
|
2772
|
+
<p><img src="http://dummyimage.com/150x100/cccccc/fff.png" class="flexible bordered center" alt="" role="presentation"/> </p>
|
|
2773
|
+
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.</p>
|
|
2774
|
+
</div>
|
|
2775
|
+
</div>
|
|
2776
|
+
<div class="ym-g33 ym-gr">
|
|
2777
|
+
<div class="ym-gbox-right">
|
|
2778
|
+
<h4>Floating Right</h4>
|
|
2779
|
+
<pre class="cssCode">
|
|
2780
|
+
.float-right {
|
|
2781
|
+
float:right;
|
|
2782
|
+
display:inline;
|
|
2783
|
+
margin: 1.5em 0 0 1em;
|
|
2784
|
+
}</pre>
|
|
2785
|
+
<img src="http://dummyimage.com/150x100/cccccc/fff.png" class="flexible bordered float-right" alt="" role="presentation"/>
|
|
2786
|
+
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
|
|
2787
|
+
</div>
|
|
2788
|
+
</div>
|
|
2789
|
+
</div>
|
|
2790
|
+
|
|
2791
|
+
|
|
2792
|
+
</div>
|
|
2793
|
+
</div>
|
|
2794
|
+
</div>
|
|
2795
|
+
|
|
2796
|
+
<div class="ym-grid v-grid linearize-level-1">
|
|
2797
|
+
<div class="ym-g25 ym-gl">
|
|
2798
|
+
<div class="ym-gbox-left">
|
|
2799
|
+
<!-- Inhalt linker Block -->
|
|
2800
|
+
<h3>Tables</h3>
|
|
2801
|
+
</div>
|
|
2802
|
+
</div>
|
|
2803
|
+
<div class="ym-g75 ym-gr">
|
|
2804
|
+
<div class="ym-gbox-right">
|
|
2805
|
+
|
|
2806
|
+
<h4>Default Table Style</h4>
|
|
2807
|
+
<p>The default style for tables has left aligned cells and a minimal set of borders. Vertical alignment of table cells is set to <em>top</em>.</p>
|
|
2808
|
+
<table>
|
|
2809
|
+
<thead>
|
|
2810
|
+
<tr>
|
|
2811
|
+
<th>Id</th>
|
|
2812
|
+
<th>Product Name</th>
|
|
2813
|
+
<th>Value</th>
|
|
2814
|
+
</tr>
|
|
2815
|
+
</thead>
|
|
2816
|
+
<tbody>
|
|
2817
|
+
<tr>
|
|
2818
|
+
<td>1</td>
|
|
2819
|
+
<td>Pencil</td>
|
|
2820
|
+
<td>cheap</td>
|
|
2821
|
+
</tr>
|
|
2822
|
+
<tr>
|
|
2823
|
+
<td>2</td>
|
|
2824
|
+
<td>Car</td>
|
|
2825
|
+
<td>expensive</td>
|
|
2826
|
+
</tr>
|
|
2827
|
+
</tbody>
|
|
2828
|
+
</table>
|
|
2829
|
+
|
|
2830
|
+
|
|
2831
|
+
<pre class="htmlCode"><table>
|
|
2832
|
+
<thead>
|
|
2833
|
+
<tr>
|
|
2834
|
+
<th> ... </th>
|
|
2835
|
+
...
|
|
2836
|
+
</tr>
|
|
2837
|
+
</thead>
|
|
2838
|
+
<tbody>
|
|
2839
|
+
<tr>
|
|
2840
|
+
<td> ... </td>
|
|
2841
|
+
...
|
|
2842
|
+
</tr>
|
|
2843
|
+
</tbody>
|
|
2844
|
+
</table>
|
|
2845
|
+
</pre>
|
|
2846
|
+
<p>A classic table style can be achieved with CSS class <code>.bordertable</code></p>
|
|
2847
|
+
<table class="bordertable">
|
|
2848
|
+
<thead>
|
|
2849
|
+
<tr>
|
|
2850
|
+
<th>Id</th>
|
|
2851
|
+
<th>Product Name</th>
|
|
2852
|
+
<th>Value</th>
|
|
2853
|
+
</tr>
|
|
2854
|
+
</thead>
|
|
2855
|
+
<tbody>
|
|
2856
|
+
<tr>
|
|
2857
|
+
<td>1</td>
|
|
2858
|
+
<td>Pencil</td>
|
|
2859
|
+
<td>cheap</td>
|
|
2860
|
+
</tr>
|
|
2861
|
+
<tr>
|
|
2862
|
+
<td>2</td>
|
|
2863
|
+
<td>Car</td>
|
|
2864
|
+
<td>expensive</td>
|
|
2865
|
+
</tr>
|
|
2866
|
+
</tbody>
|
|
2867
|
+
</table>
|
|
2868
|
+
<pre class="htmlCode"><table class="bordertable">
|
|
2869
|
+
...
|
|
2870
|
+
</table></pre>
|
|
2871
|
+
<p>Both table styles can be combined with CSS class <code>.narrow</code> to achieve smaller table rows (especially useful for big tables)</p>
|
|
2872
|
+
<table class="bordertable narrow">
|
|
2873
|
+
<thead>
|
|
2874
|
+
<tr>
|
|
2875
|
+
<th>Id</th>
|
|
2876
|
+
<th>Product Name</th>
|
|
2877
|
+
<th>Value</th>
|
|
2878
|
+
</tr>
|
|
2879
|
+
</thead>
|
|
2880
|
+
<tbody>
|
|
2881
|
+
<tr>
|
|
2882
|
+
<td>1</td>
|
|
2883
|
+
<td>Pencil</td>
|
|
2884
|
+
<td>cheap</td>
|
|
2885
|
+
</tr>
|
|
2886
|
+
<tr>
|
|
2887
|
+
<td>2</td>
|
|
2888
|
+
<td>Car</td>
|
|
2889
|
+
<td>expensive</td>
|
|
2890
|
+
</tr>
|
|
2891
|
+
</tbody>
|
|
2892
|
+
</table>
|
|
2893
|
+
<pre class="htmlCode"><table class="bordertable narrow">
|
|
2894
|
+
...
|
|
2895
|
+
</table></pre>
|
|
2896
|
+
</div>
|
|
2897
|
+
</div>
|
|
2898
|
+
</div>
|
|
2899
|
+
|
|
2900
|
+
<h2 id="yaml-addons" tabindex="-1">Add-ons</h2>
|
|
2901
|
+
<div class="ym-grid linearize-level-1">
|
|
2902
|
+
<div class="ym-g25 ym-gl">
|
|
2903
|
+
<div class="ym-gbox-left">
|
|
2904
|
+
<h3>Accessible Tabs</h3>
|
|
2905
|
+
<span class="label">yaml/add-ons/accessible-tabs/</span>
|
|
2906
|
+
<p><em>Accessible Tabs</em> is a jQuery plugin by Dirk Ginader, that generates accessible tabbing environments from standard HTML markup, and therefore provides a perfect fallback solution when JavaScript is disabled.</p>
|
|
2907
|
+
<p>Get the latest version of this plugin on <a href="https://github.com/ginader/Accessible-Tabs">Github</a>.</p>
|
|
2908
|
+
<p>With v1.9.7 this plugin officially dropped its support for IE7.</p>
|
|
2909
|
+
</div>
|
|
2910
|
+
</div>
|
|
2911
|
+
<div class="ym-g75 ym-gr">
|
|
2912
|
+
<div class="ym-gbox-right">
|
|
2913
|
+
<h4>Live Example</h4>
|
|
2914
|
+
<div class="jquery_tabs example1">
|
|
2915
|
+
<h5>Topic A</h5>
|
|
2916
|
+
<div class="tab-content">
|
|
2917
|
+
<h6>Lorem ipsum ... </h6>
|
|
2918
|
+
<p>Nullam malesuada suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque. Vivamus viverra. Duis dolor arcu, lacinia sit amet, sollicitudin sed, aliquet vel, quam. Pellentesque molestie laoreet tortor. Aenean quam. Pellentesque magna metus, venenatis sit amet, congue nec, dictum in, est. Aliquam nibh. </p>
|
|
2919
|
+
</div>
|
|
2920
|
+
<h5>Topic B</h5>
|
|
2921
|
+
<div class="tab-content">
|
|
2922
|
+
<h6>Lorem ipsum ... </h6>
|
|
2923
|
+
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque. </p>
|
|
2924
|
+
</div>
|
|
2925
|
+
<h5>Topic C</h5>
|
|
2926
|
+
<div class="tab-content">
|
|
2927
|
+
<p>Your content could be here.</p>
|
|
2928
|
+
</div>
|
|
2929
|
+
</div>
|
|
2930
|
+
<h4>Default Markup</h4>
|
|
2931
|
+
<pre class="htmlCode">
|
|
2932
|
+
<div class="jquery_tabs">
|
|
2933
|
+
<h4>Topic A</h4>
|
|
2934
|
+
<p class="tabbody"> ... </p>
|
|
2935
|
+
<h4>Topic B</h4>
|
|
2936
|
+
<p class="tabbody"> ... </p>
|
|
2937
|
+
<h4>Topic C</h4>
|
|
2938
|
+
<p class="tabbody"> ... </p>
|
|
2939
|
+
</div></pre>
|
|
2940
|
+
<p><em>Accessible Tabs</em> transforms a predefined content area, wrapped with <code>.jquery_tabs</code> into a tabbing environment, where specific elements (default: <code><h4></code>) become tab headings and class <code>.tabbody</code> defines the content (or its wrapper). </p>
|
|
2941
|
+
<h4>Implementation</h4>
|
|
2942
|
+
<pre class="htmlCode">
|
|
2943
|
+
<head>
|
|
2944
|
+
...
|
|
2945
|
+
<link rel="stylesheet" href="yaml/add-ons/accessible-tabs/tabs.css" type="text/css"/>
|
|
2946
|
+
...
|
|
2947
|
+
</head>
|
|
2948
|
+
<body>
|
|
2949
|
+
...
|
|
2950
|
+
<script src="lib/jquery-1.8.3.min.js" type="text/javascript" />
|
|
2951
|
+
<script src="yaml/add-ons/accessible-tabs/jquery.tabs.js" type="text/javascript" />
|
|
2952
|
+
</body></pre>
|
|
2953
|
+
<pre class="jsCode">$(document).ready(function(){
|
|
2954
|
+
$('.jquery_tabs').accessibleTabs();
|
|
2955
|
+
});</pre>
|
|
2956
|
+
<h4>Synchronize Heights</h4>
|
|
2957
|
+
<p>Tabbing environments can have synchronized tab heights. This is realized by combining the "Accessible Tabs" Plugin with the "syncHeight" Plugin.</p>
|
|
2958
|
+
<div class="jquery_tabs" data-sync="true">
|
|
2959
|
+
<h5>Topic A</h5>
|
|
2960
|
+
<div class="tab-content">
|
|
2961
|
+
<h6>Lorem ipsum ... </h6>
|
|
2962
|
+
<p>Nullam malesuada suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque. Vivamus viverra. Duis dolor arcu, lacinia sit amet, sollicitudin sed, aliquet vel, quam. Pellentesque molestie laoreet tortor. Aenean quam. Pellentesque magna metus, venenatis sit amet, congue nec, dictum in, est. Aliquam nibh. </p>
|
|
2963
|
+
</div>
|
|
2964
|
+
<h5>Topic B</h5>
|
|
2965
|
+
<div class="tab-content">
|
|
2966
|
+
<h6>Lorem ipsum ... </h6>
|
|
2967
|
+
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque. </p>
|
|
2968
|
+
</div>
|
|
2969
|
+
<h5>Topic C</h5>
|
|
2970
|
+
<div class="tab-content">
|
|
2971
|
+
<p>Your content could be here.</p>
|
|
2972
|
+
</div>
|
|
2973
|
+
</div>
|
|
2974
|
+
<pre class="htmlCode"><body>
|
|
2975
|
+
...
|
|
2976
|
+
<script src="lib/jquery-1.8.3.min.js" type="text/javascript" />
|
|
2977
|
+
<script src="yaml/add-ons/accessible-tabs/jquery.tabs.js" type="text/javascript" />
|
|
2978
|
+
<script src="yaml/add-ons/syncheight/jquery.syncheight.js" type="text/javascript" />
|
|
2979
|
+
</body></pre>
|
|
2980
|
+
<pre class="jsCode">$(document).ready(function(){
|
|
2981
|
+
$('.jquery_tabs').accessibleTabs({ syncheight: true });
|
|
2982
|
+
});</pre>
|
|
2983
|
+
</div>
|
|
2984
|
+
</div>
|
|
2985
|
+
</div>
|
|
2986
|
+
|
|
2987
|
+
<div class="ym-grid linearize-level-1">
|
|
2988
|
+
<div class="ym-g25 ym-gl">
|
|
2989
|
+
<div class="ym-gbox-left">
|
|
2990
|
+
<h3>SyncHeight</h3>
|
|
2991
|
+
<span class="label">yaml/add-ons/syncheight/</span>
|
|
2992
|
+
<p>Get the latest version of this plugin on <a href="https://github.com/ginader/syncHeight">Github</a>.</p>
|
|
2993
|
+
</div>
|
|
2994
|
+
</div>
|
|
2995
|
+
<div class="ym-g75 ym-gr">
|
|
2996
|
+
<div class="ym-gbox-right">
|
|
2997
|
+
<h4>SyncHeight jQuery Plugin – Implementation</h4>
|
|
2998
|
+
<p>The <em>SyncHeight</em> Plugin for <a href="http://www.jquery.com">jQuery</a> allows you to sync heights between all element, defined by the given jQuery selector. To enable resyncing elements after browser resizing, enable <var>updateOnResize</var> option.</p>
|
|
2999
|
+
<pre class="htmlCode"><body>
|
|
3000
|
+
...
|
|
3001
|
+
<script src="lib/jquery-1.8.3.min.js" type="text/javascript" />
|
|
3002
|
+
<script src="yaml/add-ons/syncheight/jquery.syncheight.js" type="text/javascript" />
|
|
3003
|
+
</body></pre>
|
|
3004
|
+
<pre class="jsCode">$(document).ready(function(){
|
|
3005
|
+
$('.container-a, .container-b').syncHeight({ updateOnResize: true });
|
|
3006
|
+
});</pre>
|
|
3007
|
+
</div>
|
|
3008
|
+
</div>
|
|
3009
|
+
</div>
|
|
3010
|
+
|
|
3011
|
+
<div class="ym-grid linearize-level-1">
|
|
3012
|
+
<div class="ym-g25 ym-gl">
|
|
3013
|
+
<div class="ym-gbox-left">
|
|
3014
|
+
<h3>RTL Support</h3>
|
|
3015
|
+
<span class="label">yaml/add-ons/rtl-support/</span>
|
|
3016
|
+
</div>
|
|
3017
|
+
</div>
|
|
3018
|
+
<div class="ym-g75 ym-gr">
|
|
3019
|
+
<div class="ym-gbox-right">
|
|
3020
|
+
<!-- Inhalt linker Block -->
|
|
3021
|
+
<h4>Handling Hebrew or Arabic languages</h4>
|
|
3022
|
+
|
|
3023
|
+
<p>This add-on provides all the relevant components for working with YAML in Hebrew or Arabic languages whose text flows from right to left. </p>
|
|
3024
|
+
<p>The plugin's files are in the folder <em>yaml/add-ons/rtl-support/</em>. Within that folder are the subfolders <em>core/</em> with the adjustments of the core file of the framework: <em>base-rtl.css</em>. The folder <em>screen/</em> contains typograhpy adjustments in<em> typography-rtl.css</em> and in folder <em>navigation/</em> you will find appropriate ajdustments-files for YAML navigations. </p>
|
|
3025
|
+
<h4>Basic Principles </h4>
|
|
3026
|
+
<p>The support of <em>right-to-left</em> languages comes from special stylesheets which overwrite existing CSS rules to control text direction and content positioning. These stylesheets thus only contain incremental changes and include the suffix <strong>-rtl</strong> in the filename: the adjustments necessary for the file <em>base.css</em> are found in the file <em>base-rtl.css</em>. </p>
|
|
3027
|
+
<p>The activation of the changed text flow from right to left takes two steps. The first step is to change the text direction with the dir attribute of the <code><head></code> element of the page: <code><head dir="rtl"></code>. The second step is to merely link the RTL stylesheets into your layout. Within the <em>base-rtl.css</em>, the CSS property <code>direction: rtl;</code> is assigned again to the <code><body></code> element.</p>
|
|
3028
|
+
<pre class="htmlCode"><html lang="{language-code}" dir="rtl">
|
|
3029
|
+
...
|
|
3030
|
+
</hmtl></pre>
|
|
3031
|
+
<p>Along with the text direction, many other CSS properties must be changed -- margins, indentations, etc., to present the text correctly. </p>
|
|
3032
|
+
<h4>Implementation</h4>
|
|
3033
|
+
<p>The corresopnding central stylesheet always links the normal YAML components first and then the RTL variation to overwrite them. </p>
|
|
3034
|
+
<pre class="cssCode">/* import core styles | Basis-Stylesheets einbinden */
|
|
3035
|
+
@import url(../yaml/core/base.css);
|
|
3036
|
+
<strong>@import url(../yaml/add-ons/rtl-support/core/base-rtl.css);</strong>
|
|
3037
|
+
...</pre>
|
|
3038
|
+
<p>This is the best and most simple way for rapid prototyping. For production environments we recommend to combine both stylesheets to reduce the amount of HTTP requests.
|
|
3039
|
+
</p>
|
|
3040
|
+
</div>
|
|
3041
|
+
</div>
|
|
3042
|
+
</div>
|
|
3043
|
+
|
|
3044
|
+
<div class="ym-grid linearize-level-1">
|
|
3045
|
+
<div class="ym-g25 ym-gl">
|
|
3046
|
+
<div class="ym-gbox-left">
|
|
3047
|
+
<h3>Microformats</h3>
|
|
3048
|
+
<span class="label">yaml/add-ons/microformats/</span>
|
|
3049
|
+
<p>Microformats are small bits of HTML that represent things like people, events, tags, etc. in web pages. </p>
|
|
3050
|
+
<p>Microformats enable the publishing of higher fidelity information on the Web, providing the fastest and simplest way to support feeds and APIs for your website. See more explanations of <a href="http://microformats.org/wiki/what-are-microformats" title="what-are-microformats">what microformats are</a> and <a href="http://microformats.org/wiki/what-can-you-do-with-microformats" title="what-can-you-do-with-microformats">what you can do with them</a>. </p>
|
|
3051
|
+
<h5>Microformats Generators</h5>
|
|
3052
|
+
<ul>
|
|
3053
|
+
<li><a href="http://microformats.org/code/hcard/creator">hCard creator</a></li>
|
|
3054
|
+
<li><a href="http://microformats.org/code/hcalendar/creator">hCalendar creator</a></li>
|
|
3055
|
+
<li><a href="http://microformats.org/code/hreview/creator">hReview creator</a></li>
|
|
3056
|
+
<li><a href="http://gmpg.org/xfn/creator">XFN creator</a></li>
|
|
3057
|
+
</ul>
|
|
3058
|
+
<p>Read more on <a href="http://microformats.org">microformats.org.</a></p>
|
|
3059
|
+
</div>
|
|
3060
|
+
</div>
|
|
3061
|
+
<div class="ym-g75 ym-gr">
|
|
3062
|
+
<div class="ym-gbox-right">
|
|
3063
|
+
<h4>Most Common Microformats</h4>
|
|
3064
|
+
<h5>Contact example (hCard)</h5>
|
|
3065
|
+
<div class="jquery_tabs">
|
|
3066
|
+
<h5>Draft Preview</h5>
|
|
3067
|
+
<div class="tab-content">
|
|
3068
|
+
<div class="vcard"> <a class="fn org url" href="http://www.commerce.net/">CommerceNet</a>
|
|
3069
|
+
<div class="adr"> <span class="type">Work</span>:
|
|
3070
|
+
<div class="street-address">169 University Avenue</div>
|
|
3071
|
+
<span class="locality">Palo Alto</span>, <abbr class="region" title="California">CA</abbr> <span class="postal-code">94301</span>
|
|
3072
|
+
<div class="country-name">USA</div>
|
|
3073
|
+
</div>
|
|
3074
|
+
<div class="tel"> <span class="type">Tel (work):</span> +1-650-289-4040 </div>
|
|
3075
|
+
<div class="tel"> <span class="type">Fax:</span> +1-650-289-4041 </div>
|
|
3076
|
+
<div>E-Mail: <span class="email">info@commerce.net</span> </div>
|
|
3077
|
+
</div>
|
|
3078
|
+
</div>
|
|
3079
|
+
<h5>Default Markup</h5>
|
|
3080
|
+
<div class="tab-content">
|
|
3081
|
+
<pre class="htmlCode">
|
|
3082
|
+
<div class="vcard">
|
|
3083
|
+
<a class="fn org url" href="http://www.commerce.net/">CommerceNet</a>
|
|
3084
|
+
<div class="adr">
|
|
3085
|
+
<span class="type">Work</span>:
|
|
3086
|
+
<div class="street-address">169 University Avenue</div>
|
|
3087
|
+
<span class="locality">Palo Alto</span>,
|
|
3088
|
+
<abbr class="region" title="California">CA</abbr>
|
|
3089
|
+
<span class="postal-code">94301</span>
|
|
3090
|
+
<div class="country-name">USA</div>
|
|
3091
|
+
</div>
|
|
3092
|
+
<div class="tel"> <span class="type">Tel (work):</span> +1-650-289-4040 </div>
|
|
3093
|
+
<div class="tel"> <span class="type">Fax:</span> +1-650-289-4041 </div>
|
|
3094
|
+
<div>E-Mail: <span class="email">info@commerce.net</span> </div>
|
|
3095
|
+
</div></pre>
|
|
3096
|
+
</div>
|
|
3097
|
+
</div>
|
|
3098
|
+
<h5>Event examples (hCalendar)</h5>
|
|
3099
|
+
|
|
3100
|
+
<div class="jquery_tabs">
|
|
3101
|
+
<h5>Draft Preview</h5>
|
|
3102
|
+
<div class="tab-content">
|
|
3103
|
+
<div class="vevent">
|
|
3104
|
+
<a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a>
|
|
3105
|
+
<span class="summary">Web 2.0 Conference</span>
|
|
3106
|
+
<abbr class="dtstart" title="2007-10-05">October 5</abbr>-
|
|
3107
|
+
<abbr class="dtend" title="2007-10-20">19</abbr>, at the
|
|
3108
|
+
<span class="location">Argent Hotel, San Francisco, CA</span>
|
|
3109
|
+
</div>
|
|
3110
|
+
</div>
|
|
3111
|
+
<h5>Default Markup</h5>
|
|
3112
|
+
<div class="tab-content">
|
|
3113
|
+
<pre class="htmlCode">
|
|
3114
|
+
<div class="vevent">
|
|
3115
|
+
<a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a>
|
|
3116
|
+
<span class="summary">Web 2.0 Conference</span>
|
|
3117
|
+
<abbr class="dtstart" title="2007-10-05">October 5</abbr>- <abbr class="dtend" title="2007-10-20">19</abbr>, at the
|
|
3118
|
+
<span class="location">Argent Hotel, San Francisco, CA</span>
|
|
3119
|
+
</div>
|
|
3120
|
+
</pre>
|
|
3121
|
+
</div>
|
|
3122
|
+
</div>
|
|
3123
|
+
|
|
3124
|
+
<div class="jquery_tabs">
|
|
3125
|
+
<h5>Draft Preview</h5>
|
|
3126
|
+
<div class="tab-content">
|
|
3127
|
+
<div class="vevent">
|
|
3128
|
+
<h3 class="summary">XYZ Project Review</h3>
|
|
3129
|
+
<p class="description">Project XYZ Review Meeting</p>
|
|
3130
|
+
<p>To be held on <abbr class="dtstart" title="1998-03-12T08:30:00-05:00">12 March 1998 from 8:30am EST</abbr> until <abbr class="dtend" title="1998-03-12T09:30:00-05:00">9:30am EST</abbr></p>
|
|
3131
|
+
<p>Location: <span class="location">1CP Conference Room 4350</span></p>
|
|
3132
|
+
<small>Booked by: <span class="uid">guid-1.host1.com</span> on <abbr class="dtstamp" title="19980309T231000Z">9 Mar 1998 6:00pm</abbr></small>
|
|
3133
|
+
</div>
|
|
3134
|
+
</div>
|
|
3135
|
+
<h5>Default Markup</h5>
|
|
3136
|
+
<div class="tab-content">
|
|
3137
|
+
<pre class="htmlCode">
|
|
3138
|
+
<div class="vevent">
|
|
3139
|
+
<a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a>
|
|
3140
|
+
<span class="summary">Web 2.0 Conference</span>
|
|
3141
|
+
<abbr class="dtstart" title="2007-10-05">October 5</abbr>- <abbr class="dtend" title="2007-10-20">19</abbr>, at the
|
|
3142
|
+
<span class="location">Argent Hotel, San Francisco, CA</span>
|
|
3143
|
+
</div>
|
|
3144
|
+
<div class="vevent">
|
|
3145
|
+
<h3 class="summary">XYZ Project Review</h3>
|
|
3146
|
+
<p class="description">Project XYZ Review Meeting</p>
|
|
3147
|
+
<p>To be held on <abbr class="dtstart" title="1998-03-12T08:30:00-05:00">12 March 1998 from 8:30am EST</abbr> until <abbr class="dtend" title="1998-03-12T09:30:00-05:00">9:30am EST</abbr></p>
|
|
3148
|
+
<p>Location: <span class="location">1CP Conference Room 4350</span></p>
|
|
3149
|
+
<small>Booked by: <span class="uid">guid-1.host1.com</span> on <abbr class="dtstamp" title="19980309T231000Z">9 Mar 1998 6:00pm</abbr></small>
|
|
3150
|
+
</div></pre>
|
|
3151
|
+
</div>
|
|
3152
|
+
</div>
|
|
3153
|
+
|
|
3154
|
+
<h5>rel-Tag</h5>
|
|
3155
|
+
<div class="jquery_tabs">
|
|
3156
|
+
<h5>Draft Preview</h5>
|
|
3157
|
+
<div class="tab-content">
|
|
3158
|
+
<p class="tags">
|
|
3159
|
+
<span lang="en" xml:lang="en">Tags</span>:
|
|
3160
|
+
<a href="http://www.mister-wong.de/tags/best-practise/" rel="tag">Best Practice</a>,
|
|
3161
|
+
<a href="http://www.mister-wong.de/tags/webdesign/" rel="tag">Webstandards</a>
|
|
3162
|
+
</p>
|
|
3163
|
+
</div>
|
|
3164
|
+
<h5>Default Markup</h5>
|
|
3165
|
+
<div class="tab-content">
|
|
3166
|
+
<pre class="htmlCode"><p class="tags"><br> <span lang="en" xml:lang="en">Tags</span>: <br> <a href="http://www.mister-wong.de/tags/best-practise/" rel="tag">Best Practice</a>,
|
|
3167
|
+
<a href="http://www.mister-wong.de/tags/webdesign/" rel="tag">Webstandards</a>
|
|
3168
|
+
</p></pre>
|
|
3169
|
+
</div>
|
|
3170
|
+
</div>
|
|
3171
|
+
|
|
3172
|
+
<h5>XFN</h5>
|
|
3173
|
+
<div class="jquery_tabs">
|
|
3174
|
+
<h5>Draft Preview</h5>
|
|
3175
|
+
<div class="tab-content">
|
|
3176
|
+
<ul>
|
|
3177
|
+
<li><a href="http://www.metafilter.com/" class="xfnRelationship" rel="me">Me</a></li>
|
|
3178
|
+
<li><a href="http://jane-blog.example.org/" class="xfnRelationship" rel="sweetheart date met">Jane</a></li>
|
|
3179
|
+
<li><a href="http://dave-blog.example.org/" class="xfnRelationship" rel="friend met">Dave</a></li>
|
|
3180
|
+
<li><a href="http://darryl-blog.example.org/" class="xfnRelationship" rel="friend met">Darryl</a></li>
|
|
3181
|
+
<li><a href="http://james-blog.example.com/" class="xfnRelationship" rel="met">James Expert</a></li>
|
|
3182
|
+
</ul>
|
|
3183
|
+
</div>
|
|
3184
|
+
<h5>Default Markup</h5>
|
|
3185
|
+
<div class="tab-content">
|
|
3186
|
+
<pre class="htmlCode"><ul>
|
|
3187
|
+
<li><a href="http://www.metafilter.com/" class="xfnRelationship" rel="me">Me</a></li>
|
|
3188
|
+
<li><a href="http://jane-blog.example.org/" class="xfnRelationship" rel="sweetheart date met">Jane</a></li>
|
|
3189
|
+
<li><a href="http://dave-blog.example.org/" class="xfnRelationship" rel="friend met">Dave</a></li>
|
|
3190
|
+
<li><a href="http://darryl-blog.example.org/" class="xfnRelationship" rel="friend met">Darryl</a></li>
|
|
3191
|
+
<li><a href="http://james-blog.example.com/" class="xfnRelationship" rel="met">James Expert</a></li>
|
|
3192
|
+
</ul></pre>
|
|
3193
|
+
</div>
|
|
3194
|
+
</div>
|
|
3195
|
+
|
|
3196
|
+
<h4>Geo</h4>
|
|
3197
|
+
<div class="jquery_tabs">
|
|
3198
|
+
<h5>Draft Preview</h5>
|
|
3199
|
+
<div class="tab-content">
|
|
3200
|
+
<p>Photo taken at <abbr title="-33.890937;151.281985" class="geo">North Bondi</abbr>.</p>
|
|
3201
|
+
</div>
|
|
3202
|
+
<h5>Default Markup</h5>
|
|
3203
|
+
<div class="tab-content">
|
|
3204
|
+
<pre class="htmlCode"><p>Photo taken at <abbr title="-33.890937;151.281985" class="geo">North Bondi</abbr>.</p></pre>
|
|
3205
|
+
</div>
|
|
3206
|
+
</div>
|
|
3207
|
+
</div>
|
|
3208
|
+
</div>
|
|
3209
|
+
</div>
|
|
3210
|
+
|
|
3211
|
+
<h2 id="yaml-sass" tabindex="-1">Sass <span class="label">sass/yaml-sass/</span></h2>
|
|
3212
|
+
<div class="ym-grid linearize-level-1">
|
|
3213
|
+
<div class="ym-g25 ym-gl">
|
|
3214
|
+
<div class="ym-gbox-left">
|
|
3215
|
+
<h3>Github</h3>
|
|
3216
|
+
<p>YAML4 is available on <a href="https://github.com/yamlcss/yaml">Github</a>.
|
|
3217
|
+
</p>
|
|
3218
|
+
</div>
|
|
3219
|
+
</div>
|
|
3220
|
+
<div class="ym-g75 ym-gr">
|
|
3221
|
+
<div class="ym-gbox-right">
|
|
3222
|
+
<h3>Introduction</h3>
|
|
3223
|
+
<p>YAML is completely developed using <a href="http://sass-lang.com/">Sass</a> and provides a static CSS version of the framework as well as a highly customizeable Sass port. The project structure of the Sass port is almost is identical to the <em>static</em> version of YAML. All CSS files in the <em>yaml-sass</em> folder, as well as the css files for the YAML docs are created dynamically with Sass.</p>
|
|
3224
|
+
<p>Therefore you can easily include YAML in your Sass project as well as create a custom <em>static</em> builds of YAML for a standard CSS project.</p>
|
|
3225
|
+
</div>
|
|
3226
|
+
</div>
|
|
3227
|
+
</div>
|
|
3228
|
+
<div class="ym-grid linearize-level-1">
|
|
3229
|
+
<div class="ym-g25 ym-gl">
|
|
3230
|
+
<div class="ym-gbox-left">
|
|
3231
|
+
<h3>YAML Configuration</h3>
|
|
3232
|
+
<span class="label">sass/yaml-sass/_yaml-var-globals.scss</span>
|
|
3233
|
+
</div>
|
|
3234
|
+
</div>
|
|
3235
|
+
<div class="ym-g75 ym-gr">
|
|
3236
|
+
<div class="ym-gbox-right">
|
|
3237
|
+
<!-- Inhalt linker Block -->
|
|
3238
|
+
<h4>Base Module Config</h4>
|
|
3239
|
+
<table>
|
|
3240
|
+
<thead>
|
|
3241
|
+
<tr>
|
|
3242
|
+
<th>Variable</th>
|
|
3243
|
+
<th>Description</th>
|
|
3244
|
+
<th>Default</th>
|
|
3245
|
+
</tr>
|
|
3246
|
+
</thead>
|
|
3247
|
+
<tbody>
|
|
3248
|
+
<tr>
|
|
3249
|
+
<td>$ym-base-normalization</td>
|
|
3250
|
+
<td>Normalization Module</td>
|
|
3251
|
+
<td>true</td>
|
|
3252
|
+
</tr>
|
|
3253
|
+
<tr>
|
|
3254
|
+
<td>$ym-base-floathandling</td>
|
|
3255
|
+
<td>Float Handling Module</td>
|
|
3256
|
+
<td>true</td>
|
|
3257
|
+
</tr>
|
|
3258
|
+
<tr>
|
|
3259
|
+
<td>$ym-base-columns</td>
|
|
3260
|
+
<td>Columns Module</td>
|
|
3261
|
+
<td>true</td>
|
|
3262
|
+
</tr>
|
|
3263
|
+
<tr>
|
|
3264
|
+
<td>$ym-base-grids</td>
|
|
3265
|
+
<td>Grids Module</td>
|
|
3266
|
+
<td>true</td>
|
|
3267
|
+
</tr>
|
|
3268
|
+
<tr>
|
|
3269
|
+
<td>$ym-base-forms</td>
|
|
3270
|
+
<td>Forms Module</td>
|
|
3271
|
+
<td>true</td>
|
|
3272
|
+
</tr>
|
|
3273
|
+
<tr>
|
|
3274
|
+
<td>$ym-base-accessibility</td>
|
|
3275
|
+
<td>Accessibility Module</td>
|
|
3276
|
+
<td>true</td>
|
|
3277
|
+
</tr>
|
|
3278
|
+
<tr>
|
|
3279
|
+
<td>$ym-base-print</td>
|
|
3280
|
+
<td>Basic Print Styles</td>
|
|
3281
|
+
<td>true</td>
|
|
3282
|
+
</tr>
|
|
3283
|
+
</tbody>
|
|
3284
|
+
</table>
|
|
3285
|
+
<h4>Columms Module Config</h4>
|
|
3286
|
+
<table>
|
|
3287
|
+
<thead>
|
|
3288
|
+
<tr>
|
|
3289
|
+
<th>Variable</th>
|
|
3290
|
+
<th>Description</th>
|
|
3291
|
+
<th>Default</th>
|
|
3292
|
+
</tr>
|
|
3293
|
+
</thead>
|
|
3294
|
+
<tbody>
|
|
3295
|
+
<tr>
|
|
3296
|
+
<td>$ym-column-width</td>
|
|
3297
|
+
<td>Default column width for <code>.ym-col1</code> and <code>.ym-col2</code></td>
|
|
3298
|
+
<td>20%</td>
|
|
3299
|
+
</tr>
|
|
3300
|
+
<tr>
|
|
3301
|
+
<td>$ym-cbox-padding</td>
|
|
3302
|
+
<td>Default column content (<code>.ym-cbox[-left|-right]</code>) padding</td>
|
|
3303
|
+
<td>10px</td>
|
|
3304
|
+
</tr>
|
|
3305
|
+
</tbody>
|
|
3306
|
+
</table>
|
|
3307
|
+
<h4>Grids Module Config</h4>
|
|
3308
|
+
<table>
|
|
3309
|
+
<thead>
|
|
3310
|
+
<tr>
|
|
3311
|
+
<th>Variable</th>
|
|
3312
|
+
<th>Description</th>
|
|
3313
|
+
<th>Default</th>
|
|
3314
|
+
</tr>
|
|
3315
|
+
</thead>
|
|
3316
|
+
<tbody>
|
|
3317
|
+
<tr>
|
|
3318
|
+
<td>$ym-rounding-tolerance</td>
|
|
3319
|
+
<td>Default value for negative left margin of <code>.ym-gr</code> to compensate rounding errors</td>
|
|
3320
|
+
<td>-5px</td>
|
|
3321
|
+
</tr>
|
|
3322
|
+
<tr>
|
|
3323
|
+
<td>$ym-gbox-padding</td>
|
|
3324
|
+
<td>Default grid content (<code>.ym-gbox[-left|-right]</code>) padding</td>
|
|
3325
|
+
<td>10px</td>
|
|
3326
|
+
</tr>
|
|
3327
|
+
</tbody>
|
|
3328
|
+
</table>
|
|
3329
|
+
<h4>Print Module Config</h4>
|
|
3330
|
+
<table>
|
|
3331
|
+
<thead>
|
|
3332
|
+
<tr>
|
|
3333
|
+
<th>Variable</th>
|
|
3334
|
+
<th>Description</th>
|
|
3335
|
+
<th>Default</th>
|
|
3336
|
+
</tr>
|
|
3337
|
+
</thead>
|
|
3338
|
+
<tbody>
|
|
3339
|
+
<tr>
|
|
3340
|
+
<td>$ym-print-fontsize</td>
|
|
3341
|
+
<td>Default text font-size for print media</td>
|
|
3342
|
+
<td>10pt</td>
|
|
3343
|
+
</tr>
|
|
3344
|
+
<tr>
|
|
3345
|
+
<td>$ym-print-abbreviation</td>
|
|
3346
|
+
<td>Enable abbreviation titles to be shown in print layout</td>
|
|
3347
|
+
<td>false</td>
|
|
3348
|
+
</tr>
|
|
3349
|
+
<tr>
|
|
3350
|
+
<td>$ym-print-href</td>
|
|
3351
|
+
<td>Enable URLs to be shown in print layout</td>
|
|
3352
|
+
<td>false</td>
|
|
3353
|
+
</tr>
|
|
3354
|
+
</tbody>
|
|
3355
|
+
</table>
|
|
3356
|
+
</div>
|
|
3357
|
+
</div>
|
|
3358
|
+
</div>
|
|
3359
|
+
<div class="ym-grid linearize-level-1">
|
|
3360
|
+
<div class="ym-g25 ym-gl">
|
|
3361
|
+
<div class="ym-gbox-left">
|
|
3362
|
+
<h3>Typography Settings</h3>
|
|
3363
|
+
<span class="label">sass/yaml-sass/_yaml-var-typography.scss</span> </div>
|
|
3364
|
+
</div>
|
|
3365
|
+
<div class="ym-g75 ym-gr">
|
|
3366
|
+
<div class="ym-gbox-right">
|
|
3367
|
+
<h4>Fonts</h4>
|
|
3368
|
+
<table>
|
|
3369
|
+
<thead>
|
|
3370
|
+
<tr>
|
|
3371
|
+
<th>Variable</th>
|
|
3372
|
+
<th>Description</th>
|
|
3373
|
+
<th>Default</th>
|
|
3374
|
+
</tr>
|
|
3375
|
+
</thead>
|
|
3376
|
+
<tbody>
|
|
3377
|
+
<tr>
|
|
3378
|
+
<td>$font-sans</td>
|
|
3379
|
+
<td>Default sans-serif font family</td>
|
|
3380
|
+
<td>"Droid Sans", Arial, ...</td>
|
|
3381
|
+
</tr>
|
|
3382
|
+
<tr>
|
|
3383
|
+
<td>$font-serif</td>
|
|
3384
|
+
<td>Default serif font family</td>
|
|
3385
|
+
<td>"Droid Serif", Arial, ...</td>
|
|
3386
|
+
</tr>
|
|
3387
|
+
<tr>
|
|
3388
|
+
<td>$font-monospace</td>
|
|
3389
|
+
<td>Default monospace font family</td>
|
|
3390
|
+
<td>Consolas, ...</td>
|
|
3391
|
+
</tr>
|
|
3392
|
+
</tbody>
|
|
3393
|
+
</table>
|
|
3394
|
+
<h4>Colors</h4>
|
|
3395
|
+
<table>
|
|
3396
|
+
<thead>
|
|
3397
|
+
<tr>
|
|
3398
|
+
<th>Variable</th>
|
|
3399
|
+
<th class="ym-g20">Default</th>
|
|
3400
|
+
</tr>
|
|
3401
|
+
</thead>
|
|
3402
|
+
<tbody>
|
|
3403
|
+
<tr>
|
|
3404
|
+
<th colspan="2" class="info">standard text colors</th>
|
|
3405
|
+
</tr>
|
|
3406
|
+
<tr>
|
|
3407
|
+
<td>$text-color</td>
|
|
3408
|
+
<td>#444</td>
|
|
3409
|
+
</tr>
|
|
3410
|
+
<tr>
|
|
3411
|
+
<td>$headings-color</td>
|
|
3412
|
+
<td>#161e21</td>
|
|
3413
|
+
</tr>
|
|
3414
|
+
<tr>
|
|
3415
|
+
<td>$blockquote-text-color</td>
|
|
3416
|
+
<td>#666</td>
|
|
3417
|
+
</tr>
|
|
3418
|
+
<tr>
|
|
3419
|
+
<td>$blockquote-bg-color</td>
|
|
3420
|
+
<td>transparent</td>
|
|
3421
|
+
</tr>
|
|
3422
|
+
<tr>
|
|
3423
|
+
<td>$pre-text-color</td>
|
|
3424
|
+
<td>#800</td>
|
|
3425
|
+
</tr>
|
|
3426
|
+
<tr>
|
|
3427
|
+
<td>$kbd-text-color</td>
|
|
3428
|
+
<td>#666</td>
|
|
3429
|
+
</tr>
|
|
3430
|
+
<tr>
|
|
3431
|
+
<td>$mark-text-color</td>
|
|
3432
|
+
<td>#000</td>
|
|
3433
|
+
</tr>
|
|
3434
|
+
<tr>
|
|
3435
|
+
<td>$mark-bg-color</td>
|
|
3436
|
+
<td>#ff0</td>
|
|
3437
|
+
</tr>
|
|
3438
|
+
<tr>
|
|
3439
|
+
<th colspan="2" class="info">highlight colors</th>
|
|
3440
|
+
</tr>
|
|
3441
|
+
<tr>
|
|
3442
|
+
<td>$highlight-info-color</td>
|
|
3443
|
+
<td>#f4f4f4</td>
|
|
3444
|
+
</tr>
|
|
3445
|
+
<tr>
|
|
3446
|
+
<td>$highlight-success-color</td>
|
|
3447
|
+
<td>#666</td>
|
|
3448
|
+
</tr>
|
|
3449
|
+
<tr>
|
|
3450
|
+
<td>$highlight-warning-color</td>
|
|
3451
|
+
<td>#000</td>
|
|
3452
|
+
</tr>
|
|
3453
|
+
<tr>
|
|
3454
|
+
<td>$highlight-error-color</td>
|
|
3455
|
+
<td>#ff0</td>
|
|
3456
|
+
</tr>
|
|
3457
|
+
<tr>
|
|
3458
|
+
<th colspan="2" class="info">link colors</th>
|
|
3459
|
+
</tr>
|
|
3460
|
+
<tr>
|
|
3461
|
+
<td>$link-text-color</td>
|
|
3462
|
+
<td>#4d87c7</td>
|
|
3463
|
+
</tr>
|
|
3464
|
+
<tr>
|
|
3465
|
+
<td>$link-bg-color</td>
|
|
3466
|
+
<td>transparent</td>
|
|
3467
|
+
</tr>
|
|
3468
|
+
<tr>
|
|
3469
|
+
<td>$link-focus-text-color</td>
|
|
3470
|
+
<td>#fff</td>
|
|
3471
|
+
</tr>
|
|
3472
|
+
<tr>
|
|
3473
|
+
<td>$link-focus-bg-color</td>
|
|
3474
|
+
<td>#4d87c7</td>
|
|
3475
|
+
</tr>
|
|
3476
|
+
<tr>
|
|
3477
|
+
<th colspan="2" class="info">special colors</th>
|
|
3478
|
+
</tr>
|
|
3479
|
+
<tr>
|
|
3480
|
+
<td>$hr-color</td>
|
|
3481
|
+
<td>#eee</td>
|
|
3482
|
+
</tr>
|
|
3483
|
+
<tr>
|
|
3484
|
+
<td>$highlight-text-color</td>
|
|
3485
|
+
<td>#c30</td>
|
|
3486
|
+
</tr>
|
|
3487
|
+
<tr>
|
|
3488
|
+
<td>$dimmed-text-color</td>
|
|
3489
|
+
<td>#888</td>
|
|
3490
|
+
</tr>
|
|
3491
|
+
</tbody>
|
|
3492
|
+
</table>
|
|
3493
|
+
<h4>Vertical Rhythm</h4>
|
|
3494
|
+
<p>All values have to be defined as integer values, but are internally interpreted as [px] values. Vertical rhythm is generated by utilizing [em] units to allow font-scaling.</p>
|
|
3495
|
+
<table>
|
|
3496
|
+
<thead>
|
|
3497
|
+
<tr>
|
|
3498
|
+
<th>Variable</th>
|
|
3499
|
+
<th>Description</th>
|
|
3500
|
+
<th>Default</th>
|
|
3501
|
+
</tr>
|
|
3502
|
+
</thead>
|
|
3503
|
+
<tbody>
|
|
3504
|
+
<tr>
|
|
3505
|
+
<td>$browser-default-font-size</td>
|
|
3506
|
+
<td>Browser default font size (don't change unless you know what you do!)</td>
|
|
3507
|
+
<td>16</td>
|
|
3508
|
+
</tr>
|
|
3509
|
+
<tr>
|
|
3510
|
+
<td>$base-font-size</td>
|
|
3511
|
+
<td>Default text font-size</td>
|
|
3512
|
+
<td>14</td>
|
|
3513
|
+
</tr>
|
|
3514
|
+
<tr>
|
|
3515
|
+
<td>$base-line-height</td>
|
|
3516
|
+
<td>Default line-height</td>
|
|
3517
|
+
<td>21</td>
|
|
3518
|
+
</tr>
|
|
3519
|
+
<tr>
|
|
3520
|
+
<td>$h1-font-size</td>
|
|
3521
|
+
<td>Heading level 1 font size</td>
|
|
3522
|
+
<td>49</td>
|
|
3523
|
+
</tr>
|
|
3524
|
+
<tr>
|
|
3525
|
+
<td>$h2-font-size</td>
|
|
3526
|
+
<td>Heading level 2 font size</td>
|
|
3527
|
+
<td>35</td>
|
|
3528
|
+
</tr>
|
|
3529
|
+
<tr>
|
|
3530
|
+
<td>$h3-font-size</td>
|
|
3531
|
+
<td>Heading level 3 font size</td>
|
|
3532
|
+
<td>24</td>
|
|
3533
|
+
</tr>
|
|
3534
|
+
<tr>
|
|
3535
|
+
<td>$h4-font-size</td>
|
|
3536
|
+
<td>Heading level 4 font size</td>
|
|
3537
|
+
<td>21</td>
|
|
3538
|
+
</tr>
|
|
3539
|
+
<tr>
|
|
3540
|
+
<td>$h5-font-size</td>
|
|
3541
|
+
<td>Heading level 5 font size</td>
|
|
3542
|
+
<td>18</td>
|
|
3543
|
+
</tr>
|
|
3544
|
+
<tr>
|
|
3545
|
+
<td>$h6-font-size</td>
|
|
3546
|
+
<td>Heading level 6 font size</td>
|
|
3547
|
+
<td>14</td>
|
|
3548
|
+
</tr>
|
|
3549
|
+
<tr>
|
|
3550
|
+
<td>$h6-font-size</td>
|
|
3551
|
+
<td>Heading level 6 font size</td>
|
|
3552
|
+
<td>14</td>
|
|
3553
|
+
</tr>
|
|
3554
|
+
<tr>
|
|
3555
|
+
<td>$text-big-font-size</td>
|
|
3556
|
+
<td><big> element font size</td>
|
|
3557
|
+
<td>16</td>
|
|
3558
|
+
</tr>
|
|
3559
|
+
<tr>
|
|
3560
|
+
<td>$text-small-font-size</td>
|
|
3561
|
+
<td><small> element font size</td>
|
|
3562
|
+
<td>12</td>
|
|
3563
|
+
</tr>
|
|
3564
|
+
</tbody>
|
|
3565
|
+
</table>
|
|
3566
|
+
</div>
|
|
3567
|
+
</div>
|
|
3568
|
+
</div>
|
|
3569
|
+
<div class="ym-grid linearize-level-1">
|
|
3570
|
+
<div class="ym-g25 ym-gl">
|
|
3571
|
+
<div class="ym-gbox-left">
|
|
3572
|
+
<h3>YAML Mixins</h3>
|
|
3573
|
+
</div>
|
|
3574
|
+
</div>
|
|
3575
|
+
<div class="ym-g75 ym-gr">
|
|
3576
|
+
<div class="ym-gbox-right">
|
|
3577
|
+
<h3>Introduction</h3>
|
|
3578
|
+
<span class="label">sass/yaml-sass/mixins/_yaml-mixins-core.scss</span>
|
|
3579
|
+
<p>The YAML mixins collection contains several reusable and configurable code-snippets (called mixins). To use them within
|
|
3580
|
+
your Sass project, you have to include the mixin collection into your scss files.
|
|
3581
|
+
<p>
|
|
3582
|
+
<pre class="cssCode">
|
|
3583
|
+
@import "./mixins/yaml_mixins_core";
|
|
3584
|
+
...
|
|
3585
|
+
</pre>
|
|
3586
|
+
<!-- Inhalt linker Block -->
|
|
3587
|
+
<h4>Useful Code-Snippets</h4>
|
|
3588
|
+
<table>
|
|
3589
|
+
<thead>
|
|
3590
|
+
<tr>
|
|
3591
|
+
<th>Mixin</th>
|
|
3592
|
+
<th>Description</th>
|
|
3593
|
+
</tr>
|
|
3594
|
+
</thead>
|
|
3595
|
+
<tbody>
|
|
3596
|
+
<tr>
|
|
3597
|
+
<td>ym-clearfix()</td>
|
|
3598
|
+
<td><p>YAMLs clearfix mixin:</p>
|
|
3599
|
+
<pre class="cssCode">
|
|
3600
|
+
.wrapper {
|
|
3601
|
+
@include ym-clearfix();
|
|
3602
|
+
}</pre>
|
|
3603
|
+
</td>
|
|
3604
|
+
</tr>
|
|
3605
|
+
<tr>
|
|
3606
|
+
<td>ym-contain()</td>
|
|
3607
|
+
<td><p>Configurable mixin for containing floats:</p>
|
|
3608
|
+
<pre class="cssCode">
|
|
3609
|
+
.container {
|
|
3610
|
+
@include ym-contain([dt|oh|fl]);
|
|
3611
|
+
}</pre>
|
|
3612
|
+
<ul>
|
|
3613
|
+
<li><strong>dt</strong>: float containing using CSS property "display:table"</li>
|
|
3614
|
+
<li><strong>oh</strong>: float containing using CSS property "overflow:hidden"</li>
|
|
3615
|
+
<li><strong>fl</strong>: float containing using CSS property "float:left"</li>
|
|
3616
|
+
</ul>
|
|
3617
|
+
</td>
|
|
3618
|
+
</tr>
|
|
3619
|
+
<tr>
|
|
3620
|
+
<td>ym-box-sizing()</td>
|
|
3621
|
+
<td><p>Set the prefered box modell</p>
|
|
3622
|
+
<pre class="cssCode">
|
|
3623
|
+
.container {
|
|
3624
|
+
@include ym-box-sizing([content-box|border-box]);
|
|
3625
|
+
}</pre>
|
|
3626
|
+
<ul>
|
|
3627
|
+
<li><strong>content-box</strong> - classic CSS2 box modell (width, padding and border add up to element width)</li>
|
|
3628
|
+
<li><strong>border-box</strong> - alternate CSS3 box modell (padding and border values don't add to element width)</li>
|
|
3629
|
+
</ul>
|
|
3630
|
+
</td>
|
|
3631
|
+
</tr>
|
|
3632
|
+
<tr>
|
|
3633
|
+
<td>ym-box-shadow()</td>
|
|
3634
|
+
<td>
|
|
3635
|
+
<pre class="cssCode">
|
|
3636
|
+
.container {
|
|
3637
|
+
@include ym-box-shadow($x, $y, $blur, $color, $inset);
|
|
3638
|
+
}</pre>
|
|
3639
|
+
<table class="bordertable">
|
|
3640
|
+
<thead>
|
|
3641
|
+
<tr>
|
|
3642
|
+
<th>Argument</th>
|
|
3643
|
+
<th>Description</th>
|
|
3644
|
+
</tr>
|
|
3645
|
+
</thead>
|
|
3646
|
+
<tbody>
|
|
3647
|
+
<tr>
|
|
3648
|
+
<th>$x</th>
|
|
3649
|
+
<td>shadow offset in x-direction</td>
|
|
3650
|
+
</tr>
|
|
3651
|
+
<tr>
|
|
3652
|
+
<th>$y</th>
|
|
3653
|
+
<td>shadow offset in y-direction</td>
|
|
3654
|
+
</tr>
|
|
3655
|
+
<tr>
|
|
3656
|
+
<th>$blur</th>
|
|
3657
|
+
<td>blur value</td>
|
|
3658
|
+
</tr>
|
|
3659
|
+
<tr>
|
|
3660
|
+
<th>$color</th>
|
|
3661
|
+
<td>valid rgb, hsl or hex value</td>
|
|
3662
|
+
</tr>
|
|
3663
|
+
<tr>
|
|
3664
|
+
<th>$inset (default: false)</th>
|
|
3665
|
+
<td>set to <code>true</code> to create an inset shadow</td>
|
|
3666
|
+
</tr>
|
|
3667
|
+
</tbody>
|
|
3668
|
+
</table>
|
|
3669
|
+
</td>
|
|
3670
|
+
</tr>
|
|
3671
|
+
|
|
3672
|
+
<tr>
|
|
3673
|
+
<td>ym-linear-gradient()</td>
|
|
3674
|
+
<td><p>Create linear gradients using CSS3.</p>
|
|
3675
|
+
<pre class="cssCode">
|
|
3676
|
+
.container {
|
|
3677
|
+
@include ym-linear-gradient(direction, start-color, end-color [, config]);
|
|
3678
|
+
}</pre>
|
|
3679
|
+
<table class="bordertable">
|
|
3680
|
+
<thead>
|
|
3681
|
+
<tr>
|
|
3682
|
+
<th>Argument</th>
|
|
3683
|
+
<th>Description</th>
|
|
3684
|
+
</tr>
|
|
3685
|
+
</thead>
|
|
3686
|
+
<tbody>
|
|
3687
|
+
<tr>
|
|
3688
|
+
<th>direction</th>
|
|
3689
|
+
<td>Set gradient direction: allowed values are <code>"to bottom"</code> and <code>"to right"</code>.</td>
|
|
3690
|
+
</tr>
|
|
3691
|
+
<tr>
|
|
3692
|
+
<th>start-color</th>
|
|
3693
|
+
<td>Valid rgb, hsl or hex value (default: <code>#eee</code>)</td>
|
|
3694
|
+
</tr>
|
|
3695
|
+
<tr>
|
|
3696
|
+
<th>end-color</th>
|
|
3697
|
+
<td>Valid rgb, hsl or hex value (default: <code>#ccc</code>)</td>
|
|
3698
|
+
</tr>
|
|
3699
|
+
<tr>
|
|
3700
|
+
<th>config (optional)</th>
|
|
3701
|
+
<td>Use "css3" to output values for modern browsers only or use "oldie" to output IE6-8 compatible filter property only</td>
|
|
3702
|
+
</tr>
|
|
3703
|
+
</tbody>
|
|
3704
|
+
</table>
|
|
3705
|
+
</td>
|
|
3706
|
+
</tr>
|
|
3707
|
+
</tbody>
|
|
3708
|
+
</table>
|
|
3709
|
+
<h4>Progressive Linearization</h4>
|
|
3710
|
+
<table>
|
|
3711
|
+
<thead>
|
|
3712
|
+
<tr>
|
|
3713
|
+
<th>Mixin</th>
|
|
3714
|
+
<th>Description</th>
|
|
3715
|
+
</tr>
|
|
3716
|
+
</thead>
|
|
3717
|
+
<tbody>
|
|
3718
|
+
<tr>
|
|
3719
|
+
<td>ym-linearize-grids()</td>
|
|
3720
|
+
<td><p>Linearization code for grids module</p>
|
|
3721
|
+
<pre class="cssCode">
|
|
3722
|
+
.linearize-level-1 {
|
|
3723
|
+
@include ym-linearize-grids();
|
|
3724
|
+
}</pre></td>
|
|
3725
|
+
</tr>
|
|
3726
|
+
<tr>
|
|
3727
|
+
<td>ym-linearize-columns()</td>
|
|
3728
|
+
<td><p>Linearization code for columns module</p>
|
|
3729
|
+
<pre class="cssCode">
|
|
3730
|
+
.linearize-level-1 {
|
|
3731
|
+
@include ym-linearize-columns();
|
|
3732
|
+
}</pre></td>
|
|
3733
|
+
</tr>
|
|
3734
|
+
<tr>
|
|
3735
|
+
<td>ym-linearize-grids-and-columns()</td>
|
|
3736
|
+
<td><p>Combined linearization code for columns and grids modules</p>
|
|
3737
|
+
<pre class="cssCode">
|
|
3738
|
+
.linearize-level-1 {
|
|
3739
|
+
@include ym-linearize-grids-and-colums();
|
|
3740
|
+
}</pre></td>
|
|
3741
|
+
</tr>
|
|
3742
|
+
<tr>
|
|
3743
|
+
<td>ym-linearize-forms()</td>
|
|
3744
|
+
<td><p>Linearization code for form module</p>
|
|
3745
|
+
<pre class="cssCode">
|
|
3746
|
+
.linearize-level-1 {
|
|
3747
|
+
@include ym-linearize-forms();
|
|
3748
|
+
}</pre></td>
|
|
3749
|
+
</tr>
|
|
3750
|
+
</tbody>
|
|
3751
|
+
</table>
|
|
3752
|
+
<h4>Custom Grids Generator</h4>
|
|
3753
|
+
<table>
|
|
3754
|
+
<thead>
|
|
3755
|
+
<tr>
|
|
3756
|
+
<th>Mixin</th>
|
|
3757
|
+
<th>Description</th>
|
|
3758
|
+
</tr>
|
|
3759
|
+
</thead>
|
|
3760
|
+
<tbody>
|
|
3761
|
+
<tr>
|
|
3762
|
+
<td class="nowrap">ym-custom-grid([arguments])</td>
|
|
3763
|
+
<td><p>Generates classes for column widths as well as push- and pull-classes. It expects the following arguments (in this order):</p>
|
|
3764
|
+
<table class="bordertable">
|
|
3765
|
+
<thead>
|
|
3766
|
+
<tr>
|
|
3767
|
+
<th>Argument</th>
|
|
3768
|
+
<th>Description</th>
|
|
3769
|
+
</tr>
|
|
3770
|
+
</thead>
|
|
3771
|
+
<tbody>
|
|
3772
|
+
<tr>
|
|
3773
|
+
<th>$prefix</th>
|
|
3774
|
+
<td>optional namespace prefix</td>
|
|
3775
|
+
</tr>
|
|
3776
|
+
<tr>
|
|
3777
|
+
<th>$columns</th>
|
|
3778
|
+
<td>amount of columns</td>
|
|
3779
|
+
</tr>
|
|
3780
|
+
<tr>
|
|
3781
|
+
<th>$width</th>
|
|
3782
|
+
<td>column width</td>
|
|
3783
|
+
</tr>
|
|
3784
|
+
<tr>
|
|
3785
|
+
<th>$margin-left</th>
|
|
3786
|
+
<td>optional left-aligned gutter</td>
|
|
3787
|
+
</tr>
|
|
3788
|
+
<tr>
|
|
3789
|
+
<th>$margin-right</th>
|
|
3790
|
+
<td>optional right-aligned gutter</td>
|
|
3791
|
+
</tr>
|
|
3792
|
+
</tbody>
|
|
3793
|
+
</table>
|
|
3794
|
+
<p>Example:</p>
|
|
3795
|
+
<pre class="cssCode">
|
|
3796
|
+
/* 960.gs port for YAML: 960px - 16 columns */
|
|
3797
|
+
@include ym-custom-grid("grid",16, 960px, 10px, 10px);
|
|
3798
|
+
</pre></td>
|
|
3799
|
+
</tr>
|
|
3800
|
+
</tbody>
|
|
3801
|
+
</table>
|
|
3802
|
+
</div>
|
|
3803
|
+
</div>
|
|
3804
|
+
</div>
|
|
3805
|
+
</div>
|
|
3806
|
+
</div>
|
|
3807
|
+
</div>
|
|
3808
|
+
</div>
|
|
3809
|
+
<footer role="contentinfo">
|
|
3810
|
+
<div class="ym-wrapper">
|
|
3811
|
+
<div class="ym-wbox">
|
|
3812
|
+
<div class="ym-grid linearize-level-2">
|
|
3813
|
+
<div class="ym-g66 ym-gl">
|
|
3814
|
+
<div class="ym-gbox-left">
|
|
3815
|
+
<p>© 2005 – 2013 by Dirk Jesse, <a href="http://www.highresolution.info">Highresolution.info</a><br>
|
|
3816
|
+
Code and Documentation licensed under <a href="http://creativecommons.org/licenses/by/2.0/">CC BY 2.0</a>.</p>
|
|
3817
|
+
<p><a href="../imprint.html">Imprint</a> | <a href="http://shop.yaml.de">YAML-Shop</a> administrated by <a href="http://www.itratos.de">Itratos</a></p>
|
|
3818
|
+
</div>
|
|
3819
|
+
</div>
|
|
3820
|
+
<div class="ym-g33 ym-gr">
|
|
3821
|
+
<div class="ym-gbox-right">
|
|
3822
|
+
<p><a href="https://twitter.com/yamlcss" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @yamlcss</a>
|
|
3823
|
+
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
|
|
3824
|
+
<a href="https://plus.google.com/+yaml?prsrc=3" style="text-decoration:none;"><img src="https://ssl.gstatic.com/images/icons/gplus-32.png" alt="" style="border:0;width:32px;height:32px;"/></a></p>
|
|
3825
|
+
<p>Layout based on <a href="http://www.yaml.de">YAML</a></p>
|
|
3826
|
+
</div>
|
|
3827
|
+
</div>
|
|
3828
|
+
</div>
|
|
3829
|
+
</div>
|
|
3830
|
+
</div>
|
|
3831
|
+
</footer>
|
|
3832
|
+
|
|
3833
|
+
<!-- full skip link functionality in webkit browsers -->
|
|
3834
|
+
<script src="../yaml/core/js/yaml-focusfix.js"></script>
|
|
3835
|
+
|
|
3836
|
+
<!-- jQuery & Plugins -->
|
|
3837
|
+
<script src="../lib/jquery-1.10.1.min.js"></script>
|
|
3838
|
+
<script src="../lib/jquery-migrate-1.2.1.min.js"></script>
|
|
3839
|
+
<script src="./assets/js/snippet/jquery.snippet.js"></script>
|
|
3840
|
+
<script src="./assets/js/jquery.gridbuilder.js"></script>
|
|
3841
|
+
<script src="../yaml/add-ons/accessible-tabs/jquery.tabs.js"></script>
|
|
3842
|
+
<script src="../yaml/add-ons/syncheight/jquery.syncheight.js"></script>
|
|
3843
|
+
<script src="./assets/js/domscript.js"></script>
|
|
3844
|
+
</body>
|
|
3845
|
+
</html>
|