From dafbd7d128ceac9dffa483529adccd78eeb6f9ea Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Sun, 19 Nov 2017 15:36:54 -0500 Subject: [PATCH] Swap hand-coded tables for class table partial in typography docs pages --- docs/source/_partials/class-table.blade.php | 8 +- docs/source/docs/font-weight.blade.md | 107 +++++++------- docs/source/docs/fonts.blade.md | 52 +++---- docs/source/docs/letter-spacing.blade.md | 47 +++--- docs/source/docs/line-height.blade.md | 57 +++----- docs/source/docs/text-alignment.blade.md | 62 +++----- docs/source/docs/text-color.blade.md | 33 ++--- docs/source/docs/text-sizing.blade.md | 112 +++++++------- docs/source/docs/text-style.blade.md | 138 ++++++++---------- .../docs/whitespace-and-wrapping.blade.md | 106 ++++++-------- 10 files changed, 304 insertions(+), 418 deletions(-) diff --git a/docs/source/_partials/class-table.blade.php b/docs/source/_partials/class-table.blade.php index 17b225d58..12f6e51c4 100644 --- a/docs/source/_partials/class-table.blade.php +++ b/docs/source/_partials/class-table.blade.php @@ -1,5 +1,5 @@
-
+
@@ -11,9 +11,9 @@ @foreach ($rows as $row) - - - + + + @endforeach diff --git a/docs/source/docs/font-weight.blade.md b/docs/source/docs/font-weight.blade.md index ad6a6cc21..8e32b5c8a 100644 --- a/docs/source/docs/font-weight.blade.md +++ b/docs/source/docs/font-weight.blade.md @@ -11,61 +11,52 @@ features: @include('_partials.work-in-progress') -
-
{{ $row[0] }}{{ $row[1] }}{{ $row[2] }}{!! $row[0] !!}{!! $row[1] !!}{!! $row[2] !!}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassPropertiesDescription
.font-hairlinefont-weight: 100;Set the font weight of an element to hairline.
.font-thinfont-weight: 200;Set the font weight of an element to thin.
.font-lightfont-weight: 300;Set the font weight of an element to light.
.font-normalfont-weight: 400;Set the font weight of an element to normal.
.font-mediumfont-weight: 500;Set the font weight of an element to medium.
.font-semiboldfont-weight: 600;Set the font weight of an element to semibold.
.font-boldfont-weight: 700;Set the font weight of an element to bold.
.font-extraboldfont-weight: 800;Set the font weight of an element to extrabold.
.font-blackfont-weight: 900;Set the font weight of an element to black.
-
+@include('_partials.class-table', [ + 'rows' => [ + [ + '.font-hairline', + 'font-weight: 100;', + 'Set the font weight of an element to hairline.', + ], + [ + '.font-thin', + 'font-weight: 200;', + 'Set the font weight of an element to thin.', + ], + [ + '.font-light', + 'font-weight: 300;', + 'Set the font weight of an element to light.', + ], + [ + '.font-normal', + 'font-weight: 400;', + 'Set the font weight of an element to normal.', + ], + [ + '.font-medium', + 'font-weight: 500;', + 'Set the font weight of an element to medium.', + ], + [ + '.font-semibold', + 'font-weight: 600;', + 'Set the font weight of an element to semibold.', + ], + [ + '.font-bold', + 'font-weight: 700;', + 'Set the font weight of an element to bold.', + ], + [ + '.font-extrabold', + 'font-weight: 800;', + 'Set the font weight of an element to extrabold.', + ], + [ + '.font-black', + 'font-weight: 900;', + 'Set the font weight of an element to black.', + ], + ] +]) diff --git a/docs/source/docs/fonts.blade.md b/docs/source/docs/fonts.blade.md index 404405a57..78f2659fe 100644 --- a/docs/source/docs/fonts.blade.md +++ b/docs/source/docs/fonts.blade.md @@ -11,36 +11,22 @@ features: @include('_partials.work-in-progress') -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassPropertiesDescription
.font-sansfont-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;Set the font family to the sans font stack.
.font-seriffont-family: Constantia, Lucida Bright, Lucidabright, Lucida Serif, Lucida, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif;Set the font family to the serif font stack.
.font-monofont-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;Set the font family to the mono font stack.
-
+@include('_partials.class-table', [ + 'rows' => [ + [ + '.font-sans', + "font-family:\n -apple-system,\n BlinkMacSystemFont,\n Segoe UI,\n Roboto,\n Oxygen,\n Ubuntu,\n Cantarell,\n Fira Sans,\n Droid Sans,\n Helvetica Neue,\n sans-serif;", + 'Set the font family to the sans font stack.', + ], + [ + '.font-serif', + "font-family:\n Constantia,\n Lucida Bright,\n Lucidabright,\n Lucida Serif,\n Lucida,\n DejaVu Serif,\n Bitstream Vera Serif,\n Liberation Serif,\n Georgia,\n serif;", + 'Set the font family to the serif font stack.', + ], + [ + '.font-mono', + "font-family:\n Menlo,\n Monaco,\n Consolas,\n Liberation Mono,\n Courier New,\n monospace;", + 'Set the font family to the mono font stack.', + ], + ] +]) diff --git a/docs/source/docs/letter-spacing.blade.md b/docs/source/docs/letter-spacing.blade.md index 7103bce87..af5a523fa 100644 --- a/docs/source/docs/letter-spacing.blade.md +++ b/docs/source/docs/letter-spacing.blade.md @@ -11,31 +11,22 @@ features: @include('_partials.work-in-progress') -
- - - - - - - - - - - - - - - - - - - - - - - - - -
ClassPropertiesDescription
.tracking-tightletter-spacing: -0.05em;Set the letter spacing of an element to -0.05em.
.tracking-normalletter-spacing: 0;Set the letter spacing of an element to 0.
.tracking-wideletter-spacing: 0.05em;Set the letter spacing of an element to 0.05em.
-
+@include('_partials.class-table', [ + 'rows' => [ + [ + '.tracking-tight', + 'letter-spacing: -0.05em;', + 'Set the letter spacing of an element to -0.05em.', + ], + [ + '.tracking-normal', + 'letter-spacing: 0;', + 'Set the letter spacing of an element to 0.', + ], + [ + '.tracking-wide', + 'letter-spacing: 0.05em;', + 'Set the letter spacing of an element to 0.05em.', + ], + ] +]) diff --git a/docs/source/docs/line-height.blade.md b/docs/source/docs/line-height.blade.md index 408b11351..2f31a286d 100644 --- a/docs/source/docs/line-height.blade.md +++ b/docs/source/docs/line-height.blade.md @@ -11,36 +11,27 @@ features: @include('_partials.work-in-progress') -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassPropertiesDescription
.leading-noneline-height: 1;Set the line height of an element to 1.
.leading-tightline-height: 1.25;Set the line height of an element to 1.25.
.leading-normalline-height: 1.5;Set the line height of an element to 1.5.
.leading-looseline-height: 2;Set the line height of an element to 2.
-
+@include('_partials.class-table', [ + 'rows' => [ + [ + '.leading-none', + 'line-height: 1;', + 'Set the line height of an element to 1.', + ], + [ + '.leading-tight', + 'line-height: 1.25;', + 'Set the line height of an element to 1.25.', + ], + [ + '.leading-normal', + 'line-height: 1.5;', + 'Set the line height of an element to 1.5.', + ], + [ + '.leading-loose', + 'line-height: 2;', + 'Set the line height of an element to 2.', + ], + ] +]) diff --git a/docs/source/docs/text-alignment.blade.md b/docs/source/docs/text-alignment.blade.md index ea1af84a0..3307b06bb 100644 --- a/docs/source/docs/text-alignment.blade.md +++ b/docs/source/docs/text-alignment.blade.md @@ -11,41 +11,27 @@ features: @include('_partials.work-in-progress') -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassPropertiesDescription
.text-lefttext-align: left;Align text to the left.
.text-centertext-align: center;Align text to the center.
.text-righttext-align: right;Align text to the right.
.text-justifytext-align: justify;Justify text.
-
+@include('_partials.class-table', [ + 'rows' => [ + [ + '.text-left', + 'text-align: left;', + 'Align text to the left.', + ], + [ + '.text-center', + 'text-align: center;', + 'Align text to the center.', + ], + [ + '.text-right', + 'text-align: right;', + 'Align text to the right.', + ], + [ + '.text-justify', + 'text-align: justify;', + 'Justify text.', + ], + ] +]) diff --git a/docs/source/docs/text-color.blade.md b/docs/source/docs/text-color.blade.md index 2be6db5d8..255282216 100644 --- a/docs/source/docs/text-color.blade.md +++ b/docs/source/docs/text-color.blade.md @@ -11,26 +11,19 @@ features: @include('_partials.work-in-progress') -
- - - - - - - - - - @foreach ($page->config['colors'] as $name => $value) - - - - - - @endforeach - -
ClassPropertiesDescription
.text-{{ $name }}color: {{ $value }};Set the text color of an element to {{ implode(' ', array_reverse(explode('-', $name))) }}.
-
+@include('_partials.class-table', [ + 'rows' => $page->config['colors']->map(function ($value, $name) { + $class = ".text-{$name}"; + $code = "color: {$value};"; + $color = implode(' ', array_reverse(explode('-', $name))); + $description = "Set the text color of an element to {$color}."; + return [ + $class, + $code, + $description, + ]; + })->values()->all() +]) ## Hover diff --git a/docs/source/docs/text-sizing.blade.md b/docs/source/docs/text-sizing.blade.md index c95931532..46649ce25 100644 --- a/docs/source/docs/text-sizing.blade.md +++ b/docs/source/docs/text-sizing.blade.md @@ -11,66 +11,52 @@ features: @include('_partials.work-in-progress') -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassPropertiesDescription
.text-xsfont-size: .75rem;Set the text size to .75rem (12px).
.text-smfont-size: .875rem;Set the text size to .875rem (14px).
.text-basefont-size: 1rem;Set the text size to 1rem (16px).
.text-lgfont-size: 1.125rem;Set the text size to 1.125rem (18px).
.text-xlfont-size: 1.25rem;Set the text size to 1.25rem (20px).
.text-2xlfont-size: 1.5rem;Set the text size to 1.5rem (24px).
.text-3xlfont-size: 1.875rem;Set the text size to 1.875rem (30px).
.text-4xlfont-size: 2.25rem;Set the text size to 2.25rem (36px).
.text-5xlfont-size: 3rem;Set the text size to 3rem (48px).
-
+@include('_partials.class-table', [ + 'rows' => [ + [ + '.text-xs', + 'font-size: .75rem;', + 'Set the text size to .75rem (12px).', + ], + [ + '.text-sm', + 'font-size: .875rem;', + 'Set the text size to .875rem (14px).', + ], + [ + '.text-base', + 'font-size: 1rem;', + 'Set the text size to 1rem (16px).', + ], + [ + '.text-lg', + 'font-size: 1.125rem;', + 'Set the text size to 1.125rem (18px).', + ], + [ + '.text-xl', + 'font-size: 1.25rem;', + 'Set the text size to 1.25rem (20px).', + ], + [ + '.text-2xl', + 'font-size: 1.5rem;', + 'Set the text size to 1.5rem (24px).', + ], + [ + '.text-3xl', + 'font-size: 1.875rem;', + 'Set the text size to 1.875rem (30px).', + ], + [ + '.text-4xl', + 'font-size: 2.25rem;', + 'Set the text size to 2.25rem (36px).', + ], + [ + '.text-5xl', + 'font-size: 3rem;', + 'Set the text size to 3rem (48px).', + ], + ] +]) diff --git a/docs/source/docs/text-style.blade.md b/docs/source/docs/text-style.blade.md index 7106b6422..ae4ffaf50 100644 --- a/docs/source/docs/text-style.blade.md +++ b/docs/source/docs/text-style.blade.md @@ -11,85 +11,65 @@ features: @include('_partials.work-in-progress') -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassPropertiesDescription
.italicfont-style: italic;Italicizes the text within an element.
.romanfont-style: normal;Sets the text to roman (disables italics) within an element.
.uppercasetext-transform: uppercase;Makes all text uppercase within an element.
.lowercasetext-transform: lowercase;Makes all text lowercase within an element.
.capitalizetext-transform: capitalize;Capitalizes the text within an element.
.normal-casetext-transform: none;Disables any text transformations previously applied to an element.
.underlinetext-decoration: underline;Underlines the text within an element.
.line-throughtext-decoration: line-through;Adds a line through the text within an element.
.no-underlinetext-decoration: none;Disables any text decorations previously applied to an element.
.antialiased - -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale; - 		Set the font smoothing of an element to antialiased.
.subpixel-antialiased - -webkit-font-smoothing: auto;
- -moz-osx-font-smoothing: auto; - 		Set the font smoothing of an element to subpixel antialiasing (the default).
-
+@include('_partials.class-table', [ + 'rows' => [ + [ + '.italic', + 'font-style: italic;', + 'Italicizes the text within an element.', + ], + [ + '.roman', + 'font-style: normal;', + 'Sets the text to roman (disables italics) within an element.', + ], + [ + '.uppercase', + 'text-transform: uppercase;', + 'Makes all text uppercase within an element.', + ], + [ + '.lowercase', + 'text-transform: lowercase;', + 'Makes all text lowercase within an element.', + ], + [ + '.capitalize', + 'text-transform: capitalize;', + 'Capitalizes the text within an element.', + ], + [ + '.normal-case', + 'text-transform: none;', + 'Disables any text transformations previously applied to an element.', + ], + [ + '.underline', + 'text-decoration: underline;', + 'Underlines the text within an element.', + ], + [ + '.line-through', + 'text-decoration: line-through;', + 'Adds a line through the text within an element.', + ], + [ + '.no-underline', + 'text-decoration: none;', + 'Disables any text decorations previously applied to an element.', + ], + [ + '.antialiased', + "-webkit-font-smoothing: antialiased;\n-moz-osx-font-smoothing: grayscale;", + 'Set the font smoothing of an element to antialiased.', + ], + [ + '.subpixel-antialiased', + "-webkit-font-smoothing: auto;\n-moz-osx-font-smoothing: auto;", + 'Set the font smoothing of an element to subpixel antialiasing (the default).', + ], + ] +]) ## Hover diff --git a/docs/source/docs/whitespace-and-wrapping.blade.md b/docs/source/docs/whitespace-and-wrapping.blade.md index d66a88532..32dc0dba9 100644 --- a/docs/source/docs/whitespace-and-wrapping.blade.md +++ b/docs/source/docs/whitespace-and-wrapping.blade.md @@ -11,65 +11,47 @@ features: @include('_partials.work-in-progress') -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassPropertiesDescription
.whitespace-normalwhite-space: normal;Cause text to wrap normally within an element.
.whitespace-no-wrapwhite-space: nowrap;Prevent text from wrapping within an element.
.whitespace-prewhite-space: pre;Preserve line returns and spaces within an element.
.whitespace-pre-linewhite-space: pre-line;Preserve line returns but not spaces within an element.
.whitespace-pre-wrapwhite-space: pre-wrap;Preserve spaces but not line returns within an element.
.break-wordsword-wrap: break-word;Add line breaks mid-word if needed.
.break-normalword-wrap: normal;Only add line breaks at normal word break points.
.truncate - overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap; - 		Truncate overflowing text with an ellipsis (…) if needed.
-
+@include('_partials.class-table', [ + 'rows' => [ + [ + '.whitespace-normal', + 'white-space: normal;', + 'Cause text to wrap normally within an element.', + ], + [ + '.whitespace-no-wrap', + 'white-space: nowrap;', + 'Prevent text from wrapping within an element.', + ], + [ + '.whitespace-pre', + 'white-space: pre;', + 'Preserve line returns and spaces within an element.', + ], + [ + '.whitespace-pre-line', + 'white-space: pre-line;', + 'Preserve line returns but not spaces within an element.', + ], + [ + '.whitespace-pre-wrap', + 'white-space: pre-wrap;', + 'Preserve spaces but not line returns within an element.', + ], + [ + '.break-words', + 'word-wrap: break-word;', + 'Add line breaks mid-word if needed.', + ], + [ + '.break-normal', + 'word-wrap: normal;', + 'Only add line breaks at normal word break points.', + ], + [ + '.truncate', + "overflow: hidden;\ntext-overflow: ellipsis;\nwhite-space", + 'Truncate overflowing text with an ellipsis (…) if needed.', + ], + ] +])