to do
- - - -To create a collapsible blocks of content, create a container and add the data-role="collapsible" attribute.
Directly inside this container, add any header element (H1-H6). The framework will style the header to look like a clickable button and add a "+" icon to the left to indicate it's expandable.
+ +After the heading, add any HTML markup you want to be collapsible. The framework will wrap all this markup in a container that will be hidden or shown when the heading is clicked.
+ +
+ <div data-role="collapsible">
+ <h3>I'm a header</h3>
+ <p>I'm the collapsible content.</p>
+ </div>
+ By default, the content will be expanded. To collapse the content when the page loads, add the data-state="collapsed" attribute to the wrapper.
+ <div data-role="collapsible" data-state="collapsed">
+
+
+ This code will create a collapsible widget like this:
+ + +I'm the collapsible content.
+The collapsible content is minimally styled -- we just add a bit of margin between the bar and content but you can add custom styles to tweak the appearance of the collapsible container or heading button.
+ +This page has 4 collapsible containers with different types of content inside.
+ +I'm closed when the page loads because I have the data-state="collapsed" attribute on my container.
I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content.
+I'm open when the page loads because I don't have the data-state="collapsed" attribute on my container.
I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content.
+On a mobile device, using multiple column layouts isn't generally recommended because of the narrow screen width but there are times where you may need to place buttons or other small elements side-by-side.
+The framework provides a simple way to build CSS based columns through the grid block styles. Grids have preset configurations for 2- and 3-column layouts that can be used in any situation that requires columns. Grids are 100% width, completely invisible (no borders or backgrounds) and don't have padding or margins so they shouldn't interfere with the styles of elements palced inside them.
To build a two column (50/50%) layout, start with a container with a class of ui-grid-a and add two child containers inside that are classed with ui-block-a for the first column and ui-block-b for the second.
+<div class="ui-grid-a">
+ <div class="ui-block-a">Block A</div>
+ <div class="ui-block-b">Block B</div>
+</div><!-- /grid-a -->
+Note: that we've added a height and color swatches to the grid blocks so you can see them but these don't have any appearance by default.
+ +Here is a more realistic example with text inside:
+ +The grid classes can be applied to any container. In this example, we've added grid-a to a fieldset to make the two button inside stretch to 50% of the screen width:
+<fieldset class="ui-grid-a">
+ <div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
+ <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
+</fieldset>
+There is a second grid for a 3 column layout (33/33/33%) that is similar in structure but uses class=grid-b on the parent and 3 child wrappers, each with block-a/b/c for the column child containers.
+<div class="ui-grid-a">
+ <div class="ui-block-a">Block A</div>
+ <div class="ui-block-b">Block B</div>
+ <div class="ui-block-c">Block C</div>
+</div><!-- /grid-a -->
+This will produce a 33/33/33% grid for our content.
+ +And an example of a 3 column grid with buttons inside:
+ + + + +Our goal is to leave the main content area pretty much unstyled except for adding in a bit of padding and applying the theme font family and color. Here is what standard HTML markup looks like by default:
+ + +Our goal is to leave the main content area pretty much unstyled except for adding in a bit of padding and applying the theme font family and color.
+We don't use CSS resets or a lot of custom styles because standard HTML markup is provides a lot of visual texture out of the box. By taking a light hand with content styling, it gives designers and developers a clean slate to work with instead of fighting against a lot of complex styles.
+ +This is another paragraph of text so you can see how HTML markup works in content. This is another paragraph of text so you can see how HTML markup works in content. This is another paragraph of text so you can see how HTML markup works in content.
+We add a few styles to tables and fieldsets to make them more legible but these are easily overridden with customs styles.
| Flight: | diff --git a/docs/content/content-themes.html b/docs/content/content-themes.html index 48c1881f..6d2077b2 100755 --- a/docs/content/content-themes.html +++ b/docs/content/content-themes.html @@ -16,11 +16,74 @@
|---|