Foundation

Remember to initialize Foundation at the bottom of <body> or when the page has loaded.

          $(document).foundation("alerts dropdown reveal tooltips").foundation("section", {one_up: false});

Responsive Use

Mobile: false

Mobile: true

Tablet: false

Tablet: true

Desktop: false

Desktop: true

There are also Sass helper mixins available e.g. @include mobile { … } or @include not-mobile { … }

There are also different ways to import MoovUI:

If using little or no pure responsive design:

              @import "moovui/moovui"; // outputs .btn { ... }

If radically altering another site using MoovUI, original classes can be ignored:

              $moovui-prefix: "_";
              @import "moovui/moovui"; // outputs ._btn { ... } so existing .btn elements aren't styled

If using discrete classes similar to Foundation: (Note that base styles are only generated the first time your import MoovUI.)

              @import "moovui/moovui"; // outputs .btn { ... } meant for all screen sizes
              @media #{$mobile-query} {
                $moovui-prefix: "m-";
                @import "moovui/moovui"; // outputs @media … { .m-btn { ... } } meant for small screens
              }
              @media #{$desktop-query} {
                $moovui-prefix: "d-";
                @import "moovui/moovui"; // outputs @media … { .d-btn { ... } } meant for large screens
              }

          Mobile: false
          Mobile: true
          Tablet: false
          Tablet: true
          Desktop: false
          Desktop: true

Entypo Icon Font

Find icon names by mousing over icons in the character map.

Containers

An element with id page behaves the same and can be a general wrapper for content between the header and footer.

This content will have automatic margins to fit in the default 960px.

          This content will have automatic margins to fit in the default 960px.

Sections

Content

Content with margin

          Content
          Content with margin

Header

Add the class affix to fix it to the top of the page.

You can find an example fixed to the top of this page.

Footer

You can find an example at the bottom of this page.

...

Dropdown Menus

You can find the example in the header.

Alerts

Info (default)

Success

Warning/Caution

Error

          
            
            Info (default)
          
          
            
            Success
          
          
            
            Warning/Caution
          
          
            
            Error

Statuses

Success: message

Warning: message

Error: message

          Success: ...
          Warning: message
          Error: ...

Headers

Header 1

Header 2

Header 3

Header 4

Header 5

          Header 1
          Header 2
          Header 3
          Header 4
          Header 5

Headers (copy)

You can add a copy class to an ancestor or the element itself

Header 1

Header 2

Header 3

Header 4

Header 5

          Header 1
          
            Header 2
            Header 3
            Header 4
            Header 5

Lists

You can add a copy class to an ancestor or the element itself. You can add a link-list class for the example style.

You can add a section-list to add spacing in a list of sections.

Item 1
Item 2
Item 3

Item 1
Item 2
Item 3

Item 1
Item 2
Item 3

Item 1
Item 2
Item 3

Definition Lists

Term 1: Definition 1
Term 2: Definition 2
Term 3: Definition 3

          
            Term 1
            Definition 1
            Term 2
            Definition 2
            Term 3
            Definition 3

Text (copy)

You can add a copy class to an ancestor or the element itself

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Code

MoovUI uses the SyntaxHighlighter library.

Inline code.

Shell line 1 Shell line 2

@include mixin($var);

Highlighted syntax with no line numbers

Non-highlighted miscellaneous

<code> with no styling

<pre> with no styling

          Inline code.
          Shell line 1
          Shell line 2
          @include mixin($var);
          Highlighted &lt;span&gt;syntax&lt;/span&gt;
          Non-highlighted miscellaneous
          &lt;code&gt; with no styling
          &lt;pre&gt; with no styling

Tables

You can add a no-borders class to remove the styling.

Col 1	Col 2	Col 3	Col 4
Column 1	Column 2	Column 3	Column 4
Column 5	Column 6	Column 7	Column 8

Col 1	Col 2	Col 3	Col 4
Column 1	Column 2	Column 3	Column 4
Column 5	Column 6	Column 7	Column 8

Col 1	Col 2	Col 3	Col 4
Column 1	Column 2	Column 3	Column 4
Column 5	Column 6	Column 7	Column 8

Media Blocks

Accordions

You can add a qna class to the wrapper for the example style.

Question

Answer content

          
            
              Question
              Answer content

Nested Accordions

You can add a doc-sidebar class to the wrapper for the example style.

Tabs

Tab 1

Content 1

Tab 2

Content 2

Tab 3

Content 3

Tabbed Panes

Tab 1

Title 1

Subtitle 1

Content 1

Tab 2

Title 2

Subtitle 2

Content 2

Tab 3

Title 3

Subtitle 3

Content 3

Panels

Panel title

Panel content

Panel step 1
Panel content
Panel step 2
Panel content

          
            Panel title
            Panel content
          
          
            
              Panel step 1
              Panel content
            
            
              Panel step 2
              Panel content

Docs Panes

Local

Title

Description.

Local

Title

Description.

          
            
              
                Local
                
                Title
                Description.
              
            
            
              
                Local
                
                Title
                Description.

Buttons

Pill Button
Small Button
Button

Button with Icon
Big Button
Confirm Button
Warning Button
Pressed Button
Active Button (toggled)
Call to Action Button
Danger Button

          Pill Button
          

          Small Button
          

          Button
          

          Button with Icon
          

          Big Button
          

          Confirm Button
          

          Warning Button
          

          Pressed Button 
          

          Active Button (toggled)
          

          Call to Action Button
          

          Danger Button

Button Groups

Button 1 Button 2 Button 3

          
            Button 1
            Button 2
            Button 3

Button Bars

Button 1 Button 2 Button 3

Radio 1 Radio 2 Radio 3

Selects (dropdown)

MoovUI can use the Chosen plugin. Remember to initialize Chosen:

          $("select:not(.autocomplete)").chosen({disable_search: true});
          $("select.autocomplete").chosen();

Toggles (checkbox)

On Off

Yes No

Inputs

Add the class code for a code input.

Checkbox
Label
Label

Modals

Modal

          Modal
          
            
              
              Modal Heading
            
            Modal Content
            
              Cancel
              OK

Tooltips

Hover over me Hover over me Hover over me Hover over me

          Hover over me
          Hover over me
          Hover over me
          Hover over me

Callouts

Callout info (default)

Callout warning
with second line

          Callout info (default)
          Callout warning
with second line

Disabled

Note: IE < 11 does not support pointer-events: none

Basic 12 Grid

Add the class gutters to add some spacing between columns.

12

1

11

6

4

3

2

1

Flex

For now, use with caution if supporting IE versions < 10. Add the class center to vertically align elements.

1

2

1

2

3

1

2

3

4

1

2

3

4

5

1

2
2

3
3
3

Helpers

stretch

float left

float right

center

left

right

          stretch
          float left
          float right
          center
          left
          right