Add display documentation.

This commit is contained in:
Jonathan Reinink 2017-08-03 08:41:53 -04:00
parent 56e24e36db
commit 08b6f1dd46

View file

@ -4,4 +4,37 @@
<h1 class="title">Display</h1>
<p class="mt-6 mb-3 text-dark-soft">The display utilities simply <code>display</code> property helpers.</p>
<p class="mt-6 mb-3">Using the utilities in HTML:</p>
<pre class="language-html"><code>{{ '<div class="block"></div>
<div class="inline-block"></div>
<div class="hidden"></div>
<div class="table">
<div class="table-row">
<div class="table-cell"></div>
</div>
</div>
<!-- Responsive example -->
<div class="lg:inline-block"></div>' }}</code></pre>
<p class="mt-6 mb-3">Using the utilities in Less:</p>
<pre class="language-less"><code>div {
.block;
.inline-block;
.table;
.table-row;
.table-cell;
.hidden;
// Responsive example
.screen(lg, {
.inline-block;
});
}</code></pre>
@endsection