Skip to content

Commit

Permalink
Blank out background color page
Browse files Browse the repository at this point in the history
  • Loading branch information
@adamwathan
adamwathan committed Oct 31, 2017
1 parent 3976cf9 commit e72f141
Showing 1 changed file with 9 additions and 240 deletions.
249 changes: 9 additions & 240 deletions docs/source/docs/background-color.blade.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,246 +5,15 @@ title: "Backgrounds"

# Background Color

<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 controlling an element's background color.
</div>

<h2 id="colors">Colors</h2>
@include('_partials.feature-badges', [
'responsive' => true,
'customizable' => true,
'hover' => true,
'focus' => false
])


<div class="flex flex-wrap -mx-4 mb-4">
<div class="w-full md:w-1/3 px-4">
<div class="rounded overflow-hidden">
<div class="text-slate-dark bg-slate-lighter px-6 py-4 text-sm">
.bg-slate-lighter
</div>
<div class="text-white bg-slate-light px-6 py-4 text-sm">
.bg-slate-light
</div>
<div class="text-white bg-slate px-6 py-4 text-sm">
.bg-slate
</div>
<div class="text-white bg-slate-dark px-6 py-4 text-sm">
.bg-slate-dark
</div>
<div class="text-white bg-slate-darker px-6 py-4 text-sm">
.bg-slate-darker
</div>
</div>
</div>
<div class="w-full md:w-1/3 px-4">
<div class="rounded overflow-hidden">
<div class="text-slate-dark bg-smoke-lighter px-6 py-4 text-sm">
.bg-smoke-lighter
</div>
<div class="text-slate-dark bg-smoke-light px-6 py-4 text-sm">
.bg-smoke-light
</div>
<div class="text-slate-dark bg-smoke px-6 py-4 text-sm">
.bg-smoke
</div>
<div class="text-slate-dark bg-smoke-dark px-6 py-4 text-sm">
.bg-smoke-dark
</div>
<div class="text-white bg-smoke-darker px-6 py-4 text-sm">
.bg-smoke-darker
</div>
</div>
</div>
</div>

<div class="flex flex-wrap -mx-4 mb-4">
<div class="w-full md:w-1/3 px-4">
<div class="rounded overflow-hidden">
<div class="text-red bg-red-lighter px-6 py-4 text-sm">
.bg-red-lighter
</div>
<div class="text-white bg-red-light px-6 py-4 text-sm">
.bg-red-light
</div>
<div class="text-white bg-red px-6 py-4 text-sm">
.bg-red
</div>
<div class="text-white bg-red-dark px-6 py-4 text-sm">
.bg-red-dark
</div>
<div class="text-white bg-red-darker px-6 py-4 text-sm">
.bg-red-darker
</div>
</div>
</div>
<div class="w-full md:w-1/3 px-4">
<div class="rounded overflow-hidden">
<div class="text-orange-darker bg-orange-lighter px-6 py-4 text-sm">
.bg-orange-lighter
</div>
<div class="text-orange-darker bg-orange-light px-6 py-4 text-sm">
.bg-orange-light
</div>
<div class="text-orange-darker bg-orange px-6 py-4 text-sm">
.bg-orange
</div>
<div class="text-white bg-orange-dark px-6 py-4 text-sm">
.bg-orange-dark
</div>
<div class="text-white bg-orange-darker px-6 py-4 text-sm">
.bg-orange-darker
</div>
</div>
</div>
<div class="w-full md:w-1/3 px-4">
<div class="rounded overflow-hidden">
<div class="text-yellow-darker bg-yellow-lighter px-6 py-4 text-sm">
.bg-yellow-lighter
</div>
<div class="text-yellow-darker bg-yellow-light px-6 py-4 text-sm">
.bg-yellow-light
</div>
<div class="text-yellow-darker bg-yellow px-6 py-4 text-sm">
.bg-yellow
</div>
<div class="text-yellow-darker bg-yellow-dark px-6 py-4 text-sm">
.bg-yellow-dark
</div>
<div class="text-white bg-yellow-darker px-6 py-4 text-sm">
.bg-yellow-darker
</div>
</div>
</div>
</div>

<div class="flex flex-wrap -mx-4 mb-4">
<div class="w-full md:w-1/3 px-4">
<div class="rounded overflow-hidden">
<div class="text-green-darker bg-green-lighter px-6 py-4 text-sm">
.bg-green-lighter
</div>
<div class="text-green-darker bg-green-light px-6 py-4 text-sm">
.bg-green-light
</div>
<div class="text-white bg-green px-6 py-4 text-sm">
.bg-green
</div>
<div class="text-white bg-green-dark px-6 py-4 text-sm">
.bg-green-dark
</div>
<div class="text-white bg-green-darker px-6 py-4 text-sm">
.bg-green-darker
</div>
</div>
</div>
<div class="w-full md:w-1/3 px-4">
<div class="rounded overflow-hidden">
<div class="text-teal-darker bg-teal-lighter px-6 py-4 text-sm">
.bg-teal-lighter
</div>
<div class="text-teal-darker bg-teal-light px-6 py-4 text-sm">
.bg-teal-light
</div>
<div class="text-white bg-teal px-6 py-4 text-sm">
.bg-teal
</div>
<div class="text-white bg-teal-dark px-6 py-4 text-sm">
.bg-teal-dark
</div>
<div class="text-white bg-teal-darker px-6 py-4 text-sm">
.bg-teal-darker
</div>
</div>
</div>
<div class="w-full md:w-1/3 px-4">
<div class="rounded overflow-hidden">
<div class="text-blue-darker bg-blue-lighter px-6 py-4 text-sm">
.bg-blue-lighter
</div>
<div class="text-blue-darker bg-blue-light px-6 py-4 text-sm">
.bg-blue-light
</div>
<div class="text-white bg-blue px-6 py-4 text-sm">
.bg-blue
</div>
<div class="text-white bg-blue-dark px-6 py-4 text-sm">
.bg-blue-dark
</div>
<div class="text-white bg-blue-darker px-6 py-4 text-sm">
.bg-blue-darker
</div>
</div>
</div>
</div>

<div class="flex flex-wrap -mx-4 mb-4">
<div class="w-full md:w-1/3 px-4">
<div class="rounded overflow-hidden">
<div class="text-indigo-darker bg-indigo-lighter px-6 py-4 text-sm">
.bg-indigo-lighter
</div>
<div class="text-indigo-darker bg-indigo-light px-6 py-4 text-sm">
.bg-indigo-light
</div>
<div class="text-white bg-indigo px-6 py-4 text-sm">
.bg-indigo
</div>
<div class="text-white bg-indigo-dark px-6 py-4 text-sm">
.bg-indigo-dark
</div>
<div class="text-white bg-indigo-darker px-6 py-4 text-sm">
.bg-indigo-darker
</div>
</div>
</div>
<div class="w-full md:w-1/3 px-4">
<div class="rounded overflow-hidden">
<div class="text-purple-darker bg-purple-lighter px-6 py-4 text-sm">
.bg-purple-lighter
</div>
<div class="text-purple-darker bg-purple-light px-6 py-4 text-sm">
.bg-purple-light
</div>
<div class="text-white bg-purple px-6 py-4 text-sm">
.bg-purple
</div>
<div class="text-white bg-purple-dark px-6 py-4 text-sm">
.bg-purple-dark
</div>
<div class="text-white bg-purple-darker px-6 py-4 text-sm">
.bg-purple-darker
</div>
</div>
</div>
<div class="w-full md:w-1/3 px-4">
<div class="rounded overflow-hidden">
<div class="text-pink-darker bg-pink-lighter px-6 py-4 text-sm">
.bg-pink-lighter
</div>
<div class="text-pink-darker bg-pink-light px-6 py-4 text-sm">
.bg-pink-light
</div>
<div class="text-white bg-pink px-6 py-4 text-sm">
.bg-pink
</div>
<div class="text-white bg-pink-dark px-6 py-4 text-sm">
.bg-pink-dark
</div>
<div class="text-white bg-pink-darker px-6 py-4 text-sm">
.bg-pink-darker
</div>
</div>
</div>
</div>

Using the utilities in HTML:

```html
<div class="bg-white"></div>
<div class="bg-smoke-lighter"></div>
<div class="bg-smoke-light"></div>
<div class="bg-smoke"></div>

<div class="bg-slate-darker"></div>
<div class="bg-slate-dark"></div>
<div class="bg-slate"></div>
<div class="bg-slate-light"></div>
```
@include('_partials.work-in-progress')

0 comments on commit e72f141

Please sign in to comment.