Polish component example docs

This commit is contained in:
Adam Wathan 2017-12-13 06:48:50 -05:00
parent 9887a13d76
commit 02f5f08503
5 changed files with 22 additions and 22 deletions

View File

@ -1,10 +1,10 @@
---
extends: _layouts.documentation
title: "Alerts"
description: null
description: Examples of building alert components with Tailwind CSS.
---
@include('_partials.work-in-progress-example')
Tailwind doesn't include pre-designed alert components out of the box, but they're easy to build using existing utilities.
### Traditional

View File

@ -1,10 +1,10 @@
---
extends: _layouts.documentation
title: "Buttons"
description: null
description: Examples of building buttons with Tailwind CSS.
---
@include('_partials.work-in-progress-example')
Tailwind doesn't include pre-designed button styles out of the box, but they're easy to build using existing utilities.
### Simple

View File

@ -1,12 +1,12 @@
---
extends: _layouts.documentation
title: "Cards"
description: null
description: Examples of building card components with Tailwind CSS.
---
@include('_partials.work-in-progress-example')
Tailwind doesn't include pre-designed card components out of the box, but they're easy to build using existing utilities.
## Stacked
### Stacked
@component('_partials.code-sample', ['class' => 'p-10 flex justify-center'])
<div class="max-w-sm rounded overflow-hidden shadow-lg">
@ -25,7 +25,7 @@ description: null
</div>
@endcomponent
## Horizontal
### Horizontal
@component('_partials.code-sample', ['class' => 'p-10 flex justify-center'])
<div class="max-w-md w-full lg:flex">

View File

@ -1,12 +1,12 @@
---
extends: _layouts.documentation
title: "Forms"
description: null
description: Examples of building forms with Tailwind CSS.
---
@include('_partials.work-in-progress-example')
Tailwind doesn't include purpose-built form control classes out of the box, but form controls are easy to style using existing utilities.
## Login Form
### Login Form
@component('_partials.code-sample', ['class' => 'px-3 py-10 bg-grey-lighter flex justify-center'])
<div class="w-full max-w-xs">
@ -39,7 +39,7 @@ description: null
</div>
@endcomponent
## Inline Form
### Inline Form
@component('_partials.code-sample', ['class' => 'flex justify-center p-8'])
<form class="w-full max-w-xs">
@ -83,7 +83,7 @@ description: null
</form>
@endcomponent
## Form Grid
### Form Grid
@component('_partials.code-sample', ['class' => 'flex justify-center p-8'])
<form class="w-full max-w-md">
@ -143,7 +143,7 @@ description: null
</form>
@endcomponent
## Underline Form
### Underline Form
@component('_partials.code-sample', ['class' => 'flex justify-center p-8'])
<form class="w-full max-w-sm">

View File

@ -1,12 +1,12 @@
---
extends: _layouts.documentation
title: "Navigation"
description: null
description: Examples of building navigation components with Tailwind CSS.
---
@include('_partials.work-in-progress-example')
Tailwind doesn't include pre-designed navigation components out of the box, but they're easy to build using existing utilities.
## Simple
### Simple
@component('_partials.code-sample')
<ul class="list-reset flex">
@ -25,7 +25,7 @@ description: null
</ul>
@endcomponent
## Responsive Header
### Responsive Header
@component('_partials.code-sample')
<nav class="flex items-center justify-between flex-wrap bg-teal p-6">
@ -57,7 +57,7 @@ description: null
</nav>
@endcomponent
## Tabs
### Tabs
@component('_partials.code-sample')
<ul class="list-reset flex border-b">
@ -76,7 +76,7 @@ description: null
</ul>
@endcomponent
## Pills
### Pills
@component('_partials.code-sample')
<ul class="list-reset flex">
@ -92,7 +92,7 @@ description: null
</ul>
@endcomponent
## Stretched
### Stretched
@component('_partials.code-sample')
<ul class="list-reset flex">
@ -108,7 +108,7 @@ description: null
</ul>
@endcomponent
## Justified
### Justified
@component('_partials.code-sample')
<ul class="list-reset flex justify-between">