Assemble Code

Assemble Code is a component of the Assemble CSS Framework. It will give you a solid base for displaying code in your project. It has some default styles that can easily be overridden so you can add your own look.

Requirements

Assemble Code requires Assemble Base.

Installation

npm install assemble-code --save-dev

Usage

Import the _assemble-code.css file from your css file.

@import '../node_modules/assemble-base/base';

/*
Override variables here before the Assemble Components are loaded.
*/

@import '../node_modules/assemble-code/assemble-code';

Use the code tag as you normally could.

<code>
    <a class="btn  btn--primary">Button</a>
</code>

Options

Options are set with variables. These variables are already set with their default values so they will just work out of the box. If you wish to change them just define the variable you want to change before you load the _assemble-code.css file. You may wish you see Assemble Base for more examples and directions for setting up a Assemble project.

Design Variables

$code-background-color

• Set background color for code blocks.
• Default: #F7F7F9;
• Type: Color

$code-background-color: #EEE;

$code-border

• Set if code blocks should have a border.
• Default: true
• Type: Boolean

$code-border: false;

$code-border-color

• Set border color of code blocks.
• Default: #C0C0C0;
• Type: Color
• Only used if $code-border is true.

$code-border-color: #999;

$code-border-size

• Set border size of code blocks.
• Default: 1px;
• Type: Number
• Only used if $code-border is true.

$code-border-size: 2px;

$code-border-type

• Set border style of code blocks.
• Default: solid;
• Type: String
• Only used if $code-border is true.

$code-border-type: dashed;

$code-color

• Set color of code blocks.
• Default: #AD0D36;
• Type: Color

$code-color: #FFF;

$code-padding

• Set padding of code blocks.
• Default: 0.5em;
• Type: String

$code-paddinge: 5px 7px;

$code-inline-padding

• Set padding for inline code blocks.
• Default: 0.2em 0.25em;
• Type: String

$code-inline-padding: 5px;

$code-scroll-max-height

• Set height for when a scroll bar should appear for code blocks.
• Default: 20em;
• Type: Number

$code-scroll-max-height: 200px;

Modifier Variables

$code-scrollable

• If this is true you will have a class of .code-scrollable available to you. Once applied scrollbars will show if a code block height is over $code-scroll-max-height.
• Default: false;
• Type: Boolean

$code-scrollable: true;

Will give you:

.code-scrollable{
    max-height: $code-scroll-max-height;
    overflow-y: scroll;
}

Usage

<div class="code-scrollable">
    <code>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <title>Title Here</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="shortcut icon" href="assets/images/favicon.ico" type="image/x-icon">
        <link rel="stylesheet" href="stylesheets/style.css">
        <script src="bower_components/assemble.css/javascript/tip.js"></script>
        <div class="g-single">
            <div class="gc-single-cell">
                Some Code Here
            </div>
        </div>
        <script src="bower_components/assemble.css/javascript/iconic.min.js"></script>
        <script src="bower_components/assemble.css/javascript/vanilla-modal.js"></script>
        <script>
            var modal = new VanillaModal({});
        </script>
    </code>
</div>