Design System

This design system helps me build quickly, efficiently, and scalably. It is a tool in progress, built on top of TailwindCSS, Alpine JS, and a few other goodies you can read about in the Colophon.

Colour

Brand

Primary
The primary brand colour is used for main interactive elements like CTAs.

Secondary
The secondary brand colour is used mostly in supporting circumstances like background colours.

Tertiary
The tertiary brand colour is used mostly in supporting circumstances like background colours.

Supporting

Gray-100
Highlights and decorative use only.

Gray-300
Decorative elements like coloured backgrounds.

Gray-800
Text, some non-decorative elements.

Communicating

Info
Used for general info type dialogs.

Warning
Used for warnings and caution.

Error
Used for errors.

Success
Used for success.

Typography

Typeface

.font-primary - Use the primary font, Merriweather.

.font-secondary - Use the secondary font, UI Monospace.

Headings

Name	Weight	Font-size	Line-height	With `.h#-spaced`/`.h-default`
H1	700	3rem	1	margin-top:12 margin-bottom: 3
H2	700	2.25rem	2.5rem	margin-top:10 margin-bottom: 3
H3	700	1.875rem	2.25rem	margin-top:10 margin-bottom: 3
H4	400	1.5rem	2rem	margin-top:10 margin-bottom: 3
H5	400	1.25rem	1.75rem	margin-top:10 margin-bottom: 3
H6	400	1.125rem	1.75rem	margin-top:10 margin-bottom: 3

Supporting styles

.prose - Adds default sizes, margins, etc, to child p, ol, and ul tags, making writing long-winded chunks much easier.

.h#-spaced - replacing the number with the appropriate H style uses its margin styles.

.h-default - Uses default H styles and margins on all child H styles. Used mostly in articles where the designing of individual children items isn't going to be finicky.

Alerts

Badges

Buttons

.button-primary

Cards

.card-default - no padding, minimal shadow

.card-feature - padding included, larger shadow

Footnotes

Enabling

Must include littlefoot.css in header of pages and footnotes.js in footer when footnotes are desired. This is currently handled by the "footnotes = true" option in page frontmatter and if anything isn't working this is the most likely area to investigate.

Usage

Add where a footnote is desired, adjusting the "1" to the appropriate number:
<a href="#fn:1" class="footnote">[1]</a>

Then, an aside must be added to the end of the page containing the footnote content. It always lived here, we're just allowing users to reference it in context.
<aside class="footnotes"> <hr> <ol> <li id="fn:1"> This is footnote number 1. <a href="#fnref:1" class="reversefootnote"> ↩</a> </li> <li id="fn:2"> This is footnote number 2. <a href="#fnref:2" class="reversefootnote"> ↩</a> </li> </ol> </aside>

For more info, see Goblindegook's Littlefoot page on Github.

Example

This is text with a footnote ^[1] and some more text with a footnote on the end ^[2]. Hover, click, or tab and press enter to access. Touch size is 44 x 44.

Icons

Gradient Background

Explanation and simplification of pattern coming soon

Pagination

Tables

.table-standard is applied to a regular HTML table. It it only as big as it is needed to be.

Example:

Header	Header	Header
Lorem	Ipsum	Dolor Sit amet
Lorem	Ipsum	Dolor Sit amet
Lorem	Ipsum	Dolor Sit amet

.table-full is applied to a regular HTML table. It stretches to fill the full width available to itself.