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

Make crappy docs example a little easier to see

Browse source
This commit is contained in:
Adam Wathan 2017-08-23 16:11:18 -04:00
parent 53bec217a8
commit df6f627805
1 changed files with 38 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

50
docs/source/grid.md
View file

@ -133,28 +133,48 @@ Fixed width columns are still respected even if a smaller screen has auto column
<div class="flex mb-6">
<div class="flex-fill md:w-1/6 md:flex-none">
<div class="flex-center h-16 bg-dark-softer text-light">
.flex-fill.md:w-1/6.md:flex-none
<div class="flex-center h-24 bg-dark-softer text-light">
<div>
<div>.flex-fill</div>
<div>.md:w-1/6</div>
<div>.md:flex-none</div>
</div>
</div>
</div>
<div class="flex-fill md:w-1/6 md:flex-none">
<div class="flex-center h-16 bg-dark-soft text-light">
.flex-fill.md:w-1/6.md:flex-none
<div class="flex-center h-24 bg-dark-soft text-light">
<div>
<div>.flex-fill</div>
<div>.md:w-1/6</div>
<div>.md:flex-none</div>
</div>
</div>
</div>
<div class="flex-fill md:w-1/6 md:flex-none">
<div class="flex-center h-16 bg-dark-softer text-light">
.flex-fill.md:w-1/6.md:flex-none
<div class="flex-center h-24 bg-dark-softer text-light">
<div>
<div>.flex-fill</div>
<div>.md:w-1/6</div>
<div>.md:flex-none</div>
</div>
</div>
</div>
<div class="flex-fill md:w-1/6 md:flex-none">
<div class="flex-center h-16 bg-dark-soft text-light">
.flex-fill.md:w-1/6.md:flex-none
<div class="flex-center h-24 bg-dark-soft text-light">
<div>
<div>.flex-fill</div>
<div>.md:w-1/6</div>
<div>.md:flex-none</div>
</div>
</div>
</div>
<div class="flex-fill md:w-1/6 md:flex-none">
<div class="flex-center h-16 bg-dark-softer text-light">
.flex-fill.md:w-1/6.md:flex-none
<div class="flex-center h-24 bg-dark-softer text-light">
<div>
<div>.flex-fill</div>
<div>.md:w-1/6</div>
<div>.md:flex-none</div>
</div>
</div>
</div>
</div>
@ -165,12 +185,18 @@ Use margin auto utilities to accomplish offsets:
<div class="flex mb-6">
<div class="w-full md:w-1/3 md:ml-auto">
<div class="flex-center h-16 bg-dark-soft text-light">
.md:w-1/3.md:ml-auto
<div>
<div>.md:w-1/3</div>
<div>.md:ml-auto</div>
</div>
</div>
</div>
<div class="w-full md:w-1/3 md:mr-auto">
<div class="flex-center h-16 bg-dark-softer text-light">
.md:w-1/6.md:mr-auto
<div>
<div>.md:w-1/6</div>
<div>.md:mr-auto</div>
</div>
</div>
</div>
</div>