diff --git a/README.md b/README.md index 606224e..7c56ccb 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,5 @@ -# Inclusive Pattern Library +# Infusion -## TODO +**Infusion** is a pattern library builder for inclusive designers. -* Basic layout, with scrollable left column and sticky "back to top" in main content central-column -* Syntax highlighting for code (prism-based, probably) -* Support for areas to showcase working demos _without_ codePen or similar (recommended for just HTML+CSS, probably) -* Support for reporting user-tester notes / quotes? -* TOML: Support for expanded WCAG references -* TOML: Support for cross-referencing patterns -* TOML: Support for color combination illustrations? +[Documentation →](https://heydon.github.io/infusion) diff --git a/content/patterns/code/color-palettes.md b/content/patterns/code/color-palettes.md new file mode 100644 index 0000000..327a68a --- /dev/null +++ b/content/patterns/code/color-palettes.md @@ -0,0 +1,17 @@ ++++ +title = "Color palettes" ++++ + +There's no reason why your **Infusion**-powered pattern library has to be all about functionality. You can include style guide-like information such as color palettes too. The `colors` shortcode makes it easy to exhibit colors and their values together. Just supply a comma-separated list of CSS color values. + +{{}} +{{% colors "#111111, #cccccc, #ffffff" %}} +{{}} + +The result is a one row strip showing each color supplied in order. The colors for **Infusion** are greyscale: + +{{% colors "#111111, #cccccc, #ffffff" %}} + +{{% note %}} +If you're wondering whether you need to put a space after the commas in the shortcode, don't worry: `"#254f7b, #579a6d, #666666"` and `"#254f7b,#579a6d,#666666"` are both accepted. Any CSS color value is acceptable, not just hex colors. +{{% /note %}} diff --git a/content/patterns/library-setup.md b/content/patterns/library-setup.md index 4eafcec..2be8f34 100644 --- a/content/patterns/library-setup.md +++ b/content/patterns/library-setup.md @@ -28,8 +28,8 @@ You'll also want to name your library and configure one or two other things in t {{}} languageCode = "en-us" -title = "Inclusive Pattern Docs" -baseURL = "/" +title = "Infusion" +baseURL = "https://heydon.github.io/infusion/" theme = "infusion" [params] @@ -37,9 +37,10 @@ theme = "infusion" codePenUser = "Heydon" {{}} -* **title** — This is the library's name, like "Megacorp 5000 Pattern Library". You don't have to include the term "pattern library" if you don't want to. +* **title** — This is the library's name, like "Megacorp 5000 Pattern Library". You don't have to include the term "pattern library" if you don't want to. For **Infusion's** version of **Infusion**, the `title` is, naturally, _Infusion_ :-) +* **baseURL** — This is the root of the live site. Typically you will publish the site to Github Pages, so this should be the base URL for your Github Pages site. More information is available in {{% pattern "Serving" %}}. * **theme** — This is the theme the library is using. Don't change this from "infusion". -* **description** — This is a short description of the library and comes under the logo. +* **description** — This is a short description of the library and comes under the logo. You can include HTML like `` and ``. * **codePenUser** — If you want to embed codePens in your pattern files, you need to supply a codePen username here. ## Including a logo diff --git a/themes/infusion/layouts/shortcodes/colors.html b/themes/infusion/layouts/shortcodes/colors.html new file mode 100644 index 0000000..b46486f --- /dev/null +++ b/themes/infusion/layouts/shortcodes/colors.html @@ -0,0 +1,11 @@ +{{ $colorString := replace (.Get 0) " " "" | upper }} +{{ $colors := split $colorString "," }} +
+
    + {{ range $colors }} +
  • + {{ . }} +
  • + {{ end }} +
+