spacing.njk 1.67 KB
Newer Older
1
---
Ken Hawkins's avatar
Ken Hawkins committed
2
title: Spacing and sizing
3
date: 2018-10-19 12:24:50
4
section: designtokens
5
templateEngineOverride: njk
6 7 8 9 10
tags:
  - posts
  - sections
  - designtokens
layout: layouts/base.njk
11 12
---

13 14
<h1 class="vf-intro__heading">{{ title }}</h1>

Ken Hawkins's avatar
Ken Hawkins committed
15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
{% set context = {
  "heading": "On this page",
  "classModifier": "on-this-page",
  "activateJavascript": true,
  "navigation": [
    {
      "text": "Spacing",
      "navigation_href": "#spacing",
      "currentSection": true
    },
    {
      "text": "Breakpoints",
      "navigation_href": "#breakpoints"
    }
  ]
}
%}
{% include "vf-core-components/vf-navigation/vf-navigation.njk" %}

Ken Hawkins's avatar
Ken Hawkins committed
34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
<section class="embl-grid">
  {% render '@vf-section-header', {
    "section_title": "Spacing",
    "href": "https://github.com/visual-framework/vf-core/blob/develop/components/vf-design-tokens/dist/sass/custom-properties/vf-spacing.custom-properties.scss",
    "id": "spacing"
  } %}
  <article class="vf-grid vf-grid__col-2">
    {% set type %}spacing{% endset %}
    {% for item in tokens.spacing.properties %}
      {% include "./token-card.njk" %}
    {% else %}
      <p>Something went wrong.</p>
    {% endfor %}
  </article>
</section>
49

Ken Hawkins's avatar
Ken Hawkins committed
50 51 52 53 54 55 56 57 58 59 60 61 62 63 64
<section class="embl-grid">
  {% render '@vf-section-header', {
    "section_title": "Breakpoint widths",
    "href": "https://github.com/visual-framework/vf-core/blob/develop/components/vf-design-tokens/dist/sass/maps/vf-breakpoints.map.scss",
    "id": "breakpoints"
  } %}
  <article class="vf-grid vf-grid__col-2">
    {% set type %}breakpoints{% endset %}
    {% for item in tokens.breakpoints.properties %}
      {% include "./token-card.njk" %}
    {% else %}
      <p>Something went wrong.</p>
    {% endfor %}
  </article>
</section>