Scaffold out a bunch of docs pages
This commit is contained in:
Adam Wathan
parent
c610ad6ef4
commit
3c31e2a773
59 changed files with 1157 additions and 437 deletions
|
|
@ -31,42 +31,120 @@
|
|||
<div class="w-full lg:w-1/4">
|
||||
<nav class="py-4 text-light text-base">
|
||||
<div>
|
||||
<p class="mb-4 text-dark-softer text-uppercase tracking-wide text-medium text-sm">Introduction</p>
|
||||
<p class="mb-4 text-dark-softer text-uppercase tracking-wide text-medium text-sm">Getting Started</p>
|
||||
<ul>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/">Welcome</a></li>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/installation' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/installation">Installation</a></li>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/changelog' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/changelog">Changelog</a></li>
|
||||
<li class="mb-2"><a class="text-dark-soft" href="{{ $page->baseUrl }}/installation">Installation</a></li>
|
||||
<li class="mb-2"><a class="text-dark-soft" href="{{ $page->baseUrl }}/changelog">Changelog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-8">
|
||||
<p class="mb-4 text-dark-softer text-uppercase tracking-wide text-medium text-sm">Concepts</p>
|
||||
<p class="mb-4 text-dark-softer text-uppercase tracking-wide text-medium text-sm">Workflow</p>
|
||||
<ul>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/principles' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/principles">Principles</a></li>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/customization' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/customization">Customization</a></li>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/responsive' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/responsive">Responsive</a></li>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/colors' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/colors">Colors</a></li>
|
||||
<li class="mb-2">
|
||||
<a class="{{ $page->active('/working-utility-first') ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/workflow/working-utility-first">
|
||||
Working Utility-First
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="{{ $page->active('/responsive-design') ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/workflow/responsive-design">
|
||||
Responsive Design
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="{{ $page->active('/extracting-components') ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/workflow/extracting-components">
|
||||
Extracting Components
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="{{ $page->active('/adding-new-utilities') ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/workflow/adding-new-utilities">
|
||||
Adding New Utilities
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="{{ $page->active('/customizing-tailwind') ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/workflow/customizing-tailwind">
|
||||
Customizing Tailwind
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-8">
|
||||
<p class="mb-4 text-dark-softer text-uppercase tracking-wide text-medium text-sm">Utilities</p>
|
||||
<ul>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/backgrounds' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/backgrounds">Backgrounds</a></li>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/borders' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/borders">Borders</a></li>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/constrain' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/constrain">Constrain</a></li>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/display' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/display">Display</a></li>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/flexbox' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/flexbox">Flexbox</a></li>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/grid' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/grid">Grid</a></li>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/images' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/images">Images</a></li>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/overflow' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/overflow">Overflow</a></li>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/position' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/position">Position</a></li>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/shadows' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/shadows">Shadows</a></li>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/spacing' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/spacing">Spacing</a></li>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/text' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/text">Text</a></li>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/z-index' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/z-index">Z-Index</a></li>
|
||||
<ul class="mb-8">
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/alignment" class="{{ $page->active('/alignment') ? 'text-dark text-medium' : 'text-dark-soft' }}">Alignment</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/appearance" class="{{ $page->active('/appearance') ? 'text-dark text-medium' : 'text-dark-soft' }}">Appearance</a></li>
|
||||
<li class="mb-2">
|
||||
<a href="{{ $page->baseUrl }}/utilities/backgrounds/color" class="block mb-2 {{ $page->active('/backgrounds/') ? 'text-dark text-medium' : 'text-dark-soft' }}">Backgrounds</a>
|
||||
<ul class="pl-4 {{ $page->active('/backgrounds/') ? 'block' : 'hidden' }}">
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/backgrounds/color" class="{{ $page->active('/backgrounds/color') ? 'text-dark text-medium' : 'text-dark-soft' }}">Color</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/backgrounds/position" class="{{ $page->active('/backgrounds/position') ? 'text-dark text-medium' : 'text-dark-soft' }}">Position</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/backgrounds/size" class="{{ $page->active('/backgrounds/size') ? 'text-dark text-medium' : 'text-dark-soft' }}">Size</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a href="{{ $page->baseUrl }}/utilities/borders/base" class="block mb-2 {{ $page->active('/borders/') ? 'text-dark text-medium' : 'text-dark-soft' }}">Borders</a>
|
||||
<ul class="pl-4 {{ $page->active('/borders/') ? 'block' : 'hidden' }}">
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/borders/base" class="{{ $page->active('/borders/base') ? 'text-dark text-medium' : 'text-dark-soft' }}">Base</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/borders/color" class="{{ $page->active('/borders/color') ? 'text-dark text-medium' : 'text-dark-soft' }}">Color</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/borders/style" class="{{ $page->active('/borders/style') ? 'text-dark text-medium' : 'text-dark-soft' }}">Style</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/borders/radius" class="{{ $page->active('/borders/radius') ? 'text-dark text-medium' : 'text-dark-soft' }}">Radius</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/container" class="{{ $page->active('/container') ? 'text-dark text-medium' : 'text-dark-soft' }}">Container</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/display" class="{{ $page->active('/display') ? 'text-dark text-medium' : 'text-dark-soft' }}">Display</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/flexbox" class="{{ $page->active('/flexbox') ? 'text-dark text-medium' : 'text-dark-soft' }}">Flexbox</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/floats" class="{{ $page->active('/floats') ? 'text-dark text-medium' : 'text-dark-soft' }}">Floats</a></li>
|
||||
<li class="mb-2">
|
||||
<a href="{{ $page->baseUrl }}/utilities/interactivity/cursor" class="block mb-2 {{ $page->active('/interactivity/') ? 'text-dark text-medium' : 'text-dark-soft' }}">Interactivity</a>
|
||||
<ul class="pl-4 {{ $page->active('/interactivity/') ? 'block' : 'hidden' }}">
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/interactivity/cursor" class="{{ $page->active('/cursor') ? 'text-dark text-medium' : 'text-dark-soft' }}">Cursor</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/interactivity/resize" class="{{ $page->active('/resize') ? 'text-dark text-medium' : 'text-dark-soft' }}">Resize</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/interactivity/pointer-events" class="{{ $page->active('/pointer-events') ? 'text-dark text-medium' : 'text-dark-soft' }}">Pointer Events</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/interactivity/user-select" class="{{ $page->active('/user-select') ? 'text-dark text-medium' : 'text-dark-soft' }}">User Select</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/opacity" class="{{ $page->active('/opacity') ? 'text-dark text-medium' : 'text-dark-soft' }}">Opacity</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/overflow" class="{{ $page->active('/overflow') ? 'text-dark text-medium' : 'text-dark-soft' }}">Overflow</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/positioning" class="{{ $page->active('/positioning') ? 'text-dark text-medium' : 'text-dark-soft' }}">Positioning</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/shadows" class="{{ $page->active('/shadows') ? 'text-dark text-medium' : 'text-dark-soft' }}">Shadows</a></li>
|
||||
<li class="mb-2">
|
||||
<a href="{{ $page->baseUrl }}/utilities/sizing/width" class="block mb-2 {{ $page->active('/sizing/') ? 'text-dark text-medium' : 'text-dark-soft' }}">Sizing</a>
|
||||
<ul class="pl-4 {{ $page->active('/sizing/') ? 'block' : 'hidden' }}">
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/sizing/width" class="{{ $page->active('/sizing/width') ? 'text-dark text-medium' : 'text-dark-soft' }}">Width</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/sizing/min-width" class="{{ $page->active('/sizing/min-width') ? 'text-dark text-medium' : 'text-dark-soft' }}">Min-Width</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/sizing/max-width" class="{{ $page->active('/sizing/max-width') ? 'text-dark text-medium' : 'text-dark-soft' }}">Max-Width</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/sizing/height" class="{{ $page->active('/sizing/height') ? 'text-dark text-medium' : 'text-dark-soft' }}">Height</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/sizing/min-height" class="{{ $page->active('/sizing/min-height') ? 'text-dark text-medium' : 'text-dark-soft' }}">Min-Height</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/sizing/max-height" class="{{ $page->active('/sizing/max-height') ? 'text-dark text-medium' : 'text-dark-soft' }}">Max-Height</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a href="{{ $page->baseUrl }}/utilities/spacing/padding" class="block mb-2 {{ $page->active('/spacing/') ? 'text-dark text-medium' : 'text-dark-soft' }}">Spacing</a>
|
||||
<ul class="pl-4 {{ $page->active('/spacing/') ? 'block' : 'hidden' }}">
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/spacing/padding" class="{{ $page->active('/spacing/padding') ? 'text-dark text-medium' : 'text-dark-soft' }}">Padding</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/spacing/margin" class="{{ $page->active('/spacing/margin') ? 'text-dark text-medium' : 'text-dark-soft' }}">Margin</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/spacing/negative-margin" class="{{ $page->active('/spacing/negative-margin') ? 'text-dark text-medium' : 'text-dark-soft' }}">Negative Margin</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a href="{{ $page->baseUrl }}/utilities/text/fonts" class="block mb-2 {{ $page->active('/text/') ? 'text-dark text-medium' : 'text-dark-soft' }}">Text</a>
|
||||
<ul class="pl-4 {{ $page->active('/text/') ? 'block' : 'hidden' }}">
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/text/fonts" class="{{ $page->active('/text/fonts') ? 'text-dark text-medium' : 'text-dark-soft' }}">Fonts</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/text/color" class="{{ $page->active('/text/color') ? 'text-dark text-medium' : 'text-dark-soft' }}">Color</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/text/sizing" class="{{ $page->active('/text/sizing') ? 'text-dark text-medium' : 'text-dark-soft' }}">Sizing</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/text/weight" class="{{ $page->active('/text/weight') ? 'text-dark text-medium' : 'text-dark-soft' }}">Weight</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/text/line-height" class="{{ $page->active('/text/line-height') ? 'text-dark text-medium' : 'text-dark-soft' }}">Line Height</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/text/letter-spacing" class="{{ $page->active('/text/letter-spacing') ? 'text-dark text-medium' : 'text-dark-soft' }}">Letter Spacing</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/text/alignment" class="{{ $page->active('/text/alignment') ? 'text-dark text-medium' : 'text-dark-soft' }}">Alignment</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/text/wrapping" class="{{ $page->active('/text/wrapping') ? 'text-dark text-medium' : 'text-dark-soft' }}">Wrapping</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/text/style" class="{{ $page->active('/text/style') ? 'text-dark text-medium' : 'text-dark-soft' }}">Style & Decoration</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/visibility" class="{{ $page->active('/visibility') ? 'text-dark text-medium' : 'text-dark-soft' }}">Visibility</a></li>
|
||||
<li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/z-index" class="{{ $page->active('/z-index') ? 'text-dark text-medium' : 'text-dark-soft' }}">Z-Index</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-8">
|
||||
<p class="mb-4 text-dark-softer text-uppercase tracking-wide text-medium text-sm">Components</p>
|
||||
<p class="mb-4 text-dark-softer text-uppercase tracking-wide text-medium text-sm">Examples</p>
|
||||
<ul>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/buttons' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/buttons">Buttons</a></li>
|
||||
<li class="mb-2"><a class="{{ $page->getUrl() === '/forms' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/forms">Forms</a></li>
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Colors"
|
||||
---
|
||||
|
||||
# Colors
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Constrain"
|
||||
---
|
||||
|
||||
# Constrain
|
||||
|
||||
The constrain utilities are simply `max-width` 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;
|
||||
```
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
</button>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<button class="text-medium text-light rounded py-2 px-4 bg-dark @bg-dark-dark mr-4">
|
||||
<button class="text-medium text-light rounded py-2 px-4 bg-dark mr-4">
|
||||
Save
|
||||
</button>
|
||||
<button class="text-medium text-light rounded py-2 px-4 bg-dark-soft mr-4">
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
|
||||
@foreach($page->colors as $color)
|
||||
<div class="mb-4">
|
||||
<button class="text-medium text-light rounded py-2 px-4 bg-{{$color}} @bg-{{$color}}-dark mr-4">
|
||||
<button class="text-medium text-light rounded py-2 px-4 bg-{{$color}} hover:bg-{{$color}}-dark mr-4">
|
||||
Save
|
||||
</button>
|
||||
<button class="text-medium text-light rounded py-2 px-4 bg-{{$color}}-light mr-4">
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
|
||||
@foreach($page->colors as $color)
|
||||
<div class="mb-4">
|
||||
<button class="text-medium text-light rounded py-2 px-4 text-{{$color}}-dark @text-light border border-{{$color}} @bg-{{$color}} mr-4">
|
||||
<button class="text-medium text-light rounded py-2 px-4 text-{{$color}}-dark hover:text-light border border-{{$color}} hover:bg-{{$color}} mr-4">
|
||||
Save
|
||||
</button>
|
||||
<button class="text-medium text-light rounded py-2 px-4 text-{{$color}}-light border border-{{$color}}-light mr-4">
|
||||
|
|
@ -71,7 +71,7 @@
|
|||
|
||||
<h2 class="markdown">Cards</h2>
|
||||
|
||||
<div class="constrain-sm mb-8">
|
||||
<div class="max-w-sm mb-8">
|
||||
<div class="rounded overflow-hidden shadow-3">
|
||||
<img class="fit w-full" src="/img/card-top.jpg" alt="">
|
||||
<div class="px-6 py-4">
|
||||
|
|
@ -88,7 +88,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="constrain-md">
|
||||
<div class="max-w-md">
|
||||
<div class="flex">
|
||||
<div class="rounded-l w-128 text-center overflow-hidden">
|
||||
<img class="h-64" src="/img/card-left.jpg" alt="">
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Flexbox"
|
||||
---
|
||||
|
||||
# Flexbox
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Images"
|
||||
---
|
||||
|
||||
# Images
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Overflow"
|
||||
---
|
||||
|
||||
# Overflow
|
||||
|
||||
The overflow utilities are simply `overflow` property helpers.
|
||||
|
||||
```html
|
||||
<div class="overflow-auto"></div>
|
||||
<div class="overflow-hidden"></div>
|
||||
<div class="overflow-visible"></div>
|
||||
<div class="overflow-scroll"></div>
|
||||
<div class="overflow-scroll-x"></div>
|
||||
<div class="overflow-scroll-y"></div>
|
||||
<div class="mask"></div>
|
||||
```
|
||||
|
||||
```less
|
||||
|
||||
|
||||
div {
|
||||
.overflow-auto;
|
||||
.overflow-hidden;
|
||||
.overflow-visible;
|
||||
.overflow-scroll;
|
||||
.overflow-scroll-x;
|
||||
.overflow-scroll-y;
|
||||
.mask;
|
||||
}
|
||||
```
|
||||
|
||||
Note that `.overflow-hidden` is available in a shorthand called `.mask`.
|
||||
|
||||
## Responsive
|
||||
|
||||
The display utitlies can also be used with <a href="/responsive">responsive</a> prefixes:
|
||||
|
||||
```html
|
||||
<div class="overflow-auto sm:overflow-hidden md:overflow-visible lg:overflow-scroll"></div>
|
||||
```
|
||||
|
||||
```less
|
||||
div {
|
||||
.screen(lg, {
|
||||
.overflow-scroll;
|
||||
});
|
||||
}
|
||||
```
|
||||
|
|
@ -1,243 +0,0 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Text"
|
||||
---
|
||||
|
||||
# Text
|
||||
|
||||
<div class="subnav">
|
||||
<a class="subnav-link" href="#font-family">Family</a>
|
||||
<a class="subnav-link" href="#font-sizes">Sizes</a>
|
||||
<a class="subnav-link" href="#font-weight">Weight</a>
|
||||
<a class="subnav-link" href="#colors">Colors</a>
|
||||
<a class="subnav-link" href="#alignment">Alignment</a>
|
||||
<a class="subnav-link" href="#styles">Styles</a>
|
||||
<a class="subnav-link" href="#line-height">Line height</a>
|
||||
<a class="subnav-link" href="#letter-spacing">Letter spacing</a>
|
||||
</div>
|
||||
|
||||
<h2 id="font-family">Font family</h2>
|
||||
|
||||
```html
|
||||
<div class="sans"></div>
|
||||
<div class="serif"></div>
|
||||
<div class="mono"></div>
|
||||
```
|
||||
|
||||
```less
|
||||
div {
|
||||
.sans;
|
||||
.serif;
|
||||
.mono;
|
||||
}
|
||||
```
|
||||
|
||||
```less
|
||||
// Customize the font stack
|
||||
@font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
|
||||
@font-family-serif: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
|
||||
@font-family-mono: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
|
||||
@font-family-base: @font-family-sans;
|
||||
```
|
||||
|
||||
<h2 id="font-sizes">Font sizes</h2>
|
||||
|
||||
```html
|
||||
<div class="text-xs"></div>
|
||||
<div class="text-sm"></div>
|
||||
<div class="text-base"></div>
|
||||
<div class="text-lg"></div>
|
||||
<div class="text-xl"></div>
|
||||
<div class="text-2xl"></div>
|
||||
<div class="text-3xl"></div>
|
||||
```
|
||||
|
||||
```less
|
||||
div {
|
||||
.text-xs;
|
||||
.text-sm;
|
||||
.text-base;
|
||||
.text-lg;
|
||||
.text-xl;
|
||||
.text-2xl;
|
||||
.text-3xl;
|
||||
}
|
||||
```
|
||||
|
||||
```less
|
||||
// Customize the text size scale
|
||||
@text-size-scale:
|
||||
'xs' @font-size-xs,
|
||||
'sm' @font-size-sm,
|
||||
'base' @font-size-base,
|
||||
'lg' @font-size-lg,
|
||||
'xl' @font-size-xl,
|
||||
'2xl' @font-size-2xl,
|
||||
'3xl' @font-size-3xl,
|
||||
;
|
||||
```
|
||||
|
||||
<h2 id="font-weight">Font weight</h2>
|
||||
|
||||
```html
|
||||
<div class="text-hairline"></div>
|
||||
<div class="text-thin"></div>
|
||||
<div class="text-regular"></div>
|
||||
<div class="text-medium"></div>
|
||||
<div class="text-bold"></div>
|
||||
```
|
||||
|
||||
```less
|
||||
div {
|
||||
.text-hairline;
|
||||
.text-thin;
|
||||
.text-regular;
|
||||
.text-medium;
|
||||
.text-bold;
|
||||
}
|
||||
```
|
||||
|
||||
```less
|
||||
// Customize the text weight scale
|
||||
@text-weight-scale:
|
||||
'hairline' 200,
|
||||
'thin' 300,
|
||||
'regular' 400,
|
||||
'medium' 600,
|
||||
'bold' 700,
|
||||
;
|
||||
```
|
||||
|
||||
<h2 id="colors">Colors</h2>
|
||||
|
||||
```html
|
||||
<div class="text-light"></div>
|
||||
<div class="text-light-soft"></div>
|
||||
<div class="text-light-softer"></div>
|
||||
<div class="text-light-softest"></div>
|
||||
|
||||
<div class="text-dark"></div>
|
||||
<div class="text-dark-soft"></div>
|
||||
<div class="text-dark-softer"></div>
|
||||
<div class="text-dark-softest"></div>
|
||||
```
|
||||
|
||||
```less
|
||||
div {
|
||||
.text-light;
|
||||
.text-light-soft;
|
||||
.text-light-softer;
|
||||
.text-light-softest;
|
||||
|
||||
.text-dark;
|
||||
.text-dark-soft;
|
||||
.text-dark-softer;
|
||||
.text-dark-softest;
|
||||
}
|
||||
```
|
||||
|
||||
```less
|
||||
// Customize the text colors
|
||||
@text-colors:
|
||||
'light' hsl(0, 0%, 100%),
|
||||
'light-soft' hsl(0, 0%, 60%),
|
||||
'light-softer' hsl(0, 0%, 45%),
|
||||
'light-softest' hsl(0, 0%, 35%),
|
||||
|
||||
'dark' hsl(0, 0%, 25%),
|
||||
'dark-soft' hsl(0, 0%, 50%),
|
||||
'dark-softer' hsl(0, 0%, 65%),
|
||||
'dark-softest' hsl(0, 0%, 75%),
|
||||
;
|
||||
```
|
||||
|
||||
<h2 id="alignment">Alignment</h2>
|
||||
|
||||
```less
|
||||
div {
|
||||
// Horizontal
|
||||
.text-center;
|
||||
.text-left;
|
||||
.text-right;
|
||||
.text-justify;
|
||||
|
||||
// Vertical
|
||||
.align-baseline;
|
||||
.align-top;
|
||||
.align-middle;
|
||||
.align-bottom;
|
||||
.align-text-top;
|
||||
.align-text-bottom;
|
||||
}
|
||||
```
|
||||
|
||||
<h2 id="styles">Styles</h2>
|
||||
|
||||
```less
|
||||
div { .text-em; } // Italic
|
||||
div { .text-uppercase; } // Uppercase
|
||||
div { .text-underline; } // Underline
|
||||
div { .text-break; } // Pre line
|
||||
div { .text-no-wrap; } // No wrap
|
||||
div { .text-force-wrap; } // Break word
|
||||
div { .text-smooth; } // Anti-aliased
|
||||
div { .text-strike; } // Line through
|
||||
div { .text-ellipsis; } // Overflow ellipsis
|
||||
div { .text-shadow-solid; } // Shadow
|
||||
```
|
||||
|
||||
<h2 id="line-height">Line height</h2>
|
||||
|
||||
```html
|
||||
<div class="leading-none"></div>
|
||||
<div class="leading-tight"></div>
|
||||
<div class="leading-normal"></div>
|
||||
<div class="leading-loose"></div>
|
||||
```
|
||||
|
||||
```less
|
||||
div {
|
||||
.leading-none;
|
||||
.leading-tight;
|
||||
.leading-normal;
|
||||
.leading-loose;
|
||||
}
|
||||
```
|
||||
|
||||
```less
|
||||
// Set the default line height
|
||||
@line-height: 1.5;
|
||||
|
||||
// Customize the leading scale
|
||||
@leading-scale:
|
||||
'none' 1,
|
||||
'tight' 1.25,
|
||||
'normal' 1.5,
|
||||
'loose' 2,
|
||||
;
|
||||
```
|
||||
|
||||
<h2 id="letter-spacing">Letter spacing</h2>
|
||||
|
||||
```html
|
||||
<div class="tracking-tight"></div>
|
||||
<div class="tracking-normal"></div>
|
||||
<div class="tracking-wide"></div>
|
||||
```
|
||||
|
||||
```less
|
||||
div {
|
||||
.tracking-tight;
|
||||
.tracking-normal;
|
||||
.tracking-wide;
|
||||
}
|
||||
```
|
||||
|
||||
```less
|
||||
// Customize the tracking scale
|
||||
@tracking-scale:
|
||||
'tight' -0.05em,
|
||||
'normal' 0,
|
||||
'wide' 0.1em,
|
||||
;
|
||||
```
|
||||
13
docs/source/utilities/alignment.md
Normal file
13
docs/source/utilities/alignment.md
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Alignment"
|
||||
---
|
||||
|
||||
# Alignment
|
||||
|
||||
<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>
|
||||
|
||||
13
docs/source/utilities/appearance.md
Normal file
13
docs/source/utilities/appearance.md
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Appearance"
|
||||
---
|
||||
|
||||
# Appearance
|
||||
|
||||
<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>
|
||||
|
||||
234
docs/source/utilities/backgrounds/color.md
Normal file
234
docs/source/utilities/backgrounds/color.md
Normal file
|
|
@ -0,0 +1,234 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
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>
|
||||
|
||||
<h2 id="colors">Colors</h2>
|
||||
|
||||
|
||||
<div class="flex flex-wrap pull-x-4 mb-4">
|
||||
<div class="w-full md:w-1/3 px-4">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="bg-light px-6 py-4 text-sm">
|
||||
.bg-light
|
||||
</div>
|
||||
<div class="bg-light-soft px-6 py-4 text-sm">
|
||||
.bg-light-soft
|
||||
</div>
|
||||
<div class="bg-light-softer px-6 py-4 text-sm">
|
||||
.bg-light-softer
|
||||
</div>
|
||||
<div class="bg-light-softest px-6 py-4 text-sm">
|
||||
.bg-light-softest
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3 px-4">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-light bg-dark px-6 py-4 text-sm">
|
||||
.bg-dark
|
||||
</div>
|
||||
<div class="text-light bg-dark-soft px-6 py-4 text-sm">
|
||||
.bg-dark-soft
|
||||
</div>
|
||||
<div class="text-light bg-dark-softer px-6 py-4 text-sm">
|
||||
.bg-dark-softer
|
||||
</div>
|
||||
<div class="text-light bg-dark-softest px-6 py-4 text-sm">
|
||||
.bg-dark-softest
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap pull-x-4 mb-4">
|
||||
<div class="w-full md:w-1/3 px-4">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-light bg-red-dark px-6 py-4 text-sm">
|
||||
.bg-red-dark
|
||||
</div>
|
||||
<div class="text-light bg-red px-6 py-4 text-sm">
|
||||
.bg-red
|
||||
</div>
|
||||
<div class="text-light bg-red-light px-6 py-4 text-sm">
|
||||
.bg-red-light
|
||||
</div>
|
||||
<div class="text-red-dark bg-red-lightest px-6 py-4 text-sm">
|
||||
.bg-red-lightest
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3 px-4">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-light bg-orange-dark px-6 py-4 text-sm">
|
||||
.bg-orange-dark
|
||||
</div>
|
||||
<div class="text-light bg-orange px-6 py-4 text-sm">
|
||||
.bg-orange
|
||||
</div>
|
||||
<div class="text-orange-dark bg-orange-light px-6 py-4 text-sm">
|
||||
.bg-orange-light
|
||||
</div>
|
||||
<div class="text-orange-dark bg-orange-lightest px-6 py-4 text-sm">
|
||||
.bg-orange-lightest
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3 px-4">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-light bg-yellow-dark px-6 py-4 text-sm">
|
||||
.bg-yellow-dark
|
||||
</div>
|
||||
<div class="text-light bg-yellow px-6 py-4 text-sm">
|
||||
.bg-yellow
|
||||
</div>
|
||||
<div class="text-yellow-dark bg-yellow-light px-6 py-4 text-sm">
|
||||
.bg-yellow-light
|
||||
</div>
|
||||
<div class="text-yellow-dark bg-yellow-lightest px-6 py-4 text-sm">
|
||||
.bg-yellow-lightest
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap pull-x-4 mb-4">
|
||||
<div class="w-full md:w-1/3 px-4">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-light bg-green-dark px-6 py-4 text-sm">
|
||||
.bg-green-dark
|
||||
</div>
|
||||
<div class="text-light bg-green px-6 py-4 text-sm">
|
||||
.bg-green
|
||||
</div>
|
||||
<div class="text-green-dark bg-green-light px-6 py-4 text-sm">
|
||||
.bg-green-light
|
||||
</div>
|
||||
<div class="text-green-dark bg-green-lightest px-6 py-4 text-sm">
|
||||
.bg-green-lightest
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3 px-4">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-light bg-teal-dark px-6 py-4 text-sm">
|
||||
.bg-teal-dark
|
||||
</div>
|
||||
<div class="text-light bg-teal px-6 py-4 text-sm">
|
||||
.bg-teal
|
||||
</div>
|
||||
<div class="text-teal-dark bg-teal-light px-6 py-4 text-sm">
|
||||
.bg-teal-light
|
||||
</div>
|
||||
<div class="text-teal-dark bg-teal-lightest px-6 py-4 text-sm">
|
||||
.bg-teal-lightest
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3 px-4">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-light bg-blue-dark px-6 py-4 text-sm">
|
||||
.bg-blue-dark
|
||||
</div>
|
||||
<div class="text-light bg-blue px-6 py-4 text-sm">
|
||||
.bg-blue
|
||||
</div>
|
||||
<div class="text-blue-dark bg-blue-light px-6 py-4 text-sm">
|
||||
.bg-blue-light
|
||||
</div>
|
||||
<div class="text-blue-dark bg-blue-lightest px-6 py-4 text-sm">
|
||||
.bg-blue-lightest
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap pull-x-4 mb-4">
|
||||
<div class="w-full md:w-1/3 px-4">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-light bg-indigo-dark px-6 py-4 text-sm">
|
||||
.bg-indigo-dark
|
||||
</div>
|
||||
<div class="text-light bg-indigo px-6 py-4 text-sm">
|
||||
.bg-indigo
|
||||
</div>
|
||||
<div class="text-indigo-dark bg-indigo-light px-6 py-4 text-sm">
|
||||
.bg-indigo-light
|
||||
</div>
|
||||
<div class="text-indigo-dark bg-indigo-lightest px-6 py-4 text-sm">
|
||||
.bg-indigo-lightest
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3 px-4">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-light bg-purple-dark px-6 py-4 text-sm">
|
||||
.bg-purple-dark
|
||||
</div>
|
||||
<div class="text-light bg-purple px-6 py-4 text-sm">
|
||||
.bg-purple
|
||||
</div>
|
||||
<div class="text-purple-dark bg-purple-light px-6 py-4 text-sm">
|
||||
.bg-purple-light
|
||||
</div>
|
||||
<div class="text-purple-dark bg-purple-lightest px-6 py-4 text-sm">
|
||||
.bg-purple-lightest
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3 px-4">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-light bg-pink-dark px-6 py-4 text-sm">
|
||||
.bg-pink-dark
|
||||
</div>
|
||||
<div class="text-light bg-pink px-6 py-4 text-sm">
|
||||
.bg-pink
|
||||
</div>
|
||||
<div class="text-pink-dark bg-pink-light px-6 py-4 text-sm">
|
||||
.bg-pink-light
|
||||
</div>
|
||||
<div class="text-pink-dark bg-pink-lightest px-6 py-4 text-sm">
|
||||
.bg-pink-lightest
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
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;
|
||||
}
|
||||
```
|
||||
|
||||
13
docs/source/utilities/backgrounds/position.md
Normal file
13
docs/source/utilities/backgrounds/position.md
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Background Position"
|
||||
---
|
||||
|
||||
# Background 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>
|
||||
|
||||
13
docs/source/utilities/backgrounds/size.md
Normal file
13
docs/source/utilities/backgrounds/size.md
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Background Size"
|
||||
---
|
||||
|
||||
# Background Size
|
||||
|
||||
<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>
|
||||
|
||||
77
docs/source/utilities/borders/base.md
Normal file
77
docs/source/utilities/borders/base.md
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Borders"
|
||||
---
|
||||
|
||||
# Borders
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
<h2 id="sizes">Sizes</h2>
|
||||
|
||||
Construct border size utilities 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. By default, borders are `solid`, and use the `@default-border-color`.
|
||||
|
||||
<div class="flex items-start mt-8 text-sm leading-none">
|
||||
<div class="pr-12">
|
||||
<div class="mb-3 text-dark-soft text-uppercase">Class</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">border</code></div>
|
||||
</div>
|
||||
<div class="pl-12 pr-12 border-l">
|
||||
<div class="mb-3 text-dark-soft"><span class="text-uppercase">Side</span> <span class="text-dark-softer text-xs">(optional)</span></div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded bg-light-softer"> </code> All</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">t</code> Top</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">r</code> Right</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">b</code> Bottom</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">l</code> Left</div>
|
||||
</div>
|
||||
<div class="pl-12 border-l">
|
||||
<div class="mb-3 text-dark-soft"><span class="text-uppercase">Width</span> <span class="text-dark-softer text-xs">(optional)</span></div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">0</code> 0px</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded bg-light-softer"> </code> 1px</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">2</code> 2px</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">4</code> 4px</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">8</code> 8px</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### Border size examples
|
||||
|
||||
```html
|
||||
<!-- Add a 1px border to all sides -->
|
||||
<div class="border"></div>
|
||||
|
||||
<!-- Add a 1px border to the top side -->
|
||||
<div class="border-t"></div>
|
||||
|
||||
<!-- Add a 2px border to the top side -->
|
||||
<div class="border-t-2"></div>
|
||||
```
|
||||
|
||||
```less
|
||||
// Using the border size utilities in Less
|
||||
div {
|
||||
.border;
|
||||
.border-t;
|
||||
.border-t-2;
|
||||
}
|
||||
```
|
||||
|
||||
### Customizing border sizes
|
||||
|
||||
You can easily customize the border size utilities using the `@border-width-scale` variable. Please note that the entire scale must be redefined. It's not possible to add a new value to the existing scale.
|
||||
|
||||
```less
|
||||
// The default border width scale
|
||||
@border-width-scale:
|
||||
'0' 0,
|
||||
default 1px,
|
||||
'2' 2px,
|
||||
'4' 4px,
|
||||
'8' 8px,
|
||||
;
|
||||
```
|
||||
56
docs/source/utilities/borders/color.md
Normal file
56
docs/source/utilities/borders/color.md
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Border Color"
|
||||
---
|
||||
|
||||
# Border Color
|
||||
|
||||
<div class="subnav">
|
||||
<a class="subnav-link" href="#color">Color</a>
|
||||
<a class="subnav-link" href="#responsive">Responsive</a>
|
||||
</div>
|
||||
|
||||
<h2 id="colors">Colors</h2>
|
||||
|
||||
By default, borders use the `@default-border-color`. To override a border color, add one of the border color utilities.
|
||||
|
||||
```html
|
||||
<div class="border border-dark"></div>
|
||||
<div class="border border-dark-soft"></div>
|
||||
<div class="border border-dark-softer"></div>
|
||||
|
||||
<div class="border border-light"></div>
|
||||
<div class="border border-light-soft"></div>
|
||||
<div class="border border-light-softer"></div>
|
||||
|
||||
<div class="border border-invisible"></div>
|
||||
```
|
||||
|
||||
```less
|
||||
div {
|
||||
.border-dark;
|
||||
.border-dark-soft;
|
||||
.border-dark-softer;
|
||||
|
||||
.border-light;
|
||||
.border-light-soft;
|
||||
.border-light-softer;
|
||||
|
||||
.border-invisible;
|
||||
}
|
||||
```
|
||||
|
||||
The default border colors can also be modified using the following variables.
|
||||
|
||||
```less
|
||||
// Variable: Default:
|
||||
@border-dark: hsl(0, 0%, 82%);
|
||||
@border-dark-soft: hsl(0, 0%, 90%);
|
||||
@border-dark-softer: hsl(0, 0%, 96%);
|
||||
|
||||
@border-light: hsl(0, 0%, 100%);
|
||||
@border-light-soft: hsl(0, 0%, 60%);
|
||||
@border-light-softer: hsl(0, 0%, 35%);
|
||||
|
||||
@default-border-color: @border-dark-soft;
|
||||
```
|
||||
13
docs/source/utilities/borders/radius.md
Normal file
13
docs/source/utilities/borders/radius.md
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Border Radius"
|
||||
---
|
||||
|
||||
# Border Radius
|
||||
|
||||
<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>
|
||||
|
||||
13
docs/source/utilities/borders/style.md
Normal file
13
docs/source/utilities/borders/style.md
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
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>
|
||||
|
||||
13
docs/source/utilities/container.md
Normal file
13
docs/source/utilities/container.md
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
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>
|
||||
|
||||
|
|
@ -5,13 +5,20 @@ title: "Display"
|
|||
|
||||
# Display
|
||||
|
||||
> If you're looking for flexbox utilities, see the [flexbox](/flexbox) page.
|
||||
<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>
|
||||
|
||||
> If you're looking for Flexbox utilities, see the [Flexbox](/flexbox) page.
|
||||
|
||||
The display utilities simply `display` property helpers.
|
||||
|
||||
```html
|
||||
<!-- Using the utilities in HTML: -->
|
||||
|
||||
<div class="inline"></div>
|
||||
<div class="block"></div>
|
||||
<div class="inline-block"></div>
|
||||
<div class="hidden"></div>
|
||||
|
|
@ -23,19 +30,6 @@ The display utilities simply `display` property helpers.
|
|||
</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:
|
||||
12
docs/source/utilities/flexbox.md
Normal file
12
docs/source/utilities/flexbox.md
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Flexbox"
|
||||
---
|
||||
|
||||
# Flexbox
|
||||
|
||||
<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>
|
||||
12
docs/source/utilities/floats.md
Normal file
12
docs/source/utilities/floats.md
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Floats"
|
||||
---
|
||||
|
||||
# Floats
|
||||
|
||||
<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>
|
||||
12
docs/source/utilities/interactivity/cursor.md
Normal file
12
docs/source/utilities/interactivity/cursor.md
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Cursor"
|
||||
---
|
||||
|
||||
# Cursor
|
||||
|
||||
<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>
|
||||
12
docs/source/utilities/interactivity/pointer-events.md
Normal file
12
docs/source/utilities/interactivity/pointer-events.md
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Pointer Events"
|
||||
---
|
||||
|
||||
# Pointer Events
|
||||
|
||||
<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>
|
||||
12
docs/source/utilities/interactivity/resize.md
Normal file
12
docs/source/utilities/interactivity/resize.md
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Resize"
|
||||
---
|
||||
|
||||
# Resize
|
||||
|
||||
<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>
|
||||
12
docs/source/utilities/interactivity/user-select.md
Normal file
12
docs/source/utilities/interactivity/user-select.md
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "User Select"
|
||||
---
|
||||
|
||||
# User Select
|
||||
|
||||
<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>
|
||||
12
docs/source/utilities/opacity.md
Normal file
12
docs/source/utilities/opacity.md
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Opacity"
|
||||
---
|
||||
|
||||
# Opacity
|
||||
|
||||
<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>
|
||||
12
docs/source/utilities/overflow.md
Normal file
12
docs/source/utilities/overflow.md
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Overflow"
|
||||
---
|
||||
|
||||
# Overflow
|
||||
|
||||
<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>
|
||||
|
|
@ -1,9 +1,15 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Position"
|
||||
title: "Positioning"
|
||||
---
|
||||
|
||||
# Position
|
||||
# Positioning
|
||||
|
||||
<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>
|
||||
|
||||
The position utilities are primarily `position` property helpers.
|
||||
|
||||
12
docs/source/utilities/sizing/height.md
Normal file
12
docs/source/utilities/sizing/height.md
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Height"
|
||||
---
|
||||
|
||||
# Height
|
||||
|
||||
<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>
|
||||
12
docs/source/utilities/sizing/max-height.md
Normal file
12
docs/source/utilities/sizing/max-height.md
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Max-Height"
|
||||
---
|
||||
|
||||
# Max-Height
|
||||
|
||||
<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>
|
||||
12
docs/source/utilities/sizing/max-width.md
Normal file
12
docs/source/utilities/sizing/max-width.md
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Max-Width"
|
||||
---
|
||||
|
||||
# Max-Width
|
||||
|
||||
<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>
|
||||
12
docs/source/utilities/sizing/min-height.md
Normal file
12
docs/source/utilities/sizing/min-height.md
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Min-Height"
|
||||
---
|
||||
|
||||
# Min-Height
|
||||
|
||||
<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>
|
||||
12
docs/source/utilities/sizing/min-width.md
Normal file
12
docs/source/utilities/sizing/min-width.md
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Min-Width"
|
||||
---
|
||||
|
||||
# Min-Width
|
||||
|
||||
<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>
|
||||
12
docs/source/utilities/sizing/width.md
Normal file
12
docs/source/utilities/sizing/width.md
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Width"
|
||||
---
|
||||
|
||||
# Width
|
||||
|
||||
<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>
|
||||
|
|
@ -1,14 +1,14 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Spacing"
|
||||
title: "Margin"
|
||||
---
|
||||
|
||||
# Spacing
|
||||
# Margin
|
||||
|
||||
<div class="subnav">
|
||||
<a class="subnav-link" href="#usage">Usage</a>
|
||||
<a class="subnav-link" href="#customizing">Customizing</a>
|
||||
<a class="subnav-link" href="#responsive">Responsive</a>
|
||||
<a class="subnav-link" href="#customizing">Customizing</a>
|
||||
</div>
|
||||
|
||||
<h2 id="usage">Using</h2>
|
||||
106
docs/source/utilities/spacing/negative-margin.md
Normal file
106
docs/source/utilities/spacing/negative-margin.md
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Negative Margin"
|
||||
---
|
||||
|
||||
# Negative Margin
|
||||
|
||||
<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>
|
||||
|
||||
<h2 id="usage">Using</h2>
|
||||
|
||||
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.
|
||||
|
||||
<div class="flex items-start mt-8 text-sm">
|
||||
<div class="pr-12">
|
||||
<div class="mb-3 text-dark-soft text-uppercase">Class</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">p</code> Padding</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">m</code> Margin</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">pull</code> Negative Margin</div>
|
||||
</div>
|
||||
<div class="pl-12 pr-12 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 mono border rounded">t</code> Top</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">r</code> Right</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">b</code> Bottom</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">l</code> Left</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">x</code> Horizontal</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">y</code> Vertical</div>
|
||||
</div>
|
||||
<div class="pl-12 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 mono border rounded">0</code> 0</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">1</code> 0.25rem</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">2</code> 0.5rem</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">3</code> 0.75rem</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">4</code> 1rem</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">6</code> 1.5rem</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">8</code> 2rem</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="customizing">Customizing the spacing scale</h2>
|
||||
|
||||
You can customize the margin and padding utilities using the `@sizing-scale` variable. Please note that the entire scale must be redefined. It's not possible to add a new value to the existing scale.
|
||||
|
||||
```less
|
||||
// The default sizing scale
|
||||
@sizing-scale:
|
||||
'1' 0.25rem,
|
||||
'2' 0.5rem,
|
||||
'3' 0.75rem,
|
||||
'4' 1rem,
|
||||
'6' 1.5rem,
|
||||
'8' 2rem,
|
||||
'12' 3rem,
|
||||
'16' 4rem,
|
||||
;
|
||||
```
|
||||
|
||||
By default the `@sizing-scale` is automatically applied to the margin, negative margin (pull) and padding scales. However, it's possible to customize each scale individually using the `@margin-scale`, `@pull-scale` and `@padding-scale` variables.
|
||||
|
||||
```less
|
||||
// Override the margin scale
|
||||
@margin-scale:
|
||||
'1' 0.25rem,
|
||||
'2' 0.5rem,
|
||||
// ...
|
||||
;
|
||||
|
||||
// Override the pull scale
|
||||
@pull-scale:
|
||||
'1' 0.25rem,
|
||||
'2' 0.5rem,
|
||||
// ...
|
||||
;
|
||||
|
||||
// Override the padding scale
|
||||
@padding-scale:
|
||||
'1' 0.25rem,
|
||||
'2' 0.5rem,
|
||||
// ...
|
||||
;
|
||||
```
|
||||
|
||||
<h2 id="responsive">Responsive spacing utilities</h2>
|
||||
|
||||
The spacing utilities can also be used with <a href="/responsive">responsive</a> prefixes:
|
||||
|
||||
```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
|
||||
div {
|
||||
.screen(lg, {
|
||||
.mt-6;
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
106
docs/source/utilities/spacing/padding.md
Normal file
106
docs/source/utilities/spacing/padding.md
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Padding"
|
||||
---
|
||||
|
||||
# Padding
|
||||
|
||||
<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>
|
||||
|
||||
<h2 id="usage">Using</h2>
|
||||
|
||||
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.
|
||||
|
||||
<div class="flex items-start mt-8 text-sm">
|
||||
<div class="pr-12">
|
||||
<div class="mb-3 text-dark-soft text-uppercase">Class</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">p</code> Padding</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">m</code> Margin</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">pull</code> Negative Margin</div>
|
||||
</div>
|
||||
<div class="pl-12 pr-12 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 mono border rounded">t</code> Top</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">r</code> Right</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">b</code> Bottom</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">l</code> Left</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">x</code> Horizontal</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">y</code> Vertical</div>
|
||||
</div>
|
||||
<div class="pl-12 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 mono border rounded">0</code> 0</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">1</code> 0.25rem</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">2</code> 0.5rem</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">3</code> 0.75rem</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">4</code> 1rem</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">6</code> 1.5rem</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">8</code> 2rem</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="customizing">Customizing the spacing scale</h2>
|
||||
|
||||
You can customize the margin and padding utilities using the `@sizing-scale` variable. Please note that the entire scale must be redefined. It's not possible to add a new value to the existing scale.
|
||||
|
||||
```less
|
||||
// The default sizing scale
|
||||
@sizing-scale:
|
||||
'1' 0.25rem,
|
||||
'2' 0.5rem,
|
||||
'3' 0.75rem,
|
||||
'4' 1rem,
|
||||
'6' 1.5rem,
|
||||
'8' 2rem,
|
||||
'12' 3rem,
|
||||
'16' 4rem,
|
||||
;
|
||||
```
|
||||
|
||||
By default the `@sizing-scale` is automatically applied to the margin, negative margin (pull) and padding scales. However, it's possible to customize each scale individually using the `@margin-scale`, `@pull-scale` and `@padding-scale` variables.
|
||||
|
||||
```less
|
||||
// Override the margin scale
|
||||
@margin-scale:
|
||||
'1' 0.25rem,
|
||||
'2' 0.5rem,
|
||||
// ...
|
||||
;
|
||||
|
||||
// Override the pull scale
|
||||
@pull-scale:
|
||||
'1' 0.25rem,
|
||||
'2' 0.5rem,
|
||||
// ...
|
||||
;
|
||||
|
||||
// Override the padding scale
|
||||
@padding-scale:
|
||||
'1' 0.25rem,
|
||||
'2' 0.5rem,
|
||||
// ...
|
||||
;
|
||||
```
|
||||
|
||||
<h2 id="responsive">Responsive spacing utilities</h2>
|
||||
|
||||
The spacing utilities can also be used with <a href="/responsive">responsive</a> prefixes:
|
||||
|
||||
```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
|
||||
div {
|
||||
.screen(lg, {
|
||||
.mt-6;
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
12
docs/source/utilities/text/alignment.md
Normal file
12
docs/source/utilities/text/alignment.md
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Text Alignment"
|
||||
---
|
||||
|
||||
# Text Alignment
|
||||
|
||||
<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>
|
||||
12
docs/source/utilities/text/color.md
Normal file
12
docs/source/utilities/text/color.md
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Text Color"
|
||||
---
|
||||
|
||||
# Text 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>
|
||||
34
docs/source/utilities/text/fonts.md
Normal file
34
docs/source/utilities/text/fonts.md
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Font Families"
|
||||
---
|
||||
|
||||
# Font Families
|
||||
|
||||
<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>
|
||||
|
||||
```html
|
||||
<div class="sans"></div>
|
||||
<div class="serif"></div>
|
||||
<div class="mono"></div>
|
||||
```
|
||||
|
||||
```less
|
||||
div {
|
||||
.sans;
|
||||
.serif;
|
||||
.mono;
|
||||
}
|
||||
```
|
||||
|
||||
```less
|
||||
// Customize the font stack
|
||||
@font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
|
||||
@font-family-serif: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
|
||||
@font-family-mono: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
|
||||
@font-family-base: @font-family-sans;
|
||||
```
|
||||
12
docs/source/utilities/text/letter-spacing.md
Normal file
12
docs/source/utilities/text/letter-spacing.md
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Letter Spacing"
|
||||
---
|
||||
|
||||
# Letter Spacing
|
||||
|
||||
<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>
|
||||
12
docs/source/utilities/text/line-height.md
Normal file
12
docs/source/utilities/text/line-height.md
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Line Height"
|
||||
---
|
||||
|
||||
# Line Height
|
||||
|
||||
<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>
|
||||
12
docs/source/utilities/text/sizing.md
Normal file
12
docs/source/utilities/text/sizing.md
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Text Sizing"
|
||||
---
|
||||
|
||||
# Text Sizing
|
||||
|
||||
<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>
|
||||
12
docs/source/utilities/text/style.md
Normal file
12
docs/source/utilities/text/style.md
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Style & Decoration"
|
||||
---
|
||||
|
||||
# Style & Decoration
|
||||
|
||||
<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>
|
||||
12
docs/source/utilities/text/weight.md
Normal file
12
docs/source/utilities/text/weight.md
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Font Weight"
|
||||
---
|
||||
|
||||
# Font Weight
|
||||
|
||||
<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>
|
||||
12
docs/source/utilities/text/wrapping.md
Normal file
12
docs/source/utilities/text/wrapping.md
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Text Wrapping"
|
||||
---
|
||||
|
||||
# Text Wrapping
|
||||
|
||||
<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>
|
||||
12
docs/source/utilities/visibility.md
Normal file
12
docs/source/utilities/visibility.md
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Visibility"
|
||||
---
|
||||
|
||||
# Visibility
|
||||
|
||||
<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>
|
||||
12
docs/source/utilities/z-index.md
Normal file
12
docs/source/utilities/z-index.md
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Z-Index"
|
||||
---
|
||||
|
||||
# Z-Index
|
||||
|
||||
<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>
|
||||
6
docs/source/workflow/adding-new-utilities.md
Normal file
6
docs/source/workflow/adding-new-utilities.md
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Adding New Utilities"
|
||||
---
|
||||
|
||||
# Adding New Utilities
|
||||
6
docs/source/workflow/customizing-tailwind.md
Normal file
6
docs/source/workflow/customizing-tailwind.md
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Customizing Tailwind"
|
||||
---
|
||||
|
||||
# Customizing Tailwind
|
||||
6
docs/source/workflow/extracting-components.md
Normal file
6
docs/source/workflow/extracting-components.md
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Working Utility-First"
|
||||
---
|
||||
|
||||
# Working Utility-First
|
||||
6
docs/source/workflow/responsive-design.md
Normal file
6
docs/source/workflow/responsive-design.md
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Responsive Design"
|
||||
---
|
||||
|
||||
# Responsive Design
|
||||
6
docs/source/workflow/working-utility-first.md
Normal file
6
docs/source/workflow/working-utility-first.md
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Extracting Components"
|
||||
---
|
||||
|
||||
# Extracting Components
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Z-Index"
|
||||
---
|
||||
|
||||
# Z-Index
|
||||
Loading…
Add table
Add a link
Reference in a new issue