archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Switch to proportional spacing scale

Browse Source
This commit is contained in:
Adam Wathan 2017-08-03 21:51:12 -04:00
parent 9e2f8186b6
commit f5e529aeff
5 changed files with 36 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/source/_assets/less/markdown.less
View File

@ -1,7 +1,7 @@
.markdown {
.subnav {
.flex;
.mt-5;
.mt-6;
.pb-2;
.border-b;
@ -42,8 +42,8 @@
}
h2 {
.mt-8;
.mb-6;
.mt-16;
.mb-8;
.leading-none;
.text-dark-softer;
.text-thin;
@ -52,7 +52,7 @@
}
p {
.mt-6;
.mt-8;
.mb-3;
}
}

10
docs/source/_layouts/master.blade.php
View File

@ -9,7 +9,7 @@
<script type="text/javascript" src="/js/prism.js" defer=""></script>
</head>
<body class="full-height flex-col">
<header class="px-6 py-5 bg-primary">
<header class="px-8 py-6 bg-primary">
<div class="flex-y-center">
<svg class="mr-2" style="height: 34px; width: auto;" xmlns="http://www.w3.org/2000/svg" viewBox="173.345 95.819 442.976 281.173">
<path fill="#ffffff" d="M173.345 188.574l100.745 78.263-.216 110.155 80.33-53.23-28.388-26.996 111.5 80.226L616.32 95.82l-442.975 92.754zM576.58 122.36L331.837 278.67l-39.912 67.82.622-86.155 284.03-137.974z"/>
@ -21,14 +21,14 @@
</div>
</header>
<div class="flex flex-fill">
<nav class="px-6 pb-6 bg-light-softer text-light text-sm leading-loose" style="flex: 0 0 12rem;">
<div class="mt-6 mb-1 text-dark-softer text-uppercase text-xs">Introduction</div>
<nav class="px-8 pb-8 bg-light-softer text-light text-sm leading-loose" style="flex: 0 0 12rem;">
<div class="mt-8 mb-1 text-dark-softer text-uppercase text-xs">Introduction</div>
<ul>
<li><a class="{{ $page->getUrl() === '/' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/">Welcome</a></li>
<li><a class="{{ $page->getUrl() === '/installation' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/installation">Installation</a></li>
<li><a class="{{ $page->getUrl() === '/principles' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/principles">Principles</a></li>
</ul>
<div class="mt-6 mb-1 text-dark-softer text-uppercase text-xs">Utilities</div>
<div class="mt-8 mb-1 text-dark-softer text-uppercase text-xs">Utilities</div>
<ul>
<li><a class="{{ $page->getUrl() === '/backgrounds' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/backgrounds">Backgrounds</a></li>
<li><a class="{{ $page->getUrl() === '/borders' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/borders">Borders</a></li>
@ -43,7 +43,7 @@
<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 markdown">
<div class="p-12 constrain-lg markdown">
@yield('content')
</div>
</div>

8
docs/source/borders.md
View File

@ -17,12 +17,12 @@ title: "Borders"
Construct border size utilities using the <code class="inline">.border-side-width</code> syntax. For example, <code class="inline">.border</code> would add a <code class="inline">1px</code> border to the element, where <code class="inline">.border-b-3</code> would add a <code class="inline">4px</code> bottom border to the element. Note that that the default border style is <code class="inline">solid</code>, and will get the <code class="inline">@border-default-color</code> applied.
<div class="flex flex-top mt-6 text-sm">
<div class="pr-7">
<div class="flex flex-top 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 text-mono border rounded">border</code></div>
</div>
<div class="pl-7 pr-7 border-l">
<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 text-mono border rounded bg-light-softer">&nbsp;</code> All</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">t</code> Top</div>
@ -30,7 +30,7 @@ Construct border size utilities using the <code class="inline">.border-side-widt
<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">l</code> Left</div>
</div>
<div class="pl-7 border-l">
<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 text-mono border rounded bg-light-softer">&nbsp;</code> 1px</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">2</code> 2px</div>

12
docs/source/spacing.md
View File

@ -7,14 +7,14 @@ title: "Spacing"
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.
<div class="flex flex-top mt-6 text-sm">
<div class="pr-7">
<div class="flex flex-top 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 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="pl-7 pr-7 border-l">
<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 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>
@ -23,15 +23,15 @@ The syntax below is combined to create a system for padding and margins. For exa
<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 class="pl-7 border-l">
<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 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>
<div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">3</code> 0.75rem</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">4</code> 1rem</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">5</code> 1.5rem</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">6</code> 2rem</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">6</code> 1.5rem</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">8</code> 2rem</div>
</div>
</div>

50
src/utilities/spacing.less
View File

@ -1,38 +1,22 @@
@spacer-0: 0;
@spacer-1: 0.25rem;
@spacer-2: 0.5rem;
@spacer-3: 0.75rem;
@spacer-4: 1rem;
@spacer-5: 1.5rem;
@spacer-6: 2rem;
@spacer-7: 3rem;
@spacer-8: 4rem;
@spacer-9: 5rem;
@spacer-10: 6rem;
@spacer-11: 8rem;
@spacer-12: 10rem;
@spacer-13: 15rem;
@spacer-14: 20rem;
@spacer-15: 30rem;
@spacing-scale:
'px' 1px,
'0' @spacer-0,
'1' @spacer-1,
'2' @spacer-2,
'3' @spacer-3,
'4' @spacer-4,
'5' @spacer-5,
'6' @spacer-6,
'7' @spacer-7,
'8' @spacer-8,
'9' @spacer-9,
'10' @spacer-10,
'11' @spacer-11,
'12' @spacer-12,
'13' @spacer-13,
'14' @spacer-14,
'15' @spacer-15;
'0' 0,
'1' 0.25rem,
'2' 0.5rem,
'3' 0.75rem,
'4' 1rem,
'6' 1.5rem,
'8' 2rem,
'12' 3rem,
'16' 4rem,
'20' 5rem,
'24' 6rem,
'32' 8rem,
'40' 10rem,
'60' 15rem,
'80' 20rem,
'120' 30rem,
;
@padding-scale: @spacing-scale;
@margin-scale: @spacing-scale;