Add a bunch of WIP markers to incomplete docs pages
This commit is contained in:
Adam Wathan
parent
666e9c5ed3
commit
4413532bae
11 changed files with 94 additions and 37 deletions
11
docs/source/_partials/work-in-progress.blade.php
Normal file
11
docs/source/_partials/work-in-progress.blade.php
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<div class="bg-blue-lightest border-l-4 border-blue-light rounded-b text-blue-darkest px-4 py-3 mb-4">
|
||||
<div class="flex">
|
||||
<div class="py-1">
|
||||
<svg class="h-6 w-6 text-blue-light mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold">Work in progress!</p>
|
||||
<p class="text-sm">More detailed documentation is coming soon, but in the mean time here's a quick class reference.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -6,7 +6,7 @@ title: "Background Position"
|
|||
# Background Position
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for setting the initial position of a background image
|
||||
Utilities for controlling the position of an element's background image.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
|
|
@ -16,6 +16,8 @@ title: "Background Position"
|
|||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: collapse;">
|
||||
<colgroup>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ title: "Background Size"
|
|||
# Background Size
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for setting the background size of an element's background image
|
||||
Utilities for controlling the background size of an element's background image.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
|
|
@ -16,6 +16,8 @@ title: "Background Size"
|
|||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: collapse;">
|
||||
<colgroup>
|
||||
|
|
|
|||
|
|
@ -4,3 +4,16 @@ title: "Border Color"
|
|||
---
|
||||
|
||||
# Border Color
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the color of an element's borders.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
'hover' => true,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
|
|
|||
|
|
@ -5,9 +5,16 @@ title: "Border Style"
|
|||
|
||||
# Border Style
|
||||
|
||||
<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 the style of an element's borders.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
|
|
|
|||
|
|
@ -1,16 +1,23 @@
|
|||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Borders"
|
||||
title: "Border Width"
|
||||
---
|
||||
|
||||
# Borders
|
||||
# Border Width & 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 controlling the width and position of an element's borders.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
## Usage
|
||||
|
||||
Add borders to any element using the `.border{-side?}{-width?}` syntax. For example, `.border` would add a `1px` border to all sides of the element, where `.border-b-4` would add a `4px` border to the bottom of the element.
|
||||
|
|
|
|||
|
|
@ -5,9 +5,15 @@ title: "Container"
|
|||
|
||||
# Container
|
||||
|
||||
<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">
|
||||
A component for fixing an element's width to the current breakpoint.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
|
|
|||
|
|
@ -16,6 +16,8 @@ title: "Display"
|
|||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: collapse;">
|
||||
<thead>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,8 @@ title: "Floats"
|
|||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: collapse;">
|
||||
<thead>
|
||||
|
|
|
|||
|
|
@ -5,20 +5,24 @@ title: "Forms"
|
|||
|
||||
# Forms
|
||||
|
||||
<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="mt-8">
|
||||
<div class="bg-blue-lightest border-l-4 border-blue-light rounded-b text-blue-darkest px-4 py-3">
|
||||
<div class="flex">
|
||||
<div class="py-1">
|
||||
<svg class="h-6 w-6 text-blue-light mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold">Work in progress!</p>
|
||||
<p class="text-sm">More detailed documentation is coming soon.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Include documentation around:
|
||||
|
||||
- `input-reset` helper
|
||||
- Creating input groups/custom selects and using `pointer-events-none`
|
||||
- The placeholder text styling in our base styles
|
||||
|
||||
### Custom Select
|
||||
|
||||
Form controls are great candidates for component classes, but just for fun, here's how you can build a fully custom select menu with just utility classes:
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
|
||||
<div class="inline-block relative w-64">
|
||||
<select class="block input-reset w-full bg-white border border-smoke-dark hover:border-slate-light px-4 py-2 pr-8 rounded shadow">
|
||||
|
|
|
|||
|
|
@ -5,19 +5,20 @@ title: "Grid"
|
|||
|
||||
# Grid
|
||||
|
||||
<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="mt-8">
|
||||
<div class="bg-blue-lightest border-l-4 border-blue-light rounded-b text-blue-darkest px-4 py-3">
|
||||
<div class="flex">
|
||||
<div class="py-1">
|
||||
<svg class="h-6 w-6 text-blue-light mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold">Work in progress!</p>
|
||||
<p class="text-sm">More detailed documentation is coming soon, but in the mean time here are some quick and dirty examples.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Documentation around things like:
|
||||
|
||||
- Using percentage width helpers and a flex container to create columns
|
||||
- Using flex wrap if you want columns to wrap
|
||||
- Using negative margin and padding helpers to add gutters
|
||||
- Using the container class if you really give a shit
|
||||
|
||||
Basic grid example:
|
||||
|
||||
<div class="bg-smoke-light font-semibold text-sm mb-6">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue