150 lines
6.5 KiB
Plaintext
150 lines
6.5 KiB
Plaintext
|
---
|
|||
|
title: 'Styleguide'
|
|||
|
permalink: /styleguide/
|
|||
|
---
|
|||
|
|
|||
|
{% extends 'layouts/base.njk' %}
|
|||
|
|
|||
|
{# Intro content #}
|
|||
|
{% set introHeading = title %}
|
|||
|
|
|||
|
{% block head %}
|
|||
|
<style>
|
|||
|
.swatches {
|
|||
|
display: grid;
|
|||
|
grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
|
|||
|
grid-gap: 2.5rem 2rem;
|
|||
|
margin-left: 0;
|
|||
|
}
|
|||
|
|
|||
|
.swatches > * {
|
|||
|
margin-top: 0 !important;
|
|||
|
}
|
|||
|
|
|||
|
.props dt {
|
|||
|
font-weight: 600;
|
|||
|
}
|
|||
|
|
|||
|
.props dd + dt {
|
|||
|
margin-top: 0.5rem;
|
|||
|
display: block;
|
|||
|
}
|
|||
|
|
|||
|
.color {
|
|||
|
border: 1px solid var(--color-mid);
|
|||
|
}
|
|||
|
|
|||
|
.bg-dark code {
|
|||
|
color: var(--color-light);
|
|||
|
}
|
|||
|
</style>
|
|||
|
{% endblock %}
|
|||
|
{% block content %}
|
|||
|
<main id="main-content" tabindex="-1">
|
|||
|
{% include "partials/components/intro.njk" %}
|
|||
|
<article class="[ inner-wrapper ] [ post ]">
|
|||
|
<section class="[ post__body ] [ sf-flow ] [ pad-top-900 pad-bottom-900 ]">
|
|||
|
<h2>Colours</h2>
|
|||
|
<p class="visually-hidden">Colour swatches with various values that you can copy.</p>
|
|||
|
<ul class="swatches">
|
|||
|
{% for color in styleguide.colors() %}
|
|||
|
<li class="sf-flow">
|
|||
|
<div class="[ color ] [ pad-top-900 pad-bottom-900 ]" style="background: {{ color.value }}"></div>
|
|||
|
<h3 class="font-base text-500">{{ color.key }}</h3>
|
|||
|
<dl class="props">
|
|||
|
<dt>Value</dt>
|
|||
|
<dd><code>{{ color.value }}</code></dd>
|
|||
|
<dt>Sass function</dt>
|
|||
|
<dd><code>get-color('{{ color.key }}')</code></dd>
|
|||
|
<dt>Custom Property</dt>
|
|||
|
<dd><code>var(--color-{{ color.key }})</code></dd>
|
|||
|
<dt>Text util class</dt>
|
|||
|
<dd><code>color-{{ color.key }}</code></dd>
|
|||
|
<dt>Background util class</dt>
|
|||
|
<dd><code>bg-{{ color.key }}</code></dd>
|
|||
|
</dl>
|
|||
|
</li>
|
|||
|
{% endfor %}
|
|||
|
</ul>
|
|||
|
<h2>Fonts</h2>
|
|||
|
<h3>Base — System stack</h3>
|
|||
|
<p class="sf-flow">
|
|||
|
<span aria-hidden="true" role="presentation" class="font-base text-600 md:text-800 box-block leading-tight">The quick brown fox jumps over the lazy fox</span>
|
|||
|
<code>.font-base</code>
|
|||
|
</p>
|
|||
|
<h3>Serif — Lora</h3>
|
|||
|
<p class="sf-flow">
|
|||
|
<span aria-hidden="true" role="presentation" class="font-serif text-600 md:text-800 box-block leading-tight">The quick brown fox jumps over the lazy fox</span>
|
|||
|
<code>.font-serif</code>
|
|||
|
</p>
|
|||
|
<h2>Text sizes</h2>
|
|||
|
<p>Text sizes are available as standard classes or media query prefixed, such as <code>lg:text-500</code>.</p>
|
|||
|
{% for size in styleguide.sizes() %}
|
|||
|
<p class="text-{{ size.key }}" style="--flow-space: 1.5rem">{{ size.value }} - <code>text-{{ size.key }}</code></p>
|
|||
|
{% endfor %}
|
|||
|
<h2>Spacing</h2>
|
|||
|
<p>There’s size ratio utilities that give you margin (<code>gap-top, gap-bottom</code>) and padding (<code>pad-top, pad-left, pad-bottom</code>).
|
|||
|
<h3>Margin</h3>
|
|||
|
<p class="visually-hidden">Margin token classes that you can copy</p>
|
|||
|
<div>
|
|||
|
{% for size in styleguide.sizes() %}
|
|||
|
<div class="[ bg-dark color-light pad-top-base pad-bottom-base pad-left-base md:width-half ] [ gap-top-{{ size.key }} ]">
|
|||
|
<code>gap-top-{{ size.key }}</code>
|
|||
|
</div>
|
|||
|
{% endfor %}
|
|||
|
</div>
|
|||
|
<h3>Padding</h3>
|
|||
|
<p class="visually-hidden">Padding token classes that you can copy</p>
|
|||
|
{% for size in styleguide.sizes() %}
|
|||
|
<div class="[ bg-dark pad-left-base color-light md:width-half ] [ pad-top-{{ size.key }} ]">
|
|||
|
<code>pad-top-{{ size.key }}</code>
|
|||
|
</div>
|
|||
|
<div class="[ bg-dark pad-left-base color-light md:width-half ] [ pad-bottom-{{ size.key }} ]">
|
|||
|
<code>pad-bottom-{{ size.key }}</code>
|
|||
|
</div>
|
|||
|
<div class="[ bg-dark color-light md:width-half ] [ pad-left-{{ size.key }} ]">
|
|||
|
<code>pad-left-{{ size.key }}</code>
|
|||
|
</div>
|
|||
|
{% endfor %}
|
|||
|
|
|||
|
<h2>Forms</h2>
|
|||
|
{% from "macros/form.njk" import label, field, textarea, confirm, select, radios, checkboxes, hidden_field, button %}
|
|||
|
<form>
|
|||
|
<ol class="[ field-list ]">
|
|||
|
<li class="[ field-list__field-group ]">
|
|||
|
{{ label("Text Label", "field-text-name") }}
|
|||
|
{{ field( "text", "field-text-name", { required: true, placeholder: "Katherine Johnson", autocomplete: "name", autocorrect: "off", autocapitalize: "off", description: "Optional description. Note: This field type can take any valid input type." } ) }}
|
|||
|
</li>
|
|||
|
<li class="[ field-list__field-group ]">
|
|||
|
{{ label("Email Label", "field-email-name") }}
|
|||
|
{{ field( "email", "field-email-name", { required: true, placeholder: "katherine@johnson.tld", autocomplete: "email" } ) }}
|
|||
|
</li>
|
|||
|
<li class="[ field-list__field-group ]">
|
|||
|
{{ label("Textarea Label", "field-textarea-name") }}
|
|||
|
{{ textarea( "field-textarea-name", { required: true, autocapitalize: "sentences", spellcheck: "true" } ) }}
|
|||
|
</li>
|
|||
|
<li class="[ field-list__field-group ]">
|
|||
|
{{ label("Select Label", "field-select-name") }}
|
|||
|
{{ select( "select", [ "option 1", {label: "Option II", value: "option 2"} ], { required: true, options_before: ["prepended option"], options_after: ["appended option"], description: "Optional description." } ) }}
|
|||
|
</li>
|
|||
|
<li class="[ field-list__field-group field-list__field-group--confirm ]">
|
|||
|
{{ confirm("Confirm this statement", "confirm") }}
|
|||
|
</li>
|
|||
|
<li class="[ field-list__field-group ]">
|
|||
|
{{ radios("Radio Legend", "field-radio-name", [ "Yes", { label: "Not really", value: "No", note: "Note about choice." } ], { description: "Optional description." } ) }}
|
|||
|
</li>
|
|||
|
<li class="[ field-list__field-group ]">
|
|||
|
{{ checkboxes("Checkbox Legend", "field-checkbox-name", [ "Choice 1", { label: "Choice 2", value: "Choice 2", note: "Note about choice." }, "Choice 3" ], { description: "Optional description." } ) }}
|
|||
|
</li>
|
|||
|
<li class="[ field-list__field-group ]">
|
|||
|
There is a hidden field here…
|
|||
|
{{ hidden_field("hidden-name", "hidden-value") }}
|
|||
|
</li>
|
|||
|
</ol>
|
|||
|
{{ button("Button Text") }}
|
|||
|
</form>
|
|||
|
</section>
|
|||
|
</article>
|
|||
|
</main>
|
|||
|
{% endblock %}
|