Ph.: 123-012-0123
Loading...
A big box filled with Features and love.
Buttons
We <3 buttons. And so do you! That's why Klassio contains has multiple buttons styles and color that are not only badass out of the box, but easy to customize for your projects.
Examples
Orbit Slider
Orbit is all the rage in jQuery hotness right now. It's a killer, lightweight slider for images & content.
The Basic Implementation
Orbit is going to be the easiest slider you've ever hooked up. Below are the steps, but for more detail checkout the playground docs.
- Get some markup like this in your page:
- Activate Orbit. You can embed the call in the specific page like this:
...Or you could just put it in the app.js file if you're using that. - You can even apply the class .slider to the div that contains the slider (Only For This Theme). The default slider uses the same method.
Options
Tabs
Tabs are very versatile both as organization and navigational constructs. To keep things easy for everyone we've created two main tab styles (simple and nice) as well as two variants of each - open and contained. With the base Foundation package, tabs of a particular format are actually already hooked up - no extra work required.
Tabs are made of two objects:a DL object containing the tabs themselves, and a UL object containing the tab content. If you simply want visual tabs (as seen in this documentation) without the on-page hookup, you only need the DL. If you want functional tabs, just be sure that each tab is linked to an ID, and that the corresponding tab has an ID of tabnameTab. Check out these examples.
Note: The third tab is using the mobile visibility classes to hide on small devices.
Simple Tabs
- This is simple tab 1's content. Pretty neat, huh?
- This is simple tab 2's content. Now you see it!
- This is simple tab 3's content. It's only okay.
Contained Tabs
Contained tabs have a simple added class of 'contained' on the tabs-content element. What that means is the tab content has a border around it tying it to the tabs, and the padding on that container (by default) is one column on each side. That means you can still use standard column sizes inside a tab element.
- This is simple tab 1's content. Pretty neat, huh?
- This is simple tab 2's content. Now you see it!
- This is simple tab 3's content. It's only okay.
Nice Tabs
Need something a little fancier? Nice tabs have some sweet default styling and can add a little polish to a prototype (or documentation). They can be both standard and contained, just like the simple tabs.
- This is nice tab 1's content. Pretty neat, huh?
- This is nice tab 2's content. Now you see it!
- This is simple tab 3's content. It's only okay.
Vertical Tabs
You can also use tabs in a vertical configuration by adding a class of 'vertical' to the DL element. These are great for more scalable nav, and you can see how they work on this page on a tablet or desktop.
Mobile Tabs
To demonstrate how mobile navigation can work, adding a class of 'mobile' to a tab group will switch them (at small resolutions) to full width nav bars.
Forms
Forms are not a lot of fun. We've taken that lack of fun and dodged it with this ready-made code. In this release there are two sets of forms styles - basic and nice. Both are simple, both are flexible, both are easy to customize.
Forms
Nice Forms
Custom Forms
Adding Custom Forms with JavaScript
If you are creating these custom forms using JavaScript (via AJAX, JavaScript templates or whatever), you will also need to create the custom markup that Foundation typically creates for you.
Foundation detects any custom forms when the document has loaded and adds the custom markup required to make the forms pretty. However if you are adding these forms after the document has loaded, Foundation does not know to append this markup.
All the custom forms events are bound using jQuery.fn.on(), so you don't need to worry about event handlers not being bound to new elements.
Most of the documentation is by the Zurb Team. It's awesome & I'm thankful that they wrote such thorough documentation for an open source project. Most companies would never do that.