diff options
-rw-r--r-- | docs/utilities/text.html | 7 | ||||
-rw-r--r-- | src/_layout.scss | 2 | ||||
-rw-r--r-- | src/utilities/_text.scss | 12 |
3 files changed, 21 insertions, 0 deletions
diff --git a/docs/utilities/text.html b/docs/utilities/text.html index 81d3575..476c46f 100644 --- a/docs/utilities/text.html +++ b/docs/utilities/text.html @@ -234,8 +234,15 @@ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-bold"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-comment"><!-- Italicized text --></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-italic"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-comment"><!-- Muted text --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-muted"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-comment"><!-- Larger text (120%) --></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-large"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-comment"><!-- Smaller text (90%) --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-small"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-comment"><!-- Tiny text (80%) --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-tiny"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-comment"><!-- Overflow behavior: display an ellipsis to represent clipped text --></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-ellipsis"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> diff --git a/src/_layout.scss b/src/_layout.scss index 1f6b77c..e6bad9a 100644 --- a/src/_layout.scss +++ b/src/_layout.scss @@ -39,6 +39,7 @@ } // Responsive grid system +.cols, .columns { display: flex; flex-wrap: wrap; @@ -59,6 +60,7 @@ overflow-x: auto; } } +[class~="col-"], .column { flex: 1; max-width: 100%; diff --git a/src/utilities/_text.scss b/src/utilities/_text.scss index 67793ac..5796905 100644 --- a/src/utilities/_text.scss +++ b/src/utilities/_text.scss @@ -46,6 +46,18 @@ font-size: 1.2em; } +.text-small { + font-size: .9em; +} + +.text-tiny { + font-size: .8em; +} + +.text-muted { + opacity: .8; +} + // Text overflow utilities .text-ellipsis { @include text-ellipsis(); |