Huesos
Style
Guide

Repositoire

GitHub

Preview

Code

Ensures monospaced fonts are used for computer-related text markup.

When used as inline elements (<code>, <var>, etc) it keeps a consistent inline behavior, with proper vertical alignment.

A common use case is the need to set code samples a s a block-level element. Add a .code-block class (and, as a best practice, wrap the code on a <pre> element) to achieve this.

You can even define a different background for the block-level code using $code-block-background.

Example

<p>Either a sample of <code>computer code</code>, a <kbd>keyboard input</kbd>, a <var>variable</var> or a <samp>sample output from a computer program</samp></p>

<div>
    <code class="code-block">
        <pre>By default, it behaves as a inline element with a line-heigth set to avoid vertical rhythm breaking<br>Add a <code>.code-block</code> class to format a block-level element</pre>
    </code>
</div>

Assets

  • Filesystem Path: src/components/typography/code/_code.scss
  • Size: 1.1 KB 
  • code,
kbd,
samp,
var {
	font-family: $font-monospace;
	@include ritmo-font-size($base-font-size, 3); // Keep it lower than $base-line-multi!!
	display:inline;
	vertical-align: baseline;
	box-decoration-break: clone;
	white-space: nowrap; // Avoid line breaking!
	@if $code-background != false {
		background-color: $code-background;
		color: contrast-color($code-background);
		padding: ritmo(0.5) ritmo(1);
	}
	@if $code-border-radius != false {
		border-radius: $code-border-radius;
	}
}

.code-block {

	display:block;
	margin-bottom: $spacer;

	@include ritmo-font-size($base-font-size); // Keep it lower than $base-line-multi!!

	
	@if $code-background != false or $code-block-background != false {
		padding: $gutter;
	}
	@if $code-block-background {
		background-color: $code-block-background;
		color: contrast-color($code-block-background);
	}

	// Delete margin on pre element
	pre {
		margin:0;
	}
}

// Some people wrap <pre> inside <code>,
// some people do the opposite.
// Ensure that white-space is inherited if <pre> is the wrapper:

pre code {
    white-space: inherit;
}