Skip to content

Commit

Permalink
Add class-table partial to make class tables more maintainable
Browse files Browse the repository at this point in the history
  • Loading branch information
@adamwathan
adamwathan committed Nov 15, 2017
1 parent 2f1d89d commit 35c7671
Show file tree
Hide file tree
Showing 3 changed files with 82 additions and 78 deletions.
20 changes: 20 additions & 0 deletions docs/source/_partials/class-table.blade.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<div class="border-t border-grey-lighter">
<table class="w-full text-left table-collapse">
<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">
@foreach ($rows as $row)
<tr>
<td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-purple-dark whitespace-no-wrap">{{ $row[0] }}</td>
<td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-blue-dark whitespace-pre">{{ $row[1] }}</td>
<td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} text-sm text-grey-darker">{{ $row[2] }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
33 changes: 13 additions & 20 deletions docs/source/docs/background-color.blade.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,26 +11,19 @@ features:

@include('_partials.work-in-progress')

<div class="border-t border-grey-lighter">
<table class="w-full text-left table-collapse">
<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">
@foreach ($page->config['colors'] as $name => $value)
<tr>
<td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-purple-dark">.bg-{{ $name }}</td>
<td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-blue-dark">background-color: {{ $value }};</td>
<td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} text-sm text-grey-darker">Set the background color of an element to {{ implode(' ', array_reverse(explode('-', $name))) }}.</td>
</tr>
@endforeach
</tbody>
</table>
</div>
@include('_partials.class-table', [
'rows' => $page->config['colors']->map(function ($value, $name) {
$class = ".bg-{$name}";
$code = "background-color: {$value};";
$color = implode(' ', array_reverse(explode('-', $name)));
$description = "Set the background color of an element to {$color}.";
return [
$class,
$code,
$description,
];
})->all()
])

## Hover

Expand Down
107 changes: 49 additions & 58 deletions docs/source/docs/background-position.blade.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,61 +11,52 @@ features:

@include('_partials.work-in-progress')

<div class="border-t border-grey-lighter">
<table class="w-full text-left table-collapse">
<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 font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-bottom</td>
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: bottom;</td>
<td class="p-2 border-t border-smoke 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 whitespace-no-wrap">.bg-center</td>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">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 whitespace-no-wrap">.bg-left</td>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">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 whitespace-no-wrap">.bg-left-bottom</td>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">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 whitespace-no-wrap">.bg-left-top</td>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">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 whitespace-no-wrap">.bg-right</td>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">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 whitespace-no-wrap">.bg-right-bottom</td>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">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 whitespace-no-wrap">.bg-right-top</td>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">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 whitespace-no-wrap">.bg-top</td>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">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>
@include('_partials.class-table', [
'rows' => [
[
'.bg-bottom',
'background-position: bottom;',
'Place the background image on the bottom edge.',
],
[
'.bg-center',
'background-position: center;',
'Place the background image in the center.',
],
[
'.bg-left',
'background-position: left;',
'Place the background image on the left edge.',
],
[
'.bg-left-bottom',
'background-position: left bottom;',
'Place the background image on the left bottom edge.',
],
[
'.bg-left-top',
'background-position: left top;',
'Place the background image on the left top edge.',
],
[
'.bg-right',
'background-position: right;',
'Place the background image on the right edge.',
],
[
'.bg-right-bottom',
'background-position: right bottom;',
'Place the background image on the right bottom edge.',
],
[
'.bg-right-top',
'background-position: right top;',
'Place the background image on the right top edge.',
],
[
'.bg-top',
'background-position: top;',
'Place the background image on the top edge.',
],
]
])

0 comments on commit 35c7671

Please sign in to comment.