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

Added new font family utilities.

Browse Source 
Removed "text-mono" utility.
Renamed "@system-font-stack" variable to "@font-family-system".
This commit is contained in:
Jonathan Reinink 2017-08-15 11:02:01 -04:00
parent eeaa1531b1
commit 7ad9c0b521
4 changed files with 46 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
docs/source/borders.md
View File

@ -20,23 +20,23 @@ Construct border size utilities using the `.border{-side?}{-width?}` syntax. For
<div class="flex flex-top 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 text-mono border rounded">border</code></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 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>
<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">l</code> Left</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded bg-light-softer">&nbsp;</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 text-mono border rounded">0</code> 0px</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>
<div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">4</code> 4px</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">8</code> 8px</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">&nbsp;</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>

32
docs/source/spacing.md
View File

@ -18,28 +18,28 @@ The syntax below is combined to create a system for padding and margins. For exa
<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><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 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">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><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 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">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><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>

13
docs/source/text.md
View File

@ -19,20 +19,25 @@ title: "Text"
<h2 id="font-family">Font family</h2>
```html
<div class="text-mono"></div>
<div class="sans"></div>
<div class="serif"></div>
<div class="mono"></div>
```
```less
div {
.text-mono;
.sans;
.serif;
.mono;
}
```
```less
// Customize the font stack
@system-font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
@font-family-base: @system-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>

14
src/utilities/text.less
View File

@ -1,7 +1,12 @@
// Font family
@system-font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
@font-family-base: @system-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;
.sans { font-family: @font-family-sans; }
.serif { font-family: @font-family-serif; }
.mono { font-family: @font-family-mono; }
// Default line height
@line-height: 1.5;
@ -108,7 +113,6 @@
.text-smooth { -webkit-font-smoothing: antialiased; }
.text-strike { text-decoration: line-through; }
.text-shadow-solid { text-shadow: 0 2px 0 rgba(0,0,0,0.15); }
.text-mono { font-family: @font-family-mono; }
.text-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
@ -116,6 +120,9 @@
}
.responsive({
&text-sans { .sans; }
&text-serif { .serif; }
&text-mono { .mono; }
&text-center { .text-center; }
&text-left { .text-left; }
&text-right { .text-right; }
@ -135,6 +142,5 @@
&text-smooth { .text-smooth; }
&text-strike { .text-strike; }
&text-shadow-solid { .text-shadow-solid; }
&text-mono { .text-mono; }
&text-ellipsis { .text-ellipsis; }
});