diff --git a/css/jquery.uls.css b/css/jquery.uls.css index 6c895eb0..0bb11cc0 100644 --- a/css/jquery.uls.css +++ b/css/jquery.uls.css @@ -37,7 +37,7 @@ } /* Override the grid */ -.uls-medium.grid .row { +.uls-medium.uls-grid .uls-row { min-width: 300px; } @@ -47,7 +47,7 @@ } /* Override the grid */ -.uls-narrow.grid .row { +.uls-narrow.uls-grid .uls-row { min-width: 150px; } @@ -114,7 +114,7 @@ div.uls-region { border-bottom-color: #DDD; } -.grid .uls-search { +.uls-grid .uls-search { padding-left: 0; } diff --git a/css/jquery.uls.grid.css b/css/jquery.uls.grid.css index 9caf088c..1501d3e0 100644 --- a/css/jquery.uls.grid.css +++ b/css/jquery.uls.grid.css @@ -1,254 +1,254 @@ /* Generated using Foundation http://foundation.zurb.com/docs/grid.php */ /* Global Reset & Standards ---------------------- */ -.grid * { +.uls-grid * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* Misc ---------------------- */ -.grid .left { +.uls-grid .uls-left { float: left; } -.grid .right { +.uls-grid .uls-right { float: right; } -.grid .text-left { +.uls-grid .uls-text-left { text-align: left; } -.grid .text-right { +.uls-grid .uls-text-right { text-align: right; } -.grid .text-center { +.uls-grid .uls-text-center { text-align: center; } -.grid .hide { +.uls-grid .uls-hide { display: none; } -.grid .highlight { +.uls-grid .uls-highlight { background: #ffff99; } /* The Grid ---------------------- */ -.grid .row { +.uls-grid .uls-row { width: 100%; max-width: none; min-width: 600px; margin: 0 auto; } -.grid .row .row { +.uls-grid .uls-row .uls-row { width: auto; max-width: none; min-width: 0; margin: 0 -5px; } -.grid .row.collapse .column, -.grid .row.collapse .columns { +.uls-grid .uls-row.uls-collapse .uls-column, +.uls-grid .uls-row.uls-collapse .uls-columns { padding: 0; } -.grid .row .row { +.uls-grid .uls-row .uls-row { width: auto; max-width: none; min-width: 0; margin: 0 -5px; } -.grid .row .row.collapse { +.uls-grid .uls-row .uls-row.uls-collapse { margin: 0; } -.grid .column, .grid .columns { +.uls-grid .uls-column, .uls-grid .uls-columns { float: left; min-height: 1px; padding: 0 5px; position: relative; } -.grid .column.centered, .grid .columns.centered { +.uls-grid .uls-column.uls-centered, .uls-grid .uls-columns.uls-centered { float: none; margin: 0 auto; } -.grid .row .one { +.uls-grid .uls-row .uls-one { width: 8.333%; } -.grid .row .two { +.uls-grid .uls-row .uls-two { width: 16.667%; } -.grid .row .three { +.uls-grid .uls-row .uls-three { width: 25%; } -.grid .row .four { +.uls-grid .uls-row .uls-four { width: 33.333%; } -.grid .row .five { +.uls-grid .uls-row .uls-five { width: 41.667%; } -.grid .row .six { +.uls-grid .uls-row .uls-six { width: 50%; } -.grid .row .seven { +.uls-grid .uls-row .uls-seven { width: 58.333%; } -.grid .row .eight { +.uls-grid .uls-row .uls-eight { width: 66.667%; } -.grid .row .nine { +.uls-grid .uls-row .uls-nine { width: 75%; } -.grid .row .ten { +.uls-grid .uls-row .uls-ten { width: 83.333%; } -.grid .row .eleven { +.uls-grid .uls-row .uls-eleven { width: 91.667%; } -.grid .row .twelve { +.uls-grid .uls-row .uls-twelve { width: 100%; } -.grid .row .offset-by-one { +.uls-grid .uls-row .uls-offset-by-one { margin-left: 8.333%; } -.grid .row .offset-by-two { +.uls-grid .uls-row .uls-offset-by-two { margin-left: 16.667%; } -.grid .row .offset-by-three { +.uls-grid .uls-row .uls-offset-by-three { margin-left: 25%; } -.grid .row .offset-by-four { +.uls-grid .uls-row .uls-offset-by-four { margin-left: 33.333%; } -.grid .row .offset-by-five { +.uls-grid .uls-row .uls-offset-by-five { margin-left: 41.667%; } -.grid .row .offset-by-six { +.uls-grid .uls-row .uls-offset-by-six { margin-left: 50%; } -.grid .row .offset-by-seven { +.uls-grid .uls-row .uls-offset-by-seven { margin-left: 58.333%; } -.grid .row .offset-by-eight { +.uls-grid .uls-row .uls-offset-by-eight { margin-left: 66.667%; } -.grid .row .offset-by-nine { +.uls-grid .uls-row .uls-offset-by-nine { margin-left: 75%; } -.grid .row .offset-by-ten { +.uls-grid .uls-row .uls-offset-by-ten { margin-left: 83.333%; } -.grid .push-two { +.uls-grid .uls-push-two { left: 16.667%; } -.grid .pull-two { +.uls-grid .uls-pull-two { right: 16.667%; } -.grid .push-three { +.uls-grid .uls-push-three { left: 25%; } -.grid .pull-three { +.uls-grid .uls-pull-three { right: 25%; } -.grid .push-four { +.uls-grid .uls-push-four { left: 33.333%; } -.grid .pull-four { +.uls-grid .uls-pull-four { right: 33.333%; } -.grid .push-five { +.uls-grid .uls-push-five { left: 41.667%; } -.grid .pull-five { +.uls-grid .uls-pull-five { right: 41.667%; } -.grid .push-six { +.uls-grid .uls-push-six { left: 50%; } -.grid .pull-six { +.uls-grid .uls-pull-six { right: 50%; } -.grid .push-seven { +.uls-grid .uls-push-seven { left: 58.333%; } -.grid .pull-seven { +.uls-grid .uls-pull-seven { right: 58.333%; } -.grid .push-eight { +.uls-grid .uls-push-eight { left: 66.667%; } -.grid .pull-eight { +.uls-grid .uls-pull-eight { right: 66.667%; } -.grid .push-nine { +.uls-grid .uls-push-nine { left: 75%; } -.grid .pull-nine { +.uls-grid .uls-pull-nine { right: 75%; } -.grid .push-ten { +.uls-grid .uls-push-ten { left: 83.333%; } -.grid .pull-ten { +.uls-grid .uls-pull-ten { right: 83.333%; } /* Nicolas Gallagher's micro clearfix */ -.grid .row { +.uls-grid .uls-row { *zoom: 1; } -.grid .row:before, .grid .row:after { +.uls-grid .uls-row:before, .uls-grid .uls-row:after { content: ""; display: table; } -.grid .row:after { +.uls-grid .uls-row:after { clear: both; } @@ -263,53 +263,53 @@ lines below to support arbitrary height, but know that IE7/8 do not support :nth-child. -------------------------------------------------- */ -.grid .block-grid { +.uls-grid .uls-block-grid { display: block; overflow: hidden; padding: 0; } -.grid .block-grid > li { +.uls-grid .uls-block-grid > li { display: block; height: auto; float: left; } -.grid .block-grid.two-up { +.uls-grid .uls-block-grid.uls-two-up { margin: 0 -15px; } -.grid .block-grid.two-up > li { +.uls-grid .uls-block-grid.uls-two-up > li { width: 50%; padding: 0 15px 15px; } -/* .block-grid.two-up>li:nth-child(2n+1) {clear: left;} */ -.grid .block-grid.three-up { +/* .uls-block-grid.uls-two-up>li:nth-child(2n+1) {clear: left;} */ +.uls-grid .uls-block-grid.uls-three-up { margin: 0 -12px; } -.grid .block-grid.three-up > li { +.uls-grid .uls-block-grid.uls-three-up > li { width: 33.33%; padding: 0 12px 12px; } -/* .block-grid.three-up>li:nth-child(3n+1) {clear: left;} */ -.grid .block-grid.four-up { +/* .uls-block-grid.uls-three-up>li:nth-child(3n+1) {clear: left;} */ +.uls-grid .uls-block-grid.uls-four-up { margin: 0 -10px; } -.grid .block-grid.four-up > li { +.uls-grid .uls-block-grid.uls-four-up > li { width: 25%; padding: 0 10px 10px; } -/* .block-grid.four-up>li:nth-child(4n+1) {clear: left;} */ -.grid .block-grid.five-up { +/* .uls-block-grid.four-up>li:nth-child(4n+1) {clear: left;} */ +.uls-grid .uls-block-grid.uls-five-up { margin: 0 -8px; } -.grid .block-grid.five-up > li { +.uls-grid .uls-block-grid.uls-five-up > li { width: 20%; padding: 0 8px 8px; } diff --git a/css/jquery.uls.mobile.css b/css/jquery.uls.mobile.css index 18d6fe05..61b64afa 100644 --- a/css/jquery.uls.mobile.css +++ b/css/jquery.uls.mobile.css @@ -27,288 +27,288 @@ float: left !important; } - .uls-mobile .row { + .uls-mobile .uls-row { width: auto; min-width: 0; margin-left: 0; margin-right: 0; } - .uls-mobile .column, - .uls-mobile .columns { + .uls-mobile .uls-column, + .uls-mobile .uls-columns { width: auto !important; float: none; } - .uls-mobile .column:last-child, - .uls-mobile .columns:last-child { + .uls-mobile .uls-column:last-child, + .uls-mobile .uls-columns:last-child { float: none; } - .uls-mobile [class*="column"] + [class*="column"]:last-child { + .uls-mobile [class*="uls-column"] + [class*="uls-column"]:last-child { float: none; } - .uls-mobile .column:before, - .uls-mobile .uls-mobile .columns:before, - .uls-mobile .column:after, - .columns:after { + .uls-mobile .uls-column:before, + .uls-mobile .uls-mobile .uls-columns:before, + .uls-mobile .uls-column:after, + .uls-columns:after { content: ""; display: table; } - .uls-mobile .column:after, - .uls-mobile .columns:after { + .uls-mobile .uls-column:after, + .uls-mobile .uls-columns:after { clear: both; } - .uls-mobile .offset-by-one, - .uls-mobile .offset-by-two, - .uls-mobile .offset-by-three, - .uls-mobile .offset-by-four, - .uls-mobile .offset-by-five, - .uls-mobile .offset-by-six, - .uls-mobile .offset-by-seven, - .uls-mobile .offset-by-eight, - .uls-mobile .offset-by-nine, - .uls-mobile .offset-by-ten { + .uls-mobile .uls-offset-by-one, + .uls-mobile .uls-offset-by-two, + .uls-mobile .uls-offset-by-three, + .uls-mobile .uls-offset-by-four, + .uls-mobile .uls-offset-by-five, + .uls-mobile .uls-offset-by-six, + .uls-mobile .uls-offset-by-seven, + .uls-mobile .uls-offset-by-eight, + .uls-mobile .uls-offset-by-nine, + .uls-mobile .uls-offset-by-ten { margin-left: 0 !important; } - .uls-mobile .push-two, - .uls-mobile .push-three, - .uls-mobile .push-four, - .uls-mobile .push-five, - .uls-mobile .push-six, - .uls-mobile .push-seven, - .uls-mobile .push-eight, - .uls-mobile .push-nine, - .uls-mobile .push-ten { + .uls-mobile .uls-push-two, + .uls-mobile .uls-push-three, + .uls-mobile .uls-push-four, + .uls-mobile .uls-push-five, + .uls-mobile .uls-push-six, + .uls-mobile .uls-push-seven, + .uls-mobile .uls-push-eight, + .uls-mobile .uls-push-nine, + .uls-mobile .uls-push-ten { left: auto; } - .uls-mobile .pull-two, - .uls-mobile .pull-three, - .uls-mobile .pull-four, - .uls-mobile .pull-five, - .uls-mobile .pull-six, - .uls-mobile .pull-seven, - .uls-mobile .pull-eight, - .uls-mobile .pull-nine, - .uls-mobile .pull-ten { + .uls-mobile .uls-pull-two, + .uls-mobile .uls-pull-three, + .uls-mobile .uls-pull-four, + .uls-mobile .uls-pull-five, + .uls-mobile .uls-pull-six, + .uls-mobile .uls-pull-seven, + .uls-mobile .uls-pull-eight, + .uls-mobile .uls-pull-nine, + .uls-mobile .uls-pull-ten { right: auto; } /* Mobile 4-column Grid */ - .uls-mobile .row .mobile-one { + .uls-mobile .uls-row .uls-mobile-one { width: 25% !important; float: left; padding: 0 4px; } - .uls-mobile .row .mobile-one:last-child { + .uls-mobile .uls-row .uls-mobile-one:last-child { float: right; } - .uls-mobile .row.collapse .mobile-one { + .uls-mobile .uls-row.collapse .uls-mobile-one { padding: 0; } - .uls-mobile .row .mobile-two { + .uls-mobile .uls-row .uls-mobile-two { width: 50% !important; float: left; padding: 0 4px; } - .uls-mobile .row .mobile-two:last-child { + .uls-mobile .uls-row .uls-mobile-two:last-child { float: right; } - .uls-mobile .row.collapse .mobile-two { + .uls-mobile .uls-row.collapse .uls-mobile-two { padding: 0; } - .uls-mobile .row .mobile-three { + .uls-mobile .uls-row .uls-mobile-three { width: 75% !important; float: left; padding: 0 4px; } - .uls-mobile .row .mobile-three:last-child { + .uls-mobile .uls-row .uls-mobile-three:last-child { float: right; } - .uls-mobile .row.collapse .mobile-three { + .uls-mobile .uls-row.collapse .uls-mobile-three { padding: 0; } - .uls-mobile .row .mobile-four { + .uls-mobile .uls-row .uls-mobile-four { width: 100% !important; float: left; padding: 0 4px; } - .uls-mobile .row .mobile-four:last-child { + .uls-mobile .uls-row .uls-mobile-four:last-child { float: right; } - .uls-mobile .row.collapse .mobile-four { + .uls-mobile .uls-row.collapse .uls-mobile-four { padding: 0; } - .uls-mobile .push-one-mobile { + .uls-mobile .uls-push-one-mobile { left: 25%; } - .uls-mobile .pull-one-mobile { + .uls-mobile .uls-pull-one-mobile { right: 25%; } - .uls-mobile .push-two-mobile { + .uls-mobile .uls-push-two-mobile { left: 50%; } - .uls-mobile .pull-two-mobile { + .uls-mobile .uls-pull-two-mobile { right: 50%; } - .uls-mobile .push-three-mobile { + .uls-mobile .uls-push-three-mobile { left: 75%; } - .uls-mobile .pull-three-mobile { + .uls-mobile .uls-pull-three-mobile { right: 75%; } } /* Visibility Classes ---------------------- */ /* Standard (large) display targeting */ -.uls-mobile .show-for-small, -.uls-mobile .show-for-medium, -.uls-mobile .show-for-medium-down, -.uls-mobile .hide-for-large, -.uls-mobile .hide-for-large-up, -.uls-mobile .show-for-xlarge { +.uls-mobile .uls-show-for-small, +.uls-mobile .uls-show-for-medium, +.uls-mobile .uls-show-for-medium-down, +.uls-mobile .uls-hide-for-large, +.uls-mobile .uls-hide-for-large-up, +.uls-mobile .uls-show-for-xlarge { display: none !important; } -.uls-mobile .hide-for-xlarge, -.uls-mobile .show-for-large, -.uls-mobile .show-for-large-up, -.uls-mobile .hide-for-small, -.uls-mobile .hide-for-medium, -.uls-mobile .hide-for-medium-down { +.uls-mobile .uls-hide-for-xlarge, +.uls-mobile .uls-show-for-large, +.uls-mobile .uls-show-for-large-up, +.uls-mobile .uls-hide-for-small, +.uls-mobile .uls-hide-for-medium, +.uls-mobile .uls-hide-for-medium-down { display: block !important; } /* Very large display targeting */ @media only screen and (min-width: 1441px) { - .uls-mobile .hide-for-small, - .uls-mobile .hide-for-medium, - .uls-mobile .hide-for-medium-down, - .hide-for-large, .show-for-large-up, - .show-for-xlarge { + .uls-mobile .uls-hide-for-small, + .uls-mobile .uls-hide-for-medium, + .uls-mobile .uls-hide-for-medium-down, + .uls-hide-for-large, .uls-show-for-large-up, + .uls-show-for-xlarge { display: block !important; } - .show-for-small, - .uls-mobile .show-for-medium, - .uls-mobile .show-for-medium-down, - .uls-mobile .show-for-large, - .uls-mobile .hide-for-large-up, - .uls-mobile .hide-for-xlarge { + .uls-show-for-small, + .uls-mobile .uls-show-for-medium, + .uls-mobile .uls-show-for-medium-down, + .uls-mobile .uls-show-for-large, + .uls-mobile .uls-hide-for-large-up, + .uls-mobile .uls-hide-for-xlarge { display: none !important; } } /* Medium display targeting */ @media only screen and (max-width: 1279px) and (min-width: 768px) { - .uls-mobile .hide-for-small, - .uls-mobile .show-for-medium, - .uls-mobile .show-for-medium-down, - .uls-mobile .hide-for-large, - .uls-mobile .hide-for-large-up, - .uls-mobile .hide-for-xlarge { + .uls-mobile .uls-hide-for-small, + .uls-mobile .uls-show-for-medium, + .uls-mobile .uls-show-for-medium-down, + .uls-mobile .uls-hide-for-large, + .uls-mobile .uls-hide-for-large-up, + .uls-mobile .uls-hide-for-xlarge { display: block !important; } - .uls-mobile .show-for-small, - .uls-mobile .hide-for-medium, - .uls-mobile .hide-for-medium-down, - .uls-mobile .show-for-large, - .uls-mobile .show-for-large-up, - .uls-mobile .show-for-xlarge { + .uls-mobile .uls-show-for-small, + .uls-mobile .uls-hide-for-medium, + .uls-mobile .uls-hide-for-medium-down, + .uls-mobile .uls-show-for-large, + .uls-mobile .uls-show-for-large-up, + .uls-mobile .uls-show-for-xlarge { display: none !important; } } /* Small display targeting */ @media only screen and (max-width: 767px) { - .uls-mobile .show-for-small, - .uls-mobile .hide-for-medium, - .uls-mobile .show-for-medium-down, - .uls-mobile .hide-for-large, - .uls-mobile .hide-for-large-up, - .uls-mobile .hide-for-xlarge { + .uls-mobile .uls-show-for-small, + .uls-mobile .uls-hide-for-medium, + .uls-mobile .uls-show-for-medium-down, + .uls-mobile .uls-hide-for-large, + .uls-mobile .uls-hide-for-large-up, + .uls-mobile .uls-hide-for-xlarge { display: block !important; } - .uls-mobile .hide-for-small, - .uls-mobile .show-for-medium, - .uls-mobile .hide-for-medium-down, - .uls-mobile .show-for-large, - .uls-mobile .show-for-large-up, - .uls-mobile .show-for-xlarge { + .uls-mobile .uls-hide-for-small, + .uls-mobile .uls-show-for-medium, + .uls-mobile .uls-hide-for-medium-down, + .uls-mobile .uls-show-for-large, + .uls-mobile .uls-show-for-large-up, + .uls-mobile .uls-show-for-xlarge { display: none !important; } } /* Orientation targeting */ -.uls-mobile .show-for-landscape, -.uls-mobile .hide-for-portrait { +.uls-mobile .uls-show-for-landscape, +.uls-mobile .uls-hide-for-portrait { display: block !important; } -.uls-mobile .hide-for-landscape, -.uls-mobile .show-for-portrait { +.uls-mobile .uls-hide-for-landscape, +.uls-mobile .uls-show-for-portrait { display: none !important; } @media screen and (orientation: landscape) { - .uls-mobile .show-for-landscape, - .uls-mobile .hide-for-portrait { + .uls-mobile .uls-show-for-landscape, + .uls-mobile .uls-hide-for-portrait { display: block !important; } - .uls-mobile .hide-for-landscape, - .uls-mobile .show-for-portrait { + .uls-mobile .uls-hide-for-landscape, + .uls-mobile .uls-show-for-portrait { display: none !important; } } @media screen and (orientation: portrait) { - .uls-mobile .show-for-portrait, - .uls-mobile .hide-for-landscape { + .uls-mobile .uls-show-for-portrait, + .uls-mobile .uls-hide-for-landscape { display: block !important; } - .uls-mobile .hide-for-portrait, - .uls-mobile .show-for-landscape { + .uls-mobile .uls-hide-for-portrait, + .uls-mobile .uls-show-for-landscape { display: none !important; } } /* Touch-enabled device targeting */ -.uls-mobile .show-for-touch { +.uls-mobile .uls-show-for-touch { display: none !important; } -.uls-mobile .hide-for-touch { +.uls-mobile .uls-hide-for-touch { display: block !important; } -.uls-mobile .touch .show-for-touch { +.uls-mobile .uls-touch .uls-show-for-touch { display: block !important; } -.uls-mobile .touch .hide-for-touch { +.uls-mobile .uls-touch .uls-hide-for-touch { display: none !important; } diff --git a/src/jquery.uls.core.js b/src/jquery.uls.core.js index d9ac7a0f..4b640c87 100644 --- a/src/jquery.uls.core.js +++ b/src/jquery.uls.core.js @@ -25,8 +25,8 @@ // Region numbers in id attributes also appear in the langdb. /*jshint multistr:true */ - template = '