Contact PDH: 530-283-2121

1065 Bucks Lake Rd, Quincy, CA 95971 • Contact

This template was created using the Foundation ver 6 framework. Here's some links you will find helpful.

Foundation Documentation
Everything you need to know about using the framework.

Foundation Code Skills
These online courses offer you a chance to better understand how Foundation works and how you can master it to create awesome projects.

Foundation Forum
Join the Foundation community to ask a question or show off your knowlege.


Here’s your basic grid:

This is a twelve column section in a row. Each of these includes a div.callout element so you can see where the columns are - it's not required at all for the grid.

Six columns

Six columns

Four columns

Four columns

Four columns


Following are code snippets from the Foundation Kitchen Sink page for your reference.

NOTE: You should refer to the Foundation version of these snippets if you find one that operate as you expect it to, but we hope having them with the template will make your page development faster and easier.

Abide

Here's how you use this input field!

This input is ignored by Abide using `data-abide-ignore`

Enter a password please.

This field is using the `data-equalto="password"` attribute, causing it to match the password field above.

Choose Your Favorite, and this is required, so you have to pick one.
Choose Your Favorite - not required, you can leave this one blank.
Check these out

Accordion


Accordion Menu


Badge

2 3 A B


Button


Callout

This is a callout.

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

It's dangerous to go alone, take this.
This is a secondary callout

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

It's dangerous to go alone, take this.
This is a success callout

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

It's dangerous to go alone, take this.
This is a warning callout

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

It's dangerous to go alone, take this.
This is an alert callout

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

It's dangerous to go alone, take this.

Callout w/Close Button

<div class="alert callout" data-closable>
          <h5>This is Important!</h5>
          <p>But when you're done reading it, click the close button in the corner to dismiss this alert.</p>
          <p>I'm using the default <code>data-closable</code> parameters, and simply fade out.</p>
          <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="success callout" data-closable="slide-out-right">
          <h5>This a friendly message.</h5>
          <p>And when you're done with me, I close using a Motion UI animation.</p>
          <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
This is Important!

But when you're done reading it, click the close button in the corner to dismiss this alert.

I'm using the default data-closable parameters, and simply fade out.

This a friendly message.

And when you're done with me, I close using a Motion UI animation.


Drilldown Menu




Equalizer

Pellentesque habitant morbi tristique senectus et netus et, ante.


Flex Grid

6 columns
6 columns
12/6/4 columns
12/6/8 columns

Flex Video


Float Classes


Forms

Here's how you use this input field!

Choose Your Favorite
Check these out
$ Submit

Grid

2/3/4 columns
4/3/4 columns
6/6/4 columns
12/12/3 columns
12/12/6 columns
12/12/3 columns
6/6/2 columns
6/6/8 columns
12/12/2 columns
3 columns
9 columns
12/8/4 columns
12/4/8 columns

Interchange


Label

Secondary Label Success Label Alert Label Warning Label

Magellan

First section

Duis scelerisque ligula ut metus rhoncus scelerisque. Integer ut egestas metus. Nulla facilisi. Aenean luctus magna lobortis ligula rhoncus, sit amet lacinia lorem sagittis. Sed ultrices at metus id aliquet. Vestibulum in condimentum quam, id ornare erat. Vivamus nec justo quis ex fringilla condimentum ac non quam.

Second section

Sed vulputate, felis interdum molestie viverra, neque urna placerat dui, ac efficitur est magna eu tellus. Nunc sodales consequat eros at bibendum. Vestibulum hendrerit gravida elit non eleifend. Nunc at vehicula ipsum. Vestibulum eu suscipit felis. Proin ipsum felis, consequat congue quam ac, efficitur tincidunt ex. Morbi accumsan sem iaculis nunc malesuada tincidunt.

Second section

Aliquam orci orci, maximus a pulvinar id, tincidunt a neque. Suspendisse eros diam, finibus et faucibus ac, suscipit feugiat orci. Morbi scelerisque sem id blandit malesuada. Donec suscipit tincidunt dolor in blandit. Nam rhoncus risus vitae lacinia dictum. Cras lobortis, nulla non faucibus mattis, tellus nibh condimentum eros, posuere volutpat arcu risus vel ante. In ut ullamcorper eros, et vestibulum risus. Fusce auctor risus vitae diam viverra tincidunt.


Media Object

Dreams feel real while we're in them.

I'm going to improvise. Listen, there's something you should know about me... about inception. An idea is like a virus, resilient, highly contagious. The smallest seed of an idea can grow. It can grow to define or destroy you.



Off Canvas


Orbit

  • You can also throw some text in here!

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.

    This Orbit slide has chill


Pagination

(Note: using this in BC will require some custom coding)


Progress Bar

25%

50%

75%


Responsive Menu


Responsive Toggle


Reveal

Click me for a modal

Awesome. I Have It.

Your couch. It is mine.

I'm a cool paragraph that lives inside of an even cooler modal. Win!


Slider


Sticky

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

demo

Switch


Table

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

Tabs

one

Check me out! I'm a super cool Tab panel with text content!


Thumbnail

demo 01
demo 01
demo 01

Title Bar

Foundation

Toggler


Tooltip

The scarabaeus hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet. Legrand immediately took the scythe, and cleared with it a circular space, three or four yards in diameter, just beneath the insect, and, having accomplished this, ordered Jupiter to let go the string and come down from the tree.


Top Bar


Visibility Classes

You are on a small screen or larger.

You are on a medium screen or larger.

You are on a large screen or larger.

You are definitely on a small screen.

You are definitely on a medium screen.

You are definitely on a large screen.

You are not on a medium screen or larger.

You are not on a large screen or larger.

You are definitely not on a small screen.

You are definitely not on a medium screen.

You are definitely not on a large screen.

Can't touch this.

You are in landscape orientation.

You are in portrait orientation.

This text can only be read by a screen reader.

There's a line of text above this one, you just can't see it.

Skip to Content