wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

background size and position docs

Browse source
This commit is contained in:
David Hemphill 2017-10-31 14:34:36 -05:00
parent 71b600f12b
commit 1c7cd53d92
2 changed files with 95 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

69
docs/source/docs/background-position.blade.md
View file

@ -5,9 +5,70 @@ title: "Background Position"
# Background Position
<div class="subnav">
<a class="subnav-link" href="#usage">Usage</a>
<a class="subnav-link" href="#responsive">Responsive</a>
<a class="subnav-link" href="#customizing">Customizing</a>
<div class="text-xl text-slate-light mb-4">
Utilities for setting the initial position of a background image
</div>
<div class="border-t border-grey-lighter">
<table class="w-full text-left" style="border-collapse: collapse;">
<colgroup>
<col class="w-1/5">
<col class="w-1/3">
<col>
</colgroup>
<thead>
<tr>
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
</tr>
</thead>
<tbody class="align-baseline">
<tr>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.bg-bottom</td>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">background-position: bottom</td>
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the bottom edge</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.bg-center</td>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">background-position: center</td>
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image in the center</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.bg-left</td>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">background-position: left</td>
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the left edge</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.bg-left-bottom</td>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">background-position: left bottom</td>
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the left bottom edge</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.bg-left-top</td>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">background-position: left top</td>
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the left top edge</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.bg-right</td>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">background-position: right</td>
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the right edge</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.bg-right-bottom</td>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">background-position: right bottom</td>
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the right bottom edge</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.bg-right-top</td>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">background-position: right top</td>
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the right top edge</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.bg-top</td>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">background-position: top</td>
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the top edge</td>
</tr>
</tbody>
</table>
</div>

34
docs/source/docs/background-size.blade.md
View file

@ -5,9 +5,35 @@ title: "Background Size"
# Background Size
<div class="subnav">
<a class="subnav-link" href="#usage">Usage</a>
<a class="subnav-link" href="#responsive">Responsive</a>
<a class="subnav-link" href="#customizing">Customizing</a>
<div class="text-xl text-slate-light mb-4">
Utilities for setting the background size of an element's background image
</div>
<div class="border-t border-grey-lighter">
<table class="w-full text-left" style="border-collapse: collapse;">
<colgroup>
<col class="w-1/5">
<col class="w-1/3">
<col>
</colgroup>
<thead>
<tr>
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
</tr>
</thead>
<tbody class="align-baseline">
<tr>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.bg-cover</td>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">background-position: cover</td>
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Scale the image until it fills the background layer</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.bg-contain</td>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">background-position: contain</td>
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Scale the image to the outer edges without cropping or stretching</td>
</tr>
</tbody>
</table>
</div>