- @yield('body')
+
diff --git a/docs/source/backgrounds.blade.php b/docs/source/backgrounds.blade.php
deleted file mode 100644
index 01866d8cc..000000000
--- a/docs/source/backgrounds.blade.php
+++ /dev/null
@@ -1,73 +0,0 @@
-@extends('_layouts.master', ['title' => 'Backgrounds'])
-
-@section('body')
-
-
+ @yield('content')
Backgrounds
- -Using the utilities in HTML:
- -{{ '
-
-
-
-
-
-
-
-
-
-
-' }}Using the utilities in Less:
- -div {
- .bg-light;
- .bg-light-soft;
- .bg-light-softer;
- .bg-light-softest;
-
- .bg-dark;
- .bg-dark-soft;
- .bg-dark-softer;
- .bg-dark-softest;
-
- // Responsive example
- .screen(lg, {
- .bg-light;
- });
-}Custom backgrounds
- -Generate custom background utilities:
- -.define-text-color('primary';
- default #3498db,
- 'light' #a0cfee,
- 'dark' #2980b9
-;);Using custom background utilities in HTML:
- -{{ '
-
-
-
-
-' }}Using custom background utilities in Less:
- -div {
- .bg-primary;
- .bg-primary-light;
- .bg-primary-dark;
-
- // Responsive example
- .screen(lg, {
- .bg-primary;
- });
-}Borders
- -@endsection diff --git a/docs/source/borders.md b/docs/source/borders.md new file mode 100644 index 000000000..545fbdb54 --- /dev/null +++ b/docs/source/borders.md @@ -0,0 +1,6 @@ +--- +extends: _layouts.master +title: "Borders" +--- + +# Borders diff --git a/docs/source/constrain.blade.php b/docs/source/constrain.blade.php deleted file mode 100644 index 7048b16e9..000000000 --- a/docs/source/constrain.blade.php +++ /dev/null @@ -1,54 +0,0 @@ -@extends('_layouts.master', ['title' => 'Constrain']) - -@section('body') - -Constrain
- -The constrain utilities are simply max-width helpers designed to constrain content to a desired width.
Using the utilities in HTML:
- -{{ 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
-proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-Lorem ipsum dolor...' }}Using the utilities in Less:
- -div {
- .constrain-xs;
- .constrain-sm;
- .constrain-md;
- .constrain-lg;
- .constrain-xl;
- .constrain-2xl;
- .constrain-3xl;
- .constrain-4xl;
- .constrain-5xl;
-
- // Responsive example
- .screen(md, {
- .constrain-xl;
- });
-}Customization
- -Tailwind exposes the following variables to allow modification of the constrain utilities.
- -@constrain-xs: 20rem;
-@constrain-sm: 30rem;
-@constrain-md: 40rem;
-@constrain-lg: 50rem;
-@constrain-xl: 60rem;
-@constrain-2xl: 70rem;
-@constrain-3xl: 80rem;
-@constrain-4xl: 90rem;
-@constrain-5xl: 100rem;max-width helpers designed to constrain content to a desired width.
+
+```html
+
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+```
+
+```less
+// Using the utilities in Less:
+
+div {
+ .constrain-xs;
+ .constrain-sm;
+ .constrain-md;
+ .constrain-lg;
+ .constrain-xl;
+ .constrain-2xl;
+ .constrain-3xl;
+ .constrain-4xl;
+ .constrain-5xl;
+}
+```
+
+## Responsive
+
+The constrain utitlies can also be used with responsive prefixes:
+
+```html
+
+
+Lorem ipsum dolor...
+```
+
+```less
+// Using the utilities in Less:
+
+div {
+ .screen(lg, {
+ .constrain-lg;
+ });
+}
+```
+
+## Customization
+
+Tailwind exposes the following variables to allow modification of the constrain utilities.
+
+```less
+@constrain-xs: 20rem;
+@constrain-sm: 30rem;
+@constrain-md: 40rem;
+@constrain-lg: 50rem;
+@constrain-xl: 60rem;
+@constrain-2xl: 70rem;
+@constrain-3xl: 80rem;
+@constrain-4xl: 90rem;
+@constrain-5xl: 100rem;
+```
diff --git a/docs/source/display.blade.php b/docs/source/display.blade.php
deleted file mode 100644
index ec911efda..000000000
--- a/docs/source/display.blade.php
+++ /dev/null
@@ -1,40 +0,0 @@
-@extends('_layouts.master', ['title' => 'Display'])
-
-@section('body')
-
-Display
- -The display utilities simply display property helpers.
Using the utilities in HTML:
- -{{ '
-
-
-
-
-
-
-
-
-
-
-' }}Using the utilities in Less:
- -div {
- .block;
- .inline-block;
- .table;
- .table-row;
- .table-cell;
- .hidden;
-
- // Responsive example
- .screen(lg, {
- .inline-block;
- });
-}display property helpers.
+
+```html
+
+
+
+
+
+
+
+
+```
+
+```less
+// Using the utilities in Less:
+
+div {
+ .block;
+ .inline-block;
+ .table;
+ .table-row;
+ .table-cell;
+ .hidden;
+}
+```
+
+## Responsive
+
+The display utitlies can also be used with responsive prefixes:
+
+```html
+
+
+
+```
+
+```less
+// Using the utilities in Less:
+
+div {
+ .screen(lg, {
+ .inline-block;
+ });
+}
+```
diff --git a/docs/source/flex.blade.php b/docs/source/flex.blade.php
deleted file mode 100644
index ba848b6ec..000000000
--- a/docs/source/flex.blade.php
+++ /dev/null
@@ -1,7 +0,0 @@
-@extends('_layouts.master', ['title' => 'Flex'])
-
-@section('body')
-
-
+
+
+Flex
- -@endsection diff --git a/docs/source/flexbox.md b/docs/source/flexbox.md new file mode 100644 index 000000000..289eeb0fe --- /dev/null +++ b/docs/source/flexbox.md @@ -0,0 +1,6 @@ +--- +extends: _layouts.master +title: "Flexbox" +--- + +# Flexbox diff --git a/docs/source/grid.blade.php b/docs/source/grid.blade.php deleted file mode 100644 index f6fe3a4d1..000000000 --- a/docs/source/grid.blade.php +++ /dev/null @@ -1,7 +0,0 @@ -@extends('_layouts.master', ['title' => 'Grid']) - -@section('body') - -Grid
- -@endsection diff --git a/docs/source/grid.md b/docs/source/grid.md new file mode 100644 index 000000000..818df543e --- /dev/null +++ b/docs/source/grid.md @@ -0,0 +1,6 @@ +--- +extends: _layouts.master +title: "Grid" +--- + +# Grid diff --git a/docs/source/images.blade.php b/docs/source/images.blade.php deleted file mode 100644 index 9fb64898b..000000000 --- a/docs/source/images.blade.php +++ /dev/null @@ -1,7 +0,0 @@ -@extends('_layouts.master', ['title' => 'Images']) - -@section('body') - -Images
- -@endsection diff --git a/docs/source/images.md b/docs/source/images.md new file mode 100644 index 000000000..fe073a157 --- /dev/null +++ b/docs/source/images.md @@ -0,0 +1,6 @@ +--- +extends: _layouts.master +title: "Images" +--- + +# Images diff --git a/docs/source/img/adam.jpg b/docs/source/img/adam.jpg new file mode 100644 index 000000000..e84595dcd Binary files /dev/null and b/docs/source/img/adam.jpg differ diff --git a/docs/source/index.blade.php b/docs/source/index.blade.php deleted file mode 100644 index 659e64e17..000000000 --- a/docs/source/index.blade.php +++ /dev/null @@ -1,9 +0,0 @@ -@extends('_layouts.master') - -@section('body') - -Welcome
- -Welcome to Tailwind CSS! Tailwind is a utility-first CSS framework designed for rapid UI development. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- -@endsection diff --git a/docs/source/index.md b/docs/source/index.md new file mode 100644 index 000000000..d0af32d88 --- /dev/null +++ b/docs/source/index.md @@ -0,0 +1,24 @@ +--- +extends: _layouts.master +title: "Welcome" +--- + +# Welcome + +Welcome to Tailwind CSS! Tailwind is a utility-first CSS framework designed for rapid UI development. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + +## Quick example + +
+ 
+
+
+```html
+
+ Adam Wathan
+ Web Developer
+
+
+
+```
diff --git a/docs/source/installation.blade.php b/docs/source/installation.blade.php
deleted file mode 100644
index f8eb0601d..000000000
--- a/docs/source/installation.blade.php
+++ /dev/null
@@ -1,11 +0,0 @@
-@extends('_layouts.master', ['title' => 'Installation'])
-
-@section('body')
-
-
+ Adam Wathan
+ Web Developer
+Installation
- -Install Tailwind using NPM:
- -npm install tailwindcssPosition
- -The position utilities are primarily position property helpers.
Using the utilities in HTML:
- -{{ '
-
-' }}Using the utilities in Less:
- -div {
- .fixed;
- .absolute;
- .relative;
-}Pinning absolute content
- -Tailwind also provides pin utilties, useful for "pinning" absolutely positioned elements using the top, right, bottom and left properties.
Using the utilities in HTML:
- -{{ '
-
-' }}Using the utilities in Less:
- -div {
- .pin-t
- .pin-r
- .pin-b
- .pin-l
- .pin-y
- .pin-x
- .pin
-}position property helpers.
+
+```html
+
+
+
+
+
+```
+
+```less
+// Using the utilities in Less:
+
+div {
+ .fixed;
+ .absolute;
+ .relative;
+}
+```
+
+## Pinning absolute content
+
+Tailwind also provides pin utilties, useful for "pinning" absolutely positioned elements using the top, right, bottom and left properties.
+
+```html
+
+
+
+
+
+```
+
+```less
+// Using the utilities in Less:
+
+div {
+ .pin;
+ .pin-t;
+ .pin-r;
+ .pin-b;
+ .pin-l;
+ .pin-x;
+ .pin-y;
+}
+```
+
+## Responsive
+
+The position utitlies can also be used with responsive prefixes:
+
+```html
+
+
+
+```
+
+```less
+// Using the utilities in Less:
+
+div {
+ .screen(md, {
+ .relative;
+ });
+}
+```
diff --git a/docs/source/principles.blade.php b/docs/source/principles.blade.php
deleted file mode 100644
index 8e9eb3bc5..000000000
--- a/docs/source/principles.blade.php
+++ /dev/null
@@ -1,7 +0,0 @@
-@extends('_layouts.master', ['title' => 'Principles'])
-
-@section('body')
-
-Principles
- -@endsection diff --git a/docs/source/principles.md b/docs/source/principles.md new file mode 100644 index 000000000..acc61fea3 --- /dev/null +++ b/docs/source/principles.md @@ -0,0 +1,6 @@ +--- +extends: _layouts.master +title: "Principles" +--- + +# Principles diff --git a/docs/source/spacing.blade.php b/docs/source/spacing.md similarity index 53% rename from docs/source/spacing.blade.php rename to docs/source/spacing.md index b1e05debc..bda640b12 100644 --- a/docs/source/spacing.blade.php +++ b/docs/source/spacing.md @@ -1,29 +1,30 @@ -@extends('_layouts.master', ['title' => 'Spacing']) +--- +extends: _layouts.master +title: "Spacing" +--- -@section('body') +# Spacing -Spacing
+The syntax below is combined to create a system for padding and margins. For example,.pt-2 would add padding to the top of the element to the value of 0.5rem and .mx-0 would make the horizontal margin zero.
-The syntax below is combined to create a system for padding and margins. For example, .pt-2 would add padding to the top of the element to the value of 0.5rem and .my-0 would make the horizontal margin zero.
+
-
-
-
+
+
+
- Class
- pmpullClass
+ p Paddingm Marginpull Negative Margin
-
+
Position
- l Left
+
-
-
-
+
+
+
- Position (optional)
+ t Topr Rightb Bottomt Topv Verticalh Horizontall Leftx Horizontaly Vertical
-
+## Responsive
+The spacing utitlies can also be used with responsive prefixes:
-@endsection
+```html
+
+
+
+
+
+```
+
+```less
+// Using the utilities in Less:
+
+div {
+ .screen(lg, {
+ .mt-6;
+ });
+}
+```
diff --git a/docs/source/text.blade.php b/docs/source/text.blade.php
deleted file mode 100644
index 6a1a50416..000000000
--- a/docs/source/text.blade.php
+++ /dev/null
@@ -1,7 +0,0 @@
-@extends('_layouts.master', ['title' => 'Text'])
-
-@section('body')
-
-Space
+
+
@@ -34,6 +35,24 @@
Space
0 01 0.25rem2 0.5rem