{
    "componentChunkName": "component---src-templates-doc-template-js",
    "path": "/tr/docs/utils",
    "result": {"data":{"current":{"fields":{"page":{"path":"/docs/utils","type":"docs","lang":"en","layout":"docs","versions":[{"lang":"en","title":"Utilities","markdown":"\nGralig provides few utility classes for help you a little bit faster development.\n## Text\n\n<div class=\"gra-doc-s-wrapper\">\n  <div class=\"gra-table-wrapper\">\n    <table class=\"gra-table gra-table-bordered\">\n      <thead>\n        <tr>\n          <th>Class Name</th>\n          <th>Contains</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr>\n          <td><code>.gra-center-text</code></td>\n          <td><code>text-align: center</code></td>\n        </tr>\n        <tr>\n          <td><code>.gra-right-text</code></td>\n          <td><code>text-align: right</code></td>\n        </tr>\n        <tr>\n          <td><code>.gra-left-text</code></td>\n          <td><code>text-align: left</code></td>\n        </tr>\n        <tr>\n          <td><code>.gra-bold-text</code></td>\n          <td><code>text-weight: bold</code></td>\n        </tr>\n        <tr>\n          <td><code>.gra-normal-text</code></td>\n          <td><code>text-weight: normal</code></td>\n        </tr>\n        <tr>\n          <td><code>.gra-thin-text</code></td>\n          <td><code>text-weight: lighter</code></td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n\n## Display\n\n<div class=\"gra-doc-s-wrapper\">\n  <div class=\"gra-table-wrapper\">\n    <table class=\"gra-table gra-table-bordered\">\n      <thead>\n        <tr>\n          <th>Class Name</th>\n          <th>Contains</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr>\n          <td><code>.gra-none</code></td>\n          <td><code>display: none</code></td>\n        </tr>\n        <tr>\n          <td><code>.gra-block</code></td>\n          <td><code>display: block</code></td>\n        </tr>\n        <tr>\n          <td><code>.gra-inline</code></td>\n          <td><code>display: inline</code></td>\n        </tr>\n        <tr>\n          <td><code>.gra-inline-block</code></td>\n          <td><code>display: inline-block</code></td>\n        </tr>\n        <tr>\n          <td><code>.gra-flex</code></td>\n          <td><code>display: flex</code></td>\n        </tr>\n        <tr>\n          <td><code>.gra-flex-col</code></td>\n          <td><code>flex-direction: column</code></td>\n        </tr>\n        <tr>\n          <td><code>.gra-flex-row</code></td>\n          <td><code>flex-direction: row</code></td>\n        </tr>\n        <tr>\n          <td><code>.gra-flex-ai-c</code></td>\n          <td><code>align-items: center</code></td>\n        </tr>\n        <tr>\n          <td><code>.gra-flex-ai-start</code></td>\n          <td><code>align-items: flex-start</code></td>\n        </tr>\n        <tr>\n          <td><code>.gra-flex-ai-end</code></td>\n          <td><code>align-items: flex-end</code></td>\n        </tr>\n        <tr>\n          <td><code>.gra-flex-ai-sb</code></td>\n          <td><code>align-items: space-between</code></td>\n        </tr>\n        <tr>\n          <td><code>.gra-flex-jc-c</code></td>\n          <td><code>justify-content: center</code></td>\n        </tr>\n        <tr>\n          <td><code>.gra-flex-jc-start</code></td>\n          <td><code>justify-content: flex-start</code></td>\n        </tr>\n        <tr>\n          <td><code>.gra-flex-jc-end</code></td>\n          <td><code>justify-content: flex-end</code></td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n\n## Position\n\n<div class=\"gra-doc-s-wrapper\">\n  <div class=\"gra-table-wrapper\">\n    <table class=\"gra-table gra-table-bordered\">\n      <thead>\n        <tr>\n          <th>Class Name</th>\n          <th>Contains</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr>\n          <td><code>.gra-absolute</code></td>\n          <td><code>position: absolute</code></td>\n        </tr>\n        <tr>\n          <td><code>.gra-relative</code></td>\n          <td><code>position: relative</code></td>\n        </tr>\n        <tr>\n          <td><code>.gra-fixed</code></td>\n          <td><code>position: fixed</code></td>\n        </tr>\n        <tr>\n          <td><code>.gra-sticky</code></td>\n          <td><code>position: sticky</code></td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n\n## Spacing\n\n### Paddings\n\n<div class=\"gra-doc-s-wrapper\">\n  <div class=\"gra-table-wrapper\">\n    <table class=\"gra-table gra-table-bordered\">\n      <thead>\n        <tr>\n          <th>Class Name</th>\n          <th>Contains</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr>\n          <td><code>.gra-pd-left-xxs</code></td>\n          <td>\n            <code>padding-left: $space-xxs</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-left-xs</code></td>\n          <td>\n            <code>padding-left: $space-xs</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-left-s</code></td>\n          <td>\n            <code>padding-left: $space-s</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-left-m</code></td>\n          <td>\n            <code>padding-left: $space-m</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-left-l</code></td>\n          <td>\n            <code>padding-left: $space-l</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-left-xl</code></td>\n          <td>\n            <code>padding-left: $space-xl</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-left-xxl</code></td>\n          <td>\n            <code>padding-left: $space-xxl</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-right-xxs</code></td>\n          <td>\n            <code>padding-right: $space-xxs</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-right-xs</code></td>\n          <td>\n            <code>padding-right: $space-xs</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-right-s</code></td>\n          <td>\n            <code>padding-right: $space-s</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-right-m</code></td>\n          <td>\n            <code>padding-right: $space-m</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-right-l</code></td>\n          <td>\n            <code>padding-right: $space-l</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-right-xl</code></td>\n          <td>\n            <code>padding-right: $space-xl</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-right-xxl</code></td>\n          <td>\n            <code>padding-right: $space-xxl</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-top-xxs</code></td>\n          <td>\n            <code>padding-top: $space-xxs</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-top-xs</code></td>\n          <td>\n            <code>padding-top: $space-xs</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-top-s</code></td>\n          <td>\n            <code>padding-top: $space-s</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-top-m</code></td>\n          <td>\n            <code>padding-top: $space-m</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-top-l</code></td>\n          <td>\n            <code>padding-top: $space-l</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-top-xl</code></td>\n          <td>\n            <code>padding-top: $space-xl</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-top-xxl</code></td>\n          <td>\n            <code>padding-top: $space-xxl</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-bottom-xxs</code></td>\n          <td>\n            <code>padding-bottom: $space-xxs</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-bottom-xs</code></td>\n          <td>\n            <code>padding-bottom: $space-xs</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-bottom-s</code></td>\n          <td>\n            <code>padding-bottom: $space-s</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-bottom-m</code></td>\n          <td>\n            <code>padding-bottom: $space-m</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-bottom-l</code></td>\n          <td>\n            <code>padding-bottom: $space-l</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-bottom-xl</code></td>\n          <td>\n            <code>padding-bottom: $space-xl</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-bottom-xxl</code></td>\n          <td>\n            <code>padding-bottom: $space-xxl</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-inline-xxs</code></td>\n          <td>\n            <code>padding-left: $space-xxs</code></br>\n            <code>padding-right: $space-xxs</code>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-inline-xs</code></td>\n          <td>\n            <code>padding-left: $space-xs</code></br>\n            <code>padding-right: $space-xs</code>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-inline-s</code></td>\n          <td>\n            <code>padding-left: $space-s</code></br>\n            <code>padding-right: $space-s</code>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-inline-m</code></td>\n          <td>\n            <code>padding-left: $space-m</code></br>\n            <code>padding-right: $space-m</code>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-inline-l</code></td>\n          <td>\n            <code>padding-left: $space-l</code></br>\n            <code>padding-right: $space-l</code>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-inline-xl</code></td>\n          <td>\n            <code>padding-left: $space-xl</code></br>\n            <code>padding-right: $space-xl</code>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-inline-xxl</code></td>\n          <td>\n            <code>padding-left: $space-xxl</code></br>\n            <code>padding-right: $space-xxl</code>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-block-xxs</code></td>\n          <td>\n            <code>padding-top: $space-xxs</code></br>\n            <code>padding-bottom: $space-xxs</code>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-block-xs</code></td>\n          <td>\n            <code>padding-top: $space-xs</code></br>\n            <code>padding-bottom: $space-xs</code>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-block-s</code></td>\n          <td>\n            <code>padding-top: $space-s</code></br>\n            <code>padding-bottom: $space-s</code>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-block-m</code></td>\n          <td>\n            <code>padding-top: $space-m</code></br>\n            <code>padding-bottom: $space-m</code>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-block-l</code></td>\n          <td>\n            <code>padding-top: $space-l</code></br>\n            <code>padding-bottom: $space-l</code>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-block-xl</code></td>\n          <td>\n            <code>padding-top: $space-xl</code></br>\n            <code>padding-bottom: $space-xl</code>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-block-xxl</code></td>\n          <td>\n            <code>padding-top: $space-xxl</code></br>\n            <code>padding-bottom: $space-xxl</code>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-all-xxs</code></td>\n          <td>\n            <code>padding-top: $space-xxs</code></br>\n            <code>padding-right: $space-xxs</code></br>\n            <code>padding-bottom: $space-xxs</code></br>\n            <code>padding-left: $space-xxs</code>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-all-xs</code></td>\n          <td>\n            <code>padding-top: $space-xs</code></br>\n            <code>padding-right: $space-xs</code></br>\n            <code>padding-bottom: $space-xs</code></br>\n            <code>padding-left: $space-xs</code>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-all-s</code></td>\n          <td>\n            <code>padding-top: $space-s</code></br>\n            <code>padding-right: $space-s</code></br>\n            <code>padding-bottom: $space-s</code></br>\n            <code>padding-left: $space-s</code>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-all-m</code></td>\n          <td>\n            <code>padding-top: $space-m</code></br>\n            <code>padding-right: $space-m</code></br>\n            <code>padding-bottom: $space-m</code></br>\n            <code>padding-left: $space-m</code>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-all-l</code></td>\n          <td>\n            <code>padding-top: $space-l</code></br>\n            <code>padding-right: $space-l</code></br>\n            <code>padding-bottom: $space-l</code></br>\n            <code>padding-left: $space-l</code>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-all-xl</code></td>\n          <td>\n            <code>padding-top: $space-xl</code></br>\n            <code>padding-right: $space-xl</code></br>\n            <code>padding-bottom: $space-xl</code></br>\n            <code>padding-left: $space-xl</code>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-pd-all-xxl</code></td>\n          <td>\n            <code>padding-top: $space-xxl</code></br>\n            <code>padding-right: $space-xxl</code></br>\n            <code>padding-bottom: $space-xxl</code></br>\n            <code>padding-left: $space-xxl</code>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n\n### Margins\n\n<div class=\"gra-doc-s-wrapper\">\n  <div class=\"gra-table-wrapper\">\n    <table class=\"gra-table gra-table-bordered\">\n      <thead>\n        <tr>\n          <th>Class Name</th>\n          <th>Contains</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr>\n          <td><code>.gra-mg-left-xxs</code></td>\n          <td>\n            <code>margin-left: $space-xxs</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-left-xs</code></td>\n          <td>\n            <code>margin-left: $space-xs</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-left-s</code></td>\n          <td>\n            <code>margin-left: $space-s</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-left-m</code></td>\n          <td>\n            <code>margin-left: $space-m</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-left-l</code></td>\n          <td>\n            <code>margin-left: $space-l</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-left-xl</code></td>\n          <td>\n            <code>margin-left: $space-xl</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-left-xxl</code></td>\n          <td>\n            <code>margin-left: $space-xxl</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-right-xxs</code></td>\n          <td>\n            <code>margin-right: $space-xxs</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-right-xs</code></td>\n          <td>\n            <code>margin-right: $space-xs</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-right-s</code></td>\n          <td>\n            <code>margin-right: $space-s</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-right-m</code></td>\n          <td>\n            <code>margin-right: $space-m</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-right-l</code></td>\n          <td>\n            <code>margin-right: $space-l</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-right-xl</code></td>\n          <td>\n            <code>margin-right: $space-xl</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-right-xxl</code></td>\n          <td>\n            <code>margin-right: $space-xxl</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-top-xxs</code></td>\n          <td>\n            <code>margin-top: $space-xxs</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-top-xs</code></td>\n          <td>\n            <code>margin-top: $space-xs</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-top-s</code></td>\n          <td>\n            <code>margin-top: $space-s</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-top-m</code></td>\n          <td>\n            <code>margin-top: $space-m</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-top-l</code></td>\n          <td>\n            <code>margin-top: $space-l</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-top-xl</code></td>\n          <td>\n            <code>margin-top: $space-xl</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-top-xxl</code></td>\n          <td>\n            <code>margin-top: $space-xxl</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-bottom-xxs</code></td>\n          <td>\n            <code>margin-bottom: $space-xxs</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-bottom-xs</code></td>\n          <td>\n            <code>margin-bottom: $space-xs</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-bottom-s</code></td>\n          <td>\n            <code>margin-bottom: $space-s</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-bottom-m</code></td>\n          <td>\n            <code>margin-bottom: $space-m</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-bottom-l</code></td>\n          <td>\n            <code>margin-bottom: $space-l</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-bottom-xl</code></td>\n          <td>\n            <code>margin-bottom: $space-xl</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-bottom-xxl</code></td>\n          <td>\n            <code>margin-bottom: $space-xxl</code></br>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-inline-xxs</code></td>\n          <td>\n            <code>margin-left: $space-xxs</code></br>\n            <code>margin-right: $space-xxs</code>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-inline-xs</code></td>\n          <td>\n            <code>margin-left: $space-xs</code></br>\n            <code>margin-right: $space-xs</code>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-inline-s</code></td>\n          <td>\n            <code>margin-left: $space-s</code></br>\n            <code>margin-right: $space-s</code>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-inline-m</code></td>\n          <td>\n            <code>margin-left: $space-m</code></br>\n            <code>margin-right: $space-m</code>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-inline-l</code></td>\n          <td>\n            <code>margin-left: $space-l</code></br>\n            <code>margin-right: $space-l</code>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-inline-xl</code></td>\n          <td>\n            <code>margin-left: $space-xl</code></br>\n            <code>margin-right: $space-xl</code>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-inline-xxl</code></td>\n          <td>\n            <code>margin-left: $space-xxl</code></br>\n            <code>margin-right: $space-xxl</code>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-block-xxs</code></td>\n          <td>\n            <code>margin-top: $space-xxs</code></br>\n            <code>margin-bottom: $space-xxs</code>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-block-xs</code></td>\n          <td>\n            <code>margin-top: $space-xs</code></br>\n            <code>margin-bottom: $space-xs</code>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-block-s</code></td>\n          <td>\n            <code>margin-top: $space-s</code></br>\n            <code>margin-bottom: $space-s</code>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-block-m</code></td>\n          <td>\n            <code>margin-top: $space-m</code></br>\n            <code>margin-bottom: $space-m</code>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-block-l</code></td>\n          <td>\n            <code>margin-top: $space-l</code></br>\n            <code>margin-bottom: $space-l</code>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-block-xl</code></td>\n          <td>\n            <code>margin-top: $space-xl</code></br>\n            <code>margin-bottom: $space-xl</code>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-block-xxl</code></td>\n          <td>\n            <code>margin-top: $space-xxl</code></br>\n            <code>margin-bottom: $space-xxl</code>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-all-xxs</code></td>\n          <td>\n            <code>margin-top: $space-xxs</code></br>\n            <code>margin-right: $space-xxs</code></br>\n            <code>margin-bottom: $space-xxs</code></br>\n            <code>margin-left: $space-xxs</code>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-all-xs</code></td>\n          <td>\n            <code>margin-top: $space-xs</code></br>\n            <code>margin-right: $space-xs</code></br>\n            <code>margin-bottom: $space-xs</code></br>\n            <code>margin-left: $space-xs</code>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-all-s</code></td>\n          <td>\n            <code>margin-top: $space-s</code></br>\n            <code>margin-right: $space-s</code></br>\n            <code>margin-bottom: $space-s</code></br>\n            <code>margin-left: $space-s</code>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-all-m</code></td>\n          <td>\n            <code>margin-top: $space-m</code></br>\n            <code>margin-right: $space-m</code></br>\n            <code>margin-bottom: $space-m</code></br>\n            <code>margin-left: $space-m</code>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-all-l</code></td>\n          <td>\n            <code>margin-top: $space-l</code></br>\n            <code>margin-right: $space-l</code></br>\n            <code>margin-bottom: $space-l</code></br>\n            <code>margin-left: $space-l</code>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-all-xl</code></td>\n          <td>\n            <code>margin-top: $space-xl</code></br>\n            <code>margin-right: $space-xl</code></br>\n            <code>margin-bottom: $space-xl</code></br>\n            <code>margin-left: $space-xl</code>\n          </td>\n        </tr>\n        <tr>\n          <td><code>.gra-mg-all-xxl</code></td>\n          <td>\n            <code>margin-top: $space-xxl</code></br>\n            <code>margin-right: $space-xxl</code></br>\n            <code>margin-bottom: $space-xxl</code></br>\n            <code>margin-left: $space-xxl</code>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n\n## Colors\n\n<div class=\"gra-doc-s-wrapper\">\n  <div class=\"gra-table-wrapper\">\n    <table class=\"gra-table gra-table-bordered\">\n      <thead>\n        <tr>\n          <th>Class Name</th>\n          <th>Contains</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr>\n          <td><code>.gra-blue-color</code></td>\n          <td><code>color: $color-blue</code></td>\n        </tr>\n        <tr>\n          <td><code>.gra-green-color</code></td>\n          <td><code>color: $color-green</code></td>\n        </tr>\n        <tr>\n          <td><code>.gra-yellow-color</code></td>\n          <td><code>color: $color-yellow</code></td>\n        </tr>\n        <tr>\n          <td><code>.gra-red-color</code></td>\n          <td><code>color: $color-red</code></td>\n        </tr>\n        <tr>\n          <td><code>.gra-blue-bg</code></td>\n          <td><code>background-color: $color-blue</code></td>\n        </tr>\n        <tr>\n          <td><code>.gra-green-bg</code></td>\n          <td><code>background-color: $color-green</code></td>\n        </tr>\n        <tr>\n          <td><code>.gra-yellow-bg</code></td>\n          <td><code>background-color: $color-yellow</code></td>\n        </tr>\n        <tr>\n          <td><code>.gra-red-bg</code></td>\n          <td><code>background-color: $color-red</code></td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n\n## Others\n\n<div class=\"gra-doc-s-wrapper\">\n  <div class=\"gra-table-wrapper\">\n    <table class=\"gra-table gra-table-bordered\">\n      <thead>\n        <tr>\n          <th>Class Name</th>\n          <th>Contains</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr>\n          <td><code>.gra-width-100</code></td>\n          <td><code>width: 100%</code></td>\n        </tr>\n        <tr>\n          <td><code>.gra-height-100</code></td>\n          <td><code>height: 100%</code></td>\n        </tr>\n        <tr>\n          <td><code>.gra-bg-cover</code></td>\n          <td><code>background-size: cover</code></td>\n        </tr>\n        <tr>\n          <td><code>.gra-bg-contain</code></td>\n          <td><code>background-size: contain</code></td>\n        </tr>\n        <tr>\n          <td><code>.gra-bg-norepeat</code></td>\n          <td><code>background-repeat: no-repeat</code></td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>","mdtype":"MDHTML","section":"utils"}]}}},"site":{"siteMetadata":{"siteUrl":"https://gralig.netlify.app"}}},"pageContext":{"relativePath":"docs/utils/en.md","language":"tr","intl":{"language":"tr","languages":["en","tr"],"messages":{"404.pagenotfound":"Sayfa Bulunamadı","404.emptyroute":"Aradığınız sayfa muhtemelen değiştirildi ya da kaldırıldı.","404.gotodocs":"Dökümanlara Dön","404.gotohome":"Ana Sayfaya Dön","title":"Gralig CSS","description":"Sade, grimsi CSS Kütüphanesi","summary":"Gralig sade, gri tonlu bir CSS kütüphanesi. Bu kütüphaneyi başlangıç yardımcınız olarak kullanabilirsiniz.","author":"@erenesto","keywords":"css, css kütüphanesi, frontend, ui, tasarım, gri, basit css","pages.404":"Hata 404","pages.index":"Gralig CSS","pages.docs":"Gralig Dökümantasyonu","sidenavLinks.docs.name":"Giriş","sidenavLinks.colors.name":"Renkler","sidenavLinks.grid.name":"Izgara(Grid)","sidenavLinks.dark.name":"Karanlık Mod","sidenavLinks.vars.name":"Değişkenler","sidenavLinks.responsive.name":"Mobil Uyumluluk","sidenavLinks.utils.name":"Yardımcılar","sidenavLinks.typography.name":"Tipografi","sidenavLinks.button.name":"Buton","sidenavLinks.form.name":"Form","sidenavLinks.custom-inputs.name":"Özel Inputlar","sidenavLinks.checkbox.name":"Onay Butonu","sidenavLinks.radio.name":"Radyo Buton","sidenavLinks.switch.name":"Anahtar","sidenavLinks.nav.name":"Navigasyon","sidenavLinks.navbar.name":"Navigasyon Barı","sidenavLinks.footer.name":"Altbilgi Barı","sidenavLinks.breadcrumb.name":"Gezinti Menüsü","sidenavLinks.card.name":"Kart","sidenavLinks.alert.name":"Uyarı","sidenavLinks.list.name":"Liste","sidenavLinks.table.name":"Tablo","sidenavLinks.dropdown.name":"Açılır Liste","sidenavLinks.progress.name":"İlerleme","sidenavLinks.loading.name":"Bekleme","sidenavLinks.modal.name":"Açılır Pencere","words.copy":"Kopyala","words.copied":"Kopyalandı!","words.docs":"Döküman","words.builtwith":"ile yapıldı."},"routed":true,"originalPath":"/docs/utils","redirect":false,"defaultLanguage":"en"}}},
    "staticQueryHashes": ["63159454"]}