</head>
<body>
<div class="row column">
- <h2 class="m-t-20">Display None</h2>
+ <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="m-t-20">Display Inline</h2>
+ <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="m-t-20">Display Block</h2>
+ <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="m-t-20">Display Inline Block</h2>
+ <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="after-box">Another box, after the floating boxes...</div>
</div>
- <p class="m-y-30"> </p>
+ <p class="margin-vertical-2"> </p>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
</head>
<body>
<div class="row column">
- <h2 class="m-t-20">Font Wide</h2>
+ <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="m-t-20">Font Normal</h2>
+ <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="m-t-20">Font Bold</h2>
+ <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="m-t-20">Font Italic</h2>
+ <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>
</head>
<body>
<div class="row column">
- <p class="m-t-20"> </p>
+ <p class="margin-top-1"> </p>
<p class="font-h1">Font-H1: Lorem Ipsum Dolor</p>
<p class="font-h2">Font-H2: Lorem Ipsum Dolor</p>
<p class="font-h3">Font-H3: Lorem Ipsum Dolor</p>
</head>
<body>
<div class="row column">
- <h2 class="m-t-40">Text Hide</h2>
+ <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
</head>
<body>
<div class="row column">
- <h2 class="m-t-20">No Bullet</h2>
+ <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>
</ol>
</div>
<div class="row column">
- <h2 class="m-t-20">List Decimal</h2>
+ <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>
</ol>
</div>
<div class="row column">
- <h2 class="m-t-20">List Lower Alpha</h2>
+ <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>
</ol>
</div>
<div class="row column">
- <h2 class="m-t-20">List Lower Latin</h2>
+ <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>
</ol>
</div>
<div class="row column">
- <h2 class="m-t-20">List Lower Roman</h2>
+ <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>
</ol>
</div>
<div class="row column">
- <h2 class="m-t-20">List Upper Alpha</h2>
+ <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>
</ol>
</div>
<div class="row column">
- <h2 class="m-t-20">List Upper Latin</h2>
+ <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>
</ol>
</div>
<div class="row column">
- <h2 class="m-t-20">List Upper Roman</h2>
+ <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>
</head>
<body>
<div class="row column">
- <h2 class="m-t-20">No Bullet</h2>
+ <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>
</ul>
</div>
<div class="row column">
- <h2 class="m-t-20">List Disc</h2>
+ <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>
</ul>
</div>
<div class="row column">
- <h2 class="m-t-20">List Circle</h2>
+ <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>
</ul>
</div>
<div class="row column">
- <h2 class="m-t-20">List Square</h2>
+ <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>
</head>
<body>
<div class="row column">
- <h2 class="m-t-20">Overflow Scroll</h2>
+ <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>
</div>
<div class="row column">
- <h2 class="m-t-20">Overflow Hidden</h2>
+ <h2 class="margin-top-1">Overflow Hidden</h2>
<div class="debug-box overflow-hidden">
<div>
<p>
</div>
<div class="row column">
- <h2 class="m-t-20">Overflow Visible</h2>
+ <h2 class="margin-top-1">Overflow Visible</h2>
<div class="debug-box overflow-visible">
<div>
<p>
</head>
<body>
<div class="row column">
- <h2 class="margin-top-20">Buttons</h2>
+ <h2 class="margin-top-1">Buttons</h2>
<button type="button" class="button rounded bordered primary">Primary</button>
<button type="button" class="button rounded bordered secondary">Secondary</button>
<button type="button" class="button rounded bordered success">Success</button>
<button type="button" class="button rounded bordered warning">Warning</button>
</div>
<div class="row column">
- <h2 class="margin-top-20">Images</h2>
+ <h2 class="margin-top-1">Images</h2>
<img src="http://placehold.it/100x100" class="rounded margin-right-1">
<img src="http://placehold.it/100x100" class="rounded-circle">
</div>
<div class="row column">
- <h2 class="margin-top-20">Cards</h2>
+ <h2 class="margin-top-1">Cards</h2>
<div class="rounded bordered card" style="width: 300px;">
<img src="../assets/img/generic/rectangle-1.jpg">
<div class="card-divider">
</div>
</div>
<div class="row column">
- <h2 class="margin-top-20">Tables</h2>
+ <h2 class="margin-top-1">Tables</h2>
<table class="rounded bordered">
<thead>
<tr>
</tbody>
</table>
</div>
- <p class="margin-vertical-20"> </p>
+ <p class="margin-vertical-1"> </p>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<body>
<div class="row column">
- <h2 class="m-t-20">Height</h2>
+ <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>
<div class="row column">
- <h2 class="m-t-30">Max Height 100</h2>
+ <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>
-
- <p class="m-t-40"> </p>
-
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
</head>
<body>
<div class="row column">
- <h2 class="m-t-20">Width</h2>
+ <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>
<div class="row column">
- <h2 class="m-t-30">Max Width 100</h2>
+ <h2 class="margin-vertical-2">Max Width 100</h2>
<img src="http://placehold.it/1500x200?text=Max+Width+=100%" class="max-width-100">
</div>
- <p class="m-t-40"> </p>
-
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
</head>
<body>
<div class="row column">
- <h2 class="m-t-20">Text Uppercase</h2>
+ <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="m-t-20">Text Lowercase</h2>
+ <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="m-t-20">Text capitalize</h2>
+ <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>
</head>
<body>
<div class="row column">
- <h2 class="m-t-20">Text Underline</h2>
+ <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="m-t-20">Text Overline</h2>
+ <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="m-t-20">Text Line Through</h2>
+ <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>
</head>
<body>
<div class="row column">
- <h2 class="m-t-20">Text Truncate</h2>
+ <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>
</head>
<body>
<div class="row column">
- <h2 class="m-t-20">Text Wrap</h2>
+ <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="m-t-20">Text No-wrap</h2>
+ <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>
projects / thirdparty / foundation / foundation-sites.git / commitdiff
