https://thepaciellogroup.github.io/cupper/patterns/coding/ Recent content in Coding on Cupper Hugo -- gohugo.io en-us https://thepaciellogroup.github.io/cupper/patterns/coding/code-blocks/ Mon, 01 Jan 0001 00:00:00 +0000 https://thepaciellogroup.github.io/cupper/patterns/coding/code-blocks/ Markdown already supports code samples both inline (using single backticks like `some code here`) and in blocks. Cupper will syntax highlight HTML, CSS, and JavaScript if you provide the correct language in the formulation of the block. So, this… ```html <button aria-pressed="false"toggle me</button ``` … will result in this: <button aria-pressed="false">toggle me</button> Note that the syntax highlighting uses a greyscale theme. Cupper is careful not to use color as part of its own design, because these colors may clash with those of the design being illustrated and discussed. https://thepaciellogroup.github.io/cupper/patterns/coding/demo-embedding/ Mon, 01 Jan 0001 00:00:00 +0000 https://thepaciellogroup.github.io/cupper/patterns/coding/demo-embedding/ Sometimes just pictures of the pattern you’re documenting aren’t enough. Interactive patterns benefit from live demos, so that readers can test their functionality. CodePen Cupper offers a couple of ways to do this. The first is by embedding CodePen demos into the content. The codePen shortcode takes just one argument: the codePen’s ID. {{% codePen VpVNKW %}} This will embed the identified codePen into the content wherever you placed the shortcode, with the result view showing by default: https://thepaciellogroup.github.io/cupper/patterns/coding/writing-inline-demos/ Mon, 01 Jan 0001 00:00:00 +0000 https://thepaciellogroup.github.io/cupper/patterns/coding/writing-inline-demos/ There are some issues with Demo embedding, like the embeds not working offline. They also come with their own branding, which will clash with the pattern you’re trying to illustrate. Cupper offers another option: a special demo shortcode that allows you to write HTML, CSS, and JavaScript directly into the markdown file. The outputted demo is encapsulated using Shadow DOM, so you don’t have to worry about broken styles and global JS. https://thepaciellogroup.github.io/cupper/patterns/coding/color-palettes/ Mon, 01 Jan 0001 00:00:00 +0000 https://thepaciellogroup.github.io/cupper/patterns/coding/color-palettes/ There’s no reason why your Cupper-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 Cupper are greyscale: https://thepaciellogroup.github.io/cupper/patterns/coding/command-line/ Mon, 01 Jan 0001 00:00:00 +0000 https://thepaciellogroup.github.io/cupper/patterns/coding/command-line/ Your pattern documentation may need to include commands for installing packages or using CLIs. Cupper offers the cmd shortcode for making code blocks look like terminal commands. Here’s how you write it: {{<cmd}} npm run start {{</cmd}} And here’s how it looks: npm run start The cmd shortcode currently only supports single commands. If you want to show multiple, successive commands use separate cmd blocks. https://thepaciellogroup.github.io/cupper/patterns/coding/file-trees/ Mon, 01 Jan 0001 00:00:00 +0000 https://thepaciellogroup.github.io/cupper/patterns/coding/file-trees/ Representing folder/file structures is simple and accessible in Cupper. Which is just as well, because some components may need to conform to a certain folder structure. The file tree is described using a markdown nested list structure: {{% fileTree %}} * Level 1 folder * Level 2 file * Level 2 folder * Level 3 file * Level 3 folder * Level 4 file * Level 3 folder * Level 4 file * Level 4 file * Level 3 file * Level 2 folder * Level 3 file * Level 3 file * Level 3 file * Level 2 file * Level 1 file {{% /fileTree %}} This is drawn in the following fashion, but preserves the underlying nested list structure for assistive technologies such as screen readers: https://thepaciellogroup.github.io/cupper/patterns/coding/tested/ Mon, 01 Jan 0001 00:00:00 +0000 https://thepaciellogroup.github.io/cupper/patterns/coding/tested/ When you’re an inclusive designer, it’s pertinent to do some testing. Following specs is one thing, but you need to verify that your component works okay for users. Cupper provided a tested shortcode that lets you show which browsers and assistive technologies you’ve tried your design out in. Here’s an example. Note the commas and “+” signs. {{% tested using="Firefox + JAWS, Chrome, Safari iOS + Voiceover, Edge" %}} This outputs: