Child pages
  • FSS Columns - Nested columns

Documentation for a historical release of Infusion: 1.3
Please view the Infusion Documentation site for the latest documentation.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Skip to end of metadata
Go to start of metadata

Nested Columns

a graphic of a computer tablet

Technology

  • Operating System
  • Accessibility
  • Assistive Technology
a graphic of a lifesaver

Digital Documents For Everyone

  • Accessible Digital Office Document
  • Alternative Format
a graphic of a box

Workshops

  • Workshop Description
  • Registration Info
  • About the Moderators
a graphic of a blue globe

Resources

  • Learning Management
  • Student Information
  • Content Management
a graphic of a checklist

Websites for Everyone

  • WCAG
  • Interaction Design
  • Tools
a graphic of a note with a checkmark

Legislation

  • About AODA

The mark-up and classes used to produce this layout:

<div id="nested-columns-demo" class="fl-container-850 fl-centered">
    <div class="fl-col-flex3">
        <div class="fl-col">
            <div class="fl-col-mixed-100">
                <div class="fl-col-fixed fl-force-left">
                    <img class="fl-force-right" src="../images/tablet.png" alt="a graphic of a computer tablet"/>
                </div>
                <div class="fl-col-flex">
                    <p>Technology</p>
                    <ul>
                        <li>Operating System</li>
                        <li>Accessibility</li>
                        <li>Assistive Technology</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="fl-col">
            <div class="fl-col-mixed-100">
                <div class="fl-col-fixed fl-force-left">
                    <img class="fl-force-right" src="../images/lifesaver.png" alt="a graphic of a lifesaver"/>
                </div>
                <div class="fl-col-flex">
                    <p>Digital Documents For Everyone</p>
                    <ul>
                        <li>Accessible Digital Office Document</li>
                        <li>Alternative Format</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="fl-col">
            <div class="fl-col-mixed-100">
                <div class="fl-col-fixed fl-force-left">
                    <img class="fl-force-right" src="../images/box.png" alt="a graphic of a box"/>
                </div>
                <div class="fl-col-flex">
                    <p>Workshops</p>
                    <ul>
                        <li>Workshop Description</li>
                        <li>Registration Info</li>
                        <li>About the Moderators</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="fl-col-flex3">
        <div class="fl-col">
            <div class="fl-col-mixed-100">
                <div class="fl-col-fixed fl-force-left">
                    <img class="fl-force-right" src="../images/ball.png" alt="a graphic of blue globe"/>
                </div>
                <div class="fl-col-flex">
                    <p>Resources</p>
                    <ul>
                        <li>Learning Management</li>
                        <li>Student Information</li>
                        <li>Content Management</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="fl-col">
            <div class="fl-col-mixed-100">
                <div class="fl-col-fixed fl-force-left">
                    <img class="fl-force-right" src="../images/list.png" alt="a graphic of checklist"/>
                </div>
                <div class="fl-col-flex">
                    <p>Websites for Everyone</p>
                    <ul>
                        <li>WCAG</li>
                        <li>Interaction Design</li>
                        <li>Tools</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="fl-col">
            <div class="fl-col-mixed-100">
                <div class="fl-col-fixed fl-force-left">
                    <img class="fl-force-right" src="../images/checkmark.png" alt="a graphic of note with a checkmark"/>
                </div>
                <div class="fl-col-flex">
                    <p>Legislation</p>
                    <ul>
                        <li>About AODA</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
  • No labels