Foundation Features

All Foundation features work in JointsWP. For documentation on how to use these features, please visit the Foundation Documentation.


Alert Boxes

This is a standard alert (div.alert-box.radius).
×
This is a success alert (div.alert-box.success).
×
This is an alert (div.alert-box.alert.round).
×
This is a secondary alert (div.alert-box.secondary).
×


Buttons


Button Groups


Tiny Dropdown Button
Small Secondary Radius Dropdown Button
Button Alert Round Dropdown Button
Large Success Dropdown Button
Large Expanded Dropdown Button


Split Buttons

Tiny Split Button
Small Secondary Radius Split Button
Round Alert Split Button
Large Success Split Button


Forms

Fieldset



.com


Link Dropdown »
Content Dropdown »

Title

Some text that people will think is awesome! Some text that people will
think is awesome! Some text that people will think is awesome!

Launching a Discovery Mission

Button


Flex Video


Inline Lists


Keystroke

To make something pretty, press and hold cmd + alt + shift + w + a + !


Labels

Regular Label
Radius Secondary Label
Round Alert Label
Success Label


Magellan

Build With Predefined HTML Structure

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.

Awesome JS Goodness

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.


Pagination


Panels

This is a regular panel.

It has an easy to override visual style, and is appropriately subdued.

This is a radius callout panel.

It’s a little ostentatious, but useful for important content.

Pricing Tables

  • Standard
  • $99.99
  • An awesome description
  • 1 Database
  • 5GB Storage
  • 20 Users
  • Buy Now

Progress Bars


Reveal

Example Modal…
Example Video Modal…

This is a modal.

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 close-reveal-modal. Clicking anywhere outside the modal will also dismiss it.

Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.

Second Modal…

×

This is a second modal.

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.

×

This modal has video

×


Accordion

  • Accordion 1
  • Accordion 2

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

  • Accordion 3
    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.

Tabs

Tab 1
Tab 2
Tab 3
Tab 4

First panel content goes here…

Second panel content goes here…

Third panel content goes here…

Fourth panel content goes here…

Tab 1
Tab 2
Tab 3
Tab 4

Panel 1 content goes here.

Panel 2 content goes here.

Panel 3 content goes here.

Panel 4 content goes here.


Side Nav



Tables

Table Header Table Header Table Header Table Header
Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here

Thumbnails


Tooltips

The tooltips can be positioned on the “tip-bottom”, which is the default position, “tip-top” (hehe), “tip-left”, or “tip-right” 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.


Type

h1. This is a very large header.

h2. This is a large header.

h3. This is a medium header.

h4. This is a moderate header.

h5. This is a small header.
h6. This is a tiny header.

 

h1. subheader

h2. subheader

h3. subheader

h4. subheader

h5. subheader
h6. subheader

Definition List

Definition lists are great for small block of copy that describe the header
Lower cost
The new version of this product costs significantly less than the previous one!
Easier to use
We’ve changed the product so that it’s much easier to use!
Safe for kids
You can leave your kids alone in a room with this product and they won’t get hurt (not a guarantee).

Un-ordered lists are great for making quick outlines bulleted.
  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List item
  • List item
  • List item
Ordered lists are great for lists that need order, duh.
  1. List Item 1
  2. List Item 2
  3. List Item 3

 

Blockquote

I do not fear computers. I fear the lack of them. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.Isaac Asimov

 

Vcard

2 comments on “Foundation Features

  1. Penny Badowska on

    I have had problems linking the Foundation 5 Topbar and WordPress – on a mobile screen, the navigation doesn’t scroll, so you can’t see the bottom of the navigation.

    Does this work with JointsWP?

    Reply
    • Jeremy Englert on

      Penny, the demo site has links to the different navigation options. Take a peak at those – but from the sounds of it, it does exactly what you’re looking for.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>