Utilities

File: src/scss/_core/utils/_misc_text_and_link.scss
File: src/scss/_core/utils/_misc_zindex.scss
File: src/scss/_core/utils/_misc_line_height.scss
File: src/scss/_core/utils/_misc_grid.scss
File: src/scss/_core/utils/_misc_cursor.scss

Miscellaneous

Class Description Quick Example
Text & Links
.link-muted .text-gray-* .article-format

.text-gray-[100|200|300|400|500|600|700|800|900]

.article-format dedicated class/wrapper for blogs/articles where content is pushed from database/editor. Will add some slightly spacings for a better content look because most html editors will not format the content adding bootstrap dedicated classes. Used by blog, as example.

.link-muted

.text-gray-100

.text-gray-200

.text-gray-300

.text-gray-400

.text-gray-500

.text-gray-600

.text-gray-700

.text-gray-800

.text-gray-900

Red Pulse
.animate-pulse

Only red is available for pulse - useful for emphasizing alerts.



Z-Index
.z-index-n1 .z-index-*

.z-index-n1 = z-index: -1 !important; (negative)
.z-index-[0|1|2|3|4|5|6|7|8|9|10|99|100|1000|9999]

Line Height
.line-height-* .z-index-*

.line-height-[0|1|inherit]

Bordered Grid
.row-grid .ul-grid
Col 1
Col 2
Col 3
Bordered Grid : Separator
.row.col-border .row.col-border-sm .row.col-border-md .row.col-border-lg
Col 1
Col 2
Col 3
Grid : 5 Columns
.col-5th .col-sm-5th .col-md-5th .col-lg-5th .col-xl-5th
Col 1
Col 2
Col 3
Col 4
Col 5
Cursor
.cursor-pointer .cursor-text .cursor-move

Curosrs

.cursor-pointer
.cursor-text
.cursor-move
Arrows
.arrow.arrow-top .arrow.arrow-bottom .arrow.arrow-left .arrow.arrow-right
.arrow.arrow-start .arrow.arrow-end
.arrow-center .arrow-lg

Note: Arrows are not part of Smarty utility. Are part of Components (src/scss/_core/components/), but added here because is more conveninent.

.position-relative is required to parent container.

Arrows color is changed using .border-* utility classes to match any .bg-*

Additionally, can be slightly positioned using .mt-* if margin top is needed.

Example:
<i class="arrow arrow-lg arrow-top arrow-center border-light"></i>

.arrow-left and .arrow-end are used for both: RTL & LTR. See RTL section to understand.

default, all arrows
.arrow-lg, all arrows
.arrow .arrow-start .border-primary-soft
.arrow .arrow-lg .arrow-bottom .border-warning-soft
.arrow .arrow-lg .arrow-top .border-pink

Grid Spacing (Gutters)

Class Description Quick Example
Added By Smarty
.gutters-xxs .gutters-xs .gutters-sm .gutters-md .gutters-lg .gutters-xl
Bootstrap
.no-gutters
Responsive : mobile only (max "md")
.gutters-xxs--xs .gutters-xs--xs .gutters-sm--xs .gutters-md--xs

Gutters SCSS: _core/utils/_misc_grid.scss
Also configurable in _variables.scss

gutters-xxs= .125rem (match .m-1)
gutters-xs= .25rem (match .m-2)
gutters-sm= .5rem (match .m-3)
gutters-md= .75rem (match .m-4)
gutters-lg= 1.5rem (match .m-5)
gutters-xl= 3rem (match nothing)

.gutters-xxs
.gutters-xxs
.gutters-xs
.gutters-xs
.gutters-sm
.gutters-sm
gutters-md
gutters-md
.gutters-lg
.gutters-lg
.gutters-xl
.gutters-xl

Grid Notebook-Like

Class Description
.grid-notebook

SCSS: _core/utils/_misc_grid.scss
A single CSS class, dynamic adjusted according to $font-size-base variable (body font-size)
Can be added to an editable div, textarea (including using .medium-editor). 

<!--
data-btn-*="false"   = medium editor disabled headings -->
<textarea class="medium-editor grid-notebook shadow-primary-xs rounded border mx-auto min-h-50vh w-100 max-w-600"
	data-btn-h1="false" 
	data-btn-h5="false" 
	data-btn-h6="false">
	Lorem Ipsum
</textarea>