mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Continued development of docs.
This commit is contained in:
Jonathan Reinink
parent
722a84c366
commit
f83e5d7543
@ -1,10 +1,22 @@
|
||||
@import "../../../../src/reset";
|
||||
@import "../../../../src/utilities";
|
||||
@import "prism";
|
||||
@import "markdown";
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
.text-underline;
|
||||
}
|
||||
}
|
||||
|
||||
.define-text-color('primary';
|
||||
@ -18,22 +30,3 @@ a {
|
||||
'light' #a0cfee,
|
||||
'dark' #2980b9
|
||||
;);
|
||||
|
||||
.title {
|
||||
.mb-4;
|
||||
.leading-none;
|
||||
.text-dark-softer;
|
||||
.text-thin;
|
||||
.text-2xl;
|
||||
.text-primary;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
.mt-8;
|
||||
.mb-6;
|
||||
.leading-none;
|
||||
.text-dark-softer;
|
||||
.text-thin;
|
||||
.text-xl;
|
||||
.text-primary;
|
||||
}
|
||||
|
||||
44
docs/source/_assets/less/markdown.less
Normal file
44
docs/source/_assets/less/markdown.less
Normal file
@ -0,0 +1,44 @@
|
||||
.markdown {
|
||||
a {
|
||||
.text-primary;
|
||||
}
|
||||
|
||||
code.inline {
|
||||
.border;
|
||||
.rounded;
|
||||
.text-sm;
|
||||
.px-1;
|
||||
color: #DD4A68;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
.text-em;
|
||||
.text-dark-soft;
|
||||
.text-sm;
|
||||
}
|
||||
|
||||
h1 {
|
||||
.mb-4;
|
||||
.leading-none;
|
||||
.text-dark-softer;
|
||||
.text-thin;
|
||||
.text-2xl;
|
||||
.text-primary;
|
||||
}
|
||||
|
||||
h2 {
|
||||
.mt-8;
|
||||
.mb-6;
|
||||
.leading-none;
|
||||
.text-dark-softer;
|
||||
.text-thin;
|
||||
.text-xl;
|
||||
.text-primary;
|
||||
}
|
||||
|
||||
p {
|
||||
.mt-6;
|
||||
.mb-3;
|
||||
}
|
||||
|
||||
}
|
||||
@ -15,7 +15,7 @@ pre[class*="language-"] {
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.4;
|
||||
line-height: 1.5;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
@ -51,8 +51,8 @@ code[class*="language-"]::selection, code[class*="language-"] ::selection {
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 0.75em 1em;
|
||||
margin: .5em 0;
|
||||
overflow: auto;
|
||||
.my-4;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"],
|
||||
|
||||
@ -4,13 +4,13 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>{{ isset($title) ? $title . ' - Tailwind CSS' : 'Tailwind CSS' }}</title>
|
||||
<title>{{ $page->title ? $page->title . ' - Tailwind CSS' : 'Tailwind CSS' }}</title>
|
||||
<link rel="stylesheet" href="/css/main.css">
|
||||
<script type="text/javascript" src="/js/prism.js" defer=""></script>
|
||||
</head>
|
||||
<body class="full-height flex-col">
|
||||
<header class="p-6 bg-primary">
|
||||
<div class="text-light text-lg">Tailwind CSS</div>
|
||||
<a class="text-light text-lg" href="/">Tailwind CSS</a>
|
||||
<div class="text-primary-light text-xs">A utility-first CSS framework for rapid UI development</div>
|
||||
</header>
|
||||
<div class="flex flex-fill">
|
||||
@ -27,7 +27,7 @@
|
||||
<li><a class="{{ $page->getUrl() === '/borders' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/borders">Borders</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/constrain' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/constrain">Constrain</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/display' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/display">Display</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/flex' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/flex">Flex</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/flexbox' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/flexbox">Flexbox</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/grid' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/grid">Grid</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/images' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/images">Images</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/position' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/position">Position</a></li>
|
||||
@ -36,8 +36,8 @@
|
||||
<li><a class="{{ $page->getUrl() === '/z-index' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/z-index">Z-Index</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="p-7 constrain-lg">
|
||||
@yield('body')
|
||||
<div class="p-7 constrain-lg markdown">
|
||||
@yield('content')
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@ -1,73 +0,0 @@
|
||||
@extends('_layouts.master', ['title' => 'Backgrounds'])
|
||||
|
||||
@section('body')
|
||||
|
||||
<h1 class="title">Backgrounds</h1>
|
||||
|
||||
<p class="mt-6 mb-3">Using the utilities in HTML:</p>
|
||||
|
||||
<pre class="language-html"><code>{{ '<div class="bg-light"></div>
|
||||
<div class="bg-light-soft"></div>
|
||||
<div class="bg-light-softer"></div>
|
||||
<div class="bg-light-softest"></div>
|
||||
|
||||
<div class="bg-dark"></div>
|
||||
<div class="bg-dark-soft"></div>
|
||||
<div class="bg-dark-softer"></div>
|
||||
<div class="bg-dark-softest"></div>
|
||||
|
||||
<!-- Responsive example -->
|
||||
<div class="bg-dark sm:bg-dark-soft md:bg-dark-softer"></div>' }}</code></pre>
|
||||
|
||||
<p class="mt-6 mb-3">Using the utilities in Less:</p>
|
||||
|
||||
<pre class="language-less"><code>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;
|
||||
});
|
||||
}</code></pre>
|
||||
|
||||
<h2 class="subtitle">Custom backgrounds</h2>
|
||||
|
||||
<p class="mt-6 mb-3">Generate custom background utilities:</p>
|
||||
|
||||
<pre class="language-less"><code>.define-text-color('primary';
|
||||
default #3498db,
|
||||
'light' #a0cfee,
|
||||
'dark' #2980b9
|
||||
;);</code></pre>
|
||||
|
||||
<p class="mt-6 mb-3">Using custom background utilities in HTML:</p>
|
||||
|
||||
<pre class="language-html"><code>{{ '<div class="bg-primary"></div>
|
||||
<div class="bg-primary-light"></div>
|
||||
<div class="bg-primary-dark"></div>
|
||||
|
||||
<!-- Responsive example -->
|
||||
<div class="bg-primary sm:bg-primary-dark"></div>' }}</code></pre>
|
||||
|
||||
<p class="mt-6 mb-3">Using custom background utilities in Less:</p>
|
||||
|
||||
<pre class="language-less"><code>div {
|
||||
.bg-primary;
|
||||
.bg-primary-light;
|
||||
.bg-primary-dark;
|
||||
|
||||
// Responsive example
|
||||
.screen(lg, {
|
||||
.bg-primary;
|
||||
});
|
||||
}</code></pre>
|
||||
|
||||
@endsection
|
||||
97
docs/source/backgrounds.md
Normal file
97
docs/source/backgrounds.md
Normal file
@ -0,0 +1,97 @@
|
||||
---
|
||||
extends: _layouts.master
|
||||
title: "Backgrounds"
|
||||
---
|
||||
|
||||
# Backgrounds
|
||||
|
||||
Using the utilities in HTML:
|
||||
|
||||
```html
|
||||
<div class="bg-light"></div>
|
||||
<div class="bg-light-soft"></div>
|
||||
<div class="bg-light-softer"></div>
|
||||
<div class="bg-light-softest"></div>
|
||||
|
||||
<div class="bg-dark"></div>
|
||||
<div class="bg-dark-soft"></div>
|
||||
<div class="bg-dark-softer"></div>
|
||||
<div class="bg-dark-softest"></div>
|
||||
```
|
||||
|
||||
Using the utilities in Less:
|
||||
|
||||
```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
|
||||
|
||||
The background utitlies can also be used with <a href="/responsive">responsive</a> prefixes:
|
||||
|
||||
```html
|
||||
<!-- Using the utilities in HTML: -->
|
||||
|
||||
<div class="bg-dark sm:bg-dark-soft md:bg-dark-softer lg:bg-dark-softest"></div>
|
||||
```
|
||||
|
||||
```less
|
||||
// Using the utilities in Less:
|
||||
|
||||
div {
|
||||
.screen(lg, {
|
||||
.bg-light;
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## Custom backgrounds
|
||||
|
||||
How to generate custom background utilities:
|
||||
|
||||
```less
|
||||
.define-text-color('primary';
|
||||
default #3498db,
|
||||
'light' #a0cfee,
|
||||
'dark' #2980b9
|
||||
;);
|
||||
```
|
||||
|
||||
How to use custom background utilities:
|
||||
|
||||
```html
|
||||
<!-- Using custom utilities in HTML: -->
|
||||
|
||||
<div class="bg-primary"></div>
|
||||
<div class="bg-primary-light"></div>
|
||||
<div class="bg-primary-dark"></div>
|
||||
|
||||
<!-- Responsive example -->
|
||||
<div class="bg-primary sm:bg-primary-dark"></div>
|
||||
```
|
||||
|
||||
```less
|
||||
// Using custom utilities in Less:
|
||||
|
||||
div {
|
||||
.bg-primary;
|
||||
.bg-primary-light;
|
||||
.bg-primary-dark;
|
||||
|
||||
// Responsive example
|
||||
.screen(lg, {
|
||||
.bg-primary;
|
||||
});
|
||||
}
|
||||
```
|
||||
@ -1,7 +0,0 @@
|
||||
@extends('_layouts.master', ['title' => 'Borders'])
|
||||
|
||||
@section('body')
|
||||
|
||||
<h1 class="title">Borders</h1>
|
||||
|
||||
@endsection
|
||||
6
docs/source/borders.md
Normal file
6
docs/source/borders.md
Normal file
@ -0,0 +1,6 @@
|
||||
---
|
||||
extends: _layouts.master
|
||||
title: "Borders"
|
||||
---
|
||||
|
||||
# Borders
|
||||
@ -1,54 +0,0 @@
|
||||
@extends('_layouts.master', ['title' => 'Constrain'])
|
||||
|
||||
@section('body')
|
||||
|
||||
<h1 class="title">Constrain</h1>
|
||||
|
||||
<p class="mt-6 mb-3 text-dark-soft">The constrain utilities are simply <code>max-width</code> helpers designed to constrain content to a desired width.</p>
|
||||
|
||||
<p class="mt-6 mb-3">Using the utilities in HTML:</p>
|
||||
|
||||
<pre class="language-html"><code>{{ '<div class="constrain-xl">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.</div>
|
||||
|
||||
<!-- Responsive example -->
|
||||
<div class="md:constrain-xl">Lorem ipsum dolor...</div>' }}</code></pre>
|
||||
|
||||
<p class="mt-6 mb-3">Using the utilities in Less:</p>
|
||||
|
||||
<pre class="language-less"><code>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;
|
||||
});
|
||||
}</code></pre>
|
||||
|
||||
<h2 class="subtitle">Customization</h2>
|
||||
|
||||
<p class="mt-6 mb-3">Tailwind exposes the following variables to allow modification of the constrain utilities.</p>
|
||||
|
||||
<pre class="language-less"><code>@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;</code></pre>
|
||||
|
||||
@endsection
|
||||
71
docs/source/constrain.md
Normal file
71
docs/source/constrain.md
Normal file
@ -0,0 +1,71 @@
|
||||
---
|
||||
extends: _layouts.master
|
||||
title: "Constrain"
|
||||
---
|
||||
|
||||
# Constrain
|
||||
|
||||
The constrain utilities are simply <code class="inline">max-width</code> helpers designed to constrain content to a desired width.
|
||||
|
||||
```html
|
||||
<!-- Using the utilities in HTML: -->
|
||||
|
||||
<div class="constrain-xl">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.</div>
|
||||
```
|
||||
|
||||
```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 <a href="/responsive">responsive</a> prefixes:
|
||||
|
||||
```html
|
||||
<!-- Using the utilities in HTML: -->
|
||||
|
||||
<div class="constrain-xs sm:constrain-sm md:constrain-md lg:constrain-lg">Lorem ipsum dolor...</div>
|
||||
```
|
||||
|
||||
```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;
|
||||
```
|
||||
@ -1,40 +0,0 @@
|
||||
@extends('_layouts.master', ['title' => 'Display'])
|
||||
|
||||
@section('body')
|
||||
|
||||
<h1 class="title">Display</h1>
|
||||
|
||||
<p class="mt-6 mb-3 text-dark-soft">The display utilities simply <code>display</code> property helpers.</p>
|
||||
|
||||
<p class="mt-6 mb-3">Using the utilities in HTML:</p>
|
||||
|
||||
<pre class="language-html"><code>{{ '<div class="block"></div>
|
||||
<div class="inline-block"></div>
|
||||
<div class="hidden"></div>
|
||||
|
||||
<div class="table">
|
||||
<div class="table-row">
|
||||
<div class="table-cell"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Responsive example -->
|
||||
<div class="lg:inline-block"></div>' }}</code></pre>
|
||||
|
||||
<p class="mt-6 mb-3">Using the utilities in Less:</p>
|
||||
|
||||
<pre class="language-less"><code>div {
|
||||
.block;
|
||||
.inline-block;
|
||||
.table;
|
||||
.table-row;
|
||||
.table-cell;
|
||||
.hidden;
|
||||
|
||||
// Responsive example
|
||||
.screen(lg, {
|
||||
.inline-block;
|
||||
});
|
||||
}</code></pre>
|
||||
|
||||
@endsection
|
||||
57
docs/source/display.md
Normal file
57
docs/source/display.md
Normal file
@ -0,0 +1,57 @@
|
||||
---
|
||||
extends: _layouts.master
|
||||
title: "Display"
|
||||
---
|
||||
|
||||
# Display
|
||||
|
||||
> If you're looking for flexbox utilities, see the [flexbox](/flexbox) page.
|
||||
|
||||
The display utilities simply <code class="inline">display</code> property helpers.
|
||||
|
||||
```html
|
||||
<!-- Using the utilities in HTML: -->
|
||||
|
||||
<div class="block"></div>
|
||||
<div class="inline-block"></div>
|
||||
<div class="hidden"></div>
|
||||
|
||||
<div class="table">
|
||||
<div class="table-row">
|
||||
<div class="table-cell"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
```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 <a href="/responsive">responsive</a> prefixes:
|
||||
|
||||
```html
|
||||
<!-- Using the utilities in HTML: -->
|
||||
|
||||
<div class="block sm:inline-block md:block lg:hidden"></div>
|
||||
```
|
||||
|
||||
```less
|
||||
// Using the utilities in Less:
|
||||
|
||||
div {
|
||||
.screen(lg, {
|
||||
.inline-block;
|
||||
});
|
||||
}
|
||||
```
|
||||
@ -1,7 +0,0 @@
|
||||
@extends('_layouts.master', ['title' => 'Flex'])
|
||||
|
||||
@section('body')
|
||||
|
||||
<h1 class="title">Flex</h1>
|
||||
|
||||
@endsection
|
||||
6
docs/source/flexbox.md
Normal file
6
docs/source/flexbox.md
Normal file
@ -0,0 +1,6 @@
|
||||
---
|
||||
extends: _layouts.master
|
||||
title: "Flexbox"
|
||||
---
|
||||
|
||||
# Flexbox
|
||||
@ -1,7 +0,0 @@
|
||||
@extends('_layouts.master', ['title' => 'Grid'])
|
||||
|
||||
@section('body')
|
||||
|
||||
<h1 class="title">Grid</h1>
|
||||
|
||||
@endsection
|
||||
6
docs/source/grid.md
Normal file
6
docs/source/grid.md
Normal file
@ -0,0 +1,6 @@
|
||||
---
|
||||
extends: _layouts.master
|
||||
title: "Grid"
|
||||
---
|
||||
|
||||
# Grid
|
||||
@ -1,7 +0,0 @@
|
||||
@extends('_layouts.master', ['title' => 'Images'])
|
||||
|
||||
@section('body')
|
||||
|
||||
<h1 class="title">Images</h1>
|
||||
|
||||
@endsection
|
||||
6
docs/source/images.md
Normal file
6
docs/source/images.md
Normal file
@ -0,0 +1,6 @@
|
||||
---
|
||||
extends: _layouts.master
|
||||
title: "Images"
|
||||
---
|
||||
|
||||
# Images
|
||||
BIN
docs/source/img/adam.jpg
Normal file
BIN
docs/source/img/adam.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
@ -1,9 +0,0 @@
|
||||
@extends('_layouts.master')
|
||||
|
||||
@section('body')
|
||||
|
||||
<h1 class="title">Welcome</h1>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
@endsection
|
||||
24
docs/source/index.md
Normal file
24
docs/source/index.md
Normal file
@ -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
|
||||
|
||||
<div class="inline-block p-2 pb-4 bg-light border rounded box-shadow text-center">
|
||||
<img class="img-16r" src="img/adam.jpg">
|
||||
<div class="text-dark mt-2">Adam Wathan</div>
|
||||
<div class="text-dark-soft text-sm">Web Developer</div>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<div class="inline-block p-2 pb-4 bg-light border rounded box-shadow text-center">
|
||||
<img class="img-16r" src="img/adam.jpg">
|
||||
<div class="text-dark mt-2">Adam Wathan</div>
|
||||
<div class="text-dark-soft text-sm">Web Developer</div>
|
||||
</div>
|
||||
```
|
||||
@ -1,11 +0,0 @@
|
||||
@extends('_layouts.master', ['title' => 'Installation'])
|
||||
|
||||
@section('body')
|
||||
|
||||
<h1 class="title">Installation</h1>
|
||||
|
||||
<p class="mt-6 mb-2">Install Tailwind using NPM:</p>
|
||||
|
||||
<pre class="language-bash"><code>npm install tailwindcss</code></pre>
|
||||
|
||||
@endsection
|
||||
12
docs/source/installation.md
Normal file
12
docs/source/installation.md
Normal file
@ -0,0 +1,12 @@
|
||||
---
|
||||
extends: _layouts.master
|
||||
title: "Installation"
|
||||
---
|
||||
|
||||
# Installation
|
||||
|
||||
Install Tailwind using NPM:
|
||||
|
||||
```bash
|
||||
npm install tailwindcss
|
||||
```
|
||||
@ -1,45 +0,0 @@
|
||||
@extends('_layouts.master', ['title' => 'Position'])
|
||||
|
||||
@section('body')
|
||||
|
||||
<h1 class="title">Position</h1>
|
||||
|
||||
<p class="mt-6 mb-3 text-dark-soft">The position utilities are primarily <code>position</code> property helpers.</p>
|
||||
|
||||
<p class="mt-6 mb-3">Using the utilities in HTML:</p>
|
||||
|
||||
<pre class="language-html"><code>{{ '<div class="fixed"></div>
|
||||
<div class="absolute"></div>
|
||||
<div class="relative"></div>' }}</code></pre>
|
||||
|
||||
<p class="mt-6 mb-3">Using the utilities in Less:</p>
|
||||
|
||||
<pre class="language-less"><code>div {
|
||||
.fixed;
|
||||
.absolute;
|
||||
.relative;
|
||||
}</code></pre>
|
||||
|
||||
<h2 class="subtitle">Pinning absolute content</h2>
|
||||
|
||||
<p class="mt-6 mb-3">Tailwind also provides pin utilties, useful for "pinning" absolutely positioned elements using the <code>top</code>, <code>right</code>, <code>bottom</code> and <code>left</code> properties.</p>
|
||||
|
||||
<p class="mt-6 mb-3">Using the utilities in HTML:</p>
|
||||
|
||||
<pre class="language-html"><code>{{ '<div class="relative">
|
||||
<div class="absolute pin-t"></div>
|
||||
</div>' }}</code></pre>
|
||||
|
||||
<p class="mt-6 mb-3">Using the utilities in Less:</p>
|
||||
|
||||
<pre class="language-less"><code>div {
|
||||
.pin-t
|
||||
.pin-r
|
||||
.pin-b
|
||||
.pin-l
|
||||
.pin-y
|
||||
.pin-x
|
||||
.pin
|
||||
}</code></pre>
|
||||
|
||||
@endsection
|
||||
72
docs/source/position.md
Normal file
72
docs/source/position.md
Normal file
@ -0,0 +1,72 @@
|
||||
---
|
||||
extends: _layouts.master
|
||||
title: "Position"
|
||||
---
|
||||
|
||||
# Position
|
||||
|
||||
The position utilities are primarily <code class="inline">position</code> property helpers.
|
||||
|
||||
```html
|
||||
<!-- Using the utilities in HTML: -->
|
||||
|
||||
<div class="fixed"></div>
|
||||
<div class="absolute"></div>
|
||||
<div class="relative"></div>
|
||||
```
|
||||
|
||||
```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 <code class="inline">top</code>, <code class="inline">right</code>, <code class="inline">bottom</code> and <code class="inline">left</code> properties.
|
||||
|
||||
```html
|
||||
<!-- Using the utilities in HTML: -->
|
||||
|
||||
<div class="relative">
|
||||
<div class="absolute pin-t"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
```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 <a href="/responsive">responsive</a> prefixes:
|
||||
|
||||
```html
|
||||
<!-- Using the utilities in HTML: -->
|
||||
|
||||
<div class="fixed sm:absolute md:relative"></div>
|
||||
```
|
||||
|
||||
```less
|
||||
// Using the utilities in Less:
|
||||
|
||||
div {
|
||||
.screen(md, {
|
||||
.relative;
|
||||
});
|
||||
}
|
||||
```
|
||||
@ -1,7 +0,0 @@
|
||||
@extends('_layouts.master', ['title' => 'Principles'])
|
||||
|
||||
@section('body')
|
||||
|
||||
<h1 class="title">Principles</h1>
|
||||
|
||||
@endsection
|
||||
6
docs/source/principles.md
Normal file
6
docs/source/principles.md
Normal file
@ -0,0 +1,6 @@
|
||||
---
|
||||
extends: _layouts.master
|
||||
title: "Principles"
|
||||
---
|
||||
|
||||
# Principles
|
||||
@ -1,29 +1,30 @@
|
||||
@extends('_layouts.master', ['title' => 'Spacing'])
|
||||
---
|
||||
extends: _layouts.master
|
||||
title: "Spacing"
|
||||
---
|
||||
|
||||
@section('body')
|
||||
# Spacing
|
||||
|
||||
<h1 class="title">Spacing</h1>
|
||||
The syntax below is combined to create a system for padding and margins. For example, <code class="inline">.pt-2</code> would add padding to the top of the element to the value of <code class="inline">0.5rem</code> and <code class="inline">.mx-0</code> would make the horizontal margin zero.
|
||||
|
||||
<p class="mt-6 mb-3">The syntax below is combined to create a system for padding and margins. For example, <code>.pt-2</code> would add padding to the top of the element to the value of <code>0.5rem</code> and <code>.my-0</code> would make the horizontal margin zero.</p>
|
||||
|
||||
<div class="flex mt-6">
|
||||
<div class="flex flex-top mt-6 text-sm">
|
||||
<div class="pr-7">
|
||||
<div class="mb-2 text-dark-softer text-uppercase text-xs">Class</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">p</code></div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">m</code></div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">pull</code></div>
|
||||
<div class="mb-3 text-dark-soft text-uppercase">Class</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">p</code> Padding</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">m</code> Margin</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">pull</code> Negative Margin</div>
|
||||
</div>
|
||||
<div class="pr-7">
|
||||
<div class="mb-2 text-dark-softer text-uppercase text-xs">Position</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">l</code> Left</div>
|
||||
<div class="pl-7 pr-7 border-l">
|
||||
<div class="mb-3 text-dark-soft"><span class="text-uppercase">Position</span> <span class="text-dark-softer text-xs">(optional)</span></div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">t</code> Top</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">r</code> Right</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">b</code> Bottom</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">t</code> Top</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">v</code> Vertical</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">h</code> Horizontal</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">l</code> Left</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">x</code> Horizontal</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">y</code> Vertical</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="mb-2 text-dark-softer text-uppercase text-xs">Space</div>
|
||||
<div class="pl-7 border-l">
|
||||
<div class="mb-3 text-dark-soft text-uppercase">Space</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">0</code> 0</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">1</code> 0.25rem</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">2</code> 0.5rem</div>
|
||||
@ -34,6 +35,24 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## Responsive
|
||||
|
||||
The spacing utitlies can also be used with <a href="/responsive">responsive</a> prefixes:
|
||||
|
||||
@endsection
|
||||
```html
|
||||
<!-- Using the utilities in HTML: -->
|
||||
|
||||
<div class="p-1 sm:p-2 md:p-3 lg:p-4"></div>
|
||||
<div class="m-1 sm:m-2 md:m-3 lg:m-4"></div>
|
||||
<div class="pull-1 sm:pull-2 md:pull-3 lg:pull-4"></div>
|
||||
```
|
||||
|
||||
```less
|
||||
// Using the utilities in Less:
|
||||
|
||||
div {
|
||||
.screen(lg, {
|
||||
.mt-6;
|
||||
});
|
||||
}
|
||||
```
|
||||
@ -1,7 +0,0 @@
|
||||
@extends('_layouts.master', ['title' => 'Text'])
|
||||
|
||||
@section('body')
|
||||
|
||||
<h1 class="title">Text</h1>
|
||||
|
||||
@endsection
|
||||
6
docs/source/text.md
Normal file
6
docs/source/text.md
Normal file
@ -0,0 +1,6 @@
|
||||
---
|
||||
extends: _layouts.master
|
||||
title: "Text"
|
||||
---
|
||||
|
||||
# Text
|
||||
@ -1,7 +0,0 @@
|
||||
@extends('_layouts.master', ['title' => 'Z-Index'])
|
||||
|
||||
@section('body')
|
||||
|
||||
<h1 class="title">Z-Index</h1>
|
||||
|
||||
@endsection
|
||||
6
docs/source/z-index.md
Normal file
6
docs/source/z-index.md
Normal file
@ -0,0 +1,6 @@
|
||||
---
|
||||
extends: _layouts.master
|
||||
title: "Z-Index"
|
||||
---
|
||||
|
||||
# Z-Index
|
||||
Loading…
x
Reference in New Issue
Block a user