diff --git a/demo/index.html b/demo/index.html index 7db3448..2253f50 100644 --- a/demo/index.html +++ b/demo/index.html @@ -43,6 +43,11 @@
  • + + Utilities + +
    • +
  • Editable String @@ -151,6 +156,7 @@ @@include("partials/palette.html") @@include("partials/buttons.html") @@include("partials/forms.html") + @@include("partials/utilities.html") @@include("partials/editable-string.html") @@include("partials/navigation-overlays.html") @@include("partials/lists.html") diff --git a/demo/partials/utilities.html b/demo/partials/utilities.html new file mode 100644 index 0000000..919bb79 --- /dev/null +++ b/demo/partials/utilities.html @@ -0,0 +1,175 @@ +
    +

    Utilities

    +

    + Utilities дают предсказуемую систему отступов, размеров, раскладки и текстовых правок без создания новых компонентов. + Spacing scale используется и в SCSS-переменных, и в utility-классах. +

    + +
    +

    Spacing scale

    + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Spacing tokens
    TokenValueAliasUtility examples
    $space-00-m-0 p-0 g-0
    $space-15px$space-xsmt-1 px-1
    $space-28px$space-smmb-2 g-2
    $space-312px-p-3 gy-3
    $space-415px$space-mdmx-4 gx-4
    $space-518px-pt-5 pb-5
    $space-622px$space-lgmy-6 g-6
    $space-834px$space-xlmt-8 p-8
    $space-1048px$space-xxlmb-10 py-10
    $space-1280px-mt-12 pb-12
    +
    +
    + +
    +

    Utility groups

    + +
    +
    +
    Margin
    +
    + m-* + mt-* + mr-* + mb-* + ml-* + mx-* + my-* +
    +
    +
    +
    Padding
    +
    + p-* + pt-* + pr-* + pb-* + pl-* + px-* + py-* +
    +
    +
    +
    Gap
    +
    + g-* + gx-* + gy-* +
    +
    +
    +
    Layout
    +
    + row + column + f-grid + grid + grid-2 + grid-3 +
    +
    +
    +
    Alignment
    +
    + items-center + justify-between + justify-end +
    +
    +
    +
    Text
    +
    + fs-sm + text-center + text-uppercase + text-nowrap +
    +
    +
    +
    + +
    +

    Spacing preview

    + +
    +
    g-4
    +
    p-5
    +
    px-6 py-3
    +
    +
    + +
    +
    + Utilities HTML + +
    + 
    <div class="grid-2 g-4 items-center">
+  <div class="p-5">Panel</div>
+  <div class="px-6 py-3 text-right">Actions</div>
+</div>
    +
    +
    diff --git a/src/scss/_spacing.scss b/src/scss/_spacing.scss index a71076e..f5cfdfe 100644 --- a/src/scss/_spacing.scss +++ b/src/scss/_spacing.scss @@ -36,7 +36,9 @@ 7: $space-7, 8: $space-8, 9: $space-9, - 10: $space-10 + 10: $space-10, + 11: $space-11, + 12: $space-12 ); /* ========================= diff --git a/src/scss/_utils.scss b/src/scss/_utils.scss index 5cbf423..efa26e9 100644 --- a/src/scss/_utils.scss +++ b/src/scss/_utils.scss @@ -41,6 +41,14 @@ .g-#{$key} { gap: $value !important; } + + .gx-#{$key} { + column-gap: $value !important; + } + + .gy-#{$key} { + row-gap: $value !important; + } } .row { @@ -54,16 +62,71 @@ } } +.column { + display: flex; + flex-direction: column; +} + .f-grid { display: flex; flex-direction: row; flex-wrap: wrap; } +.grid { + display: grid; +} + +.grid-2 { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); +} + +.grid-3 { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); +} + +.items-start { + align-items: flex-start !important; +} + +.items-center { + align-items: center !important; +} + +.items-end { + align-items: flex-end !important; +} + +.justify-start { + justify-content: flex-start !important; +} + +.justify-center { + justify-content: center !important; +} + +.justify-between { + justify-content: space-between !important; +} + +.justify-end { + justify-content: flex-end !important; +} + .w-100 { width: 100%; } +.w-auto { + width: auto !important; +} + +.w-fit { + width: fit-content !important; +} + .w-200 { width: 200%; } @@ -72,6 +135,18 @@ height: 100%; } +.min-w-0 { + min-width: 0 !important; +} + +.overflow-hidden { + overflow: hidden !important; +} + +.overflow-auto { + overflow: auto !important; +} + $font-sizes: ( xs: $font-size-xs, sm: $font-size-sm, @@ -87,6 +162,49 @@ } } +.text-left { + text-align: left !important; +} + +.text-center { + text-align: center !important; +} + +.text-right { + text-align: right !important; +} + +.text-uppercase { + text-transform: uppercase !important; +} + +.text-nowrap { + white-space: nowrap !important; +} + .d-none { display: none !important; } + +.d-block { + display: block !important; +} + +.d-inline-flex { + display: inline-flex !important; +} + +.d-flex { + display: flex !important; +} + +.d-grid { + display: grid !important; +} + +@include media_down("md") { + .grid-2, + .grid-3 { + grid-template-columns: 1fr; + } +}