</style>
</head>
<body>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h4>Testing that generic div's work throught the Orbit markup</h4>
- <h4>Testing that generic div's work throught the Orbit markup</h4>
-
- <section class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
- <div class="orbit-wrapper">
- <div class="orbit-controls">
- <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>◀︎</button>
- <button class="orbit-next"><span class="show-for-sr">Next Slide</span>▶︎</button>
- </div>
- <div class="orbit-container">
- <div class="is-active orbit-slide">
- <div class="orbit-figure">
- <img class="orbit-image" src="http://placehold.it/1200x600/999?text=Slide-1" alt="Space">
- <div class="orbit-caption">Space, the final frontier.</div>
- </div>
- </div>
- <div class="orbit-slide">
- <div class="orbit-figure">
- <img class="orbit-image" src="http://placehold.it/1200x600/888?text=Slide-2" alt="Space">
- <div class="orbit-caption">Lets Rocket!</div>
+ <section class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
+ <div class="orbit-wrapper">
+ <div class="orbit-controls">
+ <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>◀︎</button>
+ <button class="orbit-next"><span class="show-for-sr">Next Slide</span>▶︎</button>
+ </div>
+ <div class="orbit-container">
+ <div class="is-active orbit-slide">
+ <div class="orbit-figure">
+ <img class="orbit-image" src="http://placehold.it/1200x600/999?text=Slide-1" alt="Space">
+ <div class="orbit-caption">Space, the final frontier.</div>
+ </div>
+ </div>
+ <div class="orbit-slide">
+ <div class="orbit-figure">
+ <img class="orbit-image" src="http://placehold.it/1200x600/888?text=Slide-2" alt="Space">
+ <div class="orbit-caption">Lets Rocket!</div>
+ </div>
+ </div>
+ <div class="orbit-slide">
+ <div class="orbit-figure">
+ <img class="orbit-image" src="http://placehold.it/1200x600/777?text=Slide-3" alt="Space">
+ <div class="orbit-caption">Encapsulating</div>
+ </div>
+ </div>
+ <div class="orbit-slide">
+ <div class="orbit-figure">
+ <img class="orbit-image" src="http://placehold.it/1200x600/666&text=Slide-4" alt="Space">
+ <div class="orbit-caption">Outta This World</div>
+ </div>
+ </div>
+ </div>
</div>
- </div>
- <div class="orbit-slide">
- <div class="orbit-figure">
- <img class="orbit-image" src="http://placehold.it/1200x600/777?text=Slide-3" alt="Space">
- <div class="orbit-caption">Encapsulating</div>
+ <div class="orbit-bullets">
+ <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
+ <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
+ <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
+ <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
</div>
- </div>
- <div class="orbit-slide">
- <div class="orbit-figure">
- <img class="orbit-image" src="http://placehold.it/1200x600/666&text=Slide-4" alt="Space">
- <div class="orbit-caption">Outta This World</div>
- </div>
- </div>
+ </section>
</div>
</div>
- <div class="orbit-bullets">
- <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
- <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
- <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
- <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
- </div>
- </section>
+ </div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
</style>
</head>
<body>
- <div class="row column">
- <h1>Orbit: Touch Support</h1>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h1>Orbit: Touch Support</h1>
- <p>Swiping left and right should change the current slide. Swiping up and down to scroll the page should not be disrupted.</p>
+
<p>Swiping left and right should change the current slide. Swiping up and down to scroll the page should not be disrupted.</p>
- <p>This content is here to make the page longer. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid facere architecto fugit voluptates, inventore est cum nihil vel dicta assumenda, illum. Ipsum non saepe similique repellat, enim blanditiis fuga eveniet.</p>
+
<p>This content is here to make the page longer. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid facere architecto fugit voluptates, inventore est cum nihil vel dicta assumenda, illum. Ipsum non saepe similique repellat, enim blanditiis fuga eveniet.</p>
- <div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-use-m-u-i="false">
- <ul class="orbit-container">
- <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>◀︎</button>
- <button class="orbit-next"><span class="show-for-sr">Next Slide</span>▶︎</button>
- <li class="is-active orbit-slide" style="background: #eee;">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam minima amet cupiditate pariatur doloribus, quo repudiandae facere odio ipsam laborum nihil, voluptate itaque perspiciatis dolorem aut nostrum! Autem, exercitationem, nesciunt!</p>
- </li>
- <li class="orbit-slide" style="background: #ddd;">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam minima amet cupiditate pariatur doloribus, quo repudiandae facere odio ipsam laborum nihil, voluptate itaque perspiciatis dolorem aut nostrum! Autem, exercitationem, nesciunt!</p>
- </li>
- <li class="orbit-slide" style="background: #ccc;">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam minima amet cupiditate pariatur doloribus, quo repudiandae facere odio ipsam laborum nihil, voluptate itaque perspiciatis dolorem aut nostrum! Autem, exercitationem, nesciunt!</p>
- </li>
- <li class="orbit-slide" style="background: #999;">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam minima amet cupiditate pariatur doloribus, quo repudiandae facere odio ipsam laborum nihil, voluptate itaque perspiciatis dolorem aut nostrum! Autem, exercitationem, nesciunt!</p>
- </li>
- </ul>
- <nav class="orbit-bullets">
- <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
- <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
- <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
- <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
- </nav>
- </div>
+
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-use-m-u-i="false">
+
<ul class="orbit-container">
+ <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>◀︎</button>
+ <button class="orbit-next"><span class="show-for-sr">Next Slide</span>▶︎</button>
+ <li class="is-active orbit-slide" style="background: #eee;">
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam minima amet cupiditate pariatur doloribus, quo repudiandae facere odio ipsam laborum nihil, voluptate itaque perspiciatis dolorem aut nostrum! Autem, exercitationem, nesciunt!</p>
+ </li>
+ <li class="orbit-slide" style="background: #ddd;">
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam minima amet cupiditate pariatur doloribus, quo repudiandae facere odio ipsam laborum nihil, voluptate itaque perspiciatis dolorem aut nostrum! Autem, exercitationem, nesciunt!</p>
+ </li>
+ <li class="orbit-slide" style="background: #ccc;">
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam minima amet cupiditate pariatur doloribus, quo repudiandae facere odio ipsam laborum nihil, voluptate itaque perspiciatis dolorem aut nostrum! Autem, exercitationem, nesciunt!</p>
+ </li>
+ <li class="orbit-slide" style="background: #999;">
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam minima amet cupiditate pariatur doloribus, quo repudiandae facere odio ipsam laborum nihil, voluptate itaque perspiciatis dolorem aut nostrum! Autem, exercitationem, nesciunt!</p>
+ </li>
+ </ul>
+ <nav class="orbit-bullets">
+ <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
+ <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
+ <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
+ <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
+ </nav>
+ </div>
- <p>This content is here to make the page longer. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid facere architecto fugit voluptates, inventore est cum nihil vel dicta assumenda, illum. Ipsum non saepe similique repellat, enim blanditiis fuga eveniet.</p>
+
<p>This content is here to make the page longer. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid facere architecto fugit voluptates, inventore est cum nihil vel dicta assumenda, illum. Ipsum non saepe similique repellat, enim blanditiis fuga eveniet.</p>
- <p>This content is here to make the page longer. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid facere architecto fugit voluptates, inventore est cum nihil vel dicta assumenda, illum. Ipsum non saepe similique repellat, enim blanditiis fuga eveniet.</p>
+
<p>This content is here to make the page longer. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid facere architecto fugit voluptates, inventore est cum nihil vel dicta assumenda, illum. Ipsum non saepe similique repellat, enim blanditiis fuga eveniet.</p>
- <p>This content is here to make the page longer. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid facere architecto fugit voluptates, inventore est cum nihil vel dicta assumenda, illum. Ipsum non saepe similique repellat, enim blanditiis fuga eveniet.</p>
-
+ <p>This content is here to make the page longer. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid facere architecto fugit voluptates, inventore est cum nihil vel dicta assumenda, illum. Ipsum non saepe similique repellat, enim blanditiis fuga eveniet.</p>
+ </div>
+ </div>
</div>
<script src="../assets/js/vendor.js"></script>
<link href="../assets/css/foundation-prototype.css" rel="stylesheet" />
</head>
<body>
- <div class="grid padding-gutters">
- <div class="cell">
- <h2 class="margin-top-1">Arrow</h2>
- <div class="arrow-down display-inline-block margin-right-1"></div>
- <div class="arrow-up display-inline-block margin-right-1"></div>
- <div class="arrow-right display-inline-block margin-right-1"></div>
- <div class="arrow-left display-inline-block"></div>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h2 class="margin-top-1">Arrow</h2>
+ <div class="arrow-down display-inline-block margin-right-1"></div>
+ <div class="arrow-up display-inline-block margin-right-1"></div>
+ <div class="arrow-right display-inline-block margin-right-1"></div>
+ <div class="arrow-left display-inline-block"></div>
+ </div>
</div>
</div>
</style>
</head>
<body>
- <div class="row">
- <div class="medium-6 columns">
- <h2>Without Border Box</h2>
- <div class="example-box debug-red">
- <p>
- This div is smaller (width is 300px and height is 100px and has no padding).
- </p>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="medium-6 cell">
+ <h2>Without Border Box</h2>
+ <div class="example-box debug-red">
+ <p>
+ This div is smaller (width is 300px and height is 100px and has no padding).
+ </p>
+ </div>
+ <div class="example-box debug-blue padding-3">
+ <p>
+ This div is bigger (width is 300px and height is 100px and has 3rem padding).
+ </p>
+ </div>
</div>
- <div class="example-box debug-blue padding-3">
- <p>
- This div is bigger (width is 300px and height is 100px and has 3rem padding).
- </p>
- </div>
- </div>
- <div class="medium-6 columns">
- <h2>With Border Box</h2>
- <div class="example-box border-box debug-red">
- <p>
- This div is same size to below (width is 300px and height is 100px and has no padding).
- </p>
- </div>
- <div class="example-box border-box debug-blue padding-3">
- <p>
- This div is same size to above (width is 300px and height is 100px and has 3rem padding).
- </p>
+ <div class="medium-6 cell">
+ <h2>With Border Box</h2>
+ <div class="example-box border-box debug-red">
+ <p>
+ This div is same size to below (width is 300px and height is 100px and has no padding).
+ </p>
+ </div>
+ <div class="example-box border-box debug-blue padding-3">
+ <p>
+ This div is same size to above (width is 300px and height is 100px and has 3rem padding).
+ </p>
+ </div>
</div>
</div>
-
</div>
<script src="../assets/js/vendor.js"></script>
<link href="../assets/css/foundation-prototype.css" rel="stylesheet" />
</head>
<body>
- <div class="row column">
- <h2>Border None</h2>
- </div>
- <div class="row column">
- <div class="callout primary border-none">
- Hi! I am a Primary callout with no Borders
- </div>
- </div>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h2>Border None</h2>
+ </div>
+ <div class="cell">
+ <div class="callout primary border-none">
+ Hi! I am a Primary callout with no Borders
+ </div>
+ </div>
- <div class="row column">
- <div class="callout secondary border-none">
- Hi! I am a Secondary callout with no Borders
- </div>
- </div>
+ <div class="cell">
+
<div class="callout secondary border-none">
+ Hi! I am a Secondary callout with no Borders
+ </div>
+ </div>
- <div class="row column">
- <div class="callout success border-none">
- Hi! I am a Success callout with no Borders
- </div>
- </div>
+ <div class="cell">
+
<div class="callout success border-none">
+ Hi! I am a Success callout with no Borders
+ </div>
+ </div>
- <div class="row column">
- <div class="callout warning border-none">
- Hi! I am a Warning callout with no Borders
- </div>
- </div>
+ <div class="cell">
+
<div class="callout warning border-none">
+ Hi! I am a Warning callout with no Borders
+ </div>
+ </div>
- <div class="row column">
- <div class="callout alert border-none">
- Hi! I am a Alert callout with no Borders
+ <div class="cell">
+ <div class="callout alert border-none">
+ Hi! I am a Alert callout with no Borders
+ </div>
+ </div>
</div>
</div>
<link href="../assets/css/foundation-prototype.css" rel="stylesheet" />
</head>
<body>
- <div class="row column">
- <h2>Rounded</h2>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h2>Rounded</h2>
- <p>These <code>.radius</code>, <code>.rounded</code>, <code>.bordered</code> & <code>.shadow</code> classes can be used independently or together to style the component by rounding its corners, giving light borders, and creating shadow to it respectively. Mostly used in buttons, cards, tables, images and many more.</p>
+
<p>These <code>.radius</code>, <code>.rounded</code>, <code>.bordered</code> & <code>.shadow</code> classes can be used independently or together to style the component by rounding its corners, giving light borders, and creating shadow to it respectively. Mostly used in buttons, cards, tables, images and many more.</p>
- <div class="primary callout">
- <strong>Sass Tip</strong>: You can use <a href="#shadow">Shadow</a> mixin to create something like <code>shadow-hover-focus</code>. <a href="http://codepen.io/IamManchanda/pen/XMRMwo">Codepen example</a>
- </div>
+
<div class="primary callout">
+
<strong>Sass Tip</strong>: You can use <a href="#shadow">Shadow</a> mixin to create something like <code>shadow-hover-focus</code>. <a href="http://codepen.io/IamManchanda/pen/XMRMwo">Codepen example</a>
+ </div>
- <h4>Buttons</h4>
- <button type="button" class="button radius bordered shadow primary">Primary</button>
- <button type="button" class="button rounded bordered shadow secondary">Secondary</button>
- <button type="button" class="button radius bordered shadow success">Success</button>
- <button type="button" class="button rounded bordered shadow alert">Alert</button>
- <button type="button" class="button radius bordered shadow warning">Warning</button>
+ <h4>Buttons</h4>
+ <button type="button" class="button radius bordered shadow primary">Primary</button>
+ <button type="button" class="button rounded bordered shadow secondary">Secondary</button>
+ <button type="button" class="button radius bordered shadow success">Success</button>
+ <button type="button" class="button rounded bordered shadow alert">Alert</button>
+ <button type="button" class="button radius bordered shadow warning">Warning</button>
- <h4>Cards</h4>
- <div class="radius bordered shadow card" style="max-width: 300px;">
- <img src="http://placehold.it/500x250">
- <div class="card-divider">
- Styled Card
- </div>
- <div class="card-section">
- <h4>This is a card.</h4>
- <p>It has an easy to override visual style, and is appropriately subdued.</p>
- </div>
- </div>
+ <h4>Cards</h4>
+
<div class="radius bordered shadow card" style="max-width: 300px;">
+
<img src="http://placehold.it/500x250">
+
<div class="card-divider">
+ Styled Card
+ </div>
+
<div class="card-section">
+ <h4>This is a card.</h4>
+
<p>It has an easy to override visual style, and is appropriately subdued.</p>
+ </div>
+ </div>
- <h4>Tables</h4>
- <table class="radius bordered shadow">
- <thead>
- <tr>
- <th width="200">Table Header</th>
- <th>Table Header</th>
- <th width="150">Table Header</th>
- <th width="150">Table Header</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>Content Goes Here</td>
- <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
- <td>Content Goes Here</td>
- <td>Content Goes Here</td>
- </tr>
- <tr>
- <td>Content Goes Here</td>
- <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
- <td>Content Goes Here</td>
- <td>Content Goes Here</td>
- </tr>
- <tr>
- <td>Content Goes Here</td>
- <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
- <td>Content Goes Here</td>
- <td>Content Goes Here</td>
- </tr>
- <tr>
- <td>Content Goes Here</td>
- <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
- <td>Content Goes Here</td>
- <td>Content Goes Here</td>
- </tr>
- </tbody>
- </table>
+ <h4>Tables</h4>
+
<table class="radius bordered shadow">
+ <thead>
+ <tr>
+ <th width="200">Table Header</th>
+ <th>Table Header</th>
+ <th width="150">Table Header</th>
+ <th width="150">Table Header</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Content Goes Here</td>
+ <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
+ <td>Content Goes Here</td>
+ <td>Content Goes Here</td>
+ </tr>
+ <tr>
+ <td>Content Goes Here</td>
+ <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
+ <td>Content Goes Here</td>
+ <td>Content Goes Here</td>
+ </tr>
+ <tr>
+ <td>Content Goes Here</td>
+ <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
+ <td>Content Goes Here</td>
+ <td>Content Goes Here</td>
+ </tr>
+ <tr>
+ <td>Content Goes Here</td>
+ <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
+ <td>Content Goes Here</td>
+ <td>Content Goes Here</td>
+ </tr>
+ </tbody>
+ </table>
- <h4>Images</h4>
- <img src="http://placehold.it/100x100" class="radius">
+ <h4>Images</h4>
+
<img src="http://placehold.it/100x100" class="radius">
+ </div>
+ </div>
</div>
<script src="../assets/js/vendor.js"></script>
</style>
</head>
<body>
- <div class="row column">
- <h2 class="margin-top-1">Display None</h2>
- <span>A span element.</span>
- <span class="debug display-none">My Debugged span.</span>
- <span>Another span element</span>
- </div>
- <div class="row column">
- <h2 class="margin-top-1">Display Inline</h2>
- <span>A span element.</span>
- <span class="debug display-inline">My Debugged span.</span>
- <span>Another span element</span>
- </div>
- <div class="row column">
- <h2 class="margin-top-1">Display Block</h2>
- <span>A span element.</span>
- <span class="debug display-block">My Debugged span.</span>
- <span>Another span element</span>
- </div>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h2 class="margin-top-1">Display None</h2>
+ <span>A span element.</span>
+ <span class="debug display-none">My Debugged span.</span>
+ <span>Another span element</span>
+ </div>
+ <div class="cell">
+ <h2 class="margin-top-1">Display Inline</h2>
+ <span>A span element.</span>
+ <span class="debug display-inline">My Debugged span.</span>
+ <span>Another span element</span>
+ </div>
+ <div class="cell">
+ <h2 class="margin-top-1">Display Block</h2>
+ <span>A span element.</span>
+ <span class="debug display-block">My Debugged span.</span>
+ <span>Another span element</span>
+ </div>
- <div class="row column">
- <h2 class="margin-top-1">Display Inline Block</h2>
- <div class="floating-box">Floating box</div>
- <div class="floating-box">Floating box</div>
- <div class="floating-box">Floating box</div>
- <div class="floating-box">Floating box</div>
- <div class="floating-box">Floating box</div>
- <div class="floating-box">Floating box</div>
- <div class="floating-box">Floating box</div>
- <div class="floating-box">Floating box</div>
- <div class="floating-box">Floating box</div>
- <div class="floating-box">Floating box</div>
- <div class="floating-box">Floating box</div>
+ <div class="cell">
+ <h2 class="margin-top-1">Display Inline Block</h2>
+
<div class="floating-box">Floating box</div>
+
<div class="floating-box">Floating box</div>
+
<div class="floating-box">Floating box</div>
+
<div class="floating-box">Floating box</div>
+
<div class="floating-box">Floating box</div>
+
<div class="floating-box">Floating box</div>
+
<div class="floating-box">Floating box</div>
+
<div class="floating-box">Floating box</div>
+
<div class="floating-box">Floating box</div>
+
<div class="floating-box">Floating box</div>
+
<div class="floating-box">Floating box</div>
- <div class="after-box">Another box, after the floating boxes...</div>
+ <div class="after-box">Another box, after the floating boxes...</div>
+ </div>
+ </div>
</div>
<p class="margin-vertical-2"> </p>
<link href="../assets/css/foundation-prototype.css" rel="stylesheet" />
</head>
<body>
- <div class="row column">
- <h2 class="margin-top-1">Font Wide</h2>
- <p class="font-wide">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
- </div>
- <div class="row column">
- <h2 class="margin-top-1">Font Normal</h2>
- <p class="font-normal">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
- </div>
- <div class="row column">
- <h2 class="margin-top-1">Font Bold</h2>
- <p class="font-bold">Perspiciatis tempore cumque, magni aspernatur, quidem. 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</p>
- </div>
- <div class="row column">
- <h2 class="margin-top-1">Font Italic</h2>
- <p class="font-italic">Lorem minus, placeat, cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.iure voluptas aliquam tempora neque?</p>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h2 class="margin-top-1">Font Wide</h2>
+ <p class="font-wide">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+ </div>
+ <div class="cell">
+ <h2 class="margin-top-1">Font Normal</h2>
+ <p class="font-normal">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+ </div>
+ <div class="cell">
+ <h2 class="margin-top-1">Font Bold</h2>
+ <p class="font-bold">Perspiciatis tempore cumque, magni aspernatur, quidem. 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</p>
+ </div>
+ <div class="cell">
+ <h2 class="margin-top-1">Font Italic</h2>
+ <p class="font-italic">Lorem minus, placeat, cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.iure voluptas aliquam tempora neque?</p>
+ </div>
+ </div>
</div>
<script src="../assets/js/vendor.js"></script>
<link href="../assets/css/foundation-prototype.css" rel="stylesheet" />
</head>
<body>
- <div class="row column">
- <h2 class="margin-top-2">Text Hide</h2>
- <a href="" class="text-hide">
- <img src="http://foundation.zurb.com/sites/docs/assets/img/logos/zurb-logo.svg">
- Zurb
- </a>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h2 class="margin-top-2">Text Hide</h2>
+ <a href="" class="text-hide">
+ <img src="http://foundation.zurb.com/sites/docs/assets/img/logos/zurb-logo.svg">
+ Zurb
+ </a>
+ </div>
+ </div>
</div>
<script src="../assets/js/vendor.js"></script>
<link href="../assets/css/foundation-prototype.css" rel="stylesheet" />
</head>
<body>
- <div class="row column">
- <h2 class="margin-top-1">No Bullet</h2>
- <ol class="no-bullet">
- <li>List item with a much longer description or more content.</li>
- <li>List item</li>
- <li>List item</li>
- </ol>
- </div>
- <div class="row column">
- <h2 class="margin-top-1">List Decimal</h2>
- <ol class="list-decimal">
- <li>List item with a much longer description or more content.</li>
- <li>List item</li>
- <li>List item</li>
- </ol>
- </div>
- <div class="row column">
- <h2 class="margin-top-1">List Lower Alpha</h2>
- <ol class="list-lower-alpha">
- <li>List item with a much longer description or more content.</li>
- <li>List item</li>
- <li>List item</li>
- </ol>
- </div>
- <div class="row column">
- <h2 class="margin-top-1">List Lower Latin</h2>
- <ol class="list-lower-latin">
- <li>List item with a much longer description or more content.</li>
- <li>List item</li>
- <li>List item</li>
- </ol>
- </div>
- <div class="row column">
- <h2 class="margin-top-1">List Lower Roman</h2>
- <ol class="list-lower-roman">
- <li>List item with a much longer description or more content.</li>
- <li>List item</li>
- <li>List item</li>
- </ol>
- </div>
- <div class="row column">
- <h2 class="margin-top-1">List Upper Alpha</h2>
- <ol class="list-upper-alpha">
- <li>List item with a much longer description or more content.</li>
- <li>List item</li>
- <li>List item</li>
- </ol>
- </div>
- <div class="row column">
- <h2 class="margin-top-1">List Upper Latin</h2>
- <ol class="list-upper-latin">
- <li>List item with a much longer description or more content.</li>
- <li>List item</li>
- <li>List item</li>
- </ol>
- </div>
- <div class="row column">
- <h2 class="margin-top-1">List Upper Roman</h2>
- <ol class="list-upper-roman">
- <li>List item with a much longer description or more content.</li>
- <li>List item</li>
- <li>List item</li>
- </ol>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h2 class="margin-top-1">No Bullet</h2>
+ <ol class="no-bullet">
+ <li>List item with a much longer description or more content.</li>
+ <li>List item</li>
+ <li>List item</li>
+ </ol>
+ </div>
+ <div class="cell">
+ <h2 class="margin-top-1">List Decimal</h2>
+ <ol class="list-decimal">
+ <li>List item with a much longer description or more content.</li>
+ <li>List item</li>
+ <li>List item</li>
+ </ol>
+ </div>
+ <div class="cell">
+ <h2 class="margin-top-1">List Lower Alpha</h2>
+ <ol class="list-lower-alpha">
+ <li>List item with a much longer description or more content.</li>
+ <li>List item</li>
+ <li>List item</li>
+ </ol>
+ </div>
+ <div class="cell">
+ <h2 class="margin-top-1">List Lower Latin</h2>
+ <ol class="list-lower-latin">
+ <li>List item with a much longer description or more content.</li>
+ <li>List item</li>
+ <li>List item</li>
+ </ol>
+ </div>
+ <div class="cell">
+ <h2 class="margin-top-1">List Lower Roman</h2>
+ <ol class="list-lower-roman">
+ <li>List item with a much longer description or more content.</li>
+ <li>List item</li>
+ <li>List item</li>
+ </ol>
+ </div>
+ <div class="cell">
+ <h2 class="margin-top-1">List Upper Alpha</h2>
+ <ol class="list-upper-alpha">
+ <li>List item with a much longer description or more content.</li>
+ <li>List item</li>
+ <li>List item</li>
+ </ol>
+ </div>
+ <div class="cell">
+ <h2 class="margin-top-1">List Upper Latin</h2>
+ <ol class="list-upper-latin">
+ <li>List item with a much longer description or more content.</li>
+ <li>List item</li>
+ <li>List item</li>
+ </ol>
+ </div>
+ <div class="cell">
+ <h2 class="margin-top-1">List Upper Roman</h2>
+ <ol class="list-upper-roman">
+ <li>List item with a much longer description or more content.</li>
+ <li>List item</li>
+ <li>List item</li>
+ </ol>
+ </div>
+ </div>
</div>
<script src="../assets/js/vendor.js"></script>
<link href="../assets/css/foundation-prototype.css" rel="stylesheet" />
</head>
<body>
- <div class="row column">
- <h2 class="margin-top-1">No Bullet</h2>
- <ul class="no-bullet">
- <li>List item with a much longer description or more content.</li>
- <li>List item</li>
- <li>List item</li>
- </ul>
- </div>
- <div class="row column">
- <h2 class="margin-top-1">List Disc</h2>
- <ul class="list-disc">
- <li>List item with a much longer description or more content.</li>
- <li>List item</li>
- <li>List item</li>
- </ul>
- </div>
- <div class="row column">
- <h2 class="margin-top-1">List Circle</h2>
- <ul class="list-circle">
- <li>List item with a much longer description or more content.</li>
- <li>List item</li>
- <li>List item</li>
- </ul>
- </div>
- <div class="row column">
- <h2 class="margin-top-1">List Square</h2>
- <ul class="list-square">
- <li>List item with a much longer description or more content.</li>
- <li>List item</li>
- <li>List item</li>
- </ul>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h2 class="margin-top-1">No Bullet</h2>
+ <ul class="no-bullet">
+ <li>List item with a much longer description or more content.</li>
+ <li>List item</li>
+ <li>List item</li>
+ </ul>
+ </div>
+ <div class="cell">
+ <h2 class="margin-top-1">List Disc</h2>
+ <ul class="list-disc">
+ <li>List item with a much longer description or more content.</li>
+ <li>List item</li>
+ <li>List item</li>
+ </ul>
+ </div>
+ <div class="cell">
+ <h2 class="margin-top-1">List Circle</h2>
+ <ul class="list-circle">
+ <li>List item with a much longer description or more content.</li>
+ <li>List item</li>
+ <li>List item</li>
+ </ul>
+ </div>
+ <div class="cell">
+ <h2 class="margin-top-1">List Square</h2>
+ <ul class="list-square">
+ <li>List item with a much longer description or more content.</li>
+ <li>List item</li>
+ <li>List item</li>
+ </ul>
+ </div>
+ </div>
</div>
<script src="../assets/js/vendor.js"></script>
</style>
</head>
<body>
- <div class="row column">
- <h2 class="margin-top-1">Overflow Scroll</h2>
- <p>This first example uses <code>text-nowrap</code> also to show the scroll on both sides.</p>
- <div class="debug-box overflow-scroll text-nowrap">
- <div>
- <p>
- 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.
- </p>
- <p>
- 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.
- </p>
- <p>
- 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.
- </p>
- <p>
- 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.
- </p>
- <p>
- 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.
- </p>
- <p>
- 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.
- </p>
- <p>
- 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.
- </p>
- <p>
- 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.
- </p>
- <p>
- 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.
- </p>
- <p>
- 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.
- </p>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h2 class="margin-top-1">Overflow Scroll</h2>
+ <p>This first example uses <code>text-nowrap</code> also to show the scroll on both sides.</p>
+ <div class="debug-box overflow-scroll text-nowrap">
+ <div>
+ <p>
+ 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.
+ </p>
+ <p>
+ 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.
+ </p>
+ <p>
+ 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.
+ </p>
+ <p>
+ 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.
+ </p>
+ <p>
+ 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.
+ </p>
+ <p>
+ 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.
+ </p>
+ <p>
+ 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.
+ </p>
+ <p>
+ 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.
+ </p>
+ <p>
+ 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.
+ </p>
+ <p>
+ 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.
+ </p>
+ </div>
+ </div>
</div>
- </div>
- </div>
- <div class="row column">
- <h2 class="margin-top-1">Overflow Hidden</h2>
- <div class="debug-box overflow-hidden">
- <div>
- <p>
- 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.
- </p>
- <p>
- 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.
- </p>
- <p>
- 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.
- </p>
- <p>
- 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.
- </p>
- <p>
- 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.
- </p>
- <p>
- 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.
- </p>
- <p>
- 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.
- </p>
- <p>
- 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.
- </p>
- <p>
- 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.
- </p>
- <p>
- 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.
- </p>
+ <div class="cell">
+ <h2 class="margin-top-1">Overflow Hidden</h2>
+ <div class="debug-box overflow-hidden">
+ <div>
+ <p>
+ 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.
+ </p>
+ <p>
+ 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.
+ </p>
+ <p>
+ 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.
+ </p>
+ <p>
+ 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.
+ </p>
+ <p>
+ 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.
+ </p>
+ <p>
+ 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.
+ </p>
+ <p>
+ 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.
+ </p>
+ <p>
+ 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.
+ </p>
+ <p>
+ 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.
+ </p>
+ <p>
+ 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.
+ </p>
+ </div>
+ </div>
</div>
- </div>
- </div>
- <div class="row column">
- <h2 class="margin-top-1">Overflow Visible</h2>
- <div class="debug-box overflow-visible">
- <div>
- <p>
- 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.
- </p>
- <p>
- 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.
- </p>
- <p>
- 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.
- </p>
- <p>
- 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.
- </p>
- <p>
- 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.
- </p>
- <p>
- 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.
- </p>
- <p>
- 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.
- </p>
- <p>
- 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.
- </p>
- <p>
- 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.
- </p>
- <p>
- 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.
- </p>
+ <div class="cell">
+ <h2 class="margin-top-1">Overflow Visible</h2>
+ <div class="debug-box overflow-visible">
+ <div>
+ <p>
+ 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.
+ </p>
+ <p>
+ 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.
+ </p>
+ <p>
+ 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.
+ </p>
+ <p>
+ 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.
+ </p>
+ <p>
+ 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.
+ </p>
+ <p>
+ 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.
+ </p>
+ <p>
+ 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.
+ </p>
+ <p>
+ 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.
+ </p>
+ <p>
+ 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.
+ </p>
+ <p>
+ 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.
+ </p>
+ </div>
+ </div>
</div>
</div>
</div>
<link href="../assets/css/foundation-prototype.css" rel="stylesheet" />
</head>
<body>
- <div class="row column">
- <h2>Separator</h2>
- <div class="row">
- <div class="small-12 medium-4 columns">
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell medium-12">
+ <h2>Separator</h2>
+ </div>
+ <div class="small-12 medium-4 cell">
<h3 class="separator-left">Lorem</h3>
</div>
- <div class="small-12 medium-4 columns">
+ <div class="small-12 medium-4 cell">
<h3 class="separator-center">Ipsum Dolor</h3>
</div>
- <div class="small-12 medium-4 columns">
+ <div class="small-12 medium-4 cell">
<h3 class="separator-right">Tempor</h3>
</div>
</div>
</style>
</head>
<body>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h2 class="margin-top-1">Height</h2>
+ <div class="demo-height-box">
+ <div class="height-25 p-a-20">Height 25%</div>
+ <div class="height-50 p-a-20">Height 50%</div>
+ <div class="height-75 p-a-20">Height 75%</div>
+ <div class="height-100 p-a-20">Height 100%</div>
+ </div>
+ </div>
- <div class="row column">
- <h2 class="margin-top-1">Height</h2>
- <div class="demo-height-box">
- <div class="height-25 p-a-20">Height 25%</div>
- <div class="height-50 p-a-20">Height 50%</div>
- <div class="height-75 p-a-20">Height 75%</div>
- <div class="height-100 p-a-20">Height 100%</div>
- </div>
- </div>
-
- <div class="row column">
- <h2 class="margin-vertical-2">Max Height 100</h2>
- <div class="demo-max-height-box">
- <div class="max-height-100 p-a-20">Max Height = 100%</div>
+ <div class="cell">
+ <h2 class="margin-vertical-2">Max Height 100</h2>
+ <div class="demo-max-height-box">
+ <div class="max-height-100 p-a-20">Max Height = 100%</div>
+ </div>
+ </div>
</div>
</div>
+
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
</style>
</head>
<body>
- <div class="row column">
- <h2 class="margin-top-1">Width</h2>
- <div class="demo-width-box">
- <div class="width-25 p-a-20">Width 25%</div>
- <div class="width-50 p-a-20">Width 50%</div>
- <div class="width-75 p-a-20">Width 75%</div>
- <div class="width-100 p-a-20">Width 100%</div>
- </div>
- </div>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h2 class="margin-top-1">Width</h2>
+ <div class="demo-width-box">
+ <div class="width-25 p-a-20">Width 25%</div>
+ <div class="width-50 p-a-20">Width 50%</div>
+ <div class="width-75 p-a-20">Width 75%</div>
+ <div class="width-100 p-a-20">Width 100%</div>
+ </div>
+ </div>
- <div class="row column">
- <h2 class="margin-vertical-2">Max Width 100</h2>
- <img src="http://placehold.it/1500x200?text=Max+Width+=100%" class="max-width-100">
+ <div class="cell">
+ <h2 class="margin-vertical-2">Max Width 100</h2>
+ <img src="http://placehold.it/1500x200?text=Max+Width+=100%" class="max-width-100">
+ </div>
+ </div>
</div>
<script src="../assets/js/vendor.js"></script>
<link href="../assets/css/foundation-prototype.css" rel="stylesheet" />
</head>
<body>
- <div class="row column">
- <h2 class="margin-top-1">Text Uppercase</h2>
- <p class="text-uppercase"><strong>This is a upper-cased text.</strong> Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire.</p>
- </div>
- <div class="row column">
- <h2 class="margin-top-1">Text Lowercase</h2>
- <p class="text-lowercase"><strong>This is a lower-cased text.</strong> Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire.</p>
- </div>
- <div class="row column">
- <h2 class="margin-top-1">Text capitalize</h2>
- <p class="text-capitalize"><strong>This is a caPitAlized teXt.</strong> Set in the yEar 0 F.E. ("Foundation Era"), The PsychohisTorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire.</p>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h2 class="margin-top-1">Text Uppercase</h2>
+ <p class="text-uppercase"><strong>This is a upper-cased text.</strong> Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire.</p>
+ </div>
+ <div class="cell">
+ <h2 class="margin-top-1">Text Lowercase</h2>
+ <p class="text-lowercase"><strong>This is a lower-cased text.</strong> Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire.</p>
+ </div>
+ <div class="cell">
+ <h2 class="margin-top-1">Text capitalize</h2>
+ <p class="text-capitalize"><strong>This is a caPitAlized teXt.</strong> Set in the yEar 0 F.E. ("Foundation Era"), The PsychohisTorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire.</p>
+ </div>
+ </div>
</div>
<script src="../assets/js/vendor.js"></script>
<link href="../assets/css/foundation-prototype.css" rel="stylesheet" />
</head>
<body>
- <div class="row column">
- <h2 class="margin-top-1">Text Underline</h2>
- <p class="text-underline">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum eius delectus culpa illum consequatur, deserunt sapiente facilis dolores repellendus sunt!</p>
- </div>
- <div class="row column">
- <h2 class="margin-top-1">Text Overline</h2>
- <p class="text-overline">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum eius delectus culpa illum consequatur, deserunt sapiente facilis dolores repellendus sunt!</p>
- </div>
- <div class="row column">
- <h2 class="margin-top-1">Text Line Through</h2>
- <p class="text-line-through">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum eius delectus culpa illum consequatur, deserunt sapiente facilis dolores repellendus sunt!</p>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h2 class="margin-top-1">Text Underline</h2>
+ <p class="text-underline">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum eius delectus culpa illum consequatur, deserunt sapiente facilis dolores repellendus sunt!</p>
+ </div>
+ <div class="cell">
+ <h2 class="margin-top-1">Text Overline</h2>
+ <p class="text-overline">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum eius delectus culpa illum consequatur, deserunt sapiente facilis dolores repellendus sunt!</p>
+ </div>
+ <div class="cell">
+ <h2 class="margin-top-1">Text Line Through</h2>
+ <p class="text-line-through">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum eius delectus culpa illum consequatur, deserunt sapiente facilis dolores repellendus sunt!</p>
+ </div>
+ </div>
</div>
<script src="../assets/js/vendor.js"></script>
<link href="../assets/css/foundation-prototype.css" rel="stylesheet" />
</head>
<body>
- <div class="row column">
- <h2 class="margin-top-1">Text Truncate</h2>
- <p class="text-truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam voluptatem similique officiis recusandae esse cum in totam quisquam perspiciatis quod! Magnam culpa vitae, tempore eos explicabo cupiditate. Deserunt, quisquam, quos!</p>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h2 class="margin-top-1">Text Truncate</h2>
+ <p class="text-truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam voluptatem similique officiis recusandae esse cum in totam quisquam perspiciatis quod! Magnam culpa vitae, tempore eos explicabo cupiditate. Deserunt, quisquam, quos!</p>
+ </div>
+ </div>
</div>
<script src="../assets/js/vendor.js"></script>
<link href="../assets/css/foundation-prototype.css" rel="stylesheet" />
</head>
<body>
- <div class="row column">
- <h2 class="margin-top-1">Text Wrap</h2>
- <p class="text-wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam voluptatem similique officiis recusandae esse cum in totam quisquam perspiciatis quod! Magnam culpa vitae, tempore eos explicabo cupiditate. Deserunt, quisquam, quos!</p>
- </div>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h2 class="margin-top-1">Text Wrap</h2>
+ <p class="text-wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam voluptatem similique officiis recusandae esse cum in totam quisquam perspiciatis quod! Magnam culpa vitae, tempore eos explicabo cupiditate. Deserunt, quisquam, quos!</p>
+ </div>
- <div class="row column">
- <h2 class="margin-top-1">Text No-wrap</h2>
- <p class="text-nowrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam voluptatem similique officiis recusandae esse cum in totam quisquam perspiciatis quod! Magnam culpa vitae, tempore eos explicabo cupiditate. Deserunt, quisquam, quos!</p>
+ <div class="cell">
+ <h2 class="margin-top-1">Text No-wrap</h2>
+ <p class="text-nowrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam voluptatem similique officiis recusandae esse cum in totam quisquam perspiciatis quod! Magnam culpa vitae, tempore eos explicabo cupiditate. Deserunt, quisquam, quos!</p>
+ </div>
+ </div>
</div>
<script src="../assets/js/vendor.js"></script>
<link href="../assets/css/foundation-prototype.css" rel="stylesheet" />
</head>
<body>
- <div class="row column">
- <h2>Typescale</h2>
- <p>Adjust font-size by overriding an element’s default size. This can be useful to size a <code><p></code> or <code><h1></code> through <code><h6></code> using Foundation's existing header sizes.</p>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h2>Typescale</h2>
+ <p>Adjust font-size by overriding an element’s default size. This can be useful to size a <code><p></code> or <code><h1></code> through <code><h6></code> using Foundation's existing header sizes.</p>
- <h2 class="h1">Lorem Ipsum Dolor</h2>
- <h3 class="h2">Lorem Ipsum Dolor</h3>
- <h4 class="h3">Lorem Ipsum Dolor</h4>
- <h5 class="h4">Lorem Ipsum Dolor</h5>
- <h6 class="h5">Lorem Ipsum Dolor</h6>
- <p class="h6">Lorem Ipsum Dolor</p>
+ <h2 class="h1">Lorem Ipsum Dolor</h2>
+ <h3 class="h2">Lorem Ipsum Dolor</h3>
+ <h4 class="h3">Lorem Ipsum Dolor</h4>
+ <h5 class="h4">Lorem Ipsum Dolor</h5>
+ <h6 class="h5">Lorem Ipsum Dolor</h6>
+ <p class="h6">Lorem Ipsum Dolor</p>
+ </div>
+ </div>
</div>
<script src="../assets/js/vendor.js"></script>
projects / thirdparty / foundation / foundation-sites.git / commitdiff
