Add display documentation.
This commit is contained in:
parent
56e24e36db
commit
08b6f1dd46
1 changed files with 33 additions and 0 deletions
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue