From d03fe340d2eee0a3f5ab58eac02312e7334efa48 Mon Sep 17 00:00:00 2001 From: Jordan Humphreys Date: Tue, 19 Mar 2013 09:48:16 -0700 Subject: [PATCH] Update documentation to reflect section.js updates. --- docs/components/section.html.erb | 25 ++++++++++++++----------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/docs/components/section.html.erb b/docs/components/section.html.erb index ec3e1506d..eb1b74ec0 100644 --- a/docs/components/section.html.erb +++ b/docs/components/section.html.erb @@ -11,7 +11,7 @@
-
+

Section 1

@@ -39,7 +39,7 @@
-
+

Section 1

@@ -124,8 +124,10 @@

Build With Predefined HTML Classes

There are two ways to build sections in Foundation 4, with our predefined HTML classes or with our structure and mixins. Building a sections using our predefined classes is super-easy, you just need to create a <div class="section-container" data-section> as a wrapper for the sections themselves. Inside of this wrapper, you'll create either a <section class="section"> or <div class="section">. Within that you'll include some sort of .title (this can be headers or a paragragh) and a <div class="content">. Here is the markup you'll need:

+

If you want to use ZURB's default styles for section elements you can apply the auto, tabs, accordion, vertical-nav, or horizontal-nav classes. By default, section elements will be an accordion on mobile and tabs on desktops and tablets. If you want to adjust this behavior and force a particular format for your section, you will need to set data-section equal to the format you want to force as shown in the variations below.

+ <%= code_example ' -
+

Section 1

@@ -139,6 +141,7 @@
', :html %> +

This example will automatically switch between tabs and accordion based on the resolution of the device.

The class options:

    @@ -153,7 +156,7 @@
    Accordion

    Adding an accordion class to the section container will show an accordion on both small and large screens.

    <%= code_example ' -
    +

    Section 1

    @@ -168,10 +171,10 @@
    ', :html %> -
    Tabs/Accordion
    -

    Adding a tabs class to the section container will enable tabs on large screens and show an accordion on small screens.

    +
    Tabs
    +

    Adding a tabs class to the section container will enable tabs on both small and large screens.

    <%= code_example ' -
    +

    Section 1

    @@ -196,7 +199,7 @@ <%= code_example '
    -
    +

    Section 1

    @@ -236,7 +239,7 @@

    Use the side-nav class on the list to apply the Foundation navigation styles

    <%= code_example ' -
    +

    Section 1

    @@ -269,7 +272,7 @@

    Set deep-linking to true to enable deep linking to sections of content. Deep linking allows visitors to visit a predefined URL with a hash that points to a particular section of the content. Deep linking also requires a matching data-slug on the content section that the hash should point to, without the pound (#) sign.

    <%= code_example ' -
    +

    Section 1

    @@ -325,7 +328,7 @@ $section-bottom-margin: emCalc(20px);

    Then, you'll need to add a data-attribute to make the JS work properly on that element. That looks like:

    <%= code_example ' -
    +

    Section 1

    -- 2.47.3