Changeset 96416 in spip-zone


Ignore:
Timestamp:
Apr 3, 2016, 3:32:25 PM (3 years ago)
Author:
spip.franck@…
Message:

Remplacement d'espace par des tabs pour être un peu plus conforme avec http://www.spip.net/fr_article3497.html#regles_codage

Location:
_plugins_/foundation/trunk
Files:
27 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/foundation/trunk/boxsizing.htc

    r83161 r96416  
    4545*/
    4646<component lightWeight="true">
    47 <attach event="onpropertychange" onevent="checkPropertyChange()" />
    48 <attach event="ondetach" onevent="restore()" />
    49 <attach event="onresize" for="window" onevent="update()" />
    50 <script type="text/javascript">
    51 //<![CDATA[
    52 
    53 var viewportwidth = (typeof window.innerWidth != 'undefined' ? window.innerWidth : element.document.documentElement.clientWidth);
    54 
    55 // Shortcut for the document object
    56 var doc = element.document;
    57 
    58 // Buffer for multiple resize events
    59 var resizetimeout = null;
    60 
    61 // Don't apply box-sizing to certain elements
    62 var apply = false;
    63 switch(element.nodeName){
    64         case '#comment':
    65         case 'HTML':
    66         case 'HEAD':
    67         case 'TITLE':
    68         case 'SCRIPT':
    69         case 'STYLE':
    70         case 'LINK':
    71         case 'META':
    72         break;
    73                        
    74         default:
    75                 apply = true;
    76         break;
    77 }
    78 
    79 /*
    80 * update gets called during resize events, then waits until there are no further resize events, and finally triggers a recalculation
    81 */
    82 function update(){
    83         if(resizetimeout !== null){
    84                 window.clearTimeout(resizetimeout);
    85         }
    86         resizetimeout = window.setTimeout(function(){
    87                 try{
    88                         restore();
    89                         init();
    90                 }
    91                 catch(e){}
    92                 resizetimeout = null;
    93         },100);
    94 }
    95 
    96 /*
    97 * restore gets called when the behavior is being detached (see event binding at the top),
    98 * resets everything like it was before applying the behavior
    99 */
    100 function restore(){
    101         if(apply){
    102                 try{
    103                         element.runtimeStyle.removeAttribute("width");
    104                         element.runtimeStyle.removeAttribute("height");
    105                 }
    106                 catch(e){}
    107         }
    108 }
    109 
    110 /*
    111 * init gets called once at the start and then never again,
    112 * triggers box-sizing calculations and updates width and height
    113 */
    114 function init(){
    115         if(apply){
    116                 updateBorderBoxWidth();
    117                 updateBorderBoxHeight();
    118         }
    119 }
    120 
    121 /*
    122 * checkPropertyChange gets called as soon as an element property changes
    123 * (see event binding at the top), it then checks if any property influencing its
    124 * dimensions was changed and if yes recalculates width and height
    125 */
    126 function checkPropertyChange(){
    127         if(apply){
    128                 var pn = event.propertyName;
    129                 if(pn === "style.boxSizing" && element.style.boxSizing === ""){
    130                         element.style.removeAttribute("boxSizing");
    131                         element.runtimeStyle.removeAttribute("boxSizing");
    132                         element.runtimeStyle.removeAttribute("width");
    133                         element.runtimeStyle.removeAttribute("height");
    134                 }
    135                 switch (pn){
    136                         case "style.width":
    137                         case "style.minWidth":
    138                         case "style.maxWidth":
    139                         case "style.borderLeftWidth":
    140                         case "style.borderLeftStyle":
    141                         case "style.borderRightWidth":
    142                         case "style.borderRightStyle":
    143                         case "style.paddingLeft":
    144                         case "style.paddingRight":
    145                                 updateBorderBoxWidth();
    146                         break;
     47        <attach event="onpropertychange" onevent="checkPropertyChange()" />
     48        <attach event="ondetach" onevent="restore()" />
     49        <attach event="onresize" for="window" onevent="update()" />
     50        <script type="text/javascript">
     51                //<![CDATA[
     52
     53                        var viewportwidth = (typeof window.innerWidth != 'undefined' ? window.innerWidth : element.document.documentElement.clientWidth);
     54
     55                        // Shortcut for the document object
     56                        var doc = element.document;
     57
     58                        // Buffer for multiple resize events
     59                        var resizetimeout = null;
     60
     61                        // Don't apply box-sizing to certain elements
     62                        var apply = false;
     63                        switch(element.nodeName){
     64                                case '#comment':
     65                                case 'HTML':
     66                                case 'HEAD':
     67                                case 'TITLE':
     68                                case 'SCRIPT':
     69                                case 'STYLE':
     70                                case 'LINK':
     71                                case 'META':
     72                                break;
     73
     74                                default:
     75                                apply = true;
     76                                break;
     77                        }
     78
     79                        /*
     80                        * update gets called during resize events, then waits until there are no further resize events, and finally triggers a recalculation
     81                        */
     82                        function update() {
     83                                if(resizetimeout !== null){
     84                                        window.clearTimeout(resizetimeout);
     85                                }
     86                                resizetimeout = window.setTimeout(function(){
     87                                        try{
     88                                                restore();
     89                                                init();
     90                                        }
     91                                        catch(e){}
     92                                        resizetimeout = null;
     93                                },100);
     94                        }
     95
     96                        /*
     97                        * restore gets called when the behavior is being detached (see event binding at the top),
     98                        * resets everything like it was before applying the behavior
     99                        */
     100                        function restore() {
     101                                if(apply){
     102                                        try{
     103                                                element.runtimeStyle.removeAttribute("width");
     104                                                element.runtimeStyle.removeAttribute("height");
     105                                        }
     106                                        catch(e){}
     107                                }
     108                        }
     109
     110                        /*
     111                        * init gets called once at the start and then never again,
     112                        * triggers box-sizing calculations and updates width and height
     113                        */
     114                        function init() {
     115                                if(apply){
     116                                        updateBorderBoxWidth();
     117                                        updateBorderBoxHeight();
     118                                }
     119                        }
     120
     121                        /*
     122                        * checkPropertyChange gets called as soon as an element property changes
     123                        * (see event binding at the top), it then checks if any property influencing its
     124                        * dimensions was changed and if yes recalculates width and height
     125                        */
     126                        function checkPropertyChange() {
     127                                if(apply){
     128                                        var pn = event.propertyName;
     129                                        if(pn === "style.boxSizing" && element.style.boxSizing === ""){
     130                                                element.style.removeAttribute("boxSizing");
     131                                                element.runtimeStyle.removeAttribute("boxSizing");
     132                                                element.runtimeStyle.removeAttribute("width");
     133                                                element.runtimeStyle.removeAttribute("height");
     134                                        }
     135                                        switch (pn){
     136                                                case "style.width":
     137                                                case "style.minWidth":
     138                                                case "style.maxWidth":
     139                                                case "style.borderLeftWidth":
     140                                                case "style.borderLeftStyle":
     141                                                case "style.borderRightWidth":
     142                                                case "style.borderRightStyle":
     143                                                case "style.paddingLeft":
     144                                                case "style.paddingRight":
     145                                                updateBorderBoxWidth();
     146                                                break;
    147147               
    148                         case "style.height":
    149                         case "style.minHeight":
    150                         case "style.maxHeight":
    151                         case "style.borderTopWidth":
    152                         case "style.borderTopStyle":
    153                         case "style.borderBottomWidth":
    154                         case "style.borderBottomStyle":
    155                         case "style.paddingTop":
    156                         case "style.paddingBottom":
    157                                 updateBorderBoxHeight();
    158                         break;
    159                
    160                         case "className":
    161                         case "style.boxSizing":
    162                                 updateBorderBoxWidth();
    163                                 updateBorderBoxHeight();
    164                         break;
    165                 }
    166         }
    167 }
    168 
    169 /*
    170  * Helper function, taken from Dean Edward's IE7 framework,
    171  * added by Schepp on 12.06.2010.
    172  * http://code.google.com/p/ie7-js/
    173  *
    174  * Allows us to convert from relative to pixel-values.
    175  */
    176 function getPixelValue(value){
    177         var PIXEL = /^\d+(px)?$/i;
    178         if (PIXEL.test(value)) return parseInt(value);
    179         var style = element.style.left;
    180         var runtimeStyle = element.runtimeStyle.left;
    181         element.runtimeStyle.left = element.currentStyle.left;
    182         element.style.left = value || 0;
    183         value = parseInt(element.style.pixelLeft);
    184         element.style.left = style;
    185         element.runtimeStyle.left = runtimeStyle;
    186        
    187         return value;
    188 }
    189 
    190 function getPixelWidth(object, value){
    191         // For Pixel Values
    192         var PIXEL = /^\d+(px)?$/i;
    193         if (PIXEL.test(value)) return parseInt(value);
    194        
    195         // For Percentage Values
    196         var PERCENT = /^[\d\.]+%$/i;
    197         if (PERCENT.test(value)){
    198                 try{
    199                         var parentPaddingLeft = getPixelWidth(object.parentElement,object.parentElement.currentStyle.paddingLeft);
    200                         var parentPaddingRight = getPixelWidth(object.parentElement,object.parentElement.currentStyle.paddingRight);
    201                         var parentBorderLeft = getPixelWidth(object.parentElement,object.parentElement.currentStyle.borderLeft);
    202                         var parentBorderRight = getPixelWidth(object.parentElement,object.parentElement.currentStyle.borderRight);
    203                        
    204                         //var parentWidth = getPixelWidth(object.parentElement,(object.parentElement.currentStyle.width != "auto" ? object.parentElement.currentStyle.width : "100%"));
    205                         var parentWidth = object.parentElement.offsetWidth - parentPaddingLeft - parentPaddingRight - parentBorderLeft - parentBorderRight;
    206                         var value = (parseFloat(value) / 100) * parentWidth;
    207                 }
    208                 catch(e){
    209                         var value = (parseFloat(value) / 100) * element.document.documentElement.clientWidth;
    210                 }
    211                 return parseInt(value);
    212         }
    213        
    214         // For EM Values
    215         var style = object.style.left;
    216         var runtimeStyle = object.runtimeStyle.left;
    217         object.runtimeStyle.left = object.currentStyle.left;
    218         object.style.left = value || 0;
    219         value = parseInt(object.style.pixelLeft);
    220         object.style.left = style;
    221         object.runtimeStyle.left = runtimeStyle;
    222        
    223         return value;
    224 }
    225 
    226 function getPixelHeight(object, value){
    227         // For Pixel Values
    228         var PIXEL = /^\d+(px)?$/i;
    229         if (PIXEL.test(value)) return parseInt(value);
    230        
    231         // For Percentage Values
    232         var PERCENT = /^[\d\.]+%$/i;
    233         if (PERCENT.test(value)){
    234                 try{
    235                         if(object.parentElement.currentStyle.height != "auto"){
    236                                 switch(object.parentElement.nodeName){
    237                                         default:
    238                                                 if(object.parentElement.currentStyle.height !== "auto"){
    239                                                         var parentPaddingTop = getPixelWidth(object.parentElement,object.parentElement.currentStyle.paddingTop);
    240                                                         var parentPaddingBottom = getPixelWidth(object.parentElement,object.parentElement.currentStyle.paddingBottom);
    241                                                         var parentBorderTop = getPixelWidth(object.parentElement,object.parentElement.currentStyle.borderTop);
    242                                                         var parentBorderBottom = getPixelWidth(object.parentElement,object.parentElement.currentStyle.borderBottom);
    243                                                        
    244                                                         var parentHeight = object.parentElement.offsetHeight - parentPaddingTop - parentPaddingBottom - parentBorderTop - parentBorderBottom;
    245                                                         //var parentHeight = getPixelHeight(object.parentElement,object.parentElement.currentStyle.height);
    246 
    247                                                         value = (parseFloat(value) / 100) * parentHeight;
     148                                                case "style.height":
     149                                                case "style.minHeight":
     150                                                case "style.maxHeight":
     151                                                case "style.borderTopWidth":
     152                                                case "style.borderTopStyle":
     153                                                case "style.borderBottomWidth":
     154                                                case "style.borderBottomStyle":
     155                                                case "style.paddingTop":
     156                                                case "style.paddingBottom":
     157                                                updateBorderBoxHeight();
     158                                                break;
     159
     160                                                case "className":
     161                                                case "style.boxSizing":
     162                                                updateBorderBoxWidth();
     163                                                updateBorderBoxHeight();
     164                                                break;
     165                                        }
     166                                }
     167                        }
     168
     169                        /*
     170                        * Helper function, taken from Dean Edward's IE7 framework,
     171                        * added by Schepp on 12.06.2010.
     172                        * http://code.google.com/p/ie7-js/
     173                        *
     174                        * Allows us to convert from relative to pixel-values.
     175                        */
     176                        function getPixelValue(value) {
     177                                var PIXEL = /^\d+(px)?$/i;
     178                                if (PIXEL.test(value)) return parseInt(value);
     179                                var style = element.style.left;
     180                                var runtimeStyle = element.runtimeStyle.left;
     181                                element.runtimeStyle.left = element.currentStyle.left;
     182                                element.style.left = value || 0;
     183                                value = parseInt(element.style.pixelLeft);
     184                                element.style.left = style;
     185                                element.runtimeStyle.left = runtimeStyle;
     186
     187                                return value;
     188                        }
     189
     190                        function getPixelWidth(object, value) {
     191                                // For Pixel Values
     192                                var PIXEL = /^\d+(px)?$/i;
     193                                if (PIXEL.test(value)) return parseInt(value);
     194
     195                                // For Percentage Values
     196                                var PERCENT = /^[\d\.]+%$/i;
     197                                if (PERCENT.test(value)){
     198                                        try{
     199                                                var parentPaddingLeft = getPixelWidth(object.parentElement,object.parentElement.currentStyle.paddingLeft);
     200                                                var parentPaddingRight = getPixelWidth(object.parentElement,object.parentElement.currentStyle.paddingRight);
     201                                                var parentBorderLeft = getPixelWidth(object.parentElement,object.parentElement.currentStyle.borderLeft);
     202                                                var parentBorderRight = getPixelWidth(object.parentElement,object.parentElement.currentStyle.borderRight);
     203
     204                                                //var parentWidth = getPixelWidth(object.parentElement,(object.parentElement.currentStyle.width != "auto" ? object.parentElement.currentStyle.width : "100%"));
     205                                                var parentWidth = object.parentElement.offsetWidth - parentPaddingLeft - parentPaddingRight - parentBorderLeft - parentBorderRight;
     206                                                var value = (parseFloat(value) / 100) * parentWidth;
     207                                        }
     208                                        catch(e){
     209                                                var value = (parseFloat(value) / 100) * element.document.documentElement.clientWidth;
     210                                        }
     211                                        return parseInt(value);
     212                                }
     213
     214                                // For EM Values
     215                                var style = object.style.left;
     216                                var runtimeStyle = object.runtimeStyle.left;
     217                                object.runtimeStyle.left = object.currentStyle.left;
     218                                object.style.left = value || 0;
     219                                value = parseInt(object.style.pixelLeft);
     220                                object.style.left = style;
     221                                object.runtimeStyle.left = runtimeStyle;
     222
     223                                return value;
     224                        }
     225
     226                        function getPixelHeight(object, value) {
     227                                // For Pixel Values
     228                                var PIXEL = /^\d+(px)?$/i;
     229                                if (PIXEL.test(value)) return parseInt(value);
     230
     231                                // For Percentage Values
     232                                var PERCENT = /^[\d\.]+%$/i;
     233                                if (PERCENT.test(value)){
     234                                        try{
     235                                                if(object.parentElement.currentStyle.height != "auto"){
     236                                                        switch(object.parentElement.nodeName){
     237                                                                default:
     238                                                                if(object.parentElement.currentStyle.height !== "auto"){
     239                                                                        var parentPaddingTop = getPixelWidth(object.parentElement,object.parentElement.currentStyle.paddingTop);
     240                                                                        var parentPaddingBottom = getPixelWidth(object.parentElement,object.parentElement.currentStyle.paddingBottom);
     241                                                                        var parentBorderTop = getPixelWidth(object.parentElement,object.parentElement.currentStyle.borderTop);
     242                                                                        var parentBorderBottom = getPixelWidth(object.parentElement,object.parentElement.currentStyle.borderBottom);
     243
     244                                                                        var parentHeight = object.parentElement.offsetHeight - parentPaddingTop - parentPaddingBottom - parentBorderTop - parentBorderBottom;
     245                                                                        //var parentHeight = getPixelHeight(object.parentElement,object.parentElement.currentStyle.height);
     246
     247                                                                        value = (parseFloat(value) / 100) * parentHeight;
     248                                                                }
     249                                                                else {
     250                                                                        value = "auto";
     251                                                                }
     252                                                                break;
     253
     254                                                                case 'HTML':
     255                                                                parentHeight = element.document.documentElement.clientHeight;
     256                                                                if(parentHeight !== "auto"){
     257                                                                        value = (parseFloat(value) / 100) * parentHeight;
     258                                                                }
     259                                                                else {
     260                                                                        value = "auto";
     261                                                                }
     262                                                                break;
     263                                                        }
     264                                                        if(value !== "auto") value = parseInt(value);
    248265                                                }
    249266                                                else {
    250267                                                        value = "auto";
    251268                                                }
    252                                         break;
    253                                        
    254                                         case 'HTML':
    255                                                 parentHeight = element.document.documentElement.clientHeight;
    256                                                 if(parentHeight !== "auto"){
    257                                                         value = (parseFloat(value) / 100) * parentHeight;
    258                                                 }
    259                                                 else {
    260                                                         value = "auto";
    261                                                 }
    262                                         break;
    263                                 }
    264                                 if(value !== "auto") value = parseInt(value);
    265                         }
    266                         else {
    267                                 value = "auto";
    268                         }
    269                 }
    270                 catch(e){
    271                         value = "auto";
    272                 }
    273                 return value;
    274         }
    275        
    276         // For EM Values
    277         var style = object.style.left;
    278         var runtimeStyle = object.runtimeStyle.left;
    279         object.runtimeStyle.left = object.currentStyle.left;
    280         object.style.left = value || 0;
    281         value = parseInt(object.style.pixelLeft);
    282         object.style.left = style;
    283         object.runtimeStyle.left = runtimeStyle;
    284        
    285         return value;
    286 }
    287 
    288 
    289 /*
    290  * getBorderWidth & friends
    291  * Border width getters
    292  */
    293 function getBorderWidth(sSide){
    294         if(element.currentStyle["border" + sSide + "Style"] == "none"){
    295                 return 0;
    296         }
    297         var n = getPixelValue(element.currentStyle["border" + sSide + "Width"]);
    298         return n || 0;
    299 }
    300 function getBorderLeftWidth() { return getBorderWidth("Left"); }
    301 function getBorderRightWidth() { return getBorderWidth("Right"); }
    302 function getBorderTopWidth() { return getBorderWidth("Top"); }
    303 function getBorderBottomWidth() { return getBorderWidth("Bottom"); }
    304 
    305 
    306 /*
    307  * getPadding & friends
    308  * Padding width getters
    309  */
    310 function getPadding(sSide) {
    311         var n = getPixelValue(element.currentStyle["padding" + sSide]);
    312         return n || 0;
    313 }
    314 function getPaddingLeft() { return getPadding("Left"); }
    315 function getPaddingRight() { return getPadding("Right"); }
    316 function getPaddingTop() { return getPadding("Top"); }
    317 function getPaddingBottom() { return getPadding("Bottom"); }
    318 
    319 
    320 
    321 /*
    322  * getBoxSizing
    323  * Get the box-sizing value for the current element
    324  */
    325 function getBoxSizing(){
    326         var s = element.style;
    327         var cs = element.currentStyle
    328         if(typeof s.boxSizing != "undefined" && s.boxSizing != ""){
    329                 return s.boxSizing;
    330         }
    331         if(typeof s["box-sizing"] != "undefined" && s["box-sizing"] != ""){
    332                 return s["box-sizing"];
    333         }
    334         if(typeof cs.boxSizing != "undefined" && cs.boxSizing != ""){
    335                 return cs.boxSizing;
    336         }
    337         if(typeof cs["box-sizing"] != "undefined" && cs["box-sizing"] != ""){
    338                 return cs["box-sizing"];
    339         }
    340         return getDocumentBoxSizing();
    341 }
    342 
    343 
    344 /*
    345  * getDocumentBoxSizing
    346  * Get the default document box sizing (check for quirks mode)
    347  */
    348 function getDocumentBoxSizing(){
    349         if(doc.compatMode === null || doc.compatMode === "BackCompat"){
    350                 return "border-box";
    351         }
    352         return "content-box"
    353 }
    354 
    355 
    356 /*
    357  * setBorderBoxWidth & friends
    358  * Width and height setters
    359  */
    360 function setBorderBoxWidth(n){
    361         element.runtimeStyle.width = Math.max(0, n - getBorderLeftWidth() -
    362                 getPaddingLeft() - getPaddingRight() - getBorderRightWidth()) + "px";
    363 }
    364 function setBorderBoxMinWidth(n){
    365         element.runtimeStyle.minWidth = Math.max(0, n - getBorderLeftWidth() -
    366                 getPaddingLeft() - getPaddingRight() - getBorderRightWidth()) + "px";
    367 }
    368 function setBorderBoxMaxWidth(n){
    369         element.runtimeStyle.maxWidth = Math.max(0, n - getBorderLeftWidth() -
    370                 getPaddingLeft() - getPaddingRight() - getBorderRightWidth()) + "px";
    371 }
    372 function setBorderBoxHeight(n){
    373         element.runtimeStyle.height = Math.max(0, n - getBorderTopWidth() -
    374                 getPaddingTop() - getPaddingBottom() - getBorderBottomWidth()) + "px";
    375 }
    376 function setBorderBoxMinHeight(n){
    377         element.runtimeStyle.minHeight = Math.max(0, n - getBorderTopWidth() -
    378                 getPaddingTop() - getPaddingBottom() - getBorderBottomWidth()) + "px";
    379 }
    380 function setBorderBoxMaxHeight(n){
    381         element.runtimeStyle.maxHeight = Math.max(0, n - getBorderTopWidth() -
    382                 getPaddingTop() - getPaddingBottom() - getBorderBottomWidth()) + "px";
    383 }
    384 function setContentBoxWidth(n){
    385         element.runtimeStyle.width = Math.max(0, n + getBorderLeftWidth() +
    386                 getPaddingLeft() + getPaddingRight() + getBorderRightWidth()) + "px";
    387 }
    388 function setContentBoxMinWidth(n){
    389         element.runtimeStyle.minWidth = Math.max(0, n + getBorderLeftWidth() +
    390                 getPaddingLeft() + getPaddingRight() + getBorderRightWidth()) + "px";
    391 }
    392 function setContentBoxMaxWidth(n){
    393         element.runtimeStyle.maxWidth = Math.max(0, n + getBorderLeftWidth() +
    394                 getPaddingLeft() + getPaddingRight() + getBorderRightWidth()) + "px";
    395 }
    396 function setContentBoxHeight(n){
    397         element.runtimeStyle.height = Math.max(0, n + getBorderTopWidth() +
    398                 getPaddingTop() + getPaddingBottom() + getBorderBottomWidth()) + "px";
    399 }
    400 function setContentBoxMinHeight(n){
    401         element.runtimeStyle.minHeight = Math.max(0, n + getBorderTopWidth() +
    402                 getPaddingTop() + getPaddingBottom() + getBorderBottomWidth()) + "px";
    403 }
    404 function setContentBoxMaxHeight(n){
    405         element.runtimeStyle.maxHeight = Math.max(0, n + getBorderTopWidth() +
    406                 getPaddingTop() + getPaddingBottom() + getBorderBottomWidth()) + "px";
    407 }
    408 
    409 
    410 /*
    411  * updateBorderBoxWidth & updateBorderBoxHeight
    412  *
    413  */
    414 function updateBorderBoxWidth() {
    415         if(getDocumentBoxSizing() == getBoxSizing()){
    416                 return;
    417         }
    418        
    419         var csw = element.currentStyle.width;
    420         if(csw != "auto"){
    421                 csw = getPixelWidth(element,csw);
    422                 if(getBoxSizing() == "border-box"){
    423                         setBorderBoxWidth(parseInt(csw));
    424                 }
    425                 else{
    426                         setContentBoxWidth(parseInt(csw));
    427                 }
    428         }
    429 
    430         csw = element.currentStyle.minWidth;
    431         if(csw != "none"){
    432                 csw = getPixelWidth(element,csw);
    433                 if(getBoxSizing() == "border-box"){
    434                         setBorderBoxMinWidth(parseInt(csw));
    435                 }
    436                 else{
    437                         setContentBoxMinWidth(parseInt(csw));
    438                 }
    439         }
    440 
    441         csw = element.currentStyle.maxWidth;
    442         if(csw != "none"){
    443                 csw = getPixelWidth(element,csw);
    444                 if(getBoxSizing() == "border-box"){
    445                         setBorderBoxMaxWidth(parseInt(csw));
    446                 }
    447                 else{
    448                         setContentBoxMaxWidth(parseInt(csw));
    449                 }
    450         }
    451 }
    452 
    453 function updateBorderBoxHeight() {
    454         if(getDocumentBoxSizing() == getBoxSizing()){
    455                 return;
    456         }
    457        
    458         var csh = element.currentStyle.height;
    459         if(csh != "auto"){
    460                 csh = getPixelHeight(element,csh);
    461                 if(csh !== "auto"){
    462                         if(getBoxSizing() == "border-box"){
    463                                 setBorderBoxHeight(parseInt(csh));
    464                         }
    465                         else{
    466                                 setContentBoxHeight(parseInt(csh));
    467                         }
    468                 }
    469         }
    470 
    471         csh = element.currentStyle.minHeight;
    472         if(csh != "none"){
    473                 csh = getPixelHeight(element,csh);
    474                 if(csh !== "none"){
    475                         if(getBoxSizing() == "border-box"){
    476                                 setBorderBoxMinHeight(parseInt(csh));
    477                         }
    478                         else{
    479                                 setContentBoxMinHeight(parseInt(csh));
    480                         }
    481                 }
    482         }
    483 
    484         csh = element.currentStyle.maxHeight;
    485         if(csh != "none"){
    486                 csh = getPixelHeight(element,csh);
    487                 if(csh !== "none"){
    488                         if(getBoxSizing() == "border-box"){
    489                                 setBorderBoxMaxHeight(parseInt(csh));
    490                         }
    491                         else{
    492                                 setContentBoxMaxHeight(parseInt(csh));
    493                         }
    494                 }
    495         }
    496 }
    497 
    498 
    499 // Run the calculations
    500 init();
    501 
    502 //]]>
    503 </script>
     269                                        }
     270                                        catch(e){
     271                                                value = "auto";
     272                                        }
     273                                        return value;
     274                                }
     275
     276                                // For EM Values
     277                                var style = object.style.left;
     278                                var runtimeStyle = object.runtimeStyle.left;
     279                                object.runtimeStyle.left = object.currentStyle.left;
     280                                object.style.left = value || 0;
     281                                value = parseInt(object.style.pixelLeft);
     282                                object.style.left = style;
     283                                object.runtimeStyle.left = runtimeStyle;
     284
     285                                return value;
     286                        }
     287
     288
     289                        /*
     290                        * getBorderWidth & friends
     291                        * Border width getters
     292                        */
     293                        function getBorderWidth(sSide) {
     294                                if(element.currentStyle["border" + sSide + "Style"] == "none"){
     295                                        return 0;
     296                                }
     297                                var n = getPixelValue(element.currentStyle["border" + sSide + "Width"]);
     298                                return n || 0;
     299                        }
     300                        function getBorderLeftWidth() {
     301                                return getBorderWidth("Left");
     302                        }
     303                        function getBorderRightWidth() {
     304                                return getBorderWidth("Right");
     305                        }
     306                        function getBorderTopWidth() {
     307                                return getBorderWidth("Top");
     308                        }
     309                        function getBorderBottomWidth() {
     310                                return getBorderWidth("Bottom");
     311                        }
     312
     313
     314                        /*
     315                        * getPadding & friends
     316                        * Padding width getters
     317                        */
     318                        function getPadding(sSide) {
     319                                var n = getPixelValue(element.currentStyle["padding" + sSide]);
     320                                return n || 0;
     321                        }
     322                        function getPaddingLeft() {
     323                                return getPadding("Left");
     324                        }
     325                        function getPaddingRight() {
     326                                return getPadding("Right");
     327                        }
     328                        function getPaddingTop() {
     329                                return getPadding("Top");
     330                        }
     331                        function getPaddingBottom() {
     332                                return getPadding("Bottom");
     333                        }
     334
     335
     336
     337                        /*
     338                        * getBoxSizing
     339                        * Get the box-sizing value for the current element
     340                        */
     341                        function getBoxSizing() {
     342                                var s = element.style;
     343                                var cs = element.currentStyle
     344                                if(typeof s.boxSizing != "undefined" && s.boxSizing != ""){
     345                                        return s.boxSizing;
     346                                }
     347                                if(typeof s["box-sizing"] != "undefined" && s["box-sizing"] != ""){
     348                                        return s["box-sizing"];
     349                                }
     350                                if(typeof cs.boxSizing != "undefined" && cs.boxSizing != ""){
     351                                        return cs.boxSizing;
     352                                }
     353                                if(typeof cs["box-sizing"] != "undefined" && cs["box-sizing"] != ""){
     354                                        return cs["box-sizing"];
     355                                }
     356                                return getDocumentBoxSizing();
     357                        }
     358
     359
     360                        /*
     361                        * getDocumentBoxSizing
     362                        * Get the default document box sizing (check for quirks mode)
     363                        */
     364                        function getDocumentBoxSizing() {
     365                                if(doc.compatMode === null || doc.compatMode === "BackCompat"){
     366                                        return "border-box";
     367                                }
     368                                return "content-box"
     369                        }
     370
     371
     372                        /*
     373                        * setBorderBoxWidth & friends
     374                        * Width and height setters
     375                        */
     376                        function setBorderBoxWidth(n) {
     377                                element.runtimeStyle.width = Math.max(0, n - getBorderLeftWidth() -
     378                                getPaddingLeft() - getPaddingRight() - getBorderRightWidth()) + "px";
     379                        }
     380                        function setBorderBoxMinWidth(n) {
     381                                element.runtimeStyle.minWidth = Math.max(0, n - getBorderLeftWidth() -
     382                                getPaddingLeft() - getPaddingRight() - getBorderRightWidth()) + "px";
     383                        }
     384                        function setBorderBoxMaxWidth(n) {
     385                                element.runtimeStyle.maxWidth = Math.max(0, n - getBorderLeftWidth() -
     386                                getPaddingLeft() - getPaddingRight() - getBorderRightWidth()) + "px";
     387                        }
     388                        function setBorderBoxHeight(n) {
     389                                element.runtimeStyle.height = Math.max(0, n - getBorderTopWidth() -
     390                                getPaddingTop() - getPaddingBottom() - getBorderBottomWidth()) + "px";
     391                        }
     392                        function setBorderBoxMinHeight(n) {
     393                                element.runtimeStyle.minHeight = Math.max(0, n - getBorderTopWidth() -
     394                                getPaddingTop() - getPaddingBottom() - getBorderBottomWidth()) + "px";
     395                        }
     396                        function setBorderBoxMaxHeight(n) {
     397                                element.runtimeStyle.maxHeight = Math.max(0, n - getBorderTopWidth() -
     398                                getPaddingTop() - getPaddingBottom() - getBorderBottomWidth()) + "px";
     399                        }
     400                        function setContentBoxWidth(n) {
     401                                element.runtimeStyle.width = Math.max(0, n + getBorderLeftWidth() +
     402                                getPaddingLeft() + getPaddingRight() + getBorderRightWidth()) + "px";
     403                        }
     404                        function setContentBoxMinWidth(n) {
     405                                element.runtimeStyle.minWidth = Math.max(0, n + getBorderLeftWidth() +
     406                                getPaddingLeft() + getPaddingRight() + getBorderRightWidth()) + "px";
     407                        }
     408                        function setContentBoxMaxWidth(n) {
     409                                element.runtimeStyle.maxWidth = Math.max(0, n + getBorderLeftWidth() +
     410                                getPaddingLeft() + getPaddingRight() + getBorderRightWidth()) + "px";
     411                        }
     412                        function setContentBoxHeight(n) {
     413                                element.runtimeStyle.height = Math.max(0, n + getBorderTopWidth() +
     414                                getPaddingTop() + getPaddingBottom() + getBorderBottomWidth()) + "px";
     415                        }
     416                        function setContentBoxMinHeight(n) {
     417                                element.runtimeStyle.minHeight = Math.max(0, n + getBorderTopWidth() +
     418                                getPaddingTop() + getPaddingBottom() + getBorderBottomWidth()) + "px";
     419                        }
     420                        function setContentBoxMaxHeight(n) {
     421                                element.runtimeStyle.maxHeight = Math.max(0, n + getBorderTopWidth() +
     422                                getPaddingTop() + getPaddingBottom() + getBorderBottomWidth()) + "px";
     423                        }
     424
     425
     426                        /*
     427                        * updateBorderBoxWidth & updateBorderBoxHeight
     428                        *
     429                        */
     430                        function updateBorderBoxWidth() {
     431                                if(getDocumentBoxSizing() == getBoxSizing()){
     432                                        return;
     433                                }
     434
     435                                var csw = element.currentStyle.width;
     436                                if(csw != "auto"){
     437                                        csw = getPixelWidth(element,csw);
     438                                        if(getBoxSizing() == "border-box"){
     439                                                setBorderBoxWidth(parseInt(csw));
     440                                        }
     441                                        else{
     442                                                setContentBoxWidth(parseInt(csw));
     443                                        }
     444                                }
     445
     446                                csw = element.currentStyle.minWidth;
     447                                if(csw != "none"){
     448                                        csw = getPixelWidth(element,csw);
     449                                        if(getBoxSizing() == "border-box"){
     450                                                setBorderBoxMinWidth(parseInt(csw));
     451                                        }
     452                                        else{
     453                                                setContentBoxMinWidth(parseInt(csw));
     454                                        }
     455                                }
     456
     457                                csw = element.currentStyle.maxWidth;
     458                                if(csw != "none"){
     459                                        csw = getPixelWidth(element,csw);
     460                                        if(getBoxSizing() == "border-box"){
     461                                                setBorderBoxMaxWidth(parseInt(csw));
     462                                        }
     463                                        else{
     464                                                setContentBoxMaxWidth(parseInt(csw));
     465                                        }
     466                                }
     467                        }
     468
     469                        function updateBorderBoxHeight() {
     470                                if(getDocumentBoxSizing() == getBoxSizing()){
     471                                        return;
     472                                }
     473
     474                                var csh = element.currentStyle.height;
     475                                if(csh != "auto"){
     476                                        csh = getPixelHeight(element,csh);
     477                                        if(csh !== "auto"){
     478                                                if(getBoxSizing() == "border-box"){
     479                                                        setBorderBoxHeight(parseInt(csh));
     480                                                }
     481                                                else{
     482                                                        setContentBoxHeight(parseInt(csh));
     483                                                }
     484                                        }
     485                                }
     486
     487                                csh = element.currentStyle.minHeight;
     488                                if(csh != "none"){
     489                                        csh = getPixelHeight(element,csh);
     490                                        if(csh !== "none"){
     491                                                if(getBoxSizing() == "border-box"){
     492                                                        setBorderBoxMinHeight(parseInt(csh));
     493                                                }
     494                                                else{
     495                                                        setContentBoxMinHeight(parseInt(csh));
     496                                                }
     497                                        }
     498                                }
     499
     500                                csh = element.currentStyle.maxHeight;
     501                                if(csh != "none"){
     502                                        csh = getPixelHeight(element,csh);
     503                                        if(csh !== "none"){
     504                                                if(getBoxSizing() == "border-box"){
     505                                                        setBorderBoxMaxHeight(parseInt(csh));
     506                                                }
     507                                                else{
     508                                                        setContentBoxMaxHeight(parseInt(csh));
     509                                                }
     510                                        }
     511                                }
     512                        }
     513
     514
     515                        // Run the calculations
     516                        init();
     517
     518                //]]>
     519        </script>
    504520</component>
  • _plugins_/foundation/trunk/content/foundation-test-4.html

    r87448 r96416  
    11<header class="show-for-small">
    2   <a class='sidebar-button show-for-small' id="sidebarButton" href="#sidebar" ><img src="http://foundation3.zurb.com/docs/assets/offcanvas/menu-wht.png" alt="ZURB Menu"><h4>Foundation</h4></a>
     2        <a class='sidebar-button show-for-small' id="sidebarButton" href="#sidebar" ><img src="http://foundation3.zurb.com/docs/assets/offcanvas/menu-wht.png" alt="ZURB Menu"><h4>Foundation</h4></a>
    33</header>
    44
    55
    66<div class="row">
    7   <div class="large-12 columns">
    8     <h1 class="docs header"><a href="http://foundation.zurb.com/docs/">Foundation 4 Documentation</a></h1>
    9     <h6 class="docs subheader"><a href="http://foundation.zurb.com/old-docs/f3">Want F3 Docs?</a></h6>
    10     <hr>
    11   </div>
     7        <div class="large-12 columns">
     8                <h1 class="docs header"><a href="http://foundation.zurb.com/docs/">Foundation 4 Documentation</a></h1>
     9                <h6 class="docs subheader"><a href="http://foundation.zurb.com/old-docs/f3">Want F3 Docs?</a></h6>
     10                <hr>
     11        </div>
    1212</div>
    1313
    1414<div id="kitchen-sink" class="row">
    15   <div class="large-12 columns">
    16     <div class="row">
    17       <div class="large-12 columns">
    18 
    19         <h2>Kitchen Sink</h2>
    20         <h4 class="subheader">This page includes every single Foundation element so that we can make sure things work together smoothly.</h4>
    21         <hr>
    22       </div>
    23     </div>
    24 
    25     <div class="row">
    26       <div class="large-12 columns">
    27 
    28         <h4>Alert Boxes</h4>
    29 
    30         <div data-alert class="alert-box radius">
    31           This is a standard alert (div.alert-box).
    32           <a href="" class="close">&times;</a>
    33         </div>
    34 
    35         <div data-alert class="alert-box success">
    36           This is a success alert (div.alert-box.success).
    37           <a href="" class="close">&times;</a>
    38         </div>
    39 
    40         <div data-alert class="alert-box alert round">
    41           This is an alert (div.alert-box.alert.round).
    42           <a href="" class="close">&times;</a>
    43         </div>
    44 
    45         <div data-alert class="alert-box secondary">
    46           This is a secondary alert (div.alert-box.secondary).
    47           <a href="" class="close">&times;</a>
    48         </div>
    49 
    50         <hr>
    51 
    52         <h4>Block Grid</h4>
    53 
    54         <ul class="small-block-grid-2 large-block-grid-4">
    55           <li><img class="th" src="http://lorempixel.com/800/800/"></li>
    56           <li><img class="th" src="http://lorempixel.com/800/800/"></li>
    57           <li><img class="th" src="http://lorempixel.com/800/800/"></li>
    58           <li><img class="th" src="http://lorempixel.com/800/800/"></li>
    59         </ul>
    60 
    61         <hr>
    62 
    63         <h4>Breadcrumbs</h4>
    64 
    65         <ul class="breadcrumbs">
    66           <li><a href="#">Home</a></li>
    67           <li><a href="#">Features</a></li>
    68           <li class="unavailable"><a href="#">Gene Splicing</a></li>
    69           <li class="current"><a href="#">Cloning</a></li>
    70         </ul>
    71 
    72         <hr>
    73 
    74         <h4>Buttons</h4>
    75 
    76         <div class="row">
    77           <div class="small-6 large-6 columns">
    78             <a href="#" class="tiny button">.tiny.button</a><br>
    79             <a href="#" class="small button">.small.button</a><br>
    80             <a href="#" class="button">.button</a><br>
    81           </div>
    82           <div class="small-6 large-6 columns">
    83             <a href="#" class="tiny button secondary">.tiny.secondary</a><br>
    84             <a href="#" class="small button success radius">.small.success.radius</a><br>
    85             <a href="#" class="button alert round disabled">.round.disabled</a><br>
    86           </div>
    87         </div>
    88 
    89         <hr>
    90 
    91         <h4>Button Groups</h4>
    92 
    93         <ul class="button-group">
    94           <li><a href="#" class="small button">Button 1</a></li>
    95           <li><a href="#" class="small button">Button 2</a></li>
    96           <li><a href="#" class="small button">Button 3</a></li>
    97         </ul>
    98         <ul class="button-group radius">
    99           <li><a href="#" class="button secondary">Button 1</a></li>
    100           <li><a href="#" class="button secondary">Button 2</a></li>
    101           <li><a href="#" class="button secondary">Button 3</a></li>
    102           <li><a href="#" class="button secondary">Button 4</a></li>
    103         </ul>
    104         <ul class="button-group round even-3">
    105           <li><a href="#" class="button alert">Button 1</a></li>
    106           <li><a href="#" class="button alert">Button 2</a></li>
    107           <li><a href="#" class="button alert">Button 3</a></li>
    108         </ul>
    109         <ul class="button-group round even-3">
    110           <li><input type="submit" class="button success" value="Button 1"></li>
    111           <li><input type="submit" class="button success" value="Button 2"></li>
    112           <li><input type="submit" class="button success" value="Button 3"></li>
    113         </ul>
    114 
    115         <hr>
    116 
    117         <h4>Dropdown Buttons</h4>
    118         <ul id="drop" class="f-dropdown content" data-dropdown-content>
    119           <li><a href="#">This is a link</a></li>
    120           <li><a href="#">This is another</a></li>
    121           <li><a href="#">Yet another</a></li>
    122         </ul>
    123 
    124         <a href="#" data-dropdown="drop" class="tiny button dropdown">Dropdown Button</a><br>
    125         <a href="#" data-dropdown="drop" class="small secondary radius button dropdown">Dropdown Button</a><br>
    126         <a href="#" data-dropdown="drop" class="button alert round dropdown">Dropdown Button</a><br>
    127         <a href="#" data-dropdown="drop" class="large success button dropdown">Dropdown Button</a><br>
    128         <a href="#" data-dropdown="drop" class="large button dropdown expand">Dropdown Button</a>
    129 
    130         <hr>
    131 
    132         <h4>Split Buttons</h4>
    133 
    134         <a href="#" class="tiny button split">Split Button <span data-dropdown="drop"></span></a><br>
    135         <a href="#" class="small secondary radius button split">Split Button <span data-dropdown="drop"></span></a><br>
    136         <a href="#" class="button alert round split">Split Button <span data-dropdown="drop"></span></a><br>
    137         <a href="#" class="large success button split">Split Button <span data-dropdown="drop"></span></a>
    138 
    139         <hr>
    140 
    141         <h4>Clearing</h4>
    142 
    143         <div>
    144           <ul class="clearing-thumbs" data-clearing>
    145             <li><a class="th" href="http://lorempixel.com/800/800/"><img data-caption="Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum." src="http://lorempixel.com/100/100/"></a></li>
    146             <li><a class="th" href="http://lorempixel.com/800/800/"><img src="http://lorempixel.com/100/100/"></a></li>
    147             <li><a class="th" href="http://lorempixel.com/800/800/"><img data-caption="Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus." src="http://lorempixel.com/100/100/"></a></li>
    148             <li><a class="th" href="http://lorempixel.com/800/800/"><img src="http://lorempixel.com/100/100/"></a></li>
    149             <li><a class="th" href="http://lorempixel.com/800/800/"><img data-caption="Integer posuere erat a ante venenatis dapibus posuere velit aliquet." src="http://lorempixel.com/100/100/"></a></li>
    150           </ul>
    151         </div>
    152 
    153         <hr>
    154 
    155         <h4>Forms</h4>
    156 
    157         <form>
    158           <fieldset>
    159             <legend>Fieldset</legend>
    160 
    161             <div class="row">
    162               <div class="large-12 columns">
    163                 <label>Input Label</label>
    164                 <input type="text" placeholder="large-12.columns">
    165               </div>
    166             </div>
    167 
    168             <div class="row">
    169               <div class="large-4 columns">
    170                 <label>Input Label</label>
    171                 <input type="text" placeholder="large-4.columns">
    172               </div>
    173               <div class="large-4 columns">
    174                 <label>Input Label</label>
    175                 <input type="text" placeholder="large-4.columns">
    176               </div>
    177               <div class="large-4 columns">
    178                 <div class="row collapse">
    179                   <label>Input Label</label>
    180                   <div class="small-9 columns">
    181                     <input type="text" placeholder="small-9.columns">
    182                   </div>
    183                   <div class="small-3 columns">
    184                     <span class="postfix">.com</span>
    185                   </div>
    186                 </div>
    187               </div>
    188             </div>
    189 
    190             <div class="row">
    191               <div class="large-12 columns">
    192                 <label>Textarea Label</label>
    193                 <textarea placeholder="small-12.columns"></textarea>
    194               </div>
    195             </div>
    196 
    197           </fieldset>
    198         </form>
    199 
    200         <hr>
    201 
    202         <h4>Custom Forms</h4>
    203 
    204         <form class="custom">
    205           <div class="row">
    206             <div class="large-4 columns">
    207               <label for="radio1"><input name="radio1" type="radio" id="radio1" style="display:none;" CHECKED><span class="custom radio checked"></span> Radio Button 1</label>
    208               <label for="radio1"><input name="radio1" type="radio" id="radio1" style="display:none;"><span class="custom radio"></span> Radio Button 2</label>
    209               <label for="radio1"><input name="radio1" type="radio" id="radio1" disabled style="display:none;"><span class="custom radio"></span> Radio Button 3</label>
    210             </div>
    211             <div class="large-4 columns">
    212               <label for="checkbox1"><input type="checkbox" id="checkbox1" style="display: none;"><span class="custom checkbox"></span> Label for Checkbox</label>
    213               <label for="checkbox2"><input type="checkbox" id="checkbox2" CHECKED style="display: none;"><span class="custom checkbox checked"></span> Label for Checkbox</label>
    214               <label for="checkbox3"><input type="checkbox" CHECKED id="checkbox3" style="display: none;"><span class="custom checkbox checked"></span> Label for Checkbox</label>
    215             </div>
    216             <div class="large-4 columns">
    217               <label for="customDropdown1">Medium Example</label>
    218               <select id="customDropdown1" class="medium">
    219                 <option DISABLED>This is a dropdown</option>
    220                 <option>This is another option</option>
    221                 <option>This is another option too</option>
    222                 <option>Look, a third option</option>
    223               </select>
    224             </div>
    225           </div>
    226         </form>
    227 
    228         <hr>
    229 
    230         <h4>Dropdowns</h4>
    231 
    232         <a href="#" class="button" data-dropdown="tinyDrop">Link Dropdown &raquo;</a>
    233         <a href="#" class="button" data-dropdown="contentDrop">Content Dropdown &raquo;</a>
    234         <!-- Dropdowns -->
    235         <ul id="tinyDrop" class="f-dropdown" data-dropdown-content>
    236           <li><a href="#">This is a link</a></li>
    237           <li><a href="#">This is another</a></li>
    238           <li><a href="#">Yet another</a></li>
    239         </ul>
    240         <div id="contentDrop" class="f-dropdown content medium" data-dropdown-content>
    241           <h4>Title</h4>
    242           <p>Some text that people will think is awesome! Some text that people will think is awesome! Some text that people will think is awesome!</p>
    243           <img src="http://lorempixel.com/800/800/">
    244           <p>More test.</p>
    245           <a href="#" class="button">Button</a>
    246         </div>
    247 
    248         <hr>
    249 
    250         <h4>Flex Video</h4>
    251 
    252         <div class="flex-video">
    253           <iframe width="420" height="315" src="http://www.youtube.com/embed/0_EW8aNgKlA" frameborder="0" allowfullscreen></iframe>
    254         </div>
    255 
    256         <hr>
    257 
    258         <h4>Inline Lists</h4>
    259 
    260         <ul class="inline-list">
    261           <li><a href="#">Link 1</a></li>
    262           <li><a href="#">Link 2</a></li>
    263           <li><a href="#">Link 3</a></li>
    264           <li><a href="#">Link 4</a></li>
    265           <li><a href="#">Link 5</a></li>
    266         </ul>
    267 
    268         <hr>
    269 
    270         <h4>Joyride</h4>
    271 
    272         <a id="start-jr" class="secondary button">Start Joyride</a>
    273         <h5 id="numero1" class="so-awesome">Build Joyride with HTML</h5>
    274         <p id="numero2" class="so-awesome">Stop Number 2 for You!</p>
    275 
    276         <hr>
    277 
    278         <h4>Keystroke</h4>
    279 
    280         <p>To make something pretty, press and hold <kbd>cmd + alt + shift + w + a + !</kbd></p>
    281 
    282         <hr>
    283 
    284         <h4>Labels</h4>
    285 
    286         <p>
    287           <span class="label">Regular Label</span><br>
    288           <span class="radius secondary label">Radius Secondary Label</span><br>
    289           <span class="round alert label">Round Alert Label</span><br>
    290           <span class="success label">Success Label</span><br>
    291         </p>
    292 
    293         <hr>
    294 
    295         <h4>Magellan</h4>
    296 
    297         <div data-magellan-expedition="fixed">
    298           <dl class="sub-nav">
    299             <dd data-magellan-arrival="build"><a href="#build">Build with HTML</a></dd>
    300             <dd data-magellan-arrival="js"><a href="#js">Using Javascript</a></dd>
    301           </dl>
    302         </div>
    303 
    304         <h5 data-magellan-destination="build">Build With Predefined HTML Structure</h5>
    305         <p>Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper.</p>
    306         <h5 data-magellan-destination="js">Awesome JS Goodness</h5>
    307         <p>Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper.</p>
    308 
    309         <hr>
    310 
    311         <h4>Orbit</h4>
    312 
    313         <div class="row">
    314           <div class="large-6 columns">
    315             <ul id="featured1" data-orbit data-options="timer_speed:5000;">
    316               <li>
    317                 <img src="http://lorempixel.com/800/800/" />
    318                 <div class="orbit-caption">
    319                   Caption One. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    320                 </div>
    321               </li>
    322               <li>
    323                 <img src="http://lorempixel.com/800/800/" />
    324                 <div class="orbit-caption">
    325                   Caption Two. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    326                 </div>
    327               </li>
    328               <li>
    329                 <img src="http://lorempixel.com/800/800/" />
    330                 <div class="orbit-caption">
    331                   Caption Three. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    332                 </div>
    333               </li>
    334             </ul>
    335           </div>
    336         </div>
    337 
    338         <hr>
    339 
    340         <h4>Pagination</h4>
    341 
    342         <ul class="pagination">
    343           <li class="arrow unavailable"><a href="">&laquo;</a></li>
    344           <li class="current"><a href="">1</a></li>
    345           <li><a href="">2</a></li>
    346           <li><a href="">3</a></li>
    347           <li><a href="">4</a></li>
    348           <li class="unavailable"><a href="">&hellip;</a></li>
    349           <li><a href="">12</a></li>
    350           <li><a href="">13</a></li>
    351           <li class="arrow"><a href="">&raquo;</a></li>
    352         </ul>
    353 
    354         <hr>
    355 
    356         <h4>Panels</h4>
    357 
    358         <div class="row">
    359           <div class="large-6 columns">
    360             <div class="panel">
    361               <h5>This is a regular panel.</h5>
    362               <p>It has an easy to override visual style, and is appropriately subdued.</p>
    363             </div>
    364           </div>
    365           <div class="large-6 columns">
    366             <div class="panel callout radius">
    367               <h5>This is a callout panel.</h5>
    368               <p>It's a little ostentatious, but useful for important content.</p>
    369             </div>
    370           </div>
    371         </div>
    372 
    373         <hr>
    374 
    375         <h4>Pricing Tables</h4>
    376 
    377         <div class="row">
    378           <div class="large-4 columns">
    379             <ul class="pricing-table">
    380               <li class="title">Standard</li>
    381               <li class="price">$99.99</li>
    382               <li class="description">An awesome description</li>
    383               <li class="bullet-item">1 Database</li>
    384               <li class="bullet-item">5GB Storage</li>
    385               <li class="bullet-item">20 Users</li>
    386               <li class="cta-button"><a class="button" href="#">Buy Now</a></li>
    387             </ul>
    388           </div>
    389         </div>
    390 
    391         <hr>
    392 
    393         <h4>Progress Bars</h4>
    394 
    395         <div class="progress large-6"><span class="meter" style="width: 40%"></span></div>
    396         <div class="radius progress success large-8"><span class="meter" style="width: 80%"></span></div>
    397         <div class="nice round progress alert large-10"><span class="meter" style="width: 30%"></span></div>
    398         <div class="nice secondary progress"><span class="meter" style="width: 50%"></span></div>
    399 
    400         <hr>
    401 
    402         <h4>Reveal</h4>
    403 
    404         <a href="#" data-reveal-id="firstModal" class="radius button">Example Modal&hellip;</a>
    405         <a href="#" data-reveal-id="videoModal" class="radius button">Example Modal w/Video&hellip;</a>
    406 
    407         <hr>
    408 
    409         <h4>Section</h4>
    410 
    411         <div class="row">
    412           <div class="large-3 columns">
    413             <div class="section-container vertical-nav" data-section="vertical-nav">
    414               <section class="section">
    415                 <p class="title"><a href="#">Section 1</a></p>
    416                 <div class="content">
    417                   <ul class="side-nav">
    418                     <li><a href="#">Link 1</a></li>
    419                     <li><a href="#">Link 2</a></li>
    420                     <li><a href="#">Link 3</a></li>
    421                     <li class="divider"></li>
    422                     <li><a href="#">Link 1</a></li>
    423                   </ul>
    424                 </div>
    425               </section>
    426               <section class="section">
    427                 <p class="title"><a href="#">Section 2</a></p>
    428                 <div class="content">
    429                   <ul class="side-nav">
    430                     <li><a href="#">Link 1</a></li>
    431                     <li><a href="#">Link 2</a></li>
    432                     <li><a href="#">Link 3</a></li>
    433                     <li class="divider"></li>
    434                     <li><a href="#">Link 1</a></li>
    435                   </ul>
    436                 </div>
    437               </section>
    438             </div>
    439           </div>
    440           <div class="large-8 columns">
    441             <div class="section-container horizontal-nav" data-section="horizontal-nav">
    442               <section class="section">
    443                 <p class="title"><a href="#">Section 1</a></p>
    444                 <div class="content">
    445                   <ul class="side-nav">
    446                     <li><a href="#">Link 1</a></li>
    447                     <li><a href="#">Link 2</a></li>
    448                     <li><a href="#">Link 3</a></li>
    449                     <li class="divider"></li>
    450                     <li><a href="#">Link 1</a></li>
    451                   </ul>
    452                 </div>
    453               </section>
    454               <section class="section">
    455                 <p class="title"><a href="#">Section 2</a></p>
    456                 <div class="content">
    457                   <ul class="side-nav">
    458                     <li><a href="#">Link 1</a></li>
    459                     <li><a href="#">Link 2</a></li>
    460                     <li><a href="#">Link 3</a></li>
    461                     <li class="divider"></li>
    462                     <li><a href="#">Link 1</a></li>
    463                   </ul>
    464                 </div>
    465               </section>
    466             </div>
    467             <div class="section-container auto" data-section data-options="deep_linking: true;">
    468               <section class="section">
    469                 <p class="title"><a href="#panel1">Section 1</a></p>
    470                 <div class="content" data-slug="panel1">
    471                   <p>Section 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    472                 </div>
    473               </section>
    474               <section class="section">
    475                 <p class="title"><a href="#panel2">Section 2</a></p>
    476                 <div class="content" data-slug="panel2">
    477                   <p>Section 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    478                 </div>
    479               </section>
    480               <div class="section">
    481                 <p class="title"><a href="#panel3">Section 3</a></p>
    482                 <div class="content" data-slug="panel3">
    483                   <form>
    484                     <div class="row collapse">
    485                       <div class="large-2 columns">
    486                         <label class="inline">Your Name</label>
    487                       </div>
    488                       <div class="large-10 columns">
    489                         <input type="text" id="yourName" placeholder="Jane Smith">
    490                       </div>
    491                     </div>
    492                     <div class="row collapse">
    493                       <div class="large-2 columns">
    494                         <label class="inline"> Your Email</label>
    495                       </div>
    496                       <div class="large-10 columns">
    497                         <input type="text" id="yourEmail" placeholder="jane@smithco.com">
    498                       </div>
    499                     </div>
    500                     <label>What's up?</label>
    501                     <textarea rows="4"></textarea>
    502                     <button type="submit" class="radius button">Submit</button>
    503                   </form>
    504                 </div>
    505               </div>
    506             </div>
    507             <div class="section-container accordion" data-section="accordion">
    508               <section class="section">
    509                 <p class="title"><a href="#panel1">Section 1</a></p>
    510                 <div class="content" data-slug="panel1">
    511                   <p>Section 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    512                 </div>
    513               </section>
    514               <section class="section">
    515                 <p class="title"><a href="#panel2">Section 2</a></p>
    516                 <div class="content" data-slug="panel2">
    517                   <p>Section 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    518                 </div>
    519               </section>
    520               <section class="section">
    521                 <p class="title"><a href="#panel3">Section 3</a></p>
    522                 <div class="content" data-slug="panel3">
    523                   <p>Section 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    524                 </div>
    525               </section>
    526             </div>
    527             <div class="section-container tabs" data-section="tabs">
    528               <section class="section">
    529                 <p class="title"><a href="#panel1">Section 1</a></p>
    530                 <div class="content" data-slug="panel1">
    531                   <p>Section 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    532                 </div>
    533               </section>
    534               <section class="section">
    535                 <p class="title"><a href="#panel2">Section 2</a></p>
    536                 <div class="content" data-slug="panel2">
    537                   <p>Section 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    538                 </div>
    539               </section>
    540               <section class="section">
    541                 <p class="title"><a href="#panel3">Section 3</a></p>
    542                 <div class="content" data-slug="panel3">
    543                   <p>Section 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    544                 </div>
    545               </section>
    546             </div>
    547           </div>
    548         </div>
    549 
    550         <hr>
    551 
    552         <h4>Side Nav</h4>
    553 
    554         <div class="row">
    555           <div class="large-4 columns end">
    556             <ul class="side-nav">
    557               <li class="active"><a href="#">Link 1</a></li>
    558               <li><a href="#">Link 2</a></li>
    559               <li class="divider"></li>
    560               <li><a href="#">Link 3</a></li>
    561               <li><a href="#">Link 4</a></li>
    562             </ul>
    563           </div>
    564         </div>
    565 
    566         <hr>
    567 
    568         <h4>Sub Nav</h4>
    569 
    570         <dl class="sub-nav">
    571           <dt>Filter:</dt>
    572           <dd class="active"><a href="#">All</a></dd>
    573           <dd><a href="#">Active</a></dd>
    574           <dd><a href="#">Pending</a></dd>
    575           <dd><a href="#">Suspended</a></dd>
    576         </dl>
    577 
    578         <hr>
    579 
    580         <h4>Switch</h4>
    581 
    582         <div class="small-2 switch tiny">
    583           <input id="a" name="switch-a" type="radio" checked>
    584           <label for="a" onclick="">Off</label>
    585 
    586           <input id="a1" name="switch-a" type="radio">
    587           <label for="a1" onclick="">On</label>
    588 
    589           <span></span>
    590         </div>
    591 
    592         <div class="small-3 switch small">
    593           <input id="b" name="switch-b" type="radio" checked>
    594           <label for="b" onclick="">Off</label>
    595 
    596           <input id="b1" name="switch-b" type="radio">
    597           <label for="b1" onclick="">On</label>
    598 
    599           <span></span>
    600         </div>
    601 
    602         <div class="small-4 switch radius">
    603           <input id="c" name="switch-c" type="radio" checked>
    604           <label for="c" onclick="">Off</label>
    605 
    606           <input id="c1" name="switch-c" type="radio">
    607           <label for="c1" onclick="">On</label>
    608 
    609           <span></span>
    610         </div>
    611 
    612         <div class="small-6 switch large round">
    613           <input id="d" name="switch-d" type="radio" checked>
    614           <label for="d" onclick="">Off</label>
    615 
    616           <input id="d1" name="switch-d" type="radio">
    617           <label for="d1" onclick="">On</label>
    618 
    619           <span></span>
    620         </div>
    621 
    622         <hr>
    623 
    624         <h4>Tables</h4>
    625 
    626         <table>
    627           <thead>
    628             <tr>
    629               <th width="200">Table Header</th>
    630               <th>Table Header</th>
    631               <th width="150">Table Header</th>
    632               <th width="150">Table Header</th>
    633             </tr>
    634           </thead>
    635           <tbody>
    636             <tr>
    637               <td>Content Goes Here</td>
    638               <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
    639               <td>Content Goes Here</td>
    640               <td>Content Goes Here</td>
    641             </tr>
    642             <tr>
    643               <td>Content Goes Here</td>
    644               <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
    645               <td>Content Goes Here</td>
    646               <td>Content Goes Here</td>
    647             </tr>
    648             <tr>
    649               <td>Content Goes Here</td>
    650               <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
    651               <td>Content Goes Here</td>
    652               <td>Content Goes Here</td>
    653             </tr>
    654           </tbody>
    655         </table>
    656 
    657         <hr>
    658 
    659         <h4>Thumbnails</h4>
    660 
    661         <p><a class="th" href="http://lorempixel.com/800/800/"><img src="../img/demos/demo1-th.jpg"></a></p>
    662         <img class="th" src="http://lorempixel.com/800/800/">
    663 
    664         <hr>
    665 
    666         <h4>Tooltips</h4>
    667 
    668         <p>The tooltips can be positioned on the <span data-tooltip class="has-tip" data-width="210" title="I'm on bottom and the default position.">"tip-bottom"</span>, which is the default position, <span data-tooltip class="has-tip tip-top" data-width="210" title="I'm on the top!">"tip-top" (hehe)</span>, <span data-tooltip="left" class="has-tip tip-left" data-width="90" title="I'm on the left!">"tip-left"</span>, or <span data-tooltip="right" class="has-tip tip-right" data-width="120" title="I'm on the right!">"tip-right"</span> of the target element by adding the appropriate class to them. You can even add your own custom class to style each tip differently. On a small device, the tooltips are full width and bottom aligned.</p>
    669 
    670         <hr>
    671 
    672         <h4>Top Bar</h4>
    673 
    674         <nav class="top-bar">
    675           <ul class="title-area">
    676             <!-- Title Area -->
    677             <li class="name">
    678               <h1><a href="/">Top Bar</a></h1>
    679             </li>
    680             <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
    681             <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
    682           </ul>
    683 
    684           <section class="top-bar-section">
    685             <ul class="left">
    686               <li class="divider"></li>
    687               <li class="has-dropdown"><a href="/grid.php">Item 1</a>
    688 
    689                 <ul class="dropdown">
    690                   <li><label>Level One</label></li>
    691                   <li><a href="#">Sub-item 1</a></li>
    692                   <li><a href="#">Sub-item 2</a></li>
    693                   <li class="divider"></li>
    694                   <li><a href="#">Sub-item 3</a></li>
    695                   <li class="has-dropdown"><a href="#">Sub-item 4</a>
    696 
    697                     <ul class="dropdown">
    698                       <li><label>Level Two</label></li>
    699                       <li class="has-dropdown"><a href="#">Sub-item 1</a>
    700 
    701                         <ul class="dropdown">
    702                           <li><label>Level Three</label></li>
    703                           <li class="has-dropdown"><a href="#">Sub-item 1</a>
    704 
    705                             <ul class="dropdown">
    706                               <li><label>Level Four</label></li>
    707                               <li><a href="http://zurb.com">Sub-item 1</a></li>
    708                             </ul>
    709                           </li>
    710                           <li><a href="#">Sub-item 2</a></li>
    711                           <li><a href="#">Sub-item 3</a></li>
    712                           <li class="divider"></li>
    713                           <li><a href="#">Sub-item 4</a></li>
    714                         </ul>
    715                       </li>
    716                       <li><a href="#">Sub-item 2</a></li>
    717                       <li><a href="#">Sub-item 3</a></li>
    718                       <li><a href="#">Sub-item 4</a></li>
    719                     </ul>
    720                       </li>
    721                       <li><a href="#">Sub-item 5</a></li>
    722                 </ul>
    723                   </li>
    724                   <li class="divider"></li>
    725             </ul>
    726             <!-- Right Nav Section -->
    727             <ul class="right">
    728               <li class="divider hide-for-small"></li>
    729               <li><a href="#">Item 2</a></li>
    730             </ul>
    731           </section>
    732         </nav>
    733 
    734         <hr>
    735 
    736         <h4>Type</h4>
    737 
    738         <h1>h1. This is a very large header.</h1>
    739         <h2>h2. This is a large header.</h2>
    740         <h3>h3. This is a medium header.</h3>
    741         <h4>h4. This is a moderate header.</h4>
    742         <h5>h5. This is a small header. h1.</h5>
    743         <h6>h6. This is a tiny header. h1.</h6>
    744 
    745         <br>
    746 
    747         <h1 class="subheader">h1.subheader</h1>
    748         <h2 class="subheader">h2.subheader</h2>
    749         <h3 class="subheader">h3.subheader</h3>
    750         <h4 class="subheader">h4.subheader</h4>
    751         <h5 class="subheader">h5.subheader</h5>
    752         <h6 class="subheader">h6.subheader</h6>
    753 
    754         <br>
    755 
    756         <ul class="disc">
    757           <li>List item with a much longer description or more content.</li>
    758           <li>List item</li>
    759           <li>List item
    760             <ul>
    761               <li>Nested List Item</li>
    762               <li>Nested List Item</li>
    763               <li>Nested List Item</li>
    764             </ul>
    765           </li>
    766           <li>List item</li>
    767           <li>List item</li>
    768           <li>List item</li>
    769         </ul>
    770 
    771         <!-- Ordered lists are great for lists that need order, duh -->
    772         <ol>
    773           <li>List Item 1</li>
    774           <li>List Item 2</li>
    775           <li>List Item 3</li>
    776         </ol>
    777 
    778         <!-- Definition lists are great for small block of copy that describe the header -->
    779         <dl>
    780           <dt>Definition List</dt>
    781           <dd>Definition Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.</dd>
    782         </dl>
    783 
    784         <br>
    785 
    786         <blockquote>I do not fear computers. I fear the lack of them. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.<cite>Isaac Asimov</cite></blockquote>
    787 
    788         <br>
    789 
    790         <ul class="vcard">
    791           <li class="fn">Gaius Baltar</li>
    792           <li class="street-address">123 Colonial Ave.</li>
    793           <li class="locality">Caprica City</li>
    794           <li><span class="state">Caprica</span>, <span class="zip">12345</span></li>
    795           <li class="email"><a href="#"><span class="__cf_email__" data-cfemail="e98ec78b88859d889ba98a84888085c78a8684">[email&#160;protected]</span><script cf-hash='f9e31' type="text/javascript">
    796                                                                                                                                                        /* <![CDATA[ */!function(){try{var t="currentScript"in document?document.currentScript:function(){for(var t=document.getElementsByTagName("script"),e=t.length;e--;)if(t[e].getAttribute("cf-hash"))return t[e]}();if(t&&t.previousSibling){var e,r,n,i,c=t.previousSibling,a=c.getAttribute("data-cfemail");if(a){for(e="",r=parseInt(a.substr(0,2),16),n=2;a.length-n;n+=2)i=parseInt(a.substr(n,2),16)^r,e+=String.fromCharCode(i);e=document.createTextNode(e),c.parentNode.replaceChild(e,c)}}}catch(u){}}();/* ]]> */</script></a></li>
    797         </ul>
    798 
    799         <hr>
    800 
    801         <h4>Visibility Classes</h4>
    802 
    803         <h5>Screen Size Visibility Control (Show)</h5>
    804         <p>The following text should describe the screen size you're using:</p>
    805         <p class="panel">
    806           <strong class="show-for-small">You are on a small screen.</strong>
    807           <strong class="show-for-medium">You are on a medium screen.</strong>
    808           <strong class="show-for-medium-up">You are on a medium, large or xlarge screen.</strong>
    809           <strong class="show-for-medium-down">You are on a medium or small screen.</strong>
    810           <strong class="show-for-large">You are on a large screen.</strong>
    811           <strong class="show-for-large-up">You are on a large or xlarge screen.</strong>
    812           <strong class="show-for-large-down">You are on a large, medium or small screen.</strong>
    813           <strong class="show-for-xlarge">You are on a xlarge screen.</strong>
    814         </p>
    815 
    816         <h5>Screen Size Visibility Control (Hide)</h5>
    817         <p>The following text should describe the screen size you aren't using:</p>
    818         <p class="panel">
    819           <strong class="hide-for-small">You are <em>not</em> on a small screen.</strong>
    820           <strong class="hide-for-medium">You are <em>not</em> on a medium screen.</strong>
    821           <strong class="hide-for-medium-up">You are <em>not</em> on a medium, large or xlarge screen.</strong>
    822           <strong class="hide-for-medium-down">You are <em>not</em> on a medium or small screen.</strong>
    823           <strong class="hide-for-large">You are <em>not</em> on a large screen.</strong>
    824           <strong class="hide-for-large-up">You are <em>not</em> on a large or xlarge screen.</strong>
    825           <strong class="hide-for-large-down">You are <em>not</em> on a large, medium or small screen.</strong>
    826           <strong class="hide-for-xlarge">You are <em>not</em> on a xlarge screen.</strong>
    827         </p>
    828 
    829         <h5>Orientation Detection</h5>
    830         <p>The following text should describe the device orientation you're using:</p>
    831         <p class="panel">
    832           <strong class="show-for-landscape">You are in landscape orientation.</strong>
    833           <strong class="show-for-portrait">You are in portrait orientation.</strong>
    834         </p>
    835 
    836         <h5>Touch Detection</h5>
    837         <p>The following text should describe if you're using a touch device:</p>
    838         <p class="panel">
    839           <strong class="show-for-touch">You are on a touch-enabled device.</strong>
    840           <strong class="hide-for-touch">You are not on a touch-enabled device.</strong>
    841         </p>
    842 
    843       </div>
    844     </div>
    845 
    846   </div>
     15        <div class="large-12 columns">
     16                <div class="row">
     17                        <div class="large-12 columns">
     18
     19                                <h2>Kitchen Sink</h2>
     20                                <h4 class="subheader">This page includes every single Foundation element so that we can make sure things work together smoothly.</h4>
     21                                <hr>
     22                        </div>
     23                </div>
     24
     25                <div class="row">
     26                        <div class="large-12 columns">
     27
     28                                <h4>Alert Boxes</h4>
     29
     30                                <div data-alert class="alert-box radius">
     31                                        This is a standard alert (div.alert-box).
     32                                        <a href="" class="close">&times;</a>
     33                                </div>
     34
     35                                <div data-alert class="alert-box success">
     36                                        This is a success alert (div.alert-box.success).
     37                                        <a href="" class="close">&times;</a>
     38                                </div>
     39
     40                                <div data-alert class="alert-box alert round">
     41                                        This is an alert (div.alert-box.alert.round).
     42                                        <a href="" class="close">&times;</a>
     43                                </div>
     44
     45                                <div data-alert class="alert-box secondary">
     46                                        This is a secondary alert (div.alert-box.secondary).
     47                                        <a href="" class="close">&times;</a>
     48                                </div>
     49
     50                                <hr>
     51
     52                                <h4>Block Grid</h4>
     53
     54                                <ul class="small-block-grid-2 large-block-grid-4">
     55                                        <li><img class="th" src="http://lorempixel.com/800/800/"></li>
     56                                        <li><img class="th" src="http://lorempixel.com/800/800/"></li>
     57                                        <li><img class="th" src="http://lorempixel.com/800/800/"></li>
     58                                        <li><img class="th" src="http://lorempixel.com/800/800/"></li>
     59                                </ul>
     60
     61                                <hr>
     62
     63                                <h4>Breadcrumbs</h4>
     64
     65                                <ul class="breadcrumbs">
     66                                        <li><a href="#">Home</a></li>
     67                                        <li><a href="#">Features</a></li>
     68                                        <li class="unavailable"><a href="#">Gene Splicing</a></li>
     69                                        <li class="current"><a href="#">Cloning</a></li>
     70                                </ul>
     71
     72                                <hr>
     73
     74                                <h4>Buttons</h4>
     75
     76                                <div class="row">
     77                                        <div class="small-6 large-6 columns">
     78                                                <a href="#" class="tiny button">.tiny.button</a><br>
     79                                                <a href="#" class="small button">.small.button</a><br>
     80                                                <a href="#" class="button">.button</a><br>
     81                                        </div>
     82                                        <div class="small-6 large-6 columns">
     83                                                <a href="#" class="tiny button secondary">.tiny.secondary</a><br>
     84                                                <a href="#" class="small button success radius">.small.success.radius</a><br>
     85                                                <a href="#" class="button alert round disabled">.round.disabled</a><br>
     86                                        </div>
     87                                </div>
     88
     89                                <hr>
     90
     91                                <h4>Button Groups</h4>
     92
     93                                <ul class="button-group">
     94                                        <li><a href="#" class="small button">Button 1</a></li>
     95                                        <li><a href="#" class="small button">Button 2</a></li>
     96                                        <li><a href="#" class="small button">Button 3</a></li>
     97                                </ul>
     98                                <ul class="button-group radius">
     99                                        <li><a href="#" class="button secondary">Button 1</a></li>
     100                                        <li><a href="#" class="button secondary">Button 2</a></li>
     101                                        <li><a href="#" class="button secondary">Button 3</a></li>
     102                                        <li><a href="#" class="button secondary">Button 4</a></li>
     103                                </ul>
     104                                <ul class="button-group round even-3">
     105                                        <li><a href="#" class="button alert">Button 1</a></li>
     106                                        <li><a href="#" class="button alert">Button 2</a></li>
     107                                        <li><a href="#" class="button alert">Button 3</a></li>
     108                                </ul>
     109                                <ul class="button-group round even-3">
     110                                        <li><input type="submit" class="button success" value="Button 1"></li>
     111                                        <li><input type="submit" class="button success" value="Button 2"></li>
     112                                        <li><input type="submit" class="button success" value="Button 3"></li>
     113                                </ul>
     114
     115                                <hr>
     116
     117                                <h4>Dropdown Buttons</h4>
     118                                <ul id="drop" class="f-dropdown content" data-dropdown-content>
     119                                        <li><a href="#">This is a link</a></li>
     120                                        <li><a href="#">This is another</a></li>
     121                                        <li><a href="#">Yet another</a></li>
     122                                </ul>
     123
     124                                <a href="#" data-dropdown="drop" class="tiny button dropdown">Dropdown Button</a><br>
     125                                <a href="#" data-dropdown="drop" class="small secondary radius button dropdown">Dropdown Button</a><br>
     126                                <a href="#" data-dropdown="drop" class="button alert round dropdown">Dropdown Button</a><br>
     127                                <a href="#" data-dropdown="drop" class="large success button dropdown">Dropdown Button</a><br>
     128                                <a href="#" data-dropdown="drop" class="large button dropdown expand">Dropdown Button</a>
     129
     130                                <hr>
     131
     132                                <h4>Split Buttons</h4>
     133
     134                                <a href="#" class="tiny button split">Split Button <span data-dropdown="drop"></span></a><br>
     135                                <a href="#" class="small secondary radius button split">Split Button <span data-dropdown="drop"></span></a><br>
     136                                <a href="#" class="button alert round split">Split Button <span data-dropdown="drop"></span></a><br>
     137                                <a href="#" class="large success button split">Split Button <span data-dropdown="drop"></span></a>
     138
     139                                <hr>
     140
     141                                <h4>Clearing</h4>
     142
     143                                <div>
     144                                        <ul class="clearing-thumbs" data-clearing>
     145                                                <li><a class="th" href="http://lorempixel.com/800/800/"><img data-caption="Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum." src="http://lorempixel.com/100/100/"></a></li>
     146                                                <li><a class="th" href="http://lorempixel.com/800/800/"><img src="http://lorempixel.com/100/100/"></a></li>
     147                                                <li><a class="th" href="http://lorempixel.com/800/800/"><img data-caption="Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus." src="http://lorempixel.com/100/100/"></a></li>
     148                                                <li><a class="th" href="http://lorempixel.com/800/800/"><img src="http://lorempixel.com/100/100/"></a></li>
     149                                                <li><a class="th" href="http://lorempixel.com/800/800/"><img data-caption="Integer posuere erat a ante venenatis dapibus posuere velit aliquet." src="http://lorempixel.com/100/100/"></a></li>
     150                                        </ul>
     151                                </div>
     152
     153                                <hr>
     154
     155                                <h4>Forms</h4>
     156
     157                                <form>
     158                                        <fieldset>
     159                                                <legend>Fieldset</legend>
     160
     161                                                <div class="row">
     162                                                        <div class="large-12 columns">
     163                                                                <label>Input Label</label>
     164                                                                <input type="text" placeholder="large-12.columns">
     165                                                        </div>
     166                                                </div>
     167
     168                                                <div class="row">
     169                                                        <div class="large-4 columns">
     170                                                                <label>Input Label</label>
     171                                                                <input type="text" placeholder="large-4.columns">
     172                                                        </div>
     173                                                        <div class="large-4 columns">
     174                                                                <label>Input Label</label>
     175                                                                <input type="text" placeholder="large-4.columns">
     176                                                        </div>
     177                                                        <div class="large-4 columns">
     178                                                                <div class="row collapse">
     179                                                                        <label>Input Label</label>
     180                                                                        <div class="small-9 columns">
     181                                                                                <input type="text" placeholder="small-9.columns">
     182                                                                        </div>
     183                                                                        <div class="small-3 columns">
     184                                                                                <span class="postfix">.com</span>
     185                                                                        </div>
     186                                                                </div>
     187                                                        </div>
     188                                                </div>
     189
     190                                                <div class="row">
     191                                                        <div class="large-12 columns">
     192                                                                <label>Textarea Label</label>
     193                                                                <textarea placeholder="small-12.columns"></textarea>
     194                                                        </div>
     195                                                </div>
     196
     197                                        </fieldset>
     198                                </form>
     199
     200                                <hr>
     201
     202                                <h4>Custom Forms</h4>
     203
     204                                <form class="custom">
     205                                        <div class="row">
     206                                                <div class="large-4 columns">
     207                                                        <label for="radio1"><input name="radio1" type="radio" id="radio1" style="display:none;" CHECKED><span class="custom radio checked"></span> Radio Button 1</label>
     208                                                        <label for="radio1"><input name="radio1" type="radio" id="radio1" style="display:none;"><span class="custom radio"></span> Radio Button 2</label>
     209                                                        <label for="radio1"><input name="radio1" type="radio" id="radio1" disabled style="display:none;"><span class="custom radio"></span> Radio Button 3</label>
     210                                                </div>
     211                                                <div class="large-4 columns">
     212                                                        <label for="checkbox1"><input type="checkbox" id="checkbox1" style="display: none;"><span class="custom checkbox"></span> Label for Checkbox</label>
     213                                                        <label for="checkbox2"><input type="checkbox" id="checkbox2" CHECKED style="display: none;"><span class="custom checkbox checked"></span> Label for Checkbox</label>
     214                                                        <label for="checkbox3"><input type="checkbox" CHECKED id="checkbox3" style="display: none;"><span class="custom checkbox checked"></span> Label for Checkbox</label>
     215                                                </div>
     216                                                <div class="large-4 columns">
     217                                                        <label for="customDropdown1">Medium Example</label>
     218                                                        <select id="customDropdown1" class="medium">
     219                                                                <option DISABLED>This is a dropdown</option>
     220                                                                <option>This is another option</option>
     221                                                                <option>This is another option too</option>
     222                                                                <option>Look, a third option</option>
     223                                                        </select>
     224                                                </div>
     225                                        </div>
     226                                </form>
     227
     228                                <hr>
     229
     230                                <h4>Dropdowns</h4>
     231
     232                                <a href="#" class="button" data-dropdown="tinyDrop">Link Dropdown &raquo;</a>
     233                                <a href="#" class="button" data-dropdown="contentDrop">Content Dropdown &raquo;</a>
     234                                <!-- Dropdowns -->
     235                                <ul id="tinyDrop" class="f-dropdown" data-dropdown-content>
     236                                        <li><a href="#">This is a link</a></li>
     237                                        <li><a href="#">This is another</a></li>
     238                                        <li><a href="#">Yet another</a></li>
     239                                </ul>
     240                                <div id="contentDrop" class="f-dropdown content medium" data-dropdown-content>
     241                                        <h4>Title</h4>
     242                                        <p>Some text that people will think is awesome! Some text that people will think is awesome! Some text that people will think is awesome!</p>
     243                                        <img src="http://lorempixel.com/800/800/">
     244                                        <p>More test.</p>
     245                                        <a href="#" class="button">Button</a>
     246                                </div>
     247
     248                                <hr>
     249
     250                                <h4>Flex Video</h4>
     251
     252                                <div class="flex-video">
     253                                        <iframe width="420" height="315" src="http://www.youtube.com/embed/0_EW8aNgKlA" frameborder="0" allowfullscreen></iframe>
     254                                </div>
     255
     256                                <hr>
     257
     258                                <h4>Inline Lists</h4>
     259
     260                                <ul class="inline-list">
     261                                        <li><a href="#">Link 1</a></li>
     262                                        <li><a href="#">Link 2</a></li>
     263                                        <li><a href="#">Link 3</a></li>
     264                                        <li><a href="#">Link 4</a></li>
     265                                        <li><a href="#">Link 5</a></li>
     266                                </ul>
     267
     268                                <hr>
     269
     270                                <h4>Joyride</h4>
     271
     272                                <a id="start-jr" class="secondary button">Start Joyride</a>
     273                                <h5 id="numero1" class="so-awesome">Build Joyride with HTML</h5>
     274                                <p id="numero2" class="so-awesome">Stop Number 2 for You!</p>
     275
     276                                <hr>
     277
     278                                <h4>Keystroke</h4>
     279
     280                                <p>To make something pretty, press and hold <kbd>cmd + alt + shift + w + a + !</kbd></p>
     281
     282                                <hr>
     283
     284                                <h4>Labels</h4>
     285
     286                                <p>
     287                                        <span class="label">Regular Label</span><br>
     288                                        <span class="radius secondary label">Radius Secondary Label</span><br>
     289                                        <span class="round alert label">Round Alert Label</span><br>
     290                                        <span class="success label">Success Label</span><br>
     291                                </p>
     292
     293                                <hr>
     294
     295                                <h4>Magellan</h4>
     296
     297                                <div data-magellan-expedition="fixed">
     298                                        <dl class="sub-nav">
     299                                                <dd data-magellan-arrival="build"><a href="#build">Build with HTML</a></dd>
     300                                                <dd data-magellan-arrival="js"><a href="#js">Using Javascript</a></dd>
     301                                        </dl>
     302                                </div>
     303
     304                                <h5 data-magellan-destination="build">Build With Predefined HTML Structure</h5>
     305                                <p>Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper.</p>
     306                                <h5 data-magellan-destination="js">Awesome JS Goodness</h5>
     307                                <p>Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper.</p>
     308
     309                                <hr>
     310
     311                                <h4>Orbit</h4>
     312
     313                                <div class="row">
     314                                        <div class="large-6 columns">
     315                                                <ul id="featured1" data-orbit data-options="timer_speed:5000;">
     316                                                        <li>
     317                                                                <img src="http://lorempixel.com/800/800/" />
     318                                                                <div class="orbit-caption">
     319                                                                        Caption One. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
     320                                                                </div>
     321                                                        </li>
     322                                                        <li>
     323                                                                <img src="http://lorempixel.com/800/800/" />
     324                                                                <div class="orbit-caption">
     325                                                                        Caption Two. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
     326                                                                </div>
     327                                                        </li>
     328                                                        <li>
     329                                                                <img src="http://lorempixel.com/800/800/" />
     330                                                                <div class="orbit-caption">
     331                                                                        Caption Three. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
     332                                                                </div>
     333                                                        </li>
     334                                                </ul>
     335                                        </div>
     336                                </div>
     337
     338                                <hr>
     339
     340                                <h4>Pagination</h4>
     341
     342                                <ul class="pagination">
     343                                        <li class="arrow unavailable"><a href="">&laquo;</a></li>
     344                                        <li class="current"><a href="">1</a></li>
     345                                        <li><a href="">2</a></li>
     346                                        <li><a href="">3</a></li>
     347                                        <li><a href="">4</a></li>
     348                                        <li class="unavailable"><a href="">&hellip;</a></li>
     349                                        <li><a href="">12</a></li>
     350                                        <li><a href="">13</a></li>
     351                                        <li class="arrow"><a href="">&raquo;</a></li>
     352                                </ul>
     353
     354                                <hr>
     355
     356                                <h4>Panels</h4>
     357
     358                                <div class="row">
     359                                        <div class="large-6 columns">
     360                                                <div class="panel">
     361                                                        <h5>This is a regular panel.</h5>
     362                                                        <p>It has an easy to override visual style, and is appropriately subdued.</p>
     363                                                </div>
     364                                        </div>
     365                                        <div class="large-6 columns">
     366                                                <div class="panel callout radius">
     367                                                        <h5>This is a callout panel.</h5>
     368                                                        <p>It's a little ostentatious, but useful for important content.</p>
     369                                                </div>
     370                                        </div>
     371                                </div>
     372
     373                                <hr>
     374
     375                                <h4>Pricing Tables</h4>
     376
     377                                <div class="row">
     378                                        <div class="large-4 columns">
     379                                                <ul class="pricing-table">
     380                                                        <li class="title">Standard</li>
     381                                                        <li class="price">$99.99</li>
     382                                                        <li class="description">An awesome description</li>
     383                                                        <li class="bullet-item">1 Database</li>
     384                                                        <li class="bullet-item">5GB Storage</li>
     385                                                        <li class="bullet-item">20 Users</li>
     386                                                        <li class="cta-button"><a class="button" href="#">Buy Now</a></li>
     387                                                </ul>
     388                                        </div>
     389                                </div>
     390
     391                                <hr>
     392
     393                                <h4>Progress Bars</h4>
     394
     395                                <div class="progress large-6"><span class="meter" style="width: 40%"></span></div>
     396                                <div class="radius progress success large-8"><span class="meter" style="width: 80%"></span></div>
     397                                <div class="nice round progress alert large-10"><span class="meter" style="width: 30%"></span></div>
     398                                <div class="nice secondary progress"><span class="meter" style="width: 50%"></span></div>
     399
     400                                <hr>
     401
     402                                <h4>Reveal</h4>
     403
     404                                <a href="#" data-reveal-id="firstModal" class="radius button">Example Modal&hellip;</a>
     405                                <a href="#" data-reveal-id="videoModal" class="radius button">Example Modal w/Video&hellip;</a>
     406
     407                                <hr>
     408
     409                                <h4>Section</h4>
     410
     411                                <div class="row">
     412                                        <div class="large-3 columns">
     413                                                <div class="section-container vertical-nav" data-section="vertical-nav">
     414                                                        <section class="section">
     415                                                                <p class="title"><a href="#">Section 1</a></p>
     416                                                                <div class="content">
     417                                                                        <ul class="side-nav">
     418                                                                                <li><a href="#">Link 1</a></li>
     419                                                                                <li><a href="#">Link 2</a></li>
     420                                                                                <li><a href="#">Link 3</a></li>
     421                                                                                <li class="divider"></li>
     422                                                                                <li><a href="#">Link 1</a></li>
     423                                                                        </ul>
     424                                                                </div>
     425                                                        </section>
     426                                                        <section class="section">
     427                                                                <p class="title"><a href="#">Section 2</a></p>
     428                                                                <div class="content">
     429                                                                        <ul class="side-nav">
     430                                                                                <li><a href="#">Link 1</a></li>
     431                                                                                <li><a href="#">Link 2</a></li>
     432                                                                                <li><a href="#">Link 3</a></li>
     433                                                                                <li class="divider"></li>
     434                                                                                <li><a href="#">Link 1</a></li>
     435                                                                        </ul>
     436                                                                </div>
     437                                                        </section>
     438                                                </div>
     439                                        </div>
     440                                        <div class="large-8 columns">
     441                                                <div class="section-container horizontal-nav" data-section="horizontal-nav">
     442                                                        <section class="section">
     443                                                                <p class="title"><a href="#">Section 1</a></p>
     444                                                                <div class="content">
     445                                                                        <ul class="side-nav">
     446                                                                                <li><a href="#">Link 1</a></li>
     447                                                                                <li><a href="#">Link 2</a></li>
     448                                                                                <li><a href="#">Link 3</a></li>
     449                                                                                <li class="divider"></li>
     450                                                                                <li><a href="#">Link 1</a></li>
     451                                                                        </ul>
     452                                                                </div>
     453                                                        </section>
     454                                                        <section class="section">
     455                                                                <p class="title"><a href="#">Section 2</a></p>
     456                                                                <div class="content">
     457                                                                        <ul class="side-nav">
     458                                                                                <li><a href="#">Link 1</a></li>
     459                                                                                <li><a href="#">Link 2</a></li>
     460                                                                                <li><a href="#">Link 3</a></li>
     461                                                                                <li class="divider"></li>
     462                                                                                <li><a href="#">Link 1</a></li>
     463                                                                        </ul>
     464                                                                </div>
     465                                                        </section>
     466                                                </div>
     467                                                <div class="section-container auto" data-section data-options="deep_linking: true;">
     468                                                        <section class="section">
     469                                                                <p class="title"><a href="#panel1">Section 1</a></p>
     470                                                                <div class="content" data-slug="panel1">
     471                                                                        <p>Section 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
     472                                                                </div>
     473                                                        </section>
     474                                                        <section class="section">
     475                                                                <p class="title"><a href="#panel2">Section 2</a></p>
     476                                                                <div class="content" data-slug="panel2">
     477                                                                        <p>Section 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
     478                                                                </div>
     479                                                        </section>
     480                                                        <div class="section">
     481                                                                <p class="title"><a href="#panel3">Section 3</a></p>
     482                                                                <div class="content" data-slug="panel3">
     483                                                                        <form>
     484                                                                                <div class="row collapse">
     485                                                                                        <div class="large-2 columns">
     486                                                                                                <label class="inline">Your Name</label>
     487                                                                                        </div>
     488                                                                                        <div class="large-10 columns">
     489                                                                                                <input type="text" id="yourName" placeholder="Jane Smith">
     490                                                                                        </div>
     491                                                                                </div>
     492                                                                                <div class="row collapse">
     493                                                                                        <div class="large-2 columns">
     494                                                                                                <label class="inline"> Your Email</label>
     495                                                                                        </div>
     496                                                                                        <div class="large-10 columns">
     497                                                                                                <input type="text" id="yourEmail" placeholder="jane@smithco.com">
     498                                                                                        </div>
     499                                                                                </div>
     500                                                                                <label>What's up?</label>
     501                                                                                <textarea rows="4"></textarea>
     502                                                                                <button type="submit" class="radius button">Submit</button>
     503                                                                        </form>
     504                                                                </div>
     505                                                        </div>
     506                                                </div>
     507                                                <div class="section-container accordion" data-section="accordion">
     508                                                        <section class="section">
     509                                                                <p class="title"><a href="#panel1">Section 1</a></p>
     510                                                                <div class="content" data-slug="panel1">
     511                                                                        <p>Section 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
     512                                                                </div>
     513                                                        </section>
     514                                                        <section class="section">
     515                                                                <p class="title"><a href="#panel2">Section 2</a></p>
     516                                                                <div class="content" data-slug="panel2">
     517                                                                        <p>Section 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
     518                                                                </div>
     519                                                        </section>
     520                                                        <section class="section">
     521                                                                <p class="title"><a href="#panel3">Section 3</a></p>
     522                                                                <div class="content" data-slug="panel3">
     523                                                                        <p>Section 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
     524                                                                </div>
     525                                                        </section>
     526                                                </div>
     527                                                <div class="section-container tabs" data-section="tabs">
     528                                                        <section class="section">
     529                                                                <p class="title"><a href="#panel1">Section 1</a></p>
     530                                                                <div class="content" data-slug="panel1">
     531                                                                        <p>Section 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
     532                                                                </div>
     533                                                        </section>
     534                                                        <section class="section">
     535                                                                <p class="title"><a href="#panel2">Section 2</a></p>
     536                                                                <div class="content" data-slug="panel2">
     537                                                                        <p>Section 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
     538                                                                </div>
     539                                                        </section>
     540                                                        <section class="section">
     541                                                                <p class="title"><a href="#panel3">Section 3</a></p>
     542                                                                <div class="content" data-slug="panel3">
     543                                                                        <p>Section 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
     544                                                                </div>
     545                                                        </section>
     546                                                </div>
     547                                        </div>
     548                                </div>
     549                                        <hr>
     550                                        <h4>Side Nav</h4>
     551                                        <div class="row">
     552                                        <div class="large-4 columns end">
     553                                                <ul class="side-nav">
     554                                                        <li class="active"><a href="#">Link 1</a></li>
     555                                                        <li><a href="#">Link 2</a></li>
     556                                                        <li class="divider"></li>
     557                                                        <li><a href="#">Link 3</a></li>
     558                                                        <li><a href="#">Link 4</a></li>
     559                                                </ul>
     560                                        </div>
     561                                </div>
     562                                <hr>
     563                                <h4>Sub Nav</h4>
     564                                <dl class="sub-nav">
     565                                        <dt>Filter:</dt>
     566                                        <dd class="active"><a href="#">All</a></dd>
     567                                        <dd><a href="#">Active</a></dd>
     568                                        <dd><a href="#">Pending</a></dd>
     569                                        <dd><a href="#">Suspended</a></dd>
     570                                </dl>
     571                                <hr>
     572                                <h4>Switch</h4>
     573                                <div class="small-2 switch tiny">
     574                                        <input id="a" name="switch-a" type="radio" checked>
     575                                        <label for="a" onclick="">Off</label>
     576                                        <input id="a1" name="switch-a" type="radio">
     577                                        <label for="a1" onclick="">On</label>
     578                                        <span></span>
     579                                </div>
     580                                <div class="small-3 switch small">
     581                                        <input id="b" name="switch-b" type="radio" checked>
     582                                        <label for="b" onclick="">Off</label>
     583                                        <input id="b1" name="switch-b" type="radio">
     584                                        <label for="b1" onclick="">On</label>
     585                                        <span></span>
     586                                </div>
     587                                <div class="small-4 switch radius">
     588                                        <input id="c" name="switch-c" type="radio" checked>
     589                                        <label for="c" onclick="">Off</label>
     590                                        <input id="c1" name="switch-c" type="radio">
     591                                        <label for="c1" onclick="">On</label>
     592                                        <span></span>
     593                                </div>
     594                                <div class="small-6 switch large round">
     595                                        <input id="d" name="switch-d" type="radio" checked>
     596                                        <label for="d" onclick="">Off</label>
     597                                        <input id="d1" name="switch-d" type="radio">
     598                                        <label for="d1" onclick="">On</label>
     599                                        <span></span>
     600                                </div>
     601                                <hr>
     602                                <h4>Tables</h4>
     603
     604                                <table>
     605                                        <thead>
     606                                                <tr>
     607                                                        <th width="200">Table Header</th>
     608                                                        <th>Table Header</th>
     609                                                        <th width="150">Table Header</th>
     610                                                        <th width="150">Table Header</th>
     611                                                </tr>
     612                                        </thead>
     613                                        <tbody>
     614                                                <tr>
     615                                                        <td>Content Goes Here</td>
     616                                                        <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
     617                                                        <td>Content Goes Here</td>
     618                                                        <td>Content Goes Here</td>
     619                                                </tr>
     620                                                <tr>
     621                                                        <td>Content Goes Here</td>
     622                                                        <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
     623                                                        <td>Content Goes Here</td>
     624                                                        <td>Content Goes Here</td>
     625                                                </tr>
     626                                                <tr>
     627                                                        <td>Content Goes Here</td>
     628                                                        <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
     629                                                        <td>Content Goes Here</td>
     630                                                        <td>Content Goes Here</td>
     631                                                </tr>
     632                                        </tbody>
     633                                </table>
     634
     635                                <hr>
     636
     637                                <h4>Thumbnails</h4>
     638
     639                                <p><a class="th" href="http://lorempixel.com/800/800/"><img src="../img/demos/demo1-th.jpg"></a></p>
     640                                <img class="th" src="http://lorempixel.com/800/800/">
     641
     642                                <hr>
     643
     644                                <h4>Tooltips</h4>
     645
     646                                <p>The tooltips can be positioned on the <span data-tooltip class="has-tip" data-width="210" title="I'm on bottom and the default position.">"tip-bottom"</span>, which is the default position, <span data-tooltip class="has-tip tip-top" data-width="210" title="I'm on the top!">"tip-top" (hehe)</span>, <span data-tooltip="left" class="has-tip tip-left" data-width="90" title="I'm on the left!">"tip-left"</span>, or <span data-tooltip="right" class="has-tip tip-right" data-width="120" title="I'm on the right!">"tip-right"</span> of the target element by adding the appropriate class to them. You can even add your own custom class to style each tip differently. On a small device, the tooltips are full width and bottom aligned.</p>
     647
     648                                <hr>
     649
     650                                <h4>Top Bar</h4>
     651
     652                                <nav class="top-bar">
     653                                        <ul class="title-area">
     654                                                <!-- Title Area -->
     655                                                <li class="name">
     656                                                        <h1><a href="/">Top Bar</a></h1>
     657                                                </li>
     658                                                <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
     659                                                <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
     660                                        </ul>
     661
     662                                        <section class="top-bar-section">
     663                                                <ul class="left">
     664                                                        <li class="divider"></li>
     665                                                        <li class="has-dropdown"><a href="/grid.php">Item 1</a>
     666
     667                                                                <ul class="dropdown">
     668                                                                        <li><label>Level One</label></li>
     669                                                                        <li><a href="#">Sub-item 1</a></li>
     670                                                                        <li><a href="#">Sub-item 2</a></li>
     671                                                                        <li class="divider"></li>
     672                                                                        <li><a href="#">Sub-item 3</a></li>
     673                                                                        <li class="has-dropdown"><a href="#">Sub-item 4</a>
     674
     675                                                                                <ul class="dropdown">
     676                                                                                        <li><label>Level Two</label></li>
     677                                                                                        <li class="has-dropdown"><a href="#">Sub-item 1</a>
     678
     679                                                                                                <ul class="dropdown">
     680                                                                                                        <li><label>Level Three</label></li>
     681                                                                                                        <li class="has-dropdown"><a href="#">Sub-item 1</a>
     682
     683                                                                                                                <ul class="dropdown">
     684                                                                                                                        <li><label>Level Four</label></li>
     685                                                                                                                        <li><a href="http://zurb.com">Sub-item 1</a></li>
     686                                                                                                                </ul>
     687                                                                                                        </li>
     688                                                                                                        <li><a href="#">Sub-item 2</a></li>
     689                                                                                                        <li><a href="#">Sub-item 3</a></li>
     690                                                                                                        <li class="divider"></li>
     691                                                                                                        <li><a href="#">Sub-item 4</a></li>
     692                                                                                                </ul>
     693                                                                                        </li>
     694                                                                                        <li><a href="#">Sub-item 2</a></li>
     695                                                                                        <li><a href="#">Sub-item 3</a></li>
     696                                                                                        <li><a href="#">Sub-item 4</a></li>
     697                                                                                </ul>
     698                                                                        </li>
     699                                                                        <li><a href="#">Sub-item 5</a></li>
     700                                                                </ul>
     701                                                        </li>
     702                                                        <li class="divider"></li>
     703                                                </ul>
     704                                                <!-- Right Nav Section -->
     705                                                <ul class="right">
     706                                                        <li class="divider hide-for-small"></li>
     707                                                        <li><a href="#">Item 2</a></li>
     708                                                </ul>
     709                                        </section>
     710                                </nav>
     711
     712                                <hr>
     713
     714                                <h4>Type</h4>
     715
     716                                <h1>h1. This is a very large header.</h1>
     717                                <h2>h2. This is a large header.</h2>
     718                                <h3>h3. This is a medium header.</h3>
     719                                <h4>h4. This is a moderate header.</h4>
     720                                <h5>h5. This is a small header. h1.</h5>
     721                                <h6>h6. This is a tiny header. h1.</h6>
     722
     723                                <br>
     724
     725                                <h1 class="subheader">h1.subheader</h1>
     726                                <h2 class="subheader">h2.subheader</h2>
     727                                <h3 class="subheader">h3.subheader</h3>
     728                                <h4 class="subheader">h4.subheader</h4>
     729                                <h5 class="subheader">h5.subheader</h5>
     730                                <h6 class="subheader">h6.subheader</h6>
     731
     732                                <br>
     733
     734                                <ul class="disc">
     735                                        <li>List item with a much longer description or more content.</li>
     736                                        <li>List item</li>
     737                                        <li>List item
     738                                                <ul>
     739                                                        <li>Nested List Item</li>
     740                                                        <li>Nested List Item</li>
     741                                                        <li>Nested List Item</li>
     742                                                </ul>
     743                                        </li>
     744                                        <li>List item</li>
     745                                        <li>List item</li>
     746                                        <li>List item</li>
     747                                </ul>
     748
     749                                <!-- Ordered lists are great for lists that need order, duh -->
     750                                <ol>
     751                                        <li>List Item 1</li>
     752                                        <li>List Item 2</li>
     753                                        <li>List Item 3</li>
     754                                </ol>
     755
     756                                <!-- Definition lists are great for small block of copy that describe the header -->
     757                                <dl>
     758                                        <dt>Definition List</dt>
     759                                        <dd>Definition Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.</dd>
     760                                </dl>
     761
     762                                <br>
     763
     764                                <blockquote>I do not fear computers. I fear the lack of them. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.<cite>Isaac Asimov</cite></blockquote>
     765
     766                                <br>
     767
     768                                <ul class="vcard">
     769                                        <li class="fn">Gaius Baltar</li>
     770                                        <li class="street-address">123 Colonial Ave.</li>
     771                                        <li class="locality">Caprica City</li>
     772                                        <li><span class="state">Caprica</span>, <span class="zip">12345</span></li>
     773                                        <li class="email"><a href="#"><span class="__cf_email__" data-cfemail="e98ec78b88859d889ba98a84888085c78a8684">[email&#160;protected]</span><script cf-hash='f9e31' type="text/javascript">
     774                                        /* <![CDATA[ */!function(){try{var t="currentScript"in document?document.currentScript:function(){for(var t=document.getElementsByTagName("script"),e=t.length;e--;)if(t[e].getAttribute("cf-hash"))return t[e]}();if(t&&t.previousSibling){var e,r,n,i,c=t.previousSibling,a=c.getAttribute("data-cfemail");if(a){for(e="",r=parseInt(a.substr(0,2),16),n=2;a.length-n;n+=2)i=parseInt(a.substr(n,2),16)^r,e+=String.fromCharCode(i);e=document.createTextNode(e),c.parentNode.replaceChild(e,c)}}}catch(u){}}();/* ]]> */</script></a></li>
     775                                </ul>
     776
     777                                <hr>
     778
     779                                <h4>Visibility Classes</h4>
     780
     781                                <h5>Screen Size Visibility Control (Show)</h5>
     782                                <p>The following text should describe the screen size you're using:</p>
     783                                <p class="panel">
     784                                        <strong class="show-for-small">You are on a small screen.</strong>
     785                                        <strong class="show-for-medium">You are on a medium screen.</strong>
     786                                        <strong class="show-for-medium-up">You are on a medium, large or xlarge screen.</strong>
     787                                        <strong class="show-for-medium-down">You are on a medium or small screen.</strong>
     788                                        <strong class="show-for-large">You are on a large screen.</strong>
     789                                        <strong class="show-for-large-up">You are on a large or xlarge screen.</strong>
     790                                        <strong class="show-for-large-down">You are on a large, medium or small screen.</strong>
     791                                        <strong class="show-for-xlarge">You are on a xlarge screen.</strong>
     792                                </p>
     793
     794                                <h5>Screen Size Visibility Control (Hide)</h5>
     795                                <p>The following text should describe the screen size you aren't using:</p>
     796                                <p class="panel">
     797                                        <strong class="hide-for-small">You are <em>not</em> on a small screen.</strong>
     798                                        <strong class="hide-for-medium">You are <em>not</em> on a medium screen.</strong>
     799                                        <strong class="hide-for-medium-up">You are <em>not</em> on a medium, large or xlarge screen.</strong>
     800                                        <strong class="hide-for-medium-down">You are <em>not</em> on a medium or small screen.</strong>
     801                                        <strong class="hide-for-large">You are <em>not</em> on a large screen.</strong>
     802                                        <strong class="hide-for-large-up">You are <em>not</em> on a large or xlarge screen.</strong>
     803                                        <strong class="hide-for-large-down">You are <em>not</em> on a large, medium or small screen.</strong>
     804                                        <strong class="hide-for-xlarge">You are <em>not</em> on a xlarge screen.</strong>
     805                                </p>
     806
     807                                <h5>Orientation Detection</h5>
     808                                <p>The following text should describe the device orientation you're using:</p>
     809                                <p class="panel">
     810                                        <strong class="show-for-landscape">You are in landscape orientation.</strong>
     811                                        <strong class="show-for-portrait">You are in portrait orientation.</strong>
     812                                </p>
     813
     814                                <h5>Touch Detection</h5>
     815                                <p>The following text should describe if you're using a touch device:</p>
     816                                <p class="panel">
     817                                        <strong class="show-for-touch">You are on a touch-enabled device.</strong>
     818                                        <strong class="hide-for-touch">You are not on a touch-enabled device.</strong>
     819                                </p>
     820
     821                        </div>
     822                </div>
     823
     824        </div>
    847825
    848826</div>
     
    850828<!-- Joyride -->
    851829<ol class="joyride-list" data-joyride>
    852   <li data-id="numero1" data-class="custom so-awesome" data-text="Next">
    853     <h4>Stop #1</h4>
    854     <p>You can control all the details for you tour stop. Any valid HTML will work inside of Joyride.</p>
    855   </li>
    856   <li data-id="numero2" data-button="Next">
    857     <h4>Stop #2</h4>
    858     <p>Get the details right by styling Joyride with a custom stylesheet!</p>
    859   </li>
    860   <li data-button="Next">
    861     <h4>Stop #3</h4>
    862     <p>It works as a modal too!</p>
    863   </li>
     830        <li data-id="numero1" data-class="custom so-awesome" data-text="Next">
     831                <h4>Stop #1</h4>
     832                <p>You can control all the details for you tour stop. Any valid HTML will work inside of Joyride.</p>
     833        </li>
     834        <li data-id="numero2" data-button="Next">
     835                <h4>Stop #2</h4>
     836                <p>Get the details right by styling Joyride with a custom stylesheet!</p>
     837        </li>
     838        <li data-button="Next">
     839                <h4>Stop #3</h4>
     840                <p>It works as a modal too!</p>
     841        </li>
    864842</ol>
    865843
  • _plugins_/foundation/trunk/content/foundation-test-5.html

    r87448 r96416  
    44<h4 id="joyride">Joyride</h4>
    55<div>
    6   <a class="secondary button" id="start-jr" name="start-jr">Start Joyride</a>
    7 
    8   <h5 class="so-awesome" id="numero1">Build Joyride with HTML</h5>
    9 
    10   <p class="so-awesome" id="numero2">Stop Number 2 for You!</p><!--stops-->
    11 
    12   <ol class="joyride-list" data-joyride="">
    13     <li data-class="custom so-awesome" data-id="numero1" data-text="Next">
    14       <h4>Stop #1</h4>
    15 
    16       <p>You can control all the details for your tour stop. Any valid HTML will
    17         work inside of Joyride.</p>
    18     </li>
    19 
    20     <li data-button="Next" data-id="numero2">
    21       <h4>Stop #2</h4>
    22 
    23       <p>Get the details right by styling Joyride with a custom stylesheet!</p>
    24     </li>
    25 
    26     <li data-button="Next">
    27       <h4>Stop #3</h4>
    28 
    29       <p>It works as a modal too!</p>
    30     </li>
    31   </ol>
     6        <a class="secondary button" id="start-jr" name="start-jr">Start Joyride</a>
     7
     8        <h5 class="so-awesome" id="numero1">Build Joyride with HTML</h5>
     9
     10        <p class="so-awesome" id="numero2">Stop Number 2 for You!</p><!--stops-->
     11
     12        <ol class="joyride-list" data-joyride="">
     13                <li data-class="custom so-awesome" data-id="numero1" data-text="Next">
     14                        <h4>Stop #1</h4>
     15
     16                        <p>You can control all the details for your tour stop. Any valid HTML will
     17                                work inside of Joyride.</p>
     18                </li>
     19
     20                <li data-button="Next" data-id="numero2">
     21                        <h4>Stop #2</h4>
     22
     23                        <p>Get the details right by styling Joyride with a custom stylesheet!</p>
     24                </li>
     25
     26                <li data-button="Next">
     27                        <h4>Stop #3</h4>
     28
     29                        <p>It works as a modal too!</p>
     30                </li>
     31        </ol>
    3232</div>
    3333
     
    3737<h4 id="alert-boxes">Alert Boxes</h4>
    3838<div data-alert class="alert-box radius">
    39   This is a standard alert (div.alert-box.radius).
    40   <a href="" class="close">&times;</a>
     39        This is a standard alert (div.alert-box.radius).
     40        <a href="" class="close">&times;</a>
    4141</div>
    4242
    4343<div data-alert class="alert-box success">
    44   This is a success alert (div.alert-box.success).
    45   <a href="" class="close">&times;</a>
     44        This is a success alert (div.alert-box.success).
     45        <a href="" class="close">&times;</a>
    4646</div>
    4747
    4848<div data-alert class="alert-box alert round">
    49   This is an alert (div.alert-box.alert.round).
    50   <a href="" class="close">&times;</a>
     49        This is an alert (div.alert-box.alert.round).
     50        <a href="" class="close">&times;</a>
    5151</div>
    5252
    5353<div data-alert class="alert-box secondary">
    54   This is a secondary alert (div.alert-box.secondary).
    55   <a href="" class="close">&times;</a>
     54        This is a secondary alert (div.alert-box.secondary).
     55        <a href="" class="close">&times;</a>
    5656</div>
    5757
     
    6060<h4 id="block-grid">Block Grid</h4>
    6161<ul class="small-block-grid-2 large-block-grid-4">
    62   <li><img class="th" src="http://lorempixel.com/800/800/"></li>
    63   <li><img class="th" src="http://lorempixel.com/800/800/"></li>
    64   <li><img class="th" src="http://lorempixel.com/800/800/"></li>
    65   <li><img class="th" src="http://lorempixel.com/800/800/"></li>
     62        <li><img class="th" src="http://lorempixel.com/800/800/"></li>
     63        <li><img class="th" src="http://lorempixel.com/800/800/"></li>
     64        <li><img class="th" src="http://lorempixel.com/800/800/"></li>
     65        <li><img class="th" src="http://lorempixel.com/800/800/"></li>
    6666</ul>
    6767
     
    6969<h4 id="breadcrumbs">Breadcrumbs</h4>
    7070<ul class="breadcrumbs">
    71   <li><a href="#">Home</a></li>
    72   <li><a href="#">Features</a></li>
    73   <li class="unavailable"><a href="#">Gene Splicing</a></li>
    74   <li class="current"><a href="#">Cloning</a></li>
     71        <li><a href="#">Home</a></li>
     72        <li><a href="#">Features</a></li>
     73        <li class="unavailable"><a href="#">Gene Splicing</a></li>
     74        <li class="current"><a href="#">Cloning</a></li>
    7575</ul>
    7676
     
    7878<h4 id="buttons">Buttons</h4>
    7979<div class="row">
    80   <div class="small-6 large-6 columns">
    81     <a href="#" class="tiny button">.tiny.button</a><br>
    82     <a href="#" class="small button">.small.button</a><br>
    83     <a href="#" class="button">.button</a><br>
    84     <a href="#" class="button expand">.expand</a><br>
    85   </div>
    86   <div class="small-6 large-6 columns">
    87     <a href="#" class="tiny button secondary">.tiny.secondary</a><br>
    88     <a href="#" class="small button success radius">.small.success.radius</a><br>
    89     <a href="#" class="button alert round disabled">.round.disabled</a><br>
    90 
    91   </div>
     80        <div class="small-6 large-6 columns">
     81                <a href="#" class="tiny button">.tiny.button</a><br>
     82                <a href="#" class="small button">.small.button</a><br>
     83                <a href="#" class="button">.button</a><br>
     84                <a href="#" class="button expand">.expand</a><br>
     85        </div>
     86        <div class="small-6 large-6 columns">
     87                <a href="#" class="tiny button secondary">.tiny.secondary</a><br>
     88                <a href="#" class="small button success radius">.small.success.radius</a><br>
     89                <a href="#" class="button alert round disabled">.round.disabled</a><br>
     90        </div>
    9291</div>
    9392
     
    9594<h4 id="button-groups">Button Groups</h4>
    9695<ul class="button-group">
    97   <li><a href="#" class="small button">Button 1</a></li>
    98   <li><a href="#" class="small button">Button 2</a></li>
    99   <li><a href="#" class="small button">Button 3</a></li>
     96        <li><a href="#" class="small button">Button 1</a></li>
     97        <li><a href="#" class="small button">Button 2</a></li>
     98        <li><a href="#" class="small button">Button 3</a></li>
    10099</ul>
    101100<ul class="button-group radius">
    102   <li><a href="#" class="button secondary">Button 1</a></li>
    103   <li><a href="#" class="button secondary">Button 2</a></li>
    104   <li><a href="#" class="button secondary">Button 3</a></li>
    105   <li><a href="#" class="button secondary">Button 4</a></li>
     101        <li><a href="#" class="button secondary">Button 1</a></li>
     102        <li><a href="#" class="button secondary">Button 2</a></li>
     103        <li><a href="#" class="button secondary">Button 3</a></li>
     104        <li><a href="#" class="button secondary">Button 4</a></li>
    106105</ul>
    107106<ul class="button-group round even-3">
    108   <li><a href="#" class="button alert">Button 1</a></li>
    109   <li><a href="#" class="button alert">Button 2</a></li>
    110   <li><a href="#" class="button alert">Button 3</a></li>
     107        <li><a href="#" class="button alert">Button 1</a></li>
     108        <li><a href="#" class="button alert">Button 2</a></li>
     109        <li><a href="#" class="button alert">Button 3</a></li>
    111110</ul>
    112111<ul class="button-group round even-3">
    113   <li><input type="submit" class="button success" value="Button 1"></li>
    114   <li><input type="submit" class="button success" value="Button 2"></li>
    115   <li><input type="submit" class="button success" value="Button 3"></li>
     112        <li><input type="submit" class="button success" value="Button 1"></li>
     113        <li><input type="submit" class="button success" value="Button 2"></li>
     114        <li><input type="submit" class="button success" value="Button 3"></li>
    116115</ul>
    117116
     
    119118<h4 id="dropdown-buttons">Dropdown Buttons</h4>
    120119<ul id="drop" class="f-dropdown" data-dropdown-content>
    121   <li><a href="#">This is a link</a></li>
    122   <li><a href="#">This is another</a></li>
    123   <li><a href="#">Yet another link</a></li>
    124 </ul>
    125 
    126 <p><a href="#" data-dropdown="drop" class="tiny button dropdown">Tiny Dropdown Button</a><br>
    127   <a href="#" data-dropdown="drop" class="small secondary radius button dropdown">Small Secondary Radius Dropdown Button</a><br>
    128   <a href="#" data-dropdown="drop" class="button alert round dropdown">Button Alert Round Dropdown Button</a><br>
    129   <a href="#" data-dropdown="drop" class="large success button dropdown">Large Success Dropdown Button</a><br>
    130   <a href="#" data-dropdown="drop" class="large button dropdown expand">Large Expanded Dropdown Button</a></p>
     120        <li><a href="#">This is a link</a></li>
     121        <li><a href="#">This is another</a></li>
     122        <li><a href="#">Yet another link</a></li>
     123</ul>
     124
     125<p>
     126<a href="#" data-dropdown="drop" class="tiny button dropdown">Tiny Dropdown Button</a><br>
     127        <a href="#" data-dropdown="drop" class="small secondary radius button dropdown">Small Secondary Radius Dropdown Button</a><br>
     128        <a href="#" data-dropdown="drop" class="button alert round dropdown">Button Alert Round Dropdown Button</a><br>
     129        <a href="#" data-dropdown="drop" class="large success button dropdown">Large Success Dropdown Button</a><br>
     130        <a href="#" data-dropdown="drop" class="large button dropdown expand">Large Expanded Dropdown Button</a>
     131</p>
    131132<hr>
    132133<h4 id="split-buttons">Split Buttons</h4>
    133134<p> <a href="#" class="tiny button split">Tiny Split Button <span data-dropdown="drop"></span></a><br>
    134   <a href="#" class="small secondary radius button split">Small Secondary Radius Split Button <span data-dropdown="drop"></span></a><br>
    135   <a href="#" class="button alert round split">Round Alert Split Button <span data-dropdown="drop"></span></a><br>
    136   <a href="#" class="large success button split">Large Success Split Button <span data-dropdown="drop"></span></a></p>
     135        <a href="#" class="small secondary radius button split">Small Secondary Radius Split Button <span data-dropdown="drop"></span></a><br>
     136        <a href="#" class="button alert round split">Round Alert Split Button <span data-dropdown="drop"></span></a><br>
     137        <a href="#" class="large success button split">Large Success Split Button <span data-dropdown="drop"></span></a>
     138</p>
    137139<hr>
    138140<h4 id="switches">Switches</h4>
    139141<div class="small-2 switch tiny">
    140   <input id="a" name="switch-a" type="radio" checked>
    141   <label for="a" onclick="">Off</label>
    142 
    143   <input id="a1" name="switch-a" type="radio">
    144   <label for="a1" onclick="">On</label>
    145 
    146   <span></span>
     142        <input id="a" name="switch-a" type="radio" checked>
     143        <label for="a" onclick="">Off</label>
     144
     145        <input id="a1" name="switch-a" type="radio">
     146        <label for="a1" onclick="">On</label>
     147
     148        <span></span>
    147149</div>
    148150
    149151<div class="small-3 switch small">
    150   <input id="b" name="switch-b" type="radio" checked>
    151   <label for="b" onclick="">Off</label>
    152 
    153   <input id="b1" name="switch-b" type="radio">
    154   <label for="b1" onclick="">On</label>
    155 
    156   <span></span>
     152        <input id="b" name="switch-b" type="radio" checked>
     153        <label for="b" onclick="">Off</label>
     154
     155        <input id="b1" name="switch-b" type="radio">
     156        <label for="b1" onclick="">On</label>
     157
     158        <span></span>
    157159</div>
    158160
    159161<div class="small-4 switch radius">
    160   <input id="c" name="switch-c" type="radio" checked>
    161   <label for="c" onclick="">Off</label>
    162 
    163   <input id="c1" name="switch-c" type="radio">
    164   <label for="c1" onclick="">On</label>
    165 
    166   <span></span>
     162        <input id="c" name="switch-c" type="radio" checked>
     163        <label for="c" onclick="">Off</label>
     164
     165        <input id="c1" name="switch-c" type="radio">
     166        <label for="c1" onclick="">On</label>
     167
     168        <span></span>
    167169</div>
    168170
    169171<div class="small-6 switch large round">
    170   <input id="d" name="switch-d" type="radio" checked>
    171   <label for="d" onclick="">Off</label>
    172 
    173   <input id="d1" name="switch-d" type="radio">
    174   <label for="d1" onclick="">On</label>
    175 
    176   <span></span>
     172        <input id="d" name="switch-d" type="radio" checked>
     173        <label for="d" onclick="">Off</label>
     174
     175        <input id="d1" name="switch-d" type="radio">
     176        <label for="d1" onclick="">On</label>
     177
     178        <span></span>
    177179</div>
    178180
     
    181183<h4 id="clearing">Clearing</h4>
    182184<div>
    183   <ul class="clearing-thumbs" data-clearing>
    184     <li><a class="th" href="http://lorempixel.com/800/800/"><img data-caption="Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum." src="http://lorempixel.com/100/100/"></a></li>
    185 
    186     <li><a class="th" href="http://lorempixel.com/800/800/"><img src="http://lorempixel.com/100/100/"></a></li>
    187 
    188     <li><a class="th" href="http://lorempixel.com/800/800/"><img data-caption="Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus." src="http://lorempixel.com/100/100/"></a></li>
    189 
    190     <li><a class="th" href="http://lorempixel.com/800/800/"><img src="http://lorempixel.com/100/100/"></a></li>
    191 
    192     <li><a class="th" href="http://lorempixel.com/800/800/"><img data-caption="Integer posuere erat a ante venenatis dapibus posuere velit aliquet." src="http://lorempixel.com/100/100/"></a></li>
    193   </ul>
     185        <ul class="clearing-thumbs" data-clearing>
     186                <li><a class="th" href="http://lorempixel.com/800/800/"><img data-caption="Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum." src="http://lorempixel.com/100/100/"></a></li>
     187
     188                <li><a class="th" href="http://lorempixel.com/800/800/"><img src="http://lorempixel.com/100/100/"></a></li>
     189
     190                <li><a class="th" href="http://lorempixel.com/800/800/"><img data-caption="Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus." src="http://lorempixel.com/100/100/"></a></li>
     191
     192                <li><a class="th" href="http://lorempixel.com/800/800/"><img src="http://lorempixel.com/100/100/"></a></li>
     193
     194                <li><a class="th" href="http://lorempixel.com/800/800/"><img data-caption="Integer posuere erat a ante venenatis dapibus posuere velit aliquet." src="http://lorempixel.com/100/100/"></a></li>
     195        </ul>
    194196</div>
    195197
     
    198200<h4 id="forms">Forms</h4>
    199201<form>
    200   <fieldset>
    201     <legend>Fieldset</legend>
    202 
    203     <div class="row">
    204       <div class="large-12 columns">
    205         <label>Input Label</label>
    206         <input type="text" placeholder="large-12.columns">
    207       </div>
    208     </div>
    209 
    210     <div class="row">
    211       <div class="large-4 columns">
    212         <label>Input Label</label>
    213         <input type="text" placeholder="large-4.columns">
    214       </div>
    215       <div class="large-4 columns">
    216         <label>Input Label</label>
    217         <input type="text" placeholder="large-4.columns">
    218       </div>
    219       <div class="large-4 columns">
    220         <div class="row collapse">
    221           <label>Input Label</label>
    222           <div class="small-9 columns">
    223             <input type="text" placeholder="small-9.columns">
    224           </div>
    225           <div class="small-3 columns">
    226             <span class="postfix">.com</span>
    227           </div>
    228         </div>
    229       </div>
    230     </div>
    231 
    232     <div class="row">
    233       <div class="large-12 columns">
    234         <label>Textarea Label</label>
    235         <textarea placeholder="small-12.columns"></textarea>
    236       </div>
    237     </div>
    238 
    239   </fieldset>
     202        <fieldset>
     203                <legend>Fieldset</legend>
     204
     205                <div class="row">
     206                        <div class="large-12 columns">
     207                                <label>Input Label</label>
     208                                <input type="text" placeholder="large-12.columns">
     209                        </div>
     210                </div>
     211
     212                <div class="row">
     213                        <div class="large-4 columns">
     214                                <label>Input Label</label>
     215                                <input type="text" placeholder="large-4.columns">
     216                        </div>
     217                        <div class="large-4 columns">
     218                                <label>Input Label</label>
     219                                <input type="text" placeholder="large-4.columns">
     220                        </div>
     221                        <div class="large-4 columns">
     222                                <div class="row collapse">
     223                                        <label>Input Label</label>
     224                                        <div class="small-9 columns">
     225                                                <input type="text" placeholder="small-9.columns">
     226                                        </div>
     227                                        <div class="small-3 columns">
     228                                                <span class="postfix">.com</span>
     229                                        </div>
     230                                </div>
     231                        </div>
     232                </div>
     233
     234                <div class="row">
     235                        <div class="large-12 columns">
     236                                <label>Textarea Label</label>
     237                                <textarea placeholder="small-12.columns"></textarea>
     238                        </div>
     239                </div>
     240
     241        </fieldset>
    240242</form>
    241243
    242244<hr>
    243245<h4 id="dropdowns">Dropdowns</h4>
    244 <p><a class="button" data-dropdown="tinyDrop" href="#">Link Dropdown &raquo;</a>
    245   <a class="button" data-dropdown="contentDrop" href="#">Content Dropdown &raquo;</a>
    246   <!-- Dropdowns --></p>
     246<p>
     247        <a class="button" data-dropdown="tinyDrop" href="#">Link Dropdown &raquo;</a>
     248        <a class="button" data-dropdown="contentDrop" href="#">Content Dropdown &raquo;</a>
     249<!-- Dropdowns -->
     250</p>
    247251<ul class="f-dropdown" data-dropdown-content="" id="tinyDrop">
    248   <li><a href="#">This is a link</a></li>
    249 
    250   <li><a href="#">This is another</a></li>
    251 
    252   <li><a href="#">Yet another</a></li>
     252        <li><a href="#">This is a link</a></li>
     253
     254        <li><a href="#">This is another</a></li>
     255
     256        <li><a href="#">Yet another</a></li>
    253257</ul>
    254258
    255259<div class="f-dropdown content medium" data-dropdown-content="" id=
    256      "contentDrop">
    257   <h4>Title</h4>
    258 
    259   <p>Some text that people will think is awesome! Some text that people will
    260     think is awesome! Some text that people will think is awesome!</p><img src=
    261                                                                            "http://lorempixel.com/800/800/">
    262 
    263   <p>Launching a Discovery Mission</p><a class="button" href="#">Button</a>
     260        "contentDrop">
     261        <h4>Title</h4>
     262
     263        <p>Some text that people will think is awesome! Some text that people will
     264        think is awesome! Some text that people will think is awesome!</p><img src=
     265        "http://lorempixel.com/800/800/">
     266
     267        <p>Launching a Discovery Mission</p><a class="button" href="#">Button</a>
    264268</div>
    265269
     
    268272<h4 id="flex-video">Flex Video</h4>
    269273<div class="flex-video">
    270   <iframe width="420" height="315" src="http://www.youtube.com/embed/0_EW8aNgKlA" frameborder="0" allowfullscreen></iframe>
     274        <iframe width="420" height="315" src="http://www.youtube.com/embed/0_EW8aNgKlA" frameborder="0" allowfullscreen></iframe>
    271275</div>
    272276
     
    274278<h4 id="inline-lists">Inline Lists</h4>
    275279<ul class="inline-list">
    276   <li><a href="#">Link 1</a></li>
    277   <li><a href="#">Link 2</a></li>
    278   <li><a href="#">Link 3</a></li>
    279   <li><a href="#">Link 4</a></li>
    280   <li><a href="#">Link 5</a></li>
     280        <li><a href="#">Link 1</a></li>
     281        <li><a href="#">Link 2</a></li>
     282        <li><a href="#">Link 3</a></li>
     283        <li><a href="#">Link 4</a></li>
     284        <li><a href="#">Link 5</a></li>
    281285</ul>
    282286
     
    287291<h4 id="labels">Labels</h4>
    288292<p>
    289   <span class="label">Regular Label</span><br>
    290   <span class="radius secondary label">Radius Secondary Label</span><br>
    291   <span class="round alert label">Round Alert Label</span><br>
    292   <span class="success label">Success Label</span><br>
     293        <span class="label">Regular Label</span><br>
     294        <span class="radius secondary label">Radius Secondary Label</span><br>
     295        <span class="round alert label">Round Alert Label</span><br>
     296        <span class="success label">Success Label</span><br>
    293297</p>
    294298
     
    296300<h4 id="magellan">Magellan</h4>
    297301<div class="magellan-container" data-magellan-expedition="fixed">
    298   <dl class="sub-nav">
    299     <dd data-magellan-arrival="build"><a href="#build">Build with HTML</a></dd>
    300     <dd data-magellan-arrival="js"><a href="#js">Using Javascript</a></dd>
    301   </dl>
     302        <dl class="sub-nav">
     303                <dd data-magellan-arrival="build"><a href="#build">Build with HTML</a></dd>
     304                <dd data-magellan-arrival="js"><a href="#js">Using Javascript</a></dd>
     305        </dl>
    302306</div>
    303307
     
    313317<h4 id="orbit">Orbit</h4>
    314318<div class="row">
    315   <div class="large-12 columns">
    316     <ul id="featured1" data-orbit data-options="timer_speed:5000;">
    317       <li>
    318         <img src="http://lorempixel.com/800/800/" />
    319         <div class="orbit-caption">
    320           Caption One. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    321         </div>
    322       </li>
    323       <li>
    324         <img src="http://lorempixel.com/800/800/" />
    325         <div class="orbit-caption">
    326           Caption Two. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    327         </div>
    328       </li>
    329       <li>
    330         <img src="http://lorempixel.com/800/800/" />
    331         <div class="orbit-caption">
    332           Caption Three. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    333         </div>
    334       </li>
    335     </ul>
    336   </div>
     319        <div class="large-12 columns">
     320                <ul id="featured1" data-orbit data-options="timer_speed:5000;">
     321                        <li>
     322                                <img src="http://lorempixel.com/800/800/" />
     323                                <div class="orbit-caption">
     324                                        Caption One. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
     325                                </div>
     326                        </li>
     327                        <li>
     328                                <img src="http://lorempixel.com/800/800/" />
     329                                <div class="orbit-caption">
     330                                        Caption Two. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
     331                                </div>
     332                        </li>
     333                        <li>
     334                                <img src="http://lorempixel.com/800/800/" />
     335                                <div class="orbit-caption">
     336                                        Caption Three. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
     337                                </div>
     338                        </li>
     339                </ul>
     340        </div>
    337341</div>
    338342
     
    340344<h4 id="pagination">Pagination</h4>
    341345<ul class="pagination">
    342   <li class="arrow unavailable"><a href="">&laquo;</a></li>
    343   <li class="current"><a href="">1</a></li>
    344   <li><a href="">2</a></li>
    345   <li><a href="">3</a></li>
    346   <li><a href="">4</a></li>
    347   <li class="unavailable"><a href="">&hellip;</a></li>
    348   <li><a href="">12</a></li>
    349   <li><a href="">13</a></li>
    350   <li class="arrow"><a href="">&raquo;</a></li>
     346        <li class="arrow unavailable"><a href="">&laquo;</a></li>
     347        <li class="current"><a href="">1</a></li>
     348        <li><a href="">2</a></li>
     349        <li><a href="">3</a></li>
     350        <li><a href="">4</a></li>
     351        <li class="unavailable"><a href="">&hellip;</a></li>
     352        <li><a href="">12</a></li>
     353        <li><a href="">13</a></li>
     354        <li class="arrow"><a href="">&raquo;</a></li>
    351355</ul>
    352356
     
    354358<h4 id="panels">Panels</h4>
    355359<div class="row">
    356   <div class="large-6 columns">
    357     <div class="panel">
    358       <h5>This is a regular panel.</h5>
    359       <p>It has an easy to override visual style, and is appropriately subdued.</p>
    360     </div>
    361   </div>
    362   <div class="large-6 columns">
    363     <div class="panel callout radius">
    364       <h5>This is a radius callout panel.</h5>
    365       <p>It&#39;s a little ostentatious, but useful for important content.</p>
    366     </div>
    367   </div>
    368 
    369 </div>
     360        <div class="large-6 columns">
     361                <div class="panel">
     362                        <h5>This is a regular panel.</h5>
     363                        <p>It has an easy to override visual style, and is appropriately subdued.</p>
     364                </div>
     365        </div>
     366        <div class="large-6 columns">
     367                <div class="panel callout radius">
     368                        <h5>This is a radius callout panel.</h5>
     369                        <p>It&#39;s a little ostentatious, but useful for important content.</p>
     370                </div>
     371        </div>
     372</div>
     373
    370374<h4 id="pricing-tables">Pricing Tables</h4>
    371375<div class="row">
    372   <div class="large-4 columns">
    373     <ul class="pricing-table">
    374       <li class="title">Standard</li>
    375       <li class="price">$99.99</li>
    376       <li class="description">An awesome description</li>
    377       <li class="bullet-item">1 Database</li>
    378       <li class="bullet-item">5GB Storage</li>
    379       <li class="bullet-item">20 Users</li>
    380       <li class="cta-button"><a class="button" href="#">Buy Now</a></li>
    381     </ul>
    382   </div>
     376        <div class="large-4 columns">
     377                <ul class="pricing-table">
     378                        <li class="title">Standard</li>
     379                        <li class="price">$99.99</li>
     380                        <li class="description">An awesome description</li>
     381                        <li class="bullet-item">1 Database</li>
     382                        <li class="bullet-item">5GB Storage</li>
     383                        <li class="bullet-item">20 Users</li>
     384                        <li class="cta-button"><a class="button" href="#">Buy Now</a></li>
     385                </ul>
     386        </div>
    383387</div>
    384388
     
    392396<hr>
    393397<h4 id="reveal">Reveal</h4>
    394 <p><a href="#" data-reveal-id="firstModal" class="radius button">Example Modal&hellip;</a>
    395   <a href="#" data-reveal-id="videoModal" class="radius button">Example Video Modal&hellip;</a></p>
     398<p>
     399        <a href="#" data-reveal-id="firstModal" class="radius button">Example Modal&hellip;</a>
     400        <a href="#" data-reveal-id="videoModal" class="radius button">Example Video Modal&hellip;</a>
     401</p>
    396402<!-- Reveal Modals begin -->
    397   <div id="firstModal" class="reveal-modal" data-reveal>
    398     <h2>This is a modal.</h2>
    399     <p>Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of <code>close-reveal-modal</code>. Clicking anywhere outside the modal will also dismiss it.</p>
    400     <p>Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.</p>
    401     <p><a href="#" data-reveal-id="secondModal" class="secondary button">Second Modal&hellip;</a></p>
    402     <a class="close-reveal-modal">&#215;</a>
    403   </div>
    404 
    405   <div id="secondModal" class="reveal-modal" data-reveal>
    406     <h2>This is a second modal.</h2>
    407     <p>See? It just slides into place after the first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.</p>
    408     <a class="close-reveal-modal">&#215;</a>
    409   </div>
    410 
    411   <div id="videoModal" class="reveal-modal large" data-reveal>
    412     <h2>This modal has video</h2>
    413     <div class="flex-video">
    414       <iframe width="420" height="315" src="//www.youtube.com/embed/aiBt44rrslw" frameborder="0" allowfullscreen></iframe>
     403<div id="firstModal" class="reveal-modal" data-reveal>
     404        <h2>This is a modal.</h2>
     405        <p>Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of <code>close-reveal-modal</code>. Clicking anywhere outside the modal will also dismiss it.</p>
     406        <p>Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.</p>
     407        <p><a href="#" data-reveal-id="secondModal" class="secondary button">Second Modal&hellip;</a></p>
     408        <a class="close-reveal-modal">&#215;</a>
     409</div>
     410
     411<div id="secondModal" class="reveal-modal" data-reveal>
     412        <h2>This is a second modal.</h2>
     413        <p>See? It just slides into place after the first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.</p>
     414        <a class="close-reveal-modal">&#215;</a>
     415</div>
     416
     417<div id="videoModal" class="reveal-modal large" data-reveal>
     418        <h2>This modal has video</h2>
     419        <div class="flex-video">
     420                <iframe width="420" height="315" src="//www.youtube.com/embed/aiBt44rrslw" frameborder="0" allowfullscreen></iframe>
     421        </div>
     422        <a class="close-reveal-modal">&#215;</a>
     423</div>
     424<!-- Reveal Modals end -->
     425
     426<hr>
     427<h4 id="sliders">Sliders</h4>
     428<div class="range-slider" data-slider>
     429        <span class="range-slider-handle"></span>
     430        <span class="range-slider-active-segment"></span>
     431        <input type="hidden">
     432</div>
     433<div class="range-slider radius" data-slider>
     434        <span class="range-slider-handle"></span>
     435        <span class="range-slider-active-segment"></span>
     436        <input type="hidden">
     437</div>
     438<div class="range-slider round" data-slider>
     439        <span class="range-slider-handle"></span>
     440        <span class="range-slider-active-segment"></span>
     441        <input type="hidden">
     442</div>
     443<div class="range-slider" data-slider data-options="step: 20;">
     444        <span class="range-slider-handle"></span>
     445        <span class="range-slider-active-segment"></span>
     446        <input type="hidden">
     447</div>
     448
     449
     450<hr>
     451<h4 id="accordion">Accordion</h4>
     452<ul class="accordion" data-accordion>
     453        <li class="accordion-navigation">
     454                <a href="#panel1a">Accordion 1</a>
     455                <div id="panel1a" class="content active">
     456                        <ul class="small-block-grid-2 large-block-grid-3 ">
     457                                <li><img src="http://lorempixel.com/800/800/"></li>
     458                                <li><img src="http://lorempixel.com/800/800/"></li>
     459                                <li><img src="http://lorempixel.com/800/800/"></li>
     460                        </ul>
     461                </div>
     462        </li>
     463        <li class="accordion-navigation">
     464                <a href="#panel2a">Accordion 2</a>
     465                <div id="panel2a" class="content">
     466                        <div class="row">
     467                                <div class="small-6 columns">
     468                                        <p>Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
     469                                </div>
     470                                <div class="small-6 columns">
     471                                        <img src="http://lorempixel.com/800/800/">
     472                                </div>
     473                        </div>
     474                </div>
     475        </li>
     476        <li class="accordion-navigation">
     477                <a href="#panel3a">Accordion 3</a>
     478                <div id="panel3a" class="content">
     479                        Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
     480                </div>
     481        </li>
     482</ul>
     483
     484<hr>
     485<h4 id="tabs">Tabs</h4>
     486<dl class="tabs" data-tab>
     487        <dd class="active"><a href="#panel2-1">Tab 1</a></dd>
     488        <dd><a href="#panel2-2">Tab 2</a></dd>
     489        <dd><a href="#panel2-3">Tab 3</a></dd>
     490        <dd><a href="#panel2-4">Tab 4</a></dd>
     491</dl>
     492<div class="tabs-content">
     493        <div class="content active" id="panel2-1">
     494                <p>First panel content goes here...</p>
     495        </div>
     496        <div class="content" id="panel2-2">
     497                <p>Second panel content goes here...</p>
     498        </div>
     499        <div class="content" id="panel2-3">
     500                <p>Third panel content goes here...</p>
     501        </div>
     502        <div class="content" id="panel2-4">
     503                <p>Fourth panel content goes here...</p>
     504        </div>
     505</div>
     506
     507<dl class="tabs vertical" data-tab="">
     508        <dd class="active"><a href="#panel1a">Tab 1</a></dd>
     509
     510        <dd><a href="#panel2a">Tab 2</a></dd>
     511
     512        <dd><a href="#panel3a">Tab 3</a></dd>
     513
     514        <dd><a href="#panel4a">Tab 4</a></dd>
     515</dl>
     516
     517<div class="tabs-content vertical">
     518        <div class="content active" id="panel1a">
     519                <p>Panel 1 content goes here.</p>
     520        </div>
     521
     522        <div class="content" id="panel2a">
     523                <p>Panel 2 content goes here.</p>
     524        </div>
     525
     526        <div class="content" id="panel3a">
     527                <p>Panel 3 content goes here.</p>
     528        </div>
     529
     530        <div class="content" id="panel4a">
     531                <p>Panel 4 content goes here.</p>
     532        </div>
     533</div>
     534
     535
     536
     537<hr>
     538<h4 id="side-nav">Side Nav</h4>
     539<div class="row">
     540        <div class="large-4 columns end">
     541                <ul class="side-nav">
     542                        <li class="active"><a href="#">Link 1</a></li>
     543                        <li><a href="#">Link 2</a></li>
     544                        <li class="divider"></li>
     545                        <li><a href="#">Link 3</a></li>
     546                        <li><a href="#">Link 4</a></li>
     547                </ul>
     548        </div>
     549</div>
     550
     551<hr>
     552<h4 id="sub-nav">Sub Nav</h4>
     553<dl class="sub-nav">
     554        <dt>Filter:</dt>
     555        <dd class="active"><a href="#">All</a></dd>
     556        <dd><a href="#">Active</a></dd>
     557        <dd><a href="#">Pending</a></dd>
     558        <dd><a href="#">Suspended</a></dd>
     559</dl>
     560
     561<hr>
     562<h4 id="tables">Tables</h4>
     563<table>
     564        <thead>
     565                <tr>
     566                        <th width="200">Table Header</th>
     567                        <th>Table Header</th>
     568                        <th width="150">Table Header</th>
     569                        <th width="150">Table Header</th>
     570                </tr>
     571        </thead>
     572        <tbody>
     573                <tr>
     574                        <td>Content Goes Here</td>
     575                        <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
     576                        <td>Content Goes Here</td>
     577                        <td>Content Goes Here</td>
     578                </tr>
     579                <tr>
     580                        <td>Content Goes Here</td>
     581                        <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
     582                        <td>Content Goes Here</td>
     583                        <td>Content Goes Here</td>
     584                </tr>
     585                <tr>
     586                        <td>Content Goes Here</td>
     587                        <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
     588                        <td>Content Goes Here</td>
     589                        <td>Content Goes Here</td>
     590                </tr>
     591        </tbody>
     592</table>
     593
     594<hr>
     595<h4 id="thumbnails">Thumbnails</h4>
     596<p><img class="th" src="http://lorempixel.com/800/800/"><img class="th" src="http://lorempixel.com/800/800/"></p>
     597<hr>
     598<h4 id="tooltips">Tooltips</h4>
     599<p>The tooltips can be positioned on the <span data-tooltip class="has-tip" data-width="210" title="I'm on bottom and the default position.">&quot;tip-bottom&quot;</span>, which is the default position, <span data-tooltip class="has-tip tip-top noradius" data-width="210" title="I'm on the top and I'm not rounded!">&quot;tip-top&quot; (hehe)</span>, <span data-tooltip="left" class="has-tip tip-left" data-width="90" title="I'm on the left!">&quot;tip-left&quot;</span>, or <span data-tooltip="right" class="has-tip tip-right" data-width="120" title="I'm on the right!">&quot;tip-right&quot;</span> of the target element by adding the appropriate class to them. You can even add your own custom class to style each tip differently. On a small device, the tooltips are full width and bottom aligned.</p>
     600
     601<hr>
     602<h4 id="top-bar">Top Bar</h4>
     603<nav class="top-bar" data-topbar>
     604        <ul class="title-area">
     605                <!-- Title Area -->
     606                <li class="name">
     607                        <h1>
     608                                <a href="#">
     609                                        Top Bar Title
     610                                </a>
     611                        </h1>
     612                </li>
     613                <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
     614        </ul>
     615
     616        <section class="top-bar-section">
     617                <!-- Right Nav Section -->
     618                <ul class="right">
     619                        <li class="divider"></li>
     620                        <li class="has-dropdown">
     621                                <a href="#">Main Item 1</a>
     622                                <ul class="dropdown">
     623                                        <li><label>Section Name</label></li>
     624                                        <li class="has-dropdown">
     625                                                <a href="#" class="">Has Dropdown, Level 1</a>
     626                                                <ul class="dropdown">
     627                                                        <li><a href="#">Dropdown Options</a></li>
     628                                                        <li><a href="#">Dropdown Options</a></li>
     629                                                        <li><a href="#">Level 2</a></li>
     630                                                        <li><a href="#">Subdropdown Option</a></li>
     631                                                        <li><a href="#">Subdropdown Option</a></li>
     632                                                        <li><a href="#">Subdropdown Option</a></li>
     633                                                </ul>
     634                                        </li>
     635                                        <li><a href="#">Dropdown Option</a></li>
     636                                        <li><a href="#">Dropdown Option</a></li>
     637                                        <li class="divider"></li>
     638                                        <li><label>Section Name</label></li>
     639                                        <li><a href="#">Dropdown Option</a></li>
     640                                        <li><a href="#">Dropdown Option</a></li>
     641                                        <li><a href="#">Dropdown Option</a></li>
     642                                        <li class="divider"></li>
     643                                        <li><a href="#">See all &rarr;</a></li>
     644                                </ul>
     645                        </li>
     646                        <li class="divider"></li>
     647                        <li class="has-dropdown">
     648                                <a href="#">Main Item 2</a>
     649                                <ul class="dropdown">
     650                                        <li><a href="#">Dropdown Option</a></li>
     651                                        <li><a href="#">Dropdown Option</a></li>
     652                                        <li><a href="#">Dropdown Option</a></li>
     653                                        <li class="divider"></li>
     654                                        <li><a href="#">See all &rarr;</a></li>
     655                                </ul>
     656                        </li>
     657                </ul>
     658        </section>
     659</nav>
     660
     661<!-- End Top Bar -->
     662
     663<hr>
     664<h4 id="type">Type</h4>
     665<div class="type-demo">
     666
     667        <h1>h1. This is a very large header.</h1>
     668        <h2>h2. This is a large header.</h2>
     669        <h3>h3. This is a medium header.</h3>
     670        <h4>h4. This is a moderate header.</h4>
     671        <h5>h5. This is a small header.</h5>
     672        <h6>h6. This is a tiny header.</h6>
     673
     674        <br>
     675
     676        <h1 class="subheader">h1. subheader</h1>
     677        <h2 class="subheader">h2. subheader</h2>
     678        <h3 class="subheader">h3. subheader</h3>
     679        <h4 class="subheader">h4. subheader</h4>
     680        <h5 class="subheader">h5. subheader</h5>
     681        <h6 class="subheader">h6. subheader</h6>
     682
     683        <hr>
     684
     685        <h3>Definition List</h3>
     686        <h5>Definition lists are great for small block of copy that describe the header</h5>
     687        <dl>
     688                <dt>Lower cost</dt>
     689                <dd>The new version of this product costs significantly less than the previous one!</dd>
     690                <dt>Easier to use</dt>
     691                <dd>We&#39;ve changed the product so that it&#39;s much easier to use!</dd>
     692                <dt>Safe for kids</dt>
     693                <dd>You can leave your kids alone in a room with this product and they won&#39;t get hurt (not a guarantee).</dd>
     694        </dl>
     695        <hr>
     696
     697        <h5>Un-ordered lists are great for making quick outlines bulleted.</h5>
     698        <ul class="disc">
     699                <li>List item with a much longer description or more content.</li>
     700                <li>List item</li>
     701                <li>List item
     702                        <ul>
     703                                <li>Nested List Item</li>
     704                                <li>Nested List Item</li>
     705                                <li>Nested List Item</li>
     706                        </ul>
     707                </li>
     708                <li>List item</li>
     709                <li>List item</li>
     710                <li>List item</li>
     711        </ul>
     712
     713        <h5>Ordered lists are great for lists that need order, duh.</h5>
     714        <ol>
     715                <li>List Item 1</li>
     716                <li>List Item 2</li>
     717                <li>List Item 3</li>
     718        </ol>
     719
     720
     721
     722        <br>
     723        <h5>Blockquote</h5>
     724        <blockquote>I do not fear computers. I fear the lack of them. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.<cite>Isaac Asimov</cite></blockquote>
     725
     726        <br>
     727        <h5>Vcard</h5>
     728        <ul class="vcard">
     729                <li class="fn">Gaius Baltar</li>
     730                <li class="street-address">123 Colonial Ave.</li>
     731                <li class="locality">Caprica City</li>
     732                <li><span class="state">Caprica</span>, <span class="zip">12345</span></li>
     733                <li class="email"><a href="#">mail@email.be</a></li>
     734        </ul>
     735
     736</div>
     737
     738<hr>
     739<h4 id="visibility-classes">Visibility Classes</h4>
     740<h5 id="screen-size-visibility-control-show-">Screen Size Visibility Control (Show)</h5>
     741<p>The following text should describe the screen size you&#39;re using:</p>
     742<div class="row">
     743        <div class="large-6 columns">
     744                <h4>HTML</h4>
     745                <pre><code class="language-html"><div class="code-container"><span class="tag">&lt;<span class="title">p</span> <span class="attribute">class</span>=<span class="value">&quot;panel&quot;</span>&gt;</span>
     746                <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;show-for-small-only&quot;</span>&gt;</span>This text is shown only on a small screen.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
     747                <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;show-for-medium-up&quot;</span>&gt;</span>This text is shown on medium screens and up.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
     748                <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;show-for-medium-only&quot;</span>&gt;</span>This text is shown only on a medium screen.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
     749                <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;show-for-large-up&quot;</span>&gt;</span>This text is shown on large screens and up.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
     750                <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;show-for-large-only&quot;</span>&gt;</span>This text is shown only on a large screen.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
     751                <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;show-for-xlarge-up&quot;</span>&gt;</span>This text is shown on xlarge screens and up.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
     752                <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;show-for-xlarge-only&quot;</span>&gt;</span>This text is shown only on an xlarge screen.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
     753                <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;show-for-xxlarge-up&quot;</span>&gt;</span>This text is shown on xxlarge screens and up.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
     754                <span class="tag">&lt;/<span class="title">p</span>&gt;</span></div></code></pre>
     755
     756        </div>
     757        <div class="large-6 columns">
     758                <h4>Rendered HTML</h4>
     759                <p class="panel">
     760                        <strong class="show-for-small-only">This text is shown only on a small screen.</strong>
     761                        <strong class="show-for-medium-up">This text is shown on medium screens and up.</strong>
     762                        <strong class="show-for-medium-only">This text is shown only on a medium screen.</strong>
     763                        <strong class="show-for-large-up">This text is shown on large screens and up.</strong>
     764                        <strong class="show-for-large-only">This text is shown only on a large screen.</strong>
     765                        <strong class="show-for-xlarge-up">This text is shown on xlarge screens and up.</strong>
     766                        <strong class="show-for-xlarge-only">This text is shown only on an xlarge screen.</strong>
     767                        <strong class="show-for-xxlarge-up">This text is shown on xxlarge screens and up.</strong>
     768                </p>
     769        </div>
     770</div>
     771
     772
     773
     774<h5 id="screen-size-visibility-control-hide-">Screen Size Visibility Control (Hide)</h5>
     775<p>The following text should describe the screen size you aren&#39;t using:</p>
     776<div class="row">
     777        <div class="large-6 columns">
     778                <h4>HTML</h4>
     779                <pre><code class="language-html"><div class="code-container"><span class="tag">&lt;<span class="title">p</span> <span class="attribute">class</span>=<span class="value">&quot;panel&quot;</span>&gt;</span>
     780                <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;hide-for-small-only&quot;</span>&gt;</span>You are <span class="tag">&lt;<span class="title">em</span>&gt;</span>not<span class="tag">&lt;/<span class="title">em</span>&gt;</span> on a small screen.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
     781                <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;hide-for-medium-up&quot;</span>&gt;</span>You are <span class="tag">&lt;<span class="title">em</span>&gt;</span>not<span class="tag">&lt;/<span class="title">em</span>&gt;</span> on a medium, large, xlarge, or xxlarge screen.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
     782                <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;hide-for-medium-only&quot;</span>&gt;</span>You are <span class="tag">&lt;<span class="title">em</span>&gt;</span>not<span class="tag">&lt;/<span class="title">em</span>&gt;</span> on a medium screen.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
     783                <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;hide-for-large-up&quot;</span>&gt;</span>You are <span class="tag">&lt;<span class="title">em</span>&gt;</span>not<span class="tag">&lt;/<span class="title">em</span>&gt;</span> on a large, xlarge, or xxlarge screen.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
     784                <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;hide-for-large-only&quot;</span>&gt;</span>You are <span class="tag">&lt;<span class="title">em</span>&gt;</span>not<span class="tag">&lt;/<span class="title">em</span>&gt;</span> on a large screen.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
     785                <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;hide-for-xlarge-up&quot;</span>&gt;</span>You are <span class="tag">&lt;<span class="title">em</span>&gt;</span>not<span class="tag">&lt;/<span class="title">em</span>&gt;</span> on an xlarge screen and up.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
     786                <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;hide-for-xlarge-only&quot;</span>&gt;</span>You are <span class="tag">&lt;<span class="title">em</span>&gt;</span>not<span class="tag">&lt;/<span class="title">em</span>&gt;</span> on an xlarge screen.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
     787                <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;hide-for-xxlarge-up&quot;</span>&gt;</span>You are <span class="tag">&lt;<span class="title">em</span>&gt;</span>not<span class="tag">&lt;/<span class="title">em</span>&gt;</span> on an xxlarge screen.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
     788                <span class="tag">&lt;/<span class="title">p</span>&gt;</span></div></code></pre>
     789
     790        </div>
     791        <div class="large-6 columns">
     792                <h4>Rendered HTML</h4>
     793                <p class="panel">
     794                        <strong class="hide-for-small-only">You are <em>not</em> on a small screen.</strong>
     795                        <strong class="hide-for-medium-up">You are <em>not</em> on a medium, large, xlarge, or xxlarge screen.</strong>
     796                        <strong class="hide-for-medium-only">You are <em>not</em> on a medium screen.</strong>
     797                        <strong class="hide-for-large-up">You are <em>not</em> on a large, xlarge, or xxlarge screen.</strong>
     798                        <strong class="hide-for-large-only">You are <em>not</em> on a large screen.</strong>
     799                        <strong class="hide-for-xlarge-up">You are <em>not</em> on an xlarge screen and up.</strong>
     800                        <strong class="hide-for-xlarge-only">You are <em>not</em> on an xlarge screen.</strong>
     801                        <strong class="hide-for-xxlarge-up">You are <em>not</em> on an xxlarge screen.</strong>
     802                </p>
     803        </div>
     804</div>
     805
     806
     807
     808<h5 id="orientation-detection">Orientation Detection</h5>
     809<p>The following text should describe the device orientation you&#39;re using:</p>
     810<div class="row">
     811        <div class="large-6 columns">
     812                <h4>HTML</h4>
     813                <pre><code class="language-html"><div class="code-container"><span class="tag">&lt;<span class="title">p</span> <span class="attribute">class</span>=<span class="value">&quot;panel&quot;</span>&gt;</span>
     814                <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;show-for-landscape&quot;</span>&gt;</span>You are in landscape orientation.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
     815                <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;show-for-portrait&quot;</span>&gt;</span>You are in portrait orientation.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
     816                <span class="tag">&lt;/<span class="title">p</span>&gt;</span></div></code></pre>
     817
     818        </div>
     819        <div class="large-6 columns">
     820                <h4>Rendered HTML</h4>
     821                <p class="panel">
     822                        <strong class="show-for-landscape">You are in landscape orientation.</strong>
     823                        <strong class="show-for-portrait">You are in portrait orientation.</strong>
     824                </p>
     825        </div>
     826</div>
     827
     828
     829
     830<h5 id="touch-detection">Touch Detection</h5>
     831<p>The following text should describe if you&#39;re using a touch device:</p>
     832<div class="row">
     833        <div class="large-6 columns">
     834                <h4>HTML</h4>
     835                <pre><code class="language-html"><div class="code-container"><span class="tag">&lt;<span class="title">p</span> <span class="attribute">class</span>=<span class="value">&quot;panel&quot;</span>&gt;</span>
     836                <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;show-for-touch&quot;</span>&gt;</span>You are on a touch-enabled device.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
     837                <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;hide-for-touch&quot;</span>&gt;</span>You are not on a touch-enabled device.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
     838                <span class="tag">&lt;/<span class="title">p</span>&gt;</span></div></code></pre>
     839
     840        </div>
     841        <div class="large-6 columns">
     842                <h4>Rendered HTML</h4>
     843                <p class="panel">
     844                        <strong class="show-for-touch">You are on a touch-enabled device.</strong>
     845                        <strong class="hide-for-touch">You are not on a touch-enabled device.</strong>
     846                </p>
    415847    </div>
    416 
    417     <a class="close-reveal-modal">&#215;</a>
    418   </div>
    419   <!-- Reveal Modals end -->
    420 
    421   <hr>
    422   <h4 id="sliders">Sliders</h4>
    423   <div class="range-slider" data-slider>
    424     <span class="range-slider-handle"></span>
    425     <span class="range-slider-active-segment"></span>
    426     <input type="hidden">
    427   </div>
    428   <div class="range-slider radius" data-slider>
    429     <span class="range-slider-handle"></span>
    430     <span class="range-slider-active-segment"></span>
    431     <input type="hidden">
    432   </div>
    433   <div class="range-slider round" data-slider>
    434     <span class="range-slider-handle"></span>
    435     <span class="range-slider-active-segment"></span>
    436     <input type="hidden">
    437   </div>
    438   <div class="range-slider" data-slider data-options="step: 20;">
    439     <span class="range-slider-handle"></span>
    440     <span class="range-slider-active-segment"></span>
    441     <input type="hidden">
    442   </div>
    443 
    444 
    445   <hr>
    446   <h4 id="accordion">Accordion</h4>
    447   <ul class="accordion" data-accordion>
    448     <li class="accordion-navigation">
    449       <a href="#panel1a">Accordion 1</a>
    450       <div id="panel1a" class="content active">
    451         <ul class="small-block-grid-2 large-block-grid-3 ">
    452           <li><img src="http://lorempixel.com/800/800/"></li>
    453           <li><img src="http://lorempixel.com/800/800/"></li>
    454           <li><img src="http://lorempixel.com/800/800/"></li>
    455         </ul>
    456       </div>
    457     </li>
    458     <li class="accordion-navigation">
    459       <a href="#panel2a">Accordion 2</a>
    460       <div id="panel2a" class="content">
    461         <div class="row">
    462           <div class="small-6 columns">
    463             <p>Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    464           </div>
    465           <div class="small-6 columns">
    466             <img src="http://lorempixel.com/800/800/">
    467           </div>
    468         </div>
    469       </div>
    470     </li>
    471     <li class="accordion-navigation">
    472       <a href="#panel3a">Accordion 3</a>
    473       <div id="panel3a" class="content">
    474         Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    475       </div>
    476     </li>
    477   </ul>
    478 
    479   <hr>
    480   <h4 id="tabs">Tabs</h4>
    481   <dl class="tabs" data-tab>
    482     <dd class="active"><a href="#panel2-1">Tab 1</a></dd>
    483     <dd><a href="#panel2-2">Tab 2</a></dd>
    484     <dd><a href="#panel2-3">Tab 3</a></dd>
    485     <dd><a href="#panel2-4">Tab 4</a></dd>
    486   </dl>
    487   <div class="tabs-content">
    488     <div class="content active" id="panel2-1">
    489       <p>First panel content goes here...</p>
    490     </div>
    491     <div class="content" id="panel2-2">
    492       <p>Second panel content goes here...</p>
    493     </div>
    494     <div class="content" id="panel2-3">
    495       <p>Third panel content goes here...</p>
    496     </div>
    497     <div class="content" id="panel2-4">
    498       <p>Fourth panel content goes here...</p>
    499     </div>
    500   </div>
    501 
    502   <dl class="tabs vertical" data-tab="">
    503     <dd class="active"><a href="#panel1a">Tab 1</a></dd>
    504 
    505     <dd><a href="#panel2a">Tab 2</a></dd>
    506 
    507     <dd><a href="#panel3a">Tab 3</a></dd>
    508 
    509     <dd><a href="#panel4a">Tab 4</a></dd>
    510   </dl>
    511 
    512   <div class="tabs-content vertical">
    513     <div class="content active" id="panel1a">
    514       <p>Panel 1 content goes here.</p>
    515     </div>
    516 
    517     <div class="content" id="panel2a">
    518       <p>Panel 2 content goes here.</p>
    519     </div>
    520 
    521     <div class="content" id="panel3a">
    522       <p>Panel 3 content goes here.</p>
    523     </div>
    524 
    525     <div class="content" id="panel4a">
    526       <p>Panel 4 content goes here.</p>
    527     </div>
    528   </div>
    529 
    530 
    531 
    532   <hr>
    533   <h4 id="side-nav">Side Nav</h4>
    534   <div class="row">
    535     <div class="large-4 columns end">
    536       <ul class="side-nav">
    537         <li class="active"><a href="#">Link 1</a></li>
    538         <li><a href="#">Link 2</a></li>
    539         <li class="divider"></li>
    540         <li><a href="#">Link 3</a></li>
    541         <li><a href="#">Link 4</a></li>
    542       </ul>
    543     </div>
    544   </div>
    545 
    546   <hr>
    547   <h4 id="sub-nav">Sub Nav</h4>
    548   <dl class="sub-nav">
    549     <dt>Filter:</dt>
    550     <dd class="active"><a href="#">All</a></dd>
    551     <dd><a href="#">Active</a></dd>
    552     <dd><a href="#">Pending</a></dd>
    553     <dd><a href="#">Suspended</a></dd>
    554   </dl>
    555 
    556   <hr>
    557   <h4 id="tables">Tables</h4>
    558   <table>
    559     <thead>
    560       <tr>
    561         <th width="200">Table Header</th>
    562         <th>Table Header</th>
    563         <th width="150">Table Header</th>
    564         <th width="150">Table Header</th>
    565       </tr>
    566     </thead>
    567     <tbody>
    568       <tr>
    569         <td>Content Goes Here</td>
    570         <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
    571         <td>Content Goes Here</td>
    572         <td>Content Goes Here</td>
    573       </tr>
    574       <tr>
    575         <td>Content Goes Here</td>
    576         <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
    577         <td>Content Goes Here</td>
    578         <td>Content Goes Here</td>
    579       </tr>
    580       <tr>
    581         <td>Content Goes Here</td>
    582         <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
    583         <td>Content Goes Here</td>
    584         <td>Content Goes Here</td>
    585       </tr>
    586     </tbody>
    587   </table>
    588 
    589   <hr>
    590   <h4 id="thumbnails">Thumbnails</h4>
    591   <p><img class="th" src="http://lorempixel.com/800/800/"><img class="th" src="http://lorempixel.com/800/800/"></p>
    592   <hr>
    593   <h4 id="tooltips">Tooltips</h4>
    594   <p>The tooltips can be positioned on the <span data-tooltip class="has-tip" data-width="210" title="I'm on bottom and the default position.">&quot;tip-bottom&quot;</span>, which is the default position, <span data-tooltip class="has-tip tip-top noradius" data-width="210" title="I'm on the top and I'm not rounded!">&quot;tip-top&quot; (hehe)</span>, <span data-tooltip="left" class="has-tip tip-left" data-width="90" title="I'm on the left!">&quot;tip-left&quot;</span>, or <span data-tooltip="right" class="has-tip tip-right" data-width="120" title="I'm on the right!">&quot;tip-right&quot;</span> of the target element by adding the appropriate class to them. You can even add your own custom class to style each tip differently. On a small device, the tooltips are full width and bottom aligned.</p>
    595 
    596   <hr>
    597   <h4 id="top-bar">Top Bar</h4>
    598   <nav class="top-bar" data-topbar>
    599     <ul class="title-area">
    600       <!-- Title Area -->
    601       <li class="name">
    602         <h1>
    603           <a href="#">
    604             Top Bar Title
    605           </a>
    606         </h1>
    607       </li>
    608       <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
    609     </ul>
    610 
    611     <section class="top-bar-section">
    612       <!-- Right Nav Section -->
    613       <ul class="right">
    614         <li class="divider"></li>
    615         <li class="has-dropdown">
    616           <a href="#">Main Item 1</a>
    617           <ul class="dropdown">
    618             <li><label>Section Name</label></li>
    619             <li class="has-dropdown">
    620               <a href="#" class="">Has Dropdown, Level 1</a>
    621               <ul class="dropdown">
    622                 <li><a href="#">Dropdown Options</a></li>
    623                 <li><a href="#">Dropdown Options</a></li>
    624                 <li><a href="#">Level 2</a></li>
    625                 <li><a href="#">Subdropdown Option</a></li>
    626                 <li><a href="#">Subdropdown Option</a></li>
    627                 <li><a href="#">Subdropdown Option</a></li>
    628               </ul>
    629             </li>
    630             <li><a href="#">Dropdown Option</a></li>
    631             <li><a href="#">Dropdown Option</a></li>
    632             <li class="divider"></li>
    633             <li><label>Section Name</label></li>
    634             <li><a href="#">Dropdown Option</a></li>
    635             <li><a href="#">Dropdown Option</a></li>
    636             <li><a href="#">Dropdown Option</a></li>
    637             <li class="divider"></li>
    638             <li><a href="#">See all &rarr;</a></li>
    639           </ul>
    640         </li>
    641         <li class="divider"></li>
    642         <li class="has-dropdown">
    643           <a href="#">Main Item 2</a>
    644           <ul class="dropdown">
    645             <li><a href="#">Dropdown Option</a></li>
    646             <li><a href="#">Dropdown Option</a></li>
    647             <li><a href="#">Dropdown Option</a></li>
    648             <li class="divider"></li>
    649             <li><a href="#">See all &rarr;</a></li>
    650           </ul>
    651         </li>
    652       </ul>
    653     </section>
    654   </nav>
    655 
    656   <!-- End Top Bar -->
    657 
    658   <hr>
    659   <h4 id="type">Type</h4>
    660   <div class="type-demo">
    661 
    662     <h1>h1. This is a very large header.</h1>
    663     <h2>h2. This is a large header.</h2>
    664     <h3>h3. This is a medium header.</h3>
    665     <h4>h4. This is a moderate header.</h4>
    666     <h5>h5. This is a small header.</h5>
    667     <h6>h6. This is a tiny header.</h6>
    668 
    669     <br>
    670 
    671     <h1 class="subheader">h1. subheader</h1>
    672     <h2 class="subheader">h2. subheader</h2>
    673     <h3 class="subheader">h3. subheader</h3>
    674     <h4 class="subheader">h4. subheader</h4>
    675     <h5 class="subheader">h5. subheader</h5>
    676     <h6 class="subheader">h6. subheader</h6>
    677 
    678     <hr>
    679 
    680     <h3>Definition List</h3>
    681     <h5>Definition lists are great for small block of copy that describe the header</h5>
    682     <dl>
    683       <dt>Lower cost</dt>
    684       <dd>The new version of this product costs significantly less than the previous one!</dd>
    685       <dt>Easier to use</dt>
    686       <dd>We&#39;ve changed the product so that it&#39;s much easier to use!</dd>
    687       <dt>Safe for kids</dt>
    688       <dd>You can leave your kids alone in a room with this product and they won&#39;t get hurt (not a guarantee).</dd>
    689     </dl>
    690     <hr>
    691 
    692     <h5>Un-ordered lists are great for making quick outlines bulleted.</h5>
    693     <ul class="disc">
    694       <li>List item with a much longer description or more content.</li>
    695       <li>List item</li>
    696       <li>List item
    697         <ul>
    698           <li>Nested List Item</li>
    699           <li>Nested List Item</li>
    700           <li>Nested List Item</li>
    701         </ul>
    702       </li>
    703       <li>List item</li>
    704       <li>List item</li>
    705       <li>List item</li>
    706     </ul>
    707 
    708     <h5>Ordered lists are great for lists that need order, duh.</h5>
    709     <ol>
    710       <li>List Item 1</li>
    711       <li>List Item 2</li>
    712       <li>List Item 3</li>
    713     </ol>
    714 
    715 
    716 
    717     <br>
    718     <h5>Blockquote</h5>
    719     <blockquote>I do not fear computers. I fear the lack of them. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.<cite>Isaac Asimov</cite></blockquote>
    720 
    721     <br>
    722     <h5>Vcard</h5>
    723     <ul class="vcard">
    724       <li class="fn">Gaius Baltar</li>
    725       <li class="street-address">123 Colonial Ave.</li>
    726       <li class="locality">Caprica City</li>
    727       <li><span class="state">Caprica</span>, <span class="zip">12345</span></li>
    728       <li class="email"><a href="#">mail@email.be</a></li>
    729     </ul>
    730 
    731   </div>
    732 
    733   <hr>
    734   <h4 id="visibility-classes">Visibility Classes</h4>
    735   <h5 id="screen-size-visibility-control-show-">Screen Size Visibility Control (Show)</h5>
    736   <p>The following text should describe the screen size you&#39;re using:</p>
    737   <div class="row">
    738     <div class="large-6 columns">
    739       <h4>HTML</h4>
    740       <pre><code class="language-html"><div class="code-container"><span class="tag">&lt;<span class="title">p</span> <span class="attribute">class</span>=<span class="value">&quot;panel&quot;</span>&gt;</span>
    741         <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;show-for-small-only&quot;</span>&gt;</span>This text is shown only on a small screen.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
    742         <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;show-for-medium-up&quot;</span>&gt;</span>This text is shown on medium screens and up.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
    743         <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;show-for-medium-only&quot;</span>&gt;</span>This text is shown only on a medium screen.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
    744         <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;show-for-large-up&quot;</span>&gt;</span>This text is shown on large screens and up.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
    745         <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;show-for-large-only&quot;</span>&gt;</span>This text is shown only on a large screen.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
    746         <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;show-for-xlarge-up&quot;</span>&gt;</span>This text is shown on xlarge screens and up.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
    747         <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;show-for-xlarge-only&quot;</span>&gt;</span>This text is shown only on an xlarge screen.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
    748         <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;show-for-xxlarge-up&quot;</span>&gt;</span>This text is shown on xxlarge screens and up.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
    749         <span class="tag">&lt;/<span class="title">p</span>&gt;</span></div></code></pre>
    750 
    751     </div>
    752     <div class="large-6 columns">
    753       <h4>Rendered HTML</h4>
    754       <p class="panel">
    755         <strong class="show-for-small-only">This text is shown only on a small screen.</strong>
    756         <strong class="show-for-medium-up">This text is shown on medium screens and up.</strong>
    757         <strong class="show-for-medium-only">This text is shown only on a medium screen.</strong>
    758         <strong class="show-for-large-up">This text is shown on large screens and up.</strong>
    759         <strong class="show-for-large-only">This text is shown only on a large screen.</strong>
    760         <strong class="show-for-xlarge-up">This text is shown on xlarge screens and up.</strong>
    761         <strong class="show-for-xlarge-only">This text is shown only on an xlarge screen.</strong>
    762         <strong class="show-for-xxlarge-up">This text is shown on xxlarge screens and up.</strong>
    763       </p>
    764     </div>
    765   </div>
    766 
    767 
    768 
    769   <h5 id="screen-size-visibility-control-hide-">Screen Size Visibility Control (Hide)</h5>
    770   <p>The following text should describe the screen size you aren&#39;t using:</p>
    771   <div class="row">
    772     <div class="large-6 columns">
    773       <h4>HTML</h4>
    774       <pre><code class="language-html"><div class="code-container"><span class="tag">&lt;<span class="title">p</span> <span class="attribute">class</span>=<span class="value">&quot;panel&quot;</span>&gt;</span>
    775         <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;hide-for-small-only&quot;</span>&gt;</span>You are <span class="tag">&lt;<span class="title">em</span>&gt;</span>not<span class="tag">&lt;/<span class="title">em</span>&gt;</span> on a small screen.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
    776         <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;hide-for-medium-up&quot;</span>&gt;</span>You are <span class="tag">&lt;<span class="title">em</span>&gt;</span>not<span class="tag">&lt;/<span class="title">em</span>&gt;</span> on a medium, large, xlarge, or xxlarge screen.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
    777         <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;hide-for-medium-only&quot;</span>&gt;</span>You are <span class="tag">&lt;<span class="title">em</span>&gt;</span>not<span class="tag">&lt;/<span class="title">em</span>&gt;</span> on a medium screen.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
    778         <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;hide-for-large-up&quot;</span>&gt;</span>You are <span class="tag">&lt;<span class="title">em</span>&gt;</span>not<span class="tag">&lt;/<span class="title">em</span>&gt;</span> on a large, xlarge, or xxlarge screen.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
    779         <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;hide-for-large-only&quot;</span>&gt;</span>You are <span class="tag">&lt;<span class="title">em</span>&gt;</span>not<span class="tag">&lt;/<span class="title">em</span>&gt;</span> on a large screen.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
    780         <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;hide-for-xlarge-up&quot;</span>&gt;</span>You are <span class="tag">&lt;<span class="title">em</span>&gt;</span>not<span class="tag">&lt;/<span class="title">em</span>&gt;</span> on an xlarge screen and up.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
    781         <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;hide-for-xlarge-only&quot;</span>&gt;</span>You are <span class="tag">&lt;<span class="title">em</span>&gt;</span>not<span class="tag">&lt;/<span class="title">em</span>&gt;</span> on an xlarge screen.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
    782         <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;hide-for-xxlarge-up&quot;</span>&gt;</span>You are <span class="tag">&lt;<span class="title">em</span>&gt;</span>not<span class="tag">&lt;/<span class="title">em</span>&gt;</span> on an xxlarge screen.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
    783         <span class="tag">&lt;/<span class="title">p</span>&gt;</span></div></code></pre>
    784 
    785     </div>
    786     <div class="large-6 columns">
    787       <h4>Rendered HTML</h4>
    788       <p class="panel">
    789         <strong class="hide-for-small-only">You are <em>not</em> on a small screen.</strong>
    790         <strong class="hide-for-medium-up">You are <em>not</em> on a medium, large, xlarge, or xxlarge screen.</strong>
    791         <strong class="hide-for-medium-only">You are <em>not</em> on a medium screen.</strong>
    792         <strong class="hide-for-large-up">You are <em>not</em> on a large, xlarge, or xxlarge screen.</strong>
    793         <strong class="hide-for-large-only">You are <em>not</em> on a large screen.</strong>
    794         <strong class="hide-for-xlarge-up">You are <em>not</em> on an xlarge screen and up.</strong>
    795         <strong class="hide-for-xlarge-only">You are <em>not</em> on an xlarge screen.</strong>
    796         <strong class="hide-for-xxlarge-up">You are <em>not</em> on an xxlarge screen.</strong>
    797       </p>
    798     </div>
    799   </div>
    800 
    801 
    802 
    803   <h5 id="orientation-detection">Orientation Detection</h5>
    804   <p>The following text should describe the device orientation you&#39;re using:</p>
    805   <div class="row">
    806     <div class="large-6 columns">
    807       <h4>HTML</h4>
    808       <pre><code class="language-html"><div class="code-container"><span class="tag">&lt;<span class="title">p</span> <span class="attribute">class</span>=<span class="value">&quot;panel&quot;</span>&gt;</span>
    809         <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;show-for-landscape&quot;</span>&gt;</span>You are in landscape orientation.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
    810         <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;show-for-portrait&quot;</span>&gt;</span>You are in portrait orientation.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
    811         <span class="tag">&lt;/<span class="title">p</span>&gt;</span></div></code></pre>
    812 
    813     </div>
    814     <div class="large-6 columns">
    815       <h4>Rendered HTML</h4>
    816       <p class="panel">
    817         <strong class="show-for-landscape">You are in landscape orientation.</strong>
    818         <strong class="show-for-portrait">You are in portrait orientation.</strong>
    819       </p>
    820     </div>
    821   </div>
    822 
    823 
    824 
    825   <h5 id="touch-detection">Touch Detection</h5>
    826   <p>The following text should describe if you&#39;re using a touch device:</p>
    827   <div class="row">
    828     <div class="large-6 columns">
    829       <h4>HTML</h4>
    830       <pre><code class="language-html"><div class="code-container"><span class="tag">&lt;<span class="title">p</span> <span class="attribute">class</span>=<span class="value">&quot;panel&quot;</span>&gt;</span>
    831         <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;show-for-touch&quot;</span>&gt;</span>You are on a touch-enabled device.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
    832         <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;hide-for-touch&quot;</span>&gt;</span>You are not on a touch-enabled device.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
    833         <span class="tag">&lt;/<span class="title">p</span>&gt;</span></div></code></pre>
    834 
    835     </div>
    836     <div class="large-6 columns">
    837       <h4>Rendered HTML</h4>
    838       <p class="panel">
    839         <strong class="show-for-touch">You are on a touch-enabled device.</strong>
    840         <strong class="hide-for-touch">You are not on a touch-enabled device.</strong>
    841       </p>
    842     </div>
    843   </div>
    844   <script type="text/javascript">
    845    $(document).foundation('joyride', 'start');
    846   </script>
     848</div>
     849<script type="text/javascript">
     850        $(document).foundation('joyride', 'start');
     851</script>
  • _plugins_/foundation/trunk/formulaires/configurer_foundation.html

    r83382 r96416  
    11<div class="formulaire_spip formulaire_configurer formulaire_#FORM">
    22
    3   <h3 class="titrem">
    4     [(#CHEMIN{prive/themes/spip/images/foundation-128.png}|image_reduire{24,24}|inserer_attribut{class, cadre-icone})]
    5     <:foundation:cfg_titre_parametrages:>
    6   </h3>
     3        <h3 class="titrem">
     4                [(#CHEMIN{prive/themes/spip/images/foundation-128.png}|image_reduire{24,24}|inserer_attribut{class, cadre-icone})]
     5                <:foundation:cfg_titre_parametrages:>
     6        </h3>
    77
    8   [<p class="reponse_formulaire reponse_formulaire_ok">(#ENV*{message_ok})</p>]
    9   [<p class="reponse_formulaire reponse_formulaire_erreur">(#ENV*{message_erreur})</p>]
     8        [<p class="reponse_formulaire reponse_formulaire_ok">(#ENV*{message_ok})</p>]
     9        [<p class="reponse_formulaire reponse_formulaire_erreur">(#ENV*{message_erreur})</p>]
    1010
    11   <form method="post" action="#ENV{action}">
    12     <div>
    13       #ACTION_FORMULAIRE{#ENV{action}}
     11        <form method="post" action="#ENV{action}">
     12                <div>
     13                        #ACTION_FORMULAIRE{#ENV{action}}
    1414
    15       #GENERER_SAISIES{#ENV{_saisies}}
     15                        #GENERER_SAISIES{#ENV{_saisies}}
    1616
    17       <input type="hidden" name="_meta_casier" value="foundation" />
    18       <p class="boutons"><span class="image_loading">&nbsp;</span><input type="submit" class="submit" value="<:bouton_enregistrer:>" /></p>
    19     </div>
    20   </form>
     17                        <input type="hidden" name="_meta_casier" value="foundation" />
     18                        <p class="boutons"><span class="image_loading">&nbsp;</span><input type="submit" class="submit" value="<:bouton_enregistrer:>" /></p>
     19                </div>
     20        </form>
    2121</div>
  • _plugins_/foundation/trunk/formulaires/configurer_foundation.php

    r83381 r96416  
    11<?php
    22function formulaires_configurer_foundation_saisies() {
    3   // Lire le fichier YAML qui contient la structure du formulaire.
    4   include_spip('inc/yaml');
    5   $formulaire = yaml_decode_file(find_in_path('formulaires/configurer_foundation.yaml'));
     3        // Lire le fichier YAML qui contient la structure du formulaire.
     4        include_spip('inc/yaml');
     5        $formulaire = yaml_decode_file(find_in_path('formulaires/configurer_foundation.yaml'));
    66
    7   return $formulaire;
     7        return $formulaire;
    88}
    99
    1010function formulaires_configurer_foundation_charger() {
    11   // Lire la configuration de foundation
    12   $config = lire_config('foundation');
     11        // Lire la configuration de foundation
     12        $config = lire_config('foundation');
    1313
    14   return $config;
     14        return $config;
    1515}
  • _plugins_/foundation/trunk/foundation_administrations.php

    r86943 r96416  
    1818function foundation_upgrade($nom_meta_base_version, $version_cible) {
    1919
    20     // Création du tableau des mises à jour.
    21     $maj = array();
     20        // Création du tableau des mises à jour.
     21        $maj = array();
    2222
    23      $config_default = array(
    24         // Activer par défaut la version 5 de foundation. Désactiver le reste.
    25         'variante' => 5,
    26         'javascript' => '',
    27         'fichier_htc' => '',
    28         'foundation-icons' => ''
    29     );
     23        $config_default = array(
     24                // Activer par défaut la version 5 de foundation. Désactiver le reste.
     25                'variante' => 5,
     26                'javascript' => '',
     27                'fichier_htc' => '',
     28                'foundation-icons' => ''
     29        );
    3030
    31     // Tableau de la configuration par défaut
    32     $maj['create'] = array(
    33             array('ecrire_meta', 'foundation', serialize($config_default))
    34         );
     31        // Tableau de la configuration par défaut
     32        $maj['create'] = array(
     33                array('ecrire_meta', 'foundation', serialize($config_default))
     34        );
    3535
    36     // Maj du plugin.
    37     include_spip('base/upgrade');
    38     maj_plugin($nom_meta_base_version, $version_cible, $maj);
     36        // Maj du plugin.
     37        include_spip('base/upgrade');
     38        maj_plugin($nom_meta_base_version, $version_cible, $maj);
    3939}
    4040
     
    4343*/
    4444function foundation_vider_tables($nom_meta_base_version) {
    45     // Supprimer les méta, ou oublie pas celle de la base.
    46     effacer_meta('foundation_base_version');
    47     effacer_meta('foundation');
     45        // Supprimer les méta, ou oublie pas celle de la base.
     46        effacer_meta('foundation_base_version');
     47        effacer_meta('foundation');
    4848}
  • _plugins_/foundation/trunk/foundation_fonctions.php

    r86952 r96416  
    1616 */
    1717function filtre_iframe_responsive($texte) {
    18   include_spip('inc/foundation');
    19   // On détecte tout les iFrames et on les rends responsives.
    20   return preg_replace_callback('/<iframe(.+)><\/iframe>/', 'responsive', $texte);
     18        include_spip('inc/foundation');
     19        // On détecte tout les iFrames et on les rends responsives.
     20        return preg_replace_callback('/<iframe(.+)><\/iframe>/', 'responsive', $texte);
    2121}
    2222
     
    3333include_spip('inc/trouver_syntaxe_foundation');
    3434function balise_COLONNES_dist($p) {
    35   // On récupère les paramètres de la balise.
    36   $nombre_colonnes = interprete_argument_balise(1, $p);
    37   $type = interprete_argument_balise(2, $p);
     35        // On récupère les paramètres de la balise.
     36        $nombre_colonnes = interprete_argument_balise(1, $p);
     37        $type = interprete_argument_balise(2, $p);
    3838
    39   // On met une valeur par défaut à type.
    40   if (!$type) $type = "'large'";
     39        // On met une valeur par défaut à type.
     40        if (!$type) $type = "'large'";
    4141
    42   // On calcule la syntaxe
    43   $p->code = "trouver_syntaxe_foundation($nombre_colonnes, $type).'columns'";
    44   $p->interdire_scripts = false;
    45   return $p;
     42        // On calcule la syntaxe
     43        $p->code = "trouver_syntaxe_foundation($nombre_colonnes, $type).'columns'";
     44        $p->interdire_scripts = false;
     45        return $p;
    4646}
    4747
     
    5050 */
    5151function balise_ORBIT_dist($p) {
    52   // On récupère les paramètres de la balise.
    53   $objet = interprete_argument_balise(1, $p);
    54   $id_objet = interprete_argument_balise(2, $p);
    55   $data_option = interprete_argument_balise(3, $p);
    56   $class = interprete_argument_balise(4, $p);
     52        // On récupère les paramètres de la balise.
     53        $objet = interprete_argument_balise(1, $p);
     54        $id_objet = interprete_argument_balise(2, $p);
     55        $data_option = interprete_argument_balise(3, $p);
     56        $class = interprete_argument_balise(4, $p);
    5757
    58   // On appel le modèle orbit avec les paramètres de la balise.
    59   // Inspirer la la balise #LESAUTEURS
    60   $p->code = sprintf(CODE_RECUPERER_FOND, "'modeles/orbit'",
    61            "array(
    62                   'objet' => $objet,
    63                   'id_objet' => $id_objet,
    64                   'data-options' => $data_option,
    65                   'class' => $class
    66                   )",
    67            '',
    68            _q($connect));
    69   return $p;
     58        // On appel le modèle orbit avec les paramètres de la balise.
     59        // Inspirer la la balise #LESAUTEURS
     60        $p->code = sprintf(CODE_RECUPERER_FOND, "'modeles/orbit'",
     61                        "array(
     62                                'objet' => $objet,
     63                                'id_objet' => $id_objet,
     64                                'data-options' => $data_option,
     65                                'class' => $class
     66                        )",
     67                        '',
     68                        _q($connect));
     69        return $p;
    7070}
    7171
     
    7373 * Generer un bouton d'action qui accepte les class de foundation
    7474 */
    75 function balise_F_BOUTON_ACTION_dist($p){
     75function balise_F_BOUTON_ACTION_dist($p) {
    7676
    7777        $args = array();
     
    7979                $_a = interprete_argument_balise($k,$p);
    8080                if (!$_a) $_a="''";
    81           $args[] = $_a;
     81                $args[] = $_a;
    8282        }
    8383        // supprimer les args vides
     
    9797 * compatibilité avec les class button de foundation
    9898 */
    99 function filtre_f_bouton_action_dist($libelle, $url, $class="", $confirm="", $title="", $callback=""){
    100   if ($confirm) {
    101     $confirm = "confirm(\"" . attribut_html($confirm) . "\")";
    102     if ($callback)
    103       $callback = "$confirm?($callback):false";
    104     else
    105       $callback = $confirm;
    106   }
    107   $onclick = $callback?" onclick='return ".addcslashes($callback,"'")."'":"";
    108   $title = $title ? " title='$title'" : "";
    109   return "<form class='bouton_action_post' method='post' action='$url'><div>".form_hidden($url)
    110     ."<button type='submit' class='submit $class'$title$onclick>$libelle</button></div></form>";
     99function filtre_f_bouton_action_dist($libelle, $url, $class="", $confirm="", $title="", $callback="") {
     100        if ($confirm) {
     101                $confirm = "confirm(\"" . attribut_html($confirm) . "\")";
     102                if ($callback)
     103                $callback = "$confirm?($callback):false";
     104                else
     105                $callback = $confirm;
     106        }
     107        $onclick = $callback?" onclick='return ".addcslashes($callback,"'")."'":"";
     108        $title = $title ? " title='$title'" : "";
     109        return "<form class='bouton_action_post' method='post' action='$url'><div>".form_hidden($url)
     110        ."<button type='submit' class='submit $class'$title$onclick>$libelle</button></div></form>";
    111111}
    112112
     
    122122function filtre_etoile_foundation_dist ($nombre) {
    123123
    124     $config = lire_config('foundation');
     124        $config = lire_config('foundation');
    125125
    126     if (!$config['foundation-icons'])
    127         return '<span>Les icones foundation ne sont pas activée !</span>';
     126        if (!$config['foundation-icons'])
     127                return '<span>Les icones foundation ne sont pas activée !</span>';
    128128
    129     $etoile = '<span class="foundation_etoile">';
    130     for ($i=0;$i<$nombre; $i++) {
    131         $etoile .= '<span class="fi-star"></span>';
    132     }
    133     $etoile .= '</span>';
     129        $etoile = '<span class="foundation_etoile">';
     130        for ($i=0;$i<$nombre; $i++) {
     131                $etoile .= '<span class="fi-star"></span>';
     132        }
     133        $etoile .= '</span>';
    134134
    135     return $etoile;
     135        return $etoile;
    136136}
  • _plugins_/foundation/trunk/foundation_options.php

    r87969 r96416  
    44
    55if (!defined('_FOUNDATION_SASS'))
    6     define('_FOUNDATION_SASS', false);
     6        define('_FOUNDATION_SASS', false);
  • _plugins_/foundation/trunk/foundation_pipelines.php

    r83353 r96416  
    1616*/
    1717function foundation_insert_head ($flux) {
    18   include_spip('inc/foundation');
    19   return foundation_get_js($flux);
     18        include_spip('inc/foundation');
     19        return foundation_get_js($flux);
    2020}
    2121
     
    2424*/
    2525function foundation_insert_head_css ($flux) {
    26   include_spip('inc/foundation');
    27   return foundation_get_css($flux);
     26        include_spip('inc/foundation');
     27        return foundation_get_css($flux);
    2828}
  • _plugins_/foundation/trunk/inc/foundation.php

    r88155 r96416  
    1010 */
    1111function responsive($matches) {
    12   // Dans le cas de vimeo, il faut ajouter une classe
    13   if (strpos($matches[0], 'vimeo')) $vimeo = ' vimeo';
    14   else $vimeo = '';
     12        // Dans le cas de vimeo, il faut ajouter une classe
     13        if (strpos($matches[0], 'vimeo')) $vimeo = ' vimeo';
     14        else $vimeo = '';
    1515
    16   // On inclu les filtres, au cas ou
    17   include_spip('inc/filtres');
     16        // On inclu les filtres, au cas ou
     17        include_spip('inc/filtres');
    1818
    19   // On revoie la bonne structure html d'iframe.
    20   return wrap($matches[0], '<div class="flex-video'.$vimeo.'">');;
     19        // On revoie la bonne structure html d'iframe.
     20        return wrap($matches[0], '<div class="flex-video'.$vimeo.'">');;
    2121}
    2222
     
    2727function foundation_get_js($flux = '') {
    2828
    29   // On lit la configuration du plugin pour savoir quel version de Foundation charger.
    30   $config = lire_config('foundation');
     29        // On lit la configuration du plugin pour savoir quel version de Foundation charger.
     30        $config = lire_config('foundation');
    3131
    32   // Si on est en mode app, on revoie le bon squelette
    33   if (_FOUNDATION_SASS) {
    34       $flux .= recuperer_fond('inclure/head-foundation-app');
    35   }
    36   else {
    37       // On renvoie le flux head avec le squelette foundation correspondant.
    38       if ($config['variante'] == '3')
    39           $flux .= recuperer_fond('inclure/head-foundation-3');
    40       elseif ($config['variante'] == '4')
    41           $flux .= recuperer_fond('inclure/head-foundation-4');
    42       elseif ($config['variante'] == '5')
    43           $flux .= recuperer_fond('inclure/head-foundation-5');
    44       // Si foundation est désactivé, on revoie directement le flux,
    45       // sans aller chercher le head-foundation.
    46       else
    47           return $flux;
    48   }
     32        // Si on est en mode app, on revoie le bon squelette
     33        if (_FOUNDATION_SASS) {
     34                $flux .= recuperer_fond('inclure/head-foundation-app');
     35        }
     36        else {
     37                // On renvoie le flux head avec le squelette foundation correspondant.
     38                if ($config['variante'] == '3')
     39                $flux .= recuperer_fond('inclure/head-foundation-3');
     40                elseif ($config['variante'] == '4')
     41                $flux .= recuperer_fond('inclure/head-foundation-4');
     42                elseif ($config['variante'] == '5')
     43                $flux .= recuperer_fond('inclure/head-foundation-5');
     44                // Si foundation est désactivé, on revoie directement le flux,
     45                // sans aller chercher le head-foundation.
     46                else
     47                return $flux;
     48        }
    4949
    50   // Charger le head commun a foundation
    51   $flux .= recuperer_fond('inclure/head-foundation');
     50        // Charger le head commun a foundation
     51        $flux .= recuperer_fond('inclure/head-foundation');
    5252
    53   return $flux;
     53        return $flux;
    5454}
    5555
     
    5959function foundation_get_css($flux = '') {
    6060
    61   // On lit la configuration du plugin pour savoir quel version de Foundation charger.
    62   $config = lire_config('foundation');
     61        // On lit la configuration du plugin pour savoir quel version de Foundation charger.
     62        $config = lire_config('foundation');
    6363
    64   // Si on est en mode app, on revoie le bon squelette
    65   if (_FOUNDATION_SASS) {
    66       $flux .= recuperer_fond('inclure/css/head-foundation-app');
    67       return $flux;
    68   }
     64        // Si on est en mode app, on revoie le bon squelette
     65        if (_FOUNDATION_SASS) {
     66                $flux .= recuperer_fond('inclure/css/head-foundation-app');
     67                return $flux;
     68        }
    6969
    70   // On renvoie le flux head avec le squelette foundation correspondant.
    71   if ($config['variante'] == '3')
    72     return $flux.recuperer_fond('inclure/css/head-foundation-3');
    73   elseif ($config['variante'] == '4')
    74     return $flux.recuperer_fond('inclure/css/head-foundation-4');
    75   elseif ($config['variante'] == '5')
    76     return $flux.recuperer_fond('inclure/css/head-foundation-5');
    77   // Si foundation est désactivé, on revoie directement le flux, sans aller chercher le head-foundation.
    78   else
    79     return $flux;
     70        // On renvoie le flux head avec le squelette foundation correspondant.
     71        if ($config['variante'] == '3')
     72        return $flux.recuperer_fond('inclure/css/head-foundation-3');
     73        elseif ($config['variante'] == '4')
     74        return $flux.recuperer_fond('inclure/css/head-foundation-4');
     75        elseif ($config['variante'] == '5')
     76        return $flux.recuperer_fond('inclure/css/head-foundation-5');
     77        // Si foundation est désactivé, on revoie directement le flux, sans aller chercher le head-foundation.
     78        else
     79        return $flux;
    8080}
  • _plugins_/foundation/trunk/inc/trouver_syntaxe_foundation.php

    r86952 r96416  
    1111function trouver_syntaxe_foundation($nombre_colonnes, $type) {
    1212
    13     // On récupère la configuration
    14     $config = lire_config('foundation');
     13        // On récupère la configuration
     14        $config = lire_config('foundation');
    1515
    16     // Version qui utilise un système large-X ou small-X. J'appel ce groupe les colnum.
    17     $colnum = array(4,5);
     16        // Version qui utilise un système large-X ou small-X. J'appel ce groupe les colnum.
     17        $colnum = array(4,5);
    1818
    19     // Les versions qui utilise des lettres => les colletr
    20     $colettr = array(2,3);
     19        // Les versions qui utilise des lettres => les colletr
     20        $colettr = array(2,3);
    2121
    22     // Si la première variable est un tableau, on va le convertir en class
    23     // On limite ce système a foundation >= 4
    24     if (is_array($nombre_colonnes)
    25     and in_array($config['variante'], $colnum)) {
    26         $class= '';
    27         foreach ($nombre_colonnes as $key => $value) {
    28             // Utiliser un tableau large => 4 plutôt que 4 => large
    29             // On est donc plus logique
    30             if (is_numeric($value)) {
    31                 $class .= $key.'-'.$value.' ';
    32             }
    33             // Ancienne écriture, au cas ou
    34             else {
    35                 include_spip('inc/utils');
    36                 erreur_squelette(_T('foundation:syntaxe_deprecie'));
    37                 $class .= $value.'-'.$key.' ';
    38             }
    39         }
    40         return $class;
    41     }
    42     else {
    43         // Si on est dans une vesion numérique de foundation, on retourne la syntaxe
    44         if (in_array($config['variante'], $colnum))
    45             return $type.'-'.$nombre_colonnes.' ';
    46         // Sinon, on démarrer le moteur de conversion de nombre, et on renvoie la bonne class
    47         elseif (in_array($config['variante'], $colettr)) {
     22        // Si la première variable est un tableau, on va le convertir en class
     23        // On limite ce système a foundation >= 4
     24        if (is_array($nombre_colonnes)
     25        and in_array($config['variante'], $colnum)) {
     26                $class= '';
     27                foreach ($nombre_colonnes as $key => $value) {
     28                        // Utiliser un tableau large => 4 plutôt que 4 => large
     29                        // On est donc plus logique
     30                        if (is_numeric($value)) {
     31                                $class .= $key.'-'.$value.' ';
     32                        }
     33                        // Ancienne écriture, au cas ou
     34                        else {
     35                                include_spip('inc/utils');
     36                                erreur_squelette(_T('foundation:syntaxe_deprecie'));
     37                                $class .= $value.'-'.$key.' ';
     38                        }
     39                }
     40                return $class;
     41        }
     42        else {
     43                // Si on est dans une vesion numérique de foundation, on retourne la syntaxe
     44                if (in_array($config['variante'], $colnum))
     45                return $type.'-'.$nombre_colonnes.' ';
     46                // Sinon, on démarrer le moteur de conversion de nombre, et on renvoie la bonne class
     47                elseif (in_array($config['variante'], $colettr)) {
    4848
    49             // Dans le cas ou un tableau est passé, c'est la colonne la plus large du tableau qui sera utilisée
    50             if (is_array($nombre_colonnes)) {
    51                 $nombre_colonnes = array_keys($nombre_colonnes);
    52                 return toWords(max($nombre_colonnes)).' ';
    53             }
    54